Compare commits
2 Commits
13ae6c6942
...
98175ede85
| Author | SHA1 | Date | |
|---|---|---|---|
|
98175ede85 | ||
|
|
8771e859fd |
100
frontend/package-lock.json
generated
100
frontend/package-lock.json
generated
@ -8,8 +8,10 @@
|
||||
"name": "frontend",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1"
|
||||
"js-cookie": "^3.0.5",
|
||||
"react": "^19.2.0",
|
||||
"react-cookie": "^8.0.1",
|
||||
"react-dom": "^19.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.33.0",
|
||||
@ -1413,6 +1415,18 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/hoist-non-react-statics": {
|
||||
"version": "3.3.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.7.tgz",
|
||||
"integrity": "sha512-PQTyIulDkIDro8P+IHbKCsw7U2xxBYflVzW/FgWdCAePD9xGSidgA76/GeJ6lBKoblyhf9pBY763gbrN+1dI8g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"hoist-non-react-statics": "^3.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/json-schema": {
|
||||
"version": "7.0.15",
|
||||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
|
||||
@ -1424,7 +1438,6 @@
|
||||
"version": "19.1.12",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz",
|
||||
"integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"csstype": "^3.0.2"
|
||||
@ -1941,6 +1954,15 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/cookie": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
|
||||
"integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.6",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
||||
@ -1960,7 +1982,6 @@
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/debug": {
|
||||
@ -2431,6 +2452,15 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ignore": {
|
||||
"version": "5.3.2",
|
||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
|
||||
@ -2508,6 +2538,15 @@
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/js-cookie": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
|
||||
"integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
@ -2883,26 +2922,46 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react": {
|
||||
"version": "19.1.1",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
|
||||
"integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
|
||||
"version": "19.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
|
||||
"integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "19.1.1",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
|
||||
"integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
|
||||
"node_modules/react-cookie": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-8.0.1.tgz",
|
||||
"integrity": "sha512-QNdAd0MLuAiDiLcDU/2s/eyKmmfMHtjPUKJ2dZ/5CcQ9QKUium4B3o61/haq6PQl/YWFqC5PO8GvxeHKhy3GFA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"scheduler": "^0.26.0"
|
||||
"@types/hoist-non-react-statics": "^3.3.6",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
"universal-cookie": "^8.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^19.1.1"
|
||||
"react": ">= 16.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "19.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
|
||||
"integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"scheduler": "^0.27.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^19.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.17.0",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
|
||||
@ -3000,9 +3059,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/scheduler": {
|
||||
"version": "0.26.0",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
|
||||
"integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
|
||||
"version": "0.27.0",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
|
||||
"integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/semver": {
|
||||
@ -3199,6 +3258,15 @@
|
||||
"typescript": ">=4.8.4 <6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/universal-cookie": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-8.0.1.tgz",
|
||||
"integrity": "sha512-B6ks9FLLnP1UbPPcveOidfvB9pHjP+wekP2uRYB9YDfKVpvcjKgy1W5Zj+cEXJ9KTPnqOKGfVDQBmn8/YCQfRg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"cookie": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/update-browserslist-db": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
|
||||
|
||||
@ -10,8 +10,10 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1"
|
||||
"js-cookie": "^3.0.5",
|
||||
"react": "^19.2.0",
|
||||
"react-cookie": "^8.0.1",
|
||||
"react-dom": "^19.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.33.0",
|
||||
|
||||
@ -9,3 +9,55 @@
|
||||
.mainText {
|
||||
color: #5f5e5e;
|
||||
}
|
||||
|
||||
/* General table styles */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 20px 0;
|
||||
font-size: 1em;
|
||||
font-family: 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
/* Table header styles */
|
||||
th {
|
||||
background-color: #4CAF50; /* Green */
|
||||
color: white;
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Table cell styles */
|
||||
td {
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
/* Zebra striping for table rows */
|
||||
tr:nth-child(even) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
/* Responsive table styles */
|
||||
@media (max-width: 600px) {
|
||||
table {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 8px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
background-color: #3C8A3C;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hover effect for rows */
|
||||
tr:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
@ -1,13 +1,17 @@
|
||||
import './App.css'
|
||||
import Greeting from './components/Greeting'
|
||||
import Hosting from './components/Hosting'
|
||||
import NameSelector from './components/NameSelector'
|
||||
import Program from './components/Program'
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<>
|
||||
<NameSelector/>
|
||||
<Greeting/>
|
||||
<br/>
|
||||
<Hosting/>
|
||||
<Program/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
81
frontend/src/NotificationContext.tsx
Normal file
81
frontend/src/NotificationContext.tsx
Normal file
@ -0,0 +1,81 @@
|
||||
// src/NotificationContext.tsx
|
||||
|
||||
import React, { createContext, useContext, useState } from 'react';
|
||||
|
||||
type NotificationType = 'success' | 'error';
|
||||
|
||||
interface NotificationContextType {
|
||||
notify: (message: string, type: NotificationType) => void;
|
||||
}
|
||||
|
||||
const NotificationContext = createContext<NotificationContextType | undefined>(undefined);
|
||||
|
||||
export const NotificationProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
const [notification, setNotification] = useState<string | null>(null);
|
||||
const [notificationType, setNotificationType] = useState<NotificationType | null>(null);
|
||||
|
||||
const notify = (message: string, type: NotificationType) => {
|
||||
setNotification(message);
|
||||
setNotificationType(type);
|
||||
|
||||
// Automatically dismiss notification after 3 seconds
|
||||
setTimeout(() => {
|
||||
setNotification(null);
|
||||
setNotificationType(null);
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
return (
|
||||
<NotificationContext.Provider value={{ notify }}>
|
||||
{children}
|
||||
{notification && (
|
||||
<Notification message={notification} onClose={() => setNotification(null)} type={notificationType!} />
|
||||
)}
|
||||
</NotificationContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useNotification = () => {
|
||||
const context = useContext(NotificationContext);
|
||||
if (!context) {
|
||||
throw new Error('useNotification must be used within a NotificationProvider');
|
||||
}
|
||||
return context.notify;
|
||||
};
|
||||
|
||||
|
||||
interface NotificationProps {
|
||||
message: string;
|
||||
onClose: () => void;
|
||||
type: 'success' | 'error'; // Define notification types
|
||||
}
|
||||
|
||||
// Notification Component
|
||||
const Notification: React.FC<NotificationProps> = ({ message, onClose, type }) => {
|
||||
return (
|
||||
<div style={{ ...styles.notification, backgroundColor: type === 'success' ? '#4caf50' : '#f44336' }}>
|
||||
<p>{message}</p>
|
||||
<button onClick={onClose} style={styles.closeButton}>X</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Notification styles remain the same...
|
||||
const styles: { [key: string]: React.CSSProperties } = {
|
||||
notification: {
|
||||
position: 'fixed',
|
||||
top: '20px',
|
||||
right: '20px',
|
||||
color: 'white',
|
||||
padding: '15px',
|
||||
borderRadius: '5px',
|
||||
zIndex: 1000,
|
||||
},
|
||||
closeButton: {
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
color: 'white',
|
||||
cursor: 'pointer',
|
||||
marginLeft: '10px',
|
||||
},
|
||||
};
|
||||
@ -1,13 +1,20 @@
|
||||
import { useCookies } from "react-cookie";
|
||||
|
||||
function Greeting() {
|
||||
const [cookie] = useCookies<string>(['userName'])
|
||||
const userName = cookie.userName;
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1>Приглашение на Новый год 2025-2026 🎄</h1>
|
||||
<p className="mainText">
|
||||
Дорогие, Пятки! 🦶
|
||||
<h3>
|
||||
{userName ? <>{userName}</> : <>Дорогая пятка!</>}
|
||||
! 🦶
|
||||
</h3>
|
||||
Приглашаем тебя отпраздновать предстоящий Новый Год <b>2025-2026</b> с нами в сосновой избе, в которой, ко всему прочему, будет праздноваться годовщина нашей жизни в ней!
|
||||
|
||||
Приглашаем вас отпраздновать предстоящий Новый Год <b>2025-2026</b> с нами в сосновой избе, в которой, ко всему прочему, будет праздноваться годовщина нашей жизни в ней!
|
||||
|
||||
Мы ожидаем вас с <b>30.12.2025</b>. Праздник обычно длится до <b>01.01.2025</b>, но если вам будет безумно плохо, то иожно остаться и до второго числа.
|
||||
Наши двери открыты с <b>30.12.2025</b>. Праздник обычно длится до <b>01.01.2025</b>, но если тебе или твоим спутникам будет безумно плохо, то можно остаться и до второго числа.
|
||||
</p>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { useState } from "react";
|
||||
import useFetchHosting from "../utils/fetchHosting";
|
||||
import { useNotification } from "../NotificationContext";
|
||||
import { useCookies } from "react-cookie";
|
||||
|
||||
|
||||
interface ReserveButtonProps {
|
||||
@ -10,26 +11,24 @@ interface ReserveButtonProps {
|
||||
|
||||
const ReserveButton: React.FC<ReserveButtonProps> = (props) => {
|
||||
const { reservedBy, update, id } = props;
|
||||
const [name, setName] = useState(reservedBy);
|
||||
const [cookie] = useCookies<string>(['userName'])
|
||||
const userName = cookie.userName;
|
||||
const isReserved = reservedBy !== '';
|
||||
const notify = useNotification();
|
||||
|
||||
const handleReserve = async () => {
|
||||
if (name.trim()) {
|
||||
await update(name, id); // Call the update function from props with the name and id
|
||||
try {
|
||||
await update(userName, id);
|
||||
notify(`Успешно забронировано для ${userName}`, 'success');
|
||||
} catch (error) {
|
||||
notify(`Не удалось забронировать: ${error instanceof Error ? error.message : 'Unknown error'}`, 'error');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Введите ваше имя"
|
||||
disabled={isReserved} // Disable if already reserved
|
||||
/>
|
||||
<button onClick={handleReserve} disabled={isReserved}>
|
||||
{isReserved ? 'Занято' : 'Занять'}
|
||||
{isReserved ? `Занято гостем ${reservedBy}` : 'Занять'}
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
@ -42,16 +41,12 @@ function Hosting() {
|
||||
<>
|
||||
<h2>Поселение</h2>
|
||||
<p>
|
||||
Мы готовы вас приютить в наших 150 квадратах. Хоть дом и кажется большим,
|
||||
но больше 5 гостей уместить будет сложно (но возможно!). При этом, если
|
||||
Мы готовы приютить в наших 150 квадратах всех. У нас есть 6 спальных мест. При этом, если
|
||||
вы не хотите тесниться, то рядом с нами есть
|
||||
<a href="https://www.uoti.net/" target="_blank" rel="noopener noreferrer"> отель</a>,
|
||||
а так же
|
||||
<a href="https://www.uoti.net/" target="_blank" rel="noopener noreferrer"> отель</a>, а так же
|
||||
<a href="https://campingsysma.fi/" target="_blank" rel="noopener noreferrer"> кэмпинг-виллы </a>
|
||||
(Лучше бронировать заранее если есть надобность. Оба в 1-1,5км от нашего дома).
|
||||
<br />
|
||||
На данный момент мы можем вместить 5 гостей без лишних усилий.
|
||||
Это подразумевает:
|
||||
Спальные места:
|
||||
</p>
|
||||
{loading && <div>Loading...</div>}
|
||||
{error && <div>Error</div>}
|
||||
@ -61,7 +56,7 @@ function Hosting() {
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Размещение</th>
|
||||
<th>Вместительность</th>
|
||||
<th>Спальных мест</th>
|
||||
<th>Бронирование</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -77,6 +72,7 @@ function Hosting() {
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
64
frontend/src/components/NameSelector.tsx
Normal file
64
frontend/src/components/NameSelector.tsx
Normal file
@ -0,0 +1,64 @@
|
||||
import { useState } from 'react';
|
||||
import { useCookies } from 'react-cookie';
|
||||
import { GUESTS } from '../constants/constants';
|
||||
|
||||
const NameSelector = () => {
|
||||
const [cookie, setCookie] = useCookies(['userName']);
|
||||
const [selectedName, setSelectedName] = useState<string | undefined>(cookie.userName);
|
||||
|
||||
const handleSelect = (name: string) => {
|
||||
if (name)
|
||||
setSelectedName(name);
|
||||
setCookie('userName', name, { path: '/' });
|
||||
};
|
||||
|
||||
if (selectedName !== undefined) {
|
||||
console.log('Selected', selectedName)
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<h2 style={styles.title}>Выбери себя</h2>
|
||||
<div style={styles.namesContainer}>
|
||||
{GUESTS.map((name) => (
|
||||
<button key={name} style={styles.button} onClick={() => handleSelect(name)}>
|
||||
{name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
position: 'fixed' as 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
backgroundColor: 'rgba(0, 0, 0, 1)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column' as 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
color: '#fff',
|
||||
zIndex: 1000,
|
||||
},
|
||||
title: {
|
||||
marginBottom: '20px',
|
||||
},
|
||||
namesContainer: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column' as 'column',
|
||||
},
|
||||
button: {
|
||||
margin: '10px',
|
||||
padding: '10px 20px',
|
||||
fontSize: '16px',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
};
|
||||
|
||||
export default NameSelector;
|
||||
89
frontend/src/components/Program.tsx
Normal file
89
frontend/src/components/Program.tsx
Normal file
@ -0,0 +1,89 @@
|
||||
const Program = () => {
|
||||
return (
|
||||
<div>
|
||||
<h2>Программа</h2>
|
||||
|
||||
<h3>30 декабря</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Время</th>
|
||||
<th>Действие</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>15-18</td>
|
||||
<td>Гости приезжают и селятся</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18-19</td>
|
||||
<td>Ужин</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>19-N/A</td>
|
||||
<td>Отдых и заготовки к кануну Нового Года</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>31 декабря</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Время</th>
|
||||
<th>Действие</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>07-10</td>
|
||||
<td>Утро, завтрак</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11-14</td>
|
||||
<td>Сюсьма, прогулки, дополнительные закупки, подготовка к вечеру, обед</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>14-19</td>
|
||||
<td>Готовим ужин, чиллим</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>19-23:59</td>
|
||||
<td>Ужин, отдых, разговоры, игры</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>1 января</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Время</th>
|
||||
<th>Действие</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>00-N/A</td>
|
||||
<td>🎄 ☃️ 🍾 🥂 🎇 🎆</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>07-12</td>
|
||||
<td>Утро, завтрак</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>12-15</td>
|
||||
<td>Сауна/Отдых</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>15-N/A</td>
|
||||
<td>Кто-то остается, кто-то собирается домой</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Program;
|
||||
13
frontend/src/constants/constants.ts
Normal file
13
frontend/src/constants/constants.ts
Normal file
@ -0,0 +1,13 @@
|
||||
|
||||
export const API_URL = 'https://example.backend.com/hosting';
|
||||
export const GUESTS = [
|
||||
"Медведь",
|
||||
"Ксения",
|
||||
"Дед",
|
||||
"Фил",
|
||||
"Классик",
|
||||
"Янка",
|
||||
"Швед",
|
||||
"Тюлень",
|
||||
"Тюлениха",
|
||||
]
|
||||
@ -2,9 +2,15 @@ import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
import { NotificationProvider } from './NotificationContext.tsx'
|
||||
import { CookiesProvider } from 'react-cookie'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<CookiesProvider>
|
||||
<NotificationProvider>
|
||||
<App />
|
||||
</NotificationProvider>
|
||||
</CookiesProvider>
|
||||
</StrictMode>,
|
||||
)
|
||||
|
||||
@ -13,6 +13,11 @@ const mockData: Hosting = {
|
||||
capacity: 2
|
||||
},
|
||||
3: {
|
||||
reservedBy: "",
|
||||
name: "Матрац 90см",
|
||||
capacity: 1
|
||||
},
|
||||
4: {
|
||||
reservedBy: "",
|
||||
name: "Диван",
|
||||
capacity: 1
|
||||
@ -28,14 +33,12 @@ const useFetchHosting = () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await fetch('https://example.backend.com/hosting');
|
||||
if (!response.ok) {
|
||||
const response = await fetch('/hosting');
|
||||
if (response.status != 200) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
const result = await response.json();
|
||||
setData(result);
|
||||
} catch (error) {
|
||||
setError(error instanceof Error ? error.message : 'Unknown error');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@ -45,7 +48,7 @@ const useFetchHosting = () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await fetch(`https://example.backend.com/hosting/${id}`, {
|
||||
const response = await fetch(`/hosting/${id}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
@ -53,19 +56,19 @@ const useFetchHosting = () => {
|
||||
body: JSON.stringify({ reservedBy: name })
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
if (!response.ok) { // Check for non-200 responses
|
||||
const errorText = await response.text(); // Capture the response text for further insights
|
||||
throw new Error(`Error ${response.status}: ${errorText}`);
|
||||
}
|
||||
|
||||
// Optional: Fetch the updated data after reservation
|
||||
await fetchData();
|
||||
} catch (error) {
|
||||
setError(error instanceof Error ? error.message : 'Unknown error');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
//fetchData(); // Initial fetch on mount
|
||||
}, []);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user