Možnost zadání preferovaného času odchodu

client/src/Api.ts

@@ -87,3 +87,7 @@ export const updateNote = async (note?: string) => {
 export const login = async (login: string) => {
     return await api.post<any, any>('/api/login', JSON.stringify({ login }));
 }
+
+export const changeDepartureTime = async (login: string, time: string) => {
+    return await api.post<any, any>('/api/changeDepartureTime', JSON.stringify({ login, time }));
+}

client/src/App.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { EVENT_DISCONNECT, EVENT_MESSAGE, SocketContext } from './context/socket';
-import { addChoice, addPizza, createPizzaDay, deletePizzaDay, finishDelivery, finishOrder, getData, getFood, getPizzy, getQrUrl, lockPizzaDay, removeChoice, removeChoices, removePizza, unlockPizzaDay, updateNote } from './Api';
+import { addChoice, addPizza, changeDepartureTime, createPizzaDay, deletePizzaDay, finishDelivery, finishOrder, getData, getFood, getPizzy, getQrUrl, lockPizzaDay, removeChoice, removeChoices, removePizza, unlockPizzaDay, updateNote } from './Api';
 import { useAuth } from './context/auth';
 import Login from './Login';
 import { Alert, Button, Col, Form, Row, Table } from 'react-bootstrap';
@@ -17,9 +17,25 @@ import { useBank } from './context/bank';
 import { ClientData, Restaurants, Food, Pizza, Order, Locations, PizzaOrder, PizzaDayState, FoodChoices } from './types';
 import Footer from './components/Footer';
 
-
 const EVENT_CONNECT = "connect"
 
+// TODO tohle má být kvůli bezpečnosti na serveru
+const DEPARTURE_TIMES = [
+  "10:00",
+  "10:15",
+  "10:30",
+  "10:45",
+  "11:00",
+  "11:15",
+  "11:30",
+  "11:45",
+  "12:00",
+  "12:15",
+  "12:30",
+  "12:45",
+  "13:00",
+]
+
 function App() {
   const auth = useAuth();
   const bank = useBank();
@@ -222,6 +238,14 @@ function App() {
   // }
   // }
 
+  const handleChangeDepartureTime = async (event: React.ChangeEvent<HTMLSelectElement>) => {
+    if (foodChoiceList?.length && choiceRef.current?.value) {
+      if (auth?.login) {
+        await changeDepartureTime(auth.login, event.target.value);
+      }
+    }
+  }
+
   const renderFoodTable = (name: string, food: Food[]) => {
     return <Col md={12} lg={4}>
       <h3>{name}</h3>
@@ -257,13 +281,8 @@ function App() {
           <Alert variant={'primary'}>
             Poslední změny:
             <ul>
-              <li>(Trochu) přehlednější zobrazení tabulky
-                <ul>
-                  <li>Je to pořád ošklivý :(</li>
-                </ul>
-              </li>
-              <li>(Opět) možnost vybrat jen jednu variantu</li>
-              <li>"Blue checkmark" pro uživatele přihlášené přes AD</li>
+              <li>Podpora <a href="https://redis.io">Redis</a></li>
+              <li>Možnost výběru preferovaného času odchodu</li>
             </ul>
           </Alert>
           <h1 className='title'>Dnes je {data.date}</h1>
@@ -293,6 +312,13 @@ function App() {
                   {foodChoiceList.map((food, index) => <option key={index} value={index}>{food.name}</option>)}
                 </Form.Select>
               </>}
+              {foodChoiceList && <>
+                <p style={{ marginTop: "10px" }}>V kolik hodin preferuješ odchod?</p>
+                <Form.Select ref={foodChoiceRef} onChange={handleChangeDepartureTime}>
+                  <option></option>
+                  {DEPARTURE_TIMES.map(time => <option key={time} value={time}>{time}</option>)}
+                </Form.Select>
+              </>}
               {Object.keys(data.choices).length > 0 ?
                 <Table bordered className='mt-5'>
                   <tbody>
@@ -316,6 +342,7 @@ function App() {
                                         <FontAwesomeIcon title='Uživatel ověřený doménovým přihlášením' icon={faCircleCheck} style={{ cursor: "help" }} />
                                       </span>}
                                       {login}
+                                      {userPayload.departureTime && <small> ({userPayload.departureTime})</small>}
                                       {login === auth.login && <FontAwesomeIcon onClick={() => {
                                         doRemoveChoices(locationKey);
                                       }} title={`Odstranit volbu ${locationName}, včetně případných zvolených jídel`} className='trash-icon' icon={faTrashCan} />}