Možnost výběru konkrétních jídel

client/src/Api.ts

@@ -60,8 +60,16 @@ export const finishDelivery = async (bankAccount?: string, bankAccountHolder?: s
     return await api.post<any, any>('/api/finishDelivery', JSON.stringify({ bankAccount, bankAccountHolder }));
 }
 
-export const updateChoice = async (choice: number | null) => {
+export const addChoice = async (locationIndex: number, foodIndex?: number) => {
-    return await api.post<any, any>('/api/updateChoice', JSON.stringify({ choice }));
+    return await api.post<any, any>('/api/addChoice', JSON.stringify({ locationIndex, foodIndex }));
+}
+
+export const removeChoices = async (locationIndex: number) => {
+    return await api.post<any, any>('/api/removeChoices', JSON.stringify({ locationIndex }));
+}
+
+export const removeChoice = async (locationIndex: number, foodIndex: number) => {
+    return await api.post<any, any>('/api/removeChoice', JSON.stringify({ locationIndex, foodIndex }));
 }
 
 export const addPizza = async (pizzaIndex: number, pizzaSizeIndex: number) => {

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 { addPizza, createPizzaDay, deletePizzaDay, finishDelivery, finishOrder, getData, getFood, getPizzy, getQrUrl, lockPizzaDay, removePizza, unlockPizzaDay, updateChoice, updateNote } from './Api';
+import { addChoice, addPizza, 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';
@@ -27,8 +27,10 @@ function App() {
   const [food, setFood] = useState<{ [key in Restaurants]: Food[] }>();
   const [pizzy, setPizzy] = useState<Pizza[]>();
   const [myOrder, setMyOrder] = useState<Order>();
+  const [foodChoiceList, setFoodChoiceList] = useState<Food[]>();
   const socket = useContext(SocketContext);
   const choiceRef = useRef<HTMLSelectElement>(null);
+  const foodChoiceRef = useRef<HTMLSelectElement>(null);
   const poznamkaRef = useRef<HTMLInputElement>(null);
 
   // Načtení dat po přihlášení
@@ -74,14 +76,15 @@ function App() {
       return
     }
     // TODO tohle občas náhodně nezafunguje, nutno přepsat, viz https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780
-    if (data?.choices && choiceRef.current) {
+    // TODO nutno opravit
-      for (let entry of Object.entries(data.choices)) {
+    // if (data?.choices && choiceRef.current) {
-        if (entry[1].includes(auth.login)) {
+    //   for (let entry of Object.entries(data.choices)) {
-          const value = entry[0] as any as number; // TODO tohle je absurdní
+    //     if (entry[1].includes(auth.login)) {
-          choiceRef.current.value = Object.values(Locations)[value];
+    //       const value = entry[0] as any as number; // TODO tohle je absurdní
-        }
+    //       choiceRef.current.value = Object.values(Locations)[value];
-      }
+    //     }
-    }
+    //   }
+    // }
   }, [auth, auth?.login, data?.choices])
 
   // Reference na mojí objednávku
@@ -92,19 +95,64 @@ function App() {
     }
   }, [auth?.login, data?.pizzaDay?.orders])
 
