frontend: add program

frontend/src/components/Greeting.tsx

@@ -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>
         </>
     )

frontend/src/components/Hosting.tsx

@@ -1,29 +1,25 @@
-import { useState } from "react";
 import useFetchHosting from "../utils/fetchHosting";
 import { useNotification } from "../NotificationContext";
+import { useCookies } from "react-cookie";
 
 
 interface ReserveButtonProps {
-  update: (name: string, id: number) => void,
-  reservedBy: string,
-  id: number,
+    update: (name: string, id: number) => void,
+    reservedBy: string,
+    id: number,
 }
 
 const ReserveButton: React.FC<ReserveButtonProps> = (props) => {
     const { reservedBy, update, id } = props;
-    const [name, setName] = useState(reservedBy || ''); // Default to empty if not reserved
+    const [cookie] = useCookies<string>(['userName'])
+    const userName = cookie.userName;
     const isReserved = reservedBy !== '';
     const notify = useNotification();
 
     const handleReserve = async () => {
-        if (!name.trim()) {
-            notify('Поле имени не может быть пустым', 'error');
-            return;
-        }
-
         try {
-            await update(name, id); // Await the update call
-            notify(`Успешно забронировано для ${name}`, 'success'); // Move success notification here
+            await update(userName, id);
+            notify(`Успешно забронировано для ${userName}`, 'success');
         } catch (error) {
             notify(`Не удалось забронировать: ${error instanceof Error ? error.message : 'Unknown error'}`, 'error');
         }
@@ -31,15 +27,8 @@ const ReserveButton: React.FC<ReserveButtonProps> = (props) => {
 
     return (
         <>
-            <input
-                type="text"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                placeholder="Введите ваше имя"
-                disabled={isReserved} // Disable input if already reserved
-            />
             <button onClick={handleReserve} disabled={isReserved}>
-                {isReserved ? 'Занято' : 'Занять'}
+                {isReserved ? `Занято гостем ${reservedBy}` : 'Занять'}
             </button>
         </>
     );
@@ -52,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>}
@@ -71,7 +56,7 @@ function Hosting() {
                         <thead>
                             <tr>
                                 <th>Размещение</th>
-                                <th>Вместительность</th>
+                                <th>Спальных мест</th>
                                 <th>Бронирование</th>
                             </tr>
                         </thead>
@@ -80,13 +65,14 @@ function Hosting() {
                                 <tr key={id}>
                                     <td>{item.name}</td>
                                     <td>{item.capacity}</td>
-                                    <td>{<ReserveButton update={update} reservedBy={item.reservedBy} id={id}/>}</td>
+                                    <td>{<ReserveButton update={update} reservedBy={item.reservedBy} id={id} />}</td>
                                 </tr>
                             ))}
                         </tbody>
                     </table>
                 </div>
             )}
+            <br />
         </>
     );
 }

frontend/src/components/NameSelector.tsx

@@ -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;

frontend/src/components/Program.tsx

@@ -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;