-  const changeChoice = async (event: React.ChangeEvent<HTMLSelectElement>) => {
+  useEffect(() => {
+    if (choiceRef?.current?.value && choiceRef.current.value !== "") {
+      // TODO: wtf, cos pil, když jsi tohle psal?
+      const locationIndex = Object.values(Locations).indexOf(choiceRef?.current?.value as unknown as Locations);
+      const locationsKey = Object.keys(Locations)[locationIndex];
+      const restaurantKey = Object.keys(Restaurants).indexOf(locationsKey);
+      if (restaurantKey > -1 && food) {
+        const restaurant = Object.values(Restaurants)[restaurantKey];
+        setFoodChoiceList(food[restaurant]);
+      } else {
+        setFoodChoiceList(undefined);
+      }
+    } else {
+      setFoodChoiceList(undefined);
+    }
+  }, [choiceRef.current?.value])
+
+  const doAddChoice = async (event: React.ChangeEvent<HTMLSelectElement>) => {
     const index = Object.values(Locations).indexOf(event.target.value as unknown as Locations);
     if (auth?.login) {
-      await updateChoice(index > -1 ? index : null);
+      await addChoice(index);
+      if (foodChoiceRef.current?.value) {
+        foodChoiceRef.current.value = "";
+      }
     }
   }
 
-  const removeChoice = async (key: string) => {
+  const doAddFoodChoice = async (event: React.ChangeEvent<HTMLSelectElement>) => {
+    if (event.target.value && foodChoiceList?.length && choiceRef.current?.value) {
+      if (auth?.login) {
+        const locationIndex = Object.values(Locations).indexOf(choiceRef.current.value as unknown as Locations);
+        await addChoice(locationIndex, Number(event.target.value));
+      }
+    }
+  }
+
+  const doRemoveChoices = async (locationKey: string) => {
     if (auth?.login) {
-      await updateChoice(null);
+      await removeChoices(Number(locationKey));
+      // Vyresetujeme výběr, aby bylo jasné pro který případně vybíráme jídlo
       if (choiceRef?.current?.value) {
         choiceRef.current.value = "";
       }
+      if (foodChoiceRef?.current?.value) {
+        foodChoiceRef.current.value = "";
+      }
+    }
+  }
+
+  const doRemoveFoodChoice = async (locationKey: string, foodIndex: number) => {
+    if (auth?.login) {
+      await removeChoice(Number(locationKey), foodIndex);
+      if (choiceRef?.current?.value) {
+        choiceRef.current.value = "";
+      }
+      if (foodChoiceRef?.current?.value) {
+        foodChoiceRef.current.value = "";
+      }
     }
   }
 
@@ -208,8 +256,9 @@ function App() {
           <Alert variant={'primary'}>
             Poslední změny:
             <ul>
-              <li>Oprava parsování při neočekávané velikosti písmen v ceně</li>
+              <li>Bliká mi žárovka v lednici :(</li>
-              <li>Přidání nedělitelných mezer k cenám</li>
+              <li>Možnost výběru konkrétních jídel (u podporovaných podniků)</li>
+              <li>Velmi chatrná, experimentální podpora přihlašování přes <a href="https://www.authelia.com">Authelia</a></li>
             </ul>
           </Alert>
           <h1 className='title'>Dnes je {data.date}</h1>
@@ -221,7 +270,7 @@ function App() {
           <div className='content-wrapper'>
             <div className='content'>
               <p>Jak to dnes vidíš s obědem?</p>
-              <Form.Select ref={choiceRef} onChange={changeChoice}>
+              <Form.Select ref={choiceRef} onChange={doAddChoice}>
                 <option></option>
                 <option value={Locations.SLADOVNICKA}>Sladovnická</option>
                 <option value={Locations.UMOTLIKU}>U Motlíků</option>
@@ -231,25 +280,51 @@ function App() {
                 <option value={Locations.OBJEDNAVAM}>Budu objednávat (mimo pizzu)</option>
                 <option value={Locations.NEOBEDVAM}>Mám vlastní/neobědvám</option>
               </Form.Select>
-              <p style={{ fontSize: "12px", marginTop: "5px" }}>
+              {foodChoiceList && <>
-                Aktuálně je možné vybrat pouze jednu variantu.
+                <p style={{ marginTop: "10px" }}>Na co dobrého? <small>(nepovinné)</small></p>
-              </p>
+                <Form.Select ref={foodChoiceRef} onChange={doAddFoodChoice}>
+                  <option></option>
+                  {foodChoiceList.map((food, index) => <option key={index} value={index}>{food.name}</option>)}
+                </Form.Select>
+              </>}
               {Object.keys(data.choices).length > 0 ?
                 <Table striped bordered hover className='results-table mt-5'>
                   <tbody>
-                    {Object.keys(data.choices).map((key: string, index: number) =>
+                    {Object.keys(data.choices).map((locationKey: string) => {
-                      <tr key={index}>
+                      const locationName = Object.values(Locations)[Number(locationKey)];
-                        <td>{Object.values(Locations)[Number(key)]}</td>
+                      const locationLoginList = Object.entries(data.choices[Number(locationKey)]);
-                        <td>
+                      return (
-                          <ul>
+                        <tr key={locationKey}>
-                            {data.choices[Number(key)].map((p: string, index: number) =>
+                          <td>{locationName}</td>
-                              <li key={index}>{p} {p === auth.login && <FontAwesomeIcon onClick={() => {
+                          <td>
-                                removeChoice(key);
+                            <ul>
-                              }} title='Odstranit' className='trash-icon' icon={faTrashCan} />}</li>
+                              {locationLoginList.map((entry: [string, number[]], index) => {
-                            )}
+                                const login = entry[0];
-                          </ul>
+                                const userChoices = entry[1];
-                        </td>
+                                return <li key={index}>{login} {login === auth.login && <FontAwesomeIcon onClick={() => {
-                      </tr>
+                                  doRemoveChoices(locationKey);
+                                }} title='Odstranit, včetně případných podřízených jídel' className='trash-icon' icon={faTrashCan} />}
+                                  {userChoices?.length && food ? <ul>
+                                    {userChoices.map(foodIndex => {
+                                      const locationsKey = Object.keys(Locations)[Number(locationKey)]
+                                      const restaurantKey = Object.keys(Restaurants).indexOf(locationsKey);
+                                      const restaurant = Object.values(Restaurants)[restaurantKey];
+                                      const foodName = food[restaurant][foodIndex].name;
+                                      return <li key={foodIndex}>
+                                        {foodName}
+                                        {login === auth.login && <FontAwesomeIcon onClick={() => {
+                                          doRemoveFoodChoice(locationKey, foodIndex);
+                                        }} title={`Odstranit ${foodName}`} className='trash-icon' icon={faTrashCan} />}
+                                      </li>
+                                    })}
+                                  </ul> : null}
+                                </li>
+                              }
+                              )}
+                            </ul>
+                          </td>
+                        </tr>)
+                    }
                     )}
                   </tbody>
                 </Table>

server/src/index.ts

@@ -3,13 +3,13 @@ import { Server } from "socket.io";
 import bodyParser from "body-parser";
 import { fetchPizzy } from "./chefie";
 import cors from 'cors';
-import { addPizzaOrder, createPizzaDay, deletePizzaDay, finishPizzaDelivery, finishPizzaOrder, getData, lockPizzaDay, removePizzaOrder, unlockPizzaDay, updateChoice, updateNote } from "./service";
+import { addChoice, addPizzaOrder, createPizzaDay, deletePizzaDay, finishPizzaDelivery, finishPizzaOrder, getData, lockPizzaDay, removeChoice, removeChoices, removePizzaOrder, unlockPizzaDay, updateNote } from "./service";
 import dotenv from 'dotenv';
 import path from 'path';
 import { getMenuSladovnicka, getMenuTechTower, getMenuUMotliku } from "./restaurants";
 import { getQr } from "./qr";
 import { generateToken, getLogin, verify } from "./auth";
-import { Restaurants } from "../../types";
+import { Locations, Restaurants } from "../../types";
 
 const ENVIRONMENT = process.env.NODE_ENV || 'production';
 dotenv.config({ path: path.resolve(__dirname, `./.env.${ENVIRONMENT}`) });
@@ -35,6 +35,15 @@ app.use(cors({
     origin: '*'
 }));
 
+// app.use((req, res, next) => {
+//     console.log("--- Request ---")
+//     console.log(req.url);
+//     console.log(req.baseUrl);
+//     console.log(req.originalUrl);
+//     console.log(req.path);
+//     next();
+// });
+
 app.use(express.static('public'))
 
 const parseToken = (req: any) => {
@@ -196,9 +205,26 @@ app.post("/api/finishDelivery", (req, res) => {
     res.status(200).json({});
 });
 
-app.post("/api/updateChoice", (req, res) => {
+app.post("/api/addChoice", (req, res) => {
     const login = getLogin(parseToken(req));
-    const data = updateChoice(login, req.body.choice);
+    if (req.body.locationIndex > -1) {
+        const data = addChoice(login, req.body.locationIndex, req.body.foodIndex);
+        io.emit("message", data);
+        res.status(200).json(data);
+    }
+    res.status(400); // TODO přidat popis chyby
+});
+
+app.post("/api/removeChoices", (req, res) => {
+    const login = getLogin(parseToken(req));
+    const data = removeChoices(login, req.body.locationIndex);
+    io.emit("message", data);
+    res.status(200).json(data);
+});
+
+app.post("/api/removeChoice", (req, res) => {
+    const login = getLogin(parseToken(req));
+    const data = removeChoice(login, req.body.locationIndex, req.body.foodIndex);
     io.emit("message", data);
     res.status(200).json(data);
 });

server/src/service.ts

@@ -239,34 +239,78 @@ export function initIfNeeded() {
     }
 }
 
-export function removeChoice(login: string, data: ClientData) {
+/**
-    for (let key of Object.keys(data.choices)) {
+ * Odstraní kompletně volbu uživatele (včetně případných podřízených jídel).
-        if (data.choices[key] && data.choices[key].includes(login)) {
+ * 
-            const index = data.choices[key].indexOf(login);
+ * @param login login uživatele
-            data.choices[key].splice(index, 1);
+ * @param location vybrané "umístění"
-            if (data.choices[key].length == 0) {
+ * @returns 
-                delete data.choices[key];
+ */
+export function removeChoices(login: string, location: Locations) {
+    const today = formatDate(getToday());
+    let data: ClientData = db.get(today);
+    if (location in data.choices) {
+        if (login in data.choices[location]) {
+            delete data.choices[location][login]
+            if (Object.keys(data.choices[location]).length === 0) {
+                delete data.choices[location]
+            }
+            db.set(today, data);
+        }
+    }
+    return data;
+}
+
+/**
+ * Odstraní konkrétní volbu jídla uživatele.
+ * Neodstraňuje volbu samotnou, k tomu slouží {@link removeChoices}.
+ * 
+ * @param login login uživatele
+ * @param location vybrané "umístění"
+ * @param foodIndex index jídla v jídelním lístku daného umístění, pokud existuje
+ * @returns 
+ */
+export function removeChoice(login: string, location: Locations, foodIndex: number) {
+    const today = formatDate(getToday());
+    let data: ClientData = db.get(today);
+    if (location in data.choices) {
+        if (login in data.choices[location]) {
+            const index = data.choices[location][login].indexOf(foodIndex);
+            if (index > -1) {
+                data.choices[location][login].splice(index, 1)
+                db.set(today, data);
             }
         }
     }
     return data;
 }
 
-export function updateChoice(login: string, choice: Locations | null) {
+/**
+ * Přidá volbu uživatele.
+ * 
+ * @param login login uživatele
+ * @param location vybrané "umístění"
+ * @param foodIndex volitelný index jídla v daném umístění
+ * @returns aktuální data
+ */
+export function addChoice(login: string, location: Locations, foodIndex?: number) {
     initIfNeeded();
     const today = formatDate(getToday());
     let data: ClientData = db.get(today);
-    data = removeChoice(login, data);
+    if (!(location in data.choices)) {
-    if (choice !== null) {
+        data.choices[location] = {};
-        if (!data.choices?.[choice]) {
+    }
-            data.choices[choice] = [];
+    if (!(login in data.choices[location])) {
-        }
+        data.choices[location][login] = [];
-        data.choices[choice].push(login);
+    }
+    if (foodIndex != null && !data.choices[location][login].includes(foodIndex)) {
+        data.choices[location][login].push(foodIndex);
     }
     db.set(today, data);
     return data;
 }
 
+// TODO přejmenovat, ať je jasné že to patří k pizza day
 export function updateNote(login: string, note?: string) {
     const today = formatDate(getToday());
     let clientData: ClientData = db.get(today);

types/Types.ts

@@ -6,7 +6,9 @@ export enum Restaurants {
 }
 
 export interface Choices {
-    [location: string]: string[],
+    [location: string]: {
+        [login: string]: number[]
+    },
 }
 
 /** Velikost konkrétní pizzy */
@@ -74,6 +76,7 @@ export interface Food {
     isSoup: boolean, // příznak, zda se jedná o polévku
 }
 
+// TODO tohle je dost špatné pojmenování, vzhledem k tomu co to obsahuje
 export enum Locations {
     SLADOVNICKA = 'Sladovnická',
     UMOTLIKU = 'U Motlíků',