Příprava Pizza Day

client/package.json

@@ -21,6 +21,7 @@
     "react-bootstrap": "^2.7.2",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "react-select-search": "^4.1.6",
     "socket.io-client": "^4.6.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
@@ -48,5 +49,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "devDependencies": {}
 }

client/src/Api.ts

@@ -38,12 +38,12 @@ export const getPizzy = async () => {
     return await api.get<any>('/api/pizza');
 }
 
-export const createPizzaDay = async () => {
+export const createPizzaDay = async (creator) => {
-    return await api.post<any, any>('/api/createPizzaDay', {});
+    return await api.post<any, any>('/api/createPizzaDay', JSON.stringify({ creator }));
 }
 
-export const deletePizzaDay = async () => {
+export const deletePizzaDay = async (login) => {
-    return await api.post<any, any>('/api/deletePizzaDay', {});
+    return await api.post<any, any>('/api/deletePizzaDay', JSON.stringify({ login }));
 }
 
 export const updateChoice = async (name: string, choice: number | null) => {

client/src/App.tsx

@@ -1,15 +1,20 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
+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 { getData, getFood, updateChoice } from './Api';
+import { createPizzaDay, deletePizzaDay, getData, getFood, getPizzy, updateChoice } from './Api';
 import { useAuth } from './context/auth';
 import Login from './Login';
-import { Locations, ClientData } from './Types';
+import { Locations, ClientData, Pizza } from './Types';
-import { Alert, Col, Form, Row, Table } from 'react-bootstrap';
+import { Alert, Button, Col, Form, Row, Table } from 'react-bootstrap';
 import Header from './components/Header';
 import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import PizzaOrderList from './components/PizzaOrderList';
+import SelectSearch from 'react-select-search';
+import 'react-select-search/style.css';
 import './App.css';
+import { SelectSearchOption } from 'react-select-search';
+
 
 const EVENT_CONNECT = "connect"
 
@@ -18,15 +23,15 @@ function App() {
   const [isConnected, setIsConnected] = useState<boolean>(false);
   const [data, setData] = useState<ClientData>();
   const [food, setFood] = useState<any>();
-  // const [pizzy, setPizzy] = useState();
+  const [pizzy, setPizzy] = useState<Pizza[]>();
   const socket = useContext(SocketContext);
   const choiceRef = useRef<HTMLSelectElement>(null);
 
   // Prvotní načtení aktuálního stavu
   useEffect(() => {
-    // getPizzy().then(pizzy => {
+    getPizzy().then(pizzy => {
-    //   setPizzy(pizzy);
+      setPizzy(pizzy);
-    // });
+    });
     getData().then(data => {
       setData(data);
     })
@@ -88,6 +93,31 @@ function App() {
     }
   }
 
+  const pizzaSuggestions = useMemo(() => {
+    if (!pizzy) {
+      return [];
+    }
+    const suggestions: SelectSearchOption[] = [];
+    pizzy.forEach((pizza, index) => {
+      pizza.sizes.forEach((size, sizeIndex) => {
+        const name = `${pizza.name}, ${size.size} (${size.price} Kč)`;
+        const value = `${index}|${sizeIndex}`;
+        suggestions.push({ name, value });
+      })
+    })
+    return suggestions;
+  }, [pizzy]);
+
+  const handlePizzaChange = (value) => {
+    console.log("Pizza vybrána", value);
+    if (pizzy) {
+      const s = value.split('|');
+      const pizza = pizzy[Number.parseInt(s[0])];
+      const size = pizza.sizes[Number.parseInt(s[1])];
+      console.log("Vybraná pizza a velikost", pizza, size);
+    }
+  }
+
   const renderFoodTable = (name, food) => {
     return <Col md={12} lg={4}>
       <h3>{name}</h3>
@@ -113,8 +143,6 @@ function App() {
     return <div>Načítám data...</div>
   }
 
-  // const pizzaDayExists = data?.state > 0;
-
   return (
     <>
       <Header />
@@ -168,26 +196,31 @@ function App() {
                 : <div className='mt-5'><i>Zatím nikdo nehlasoval...</i></div>
               }
             </div>
+            {/* {!data.pizzaDay &&
+              <div>
+                <p>Pro dnešní den není aktuálně založen Pizza day.</p>
+                <Button onClick={async () => {
+                  await createPizzaDay(auth.login);
+                }}>Založit Pizza day</Button>
+              </div>
+            }
+            {data.pizzaDay && <div>
+              <p>Pizza Day je založen uživatelem {data.pizzaDay.creator}</p>
+              {
+                data.pizzaDay.creator === auth.login && <Button className='danger' onClick={async () => {
+                  await deletePizzaDay(auth.login);
+                }}>Smazat Pizza day</Button>
+              }
+              <SelectSearch
+                search={true}
+                options={pizzaSuggestions}
+                placeholder='Vyhledat pizzu...'
+                onChange={handlePizzaChange}
+              />
+              <PizzaOrderList orders={data.pizzaDay.orders} />
+            </div>} */}
           </div>
         </>}
-        {/* {!pizzaDayExists &&
-        <div>
-          <p>Pro dnešní den není aktuálně založen Pizza day.</p>
-          <Button onClick={async () => {
-            await createPizzaDay();
-          }}>Založit Pizza day</Button>
-        </div>
-      }
-      {pizzaDayExists && <div>
-        <Button className='danger' onClick={async () => {
-          await deletePizzaDay();
-        }}>Smazat Pizza day</Button>
-        <OrderList orders={data.orders} />
-      </div>} */}
-        {/* <Button onClick={async () => {
-          const pizzy = await getPizzy();
-          console.log("Výsledek", pizzy);
-        }}>Získat pizzy</Button> */}
       </div>
     </>
   );

client/src/Types.tsx

@@ -1,12 +1,20 @@
 // TODO všechno v tomto souboru jsou duplicity se serverem, ale aktuálně nevím jaký je nejlepší způsob jejich sdílení
 
+export interface PizzaSize {
+    size: string, // velikost pizzy, např. "30cm"
+    pizzaPrice: number, // cena samotné pizzy
+    boxPrice: number, // cena krabice
+    price: number, // celková cena (pizza + krabice)
+}
+
 /** Jedna konkrétní pizza */
 export interface Pizza {
     name: string, // název pizzy
-    size: number, // velikost pizzy v cm
+    ingredients: string[], // seznam ingrediencí
-    price: number, // cena pizzy v Kč, včetně krabice
+    sizes: PizzaSize[], // dostupné velikosti pizzy
 }
 
+/** Jedna objednávka v rámci Pizza day */
 export interface Order {
     customer: string, // název člověka
     pizzaList: Pizza[], // seznam objednaných pizz
@@ -17,10 +25,18 @@ export interface Choices {
     [location: string]: string[],
 }
 
+/** Údaje o Pizza day. */
+export interface PizzaDay {
+    state: State,
+    creator: string,
+    orders: Order[]
+}
+
 export interface ClientData {
     date: string, // dnešní datum pro zobrazení
     isWeekend: boolean, // příznak zda je dnešní den víkend
     choices: Choices, // seznam voleb
+    pizzaDay?: PizzaDay, // údaje o pizza day, pokud je pro dnešek založen
 }
 
 export enum Locations {
@@ -32,3 +48,9 @@ export enum Locations {
     OBJEDNAVAM = 'Objednávám',
     NEOBEDVAM = 'Neobědvám',
 }
+
+export enum State {
+    NOT_CREATED, // Pizza day nebyl založen
+    CREATED, // Pizza day je založen
+    LOCKED // Objednávky uzamčeny
+}

client/src/components/PizzaOrderList.tsx

@@ -1,7 +1,8 @@
+import React from "react";
 import { Table } from "react-bootstrap";
 import { Order } from "../Types";
 
-export default function OrderList({ orders }: { orders: Order[] }) {
+export default function PizzaOrderList({ orders }: { orders: Order[] }) {
     return <Table striped bordered hover>
         <thead>
             <tr>
@@ -12,7 +13,7 @@ export default function OrderList({ orders }: { orders: Order[] }) {
         </thead>
         <tbody>
             {orders.map(order => <tr>
-                <td>{order.pizzaList[0].name}, {order.pizzaList[0].size}</td>
+                <td>{order.pizzaList[0].name}</td>
                 <td>{order.customer}</td>
                 <td>{order.totalPrice}</td>
             </tr>)}

client/yarn.lock

@@ -7767,6 +7767,11 @@ react-scripts@5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
+react-select-search@^4.1.6:
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/react-select-search/-/react-select-search-4.1.6.tgz#4c3165e02007518726e004267fd1168e0076061d"
+  integrity sha512-BJMf11Ux0hqn6Z3BqRwceXdwjdF+dnpDsYGGehDPB/nZv+Dse7wdPUMqLSCVDyrH5y3xFu7r6IlZ6dj78291vA==
+
 react-transition-group@^4.4.2:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"

server/src/chefie.ts

@@ -67,11 +67,9 @@ const downloadPizzy = async () => {
         const sizes: PizzaSize[] = [];
         const a = $('.varianty > li > a', pizzaHtml);
         a.each((i, elm) => {
-            // TODO nedoděláno
+            const size = $($(elm).contents().get(0)).text().trim();
-            // const size = $('span', elm).text();
+            const price = Number.parseInt($($(elm).contents().get(1)).text().trim().split(" Kč")[0]);
-            // const priceKc = $(elm).text().split(size).pop().trim();
+            sizes.push({ size: size, pizzaPrice: price, boxPrice: boxPrices[size], price: price + boxPrices[size] });
-            // const price = Number.parseInt(priceKc.split(" Kč")[0]);
-            // sizes.push({ size: size, pizzaPrice: price, boxPrice: boxPrices[size], price: price + boxPrices[size] });
         })
         result.push({
             name: name,

server/src/index.ts

@@ -3,7 +3,7 @@ import { Server } from "socket.io";
 import bodyParser from "body-parser";
 import { fetchPizzy } from "./chefie";
 import cors from 'cors';
-import { getData, updateChoice } from "./service";
+import { createPizzaDay, deletePizzaDay, getData, updateChoice } from "./service";
 import dotenv from 'dotenv';
 import path from 'path';
 import { fetchMenus } from "./restaurants";
@@ -42,23 +42,30 @@ app.get("/api/food", (req, res) => {
 /** Vrátí seznam dostupných pizz. */
 app.get("/api/pizza", (req, res) => {
     fetchPizzy().then(pizzaList => {
-        console.log("Výsledek", pizzaList);
+        // console.log("Výsledek", pizzaList);
         res.status(200).json(pizzaList);
     });
 });
 
 // /** Založí pizza day pro aktuální den, za předpokladu že dosud neexistuje. */
-// app.post("/api/createPizzaDay", (req, res) => {
+app.post("/api/createPizzaDay", (req, res) => {
-//     const data = createPizzaDay();
+    console.log("Založení pizza day", req) // TODO smazat
-//     res.status(200).json(data);
+    if (!req.body?.creator) {
-//     io.emit("message", data);
+        throw Error("Nebyl předán název zakládajícího");
-// });
+    }
+    const data = createPizzaDay(req.body.creator);
+    res.status(200).json(data);
+    io.emit("message", data);
+});
 
 // /** Smaže pizza day pro aktuální den, za předpokladu že existuje. */
-// app.post("/api/deletePizzaDay", (req, res) => {
+app.post("/api/deletePizzaDay", (req, res) => {
-//     deletePizzaDay();
+    if (!req.body?.login) {
-//     io.emit("message", getData());
+        throw Error("Nebyl předán login uživatele");
-// });
+    }
+    deletePizzaDay(req.body.login);
+    io.emit("message", getData());
+});
 
 app.post("/api/updateChoice", (req, res) => {
     console.log("Změna výběru", req.body);

server/src/service.ts

@@ -1,36 +1,8 @@
-import { ClientData, Locations } from "./types";
+import { ClientData, Locations, State } from "./types";
 import { db } from "./database";
 import { getHumanDate, getIsWeekend } from "./utils";
 import { formatDate } from "./utils";
 
-// /** Jedna konkrétní pizza */
-// interface Pizza {
-//     name: string, // název pizzy
-//     size: number, // velikost pizzy v cm
-//     price: number, // cena pizzy v Kč, včetně krabice
-// }
-
-// /** Objednávka jednoho člověka */
-// interface Order {
-//     customer: string, // název člověka
-//     pizzaList: Pizza[], // seznam objednaných pizz
-//     totalPrice: number, // celková cena všech objednaných pizz a krabic
-// }
-
-// /** Stav pizza dne. */
-// enum State {
-//     NOT_CREATED, // Pizza day nebyl založen
-//     CREATED, // Pizza day je založen
-//     LOCKED // Objednávky uzamčeny
-// }
-
-// /** Veškerá data pro zobrazení na klientovi */
-// interface ClientData {
-//     date: string, // dnešní datum pro zobrazení
-//     state: State, // stav pizza dne
-//     orders?: Order[], // seznam objednávek, pokud není vyplněno, není založen pizza day
-// }
-
 /** Vrátí dnešní datum, případně fiktivní datum pro účely vývoje a testování. */
 function getToday(): Date {
     if (process.env.MOCK_DATA) {
@@ -52,29 +24,35 @@ export function getData(): ClientData {
     return data;
 }
 
-// /**
+/**
-//  * Vytvoří pizza day pro aktuální den a vrátí data pro klienta.
+ * Vytvoří pizza day pro aktuální den a vrátí data pro klienta.
-//  */
+ */
-// export function createPizzaDay(): ClientData {
+export function createPizzaDay(creator: string): ClientData {
-//     const today = getDate();
+    initIfNeeded();
-//     if (db.has(today)) {
+    const today = formatDate(getToday());
-//         throw Error("Pizza day pro dnešní den již existuje");
+    const clientData: ClientData = db.get(today);
-//     }
+    if (clientData.pizzaDay) {
-//     const data = { date: getTodayString(), state: State.CREATED, orders: [] };
+        throw Error("Pizza day pro dnešní den již existuje");
-//     db.set(today, data);
+    }
-//     return data;
+    const data: ClientData = { pizzaDay: { state: State.CREATED, creator, orders: [] }, ...clientData };
-// }
+    db.set(today, data);
+    return data;
+}
 
-// /**
+/**
-//  * Smaže pizza day pro aktuální den.
+ * Smaže pizza day pro aktuální den.
-//  */
+ */
-// export function deletePizzaDay() {
+export function deletePizzaDay(login: string) {
-//     const today = getDate();
+    const today = formatDate(getToday());
-//     if (!db.has(today)) {
+    const clientData: ClientData = db.get(today);
-//         throw Error("Pizza day pro dnešní den neexistuje");
+    if (!clientData.pizzaDay) {
-//     }
+        throw Error("Pizza day pro dnešní den neexistuje");
-//     db.delete(today);
+    }
-// }
+    if (clientData.pizzaDay.creator !== login) {
+        throw Error("Login uživatele se neshoduje se zakladatelem Pizza Day");
+    }
+    db.delete(today);
+}
 
 export function initIfNeeded() {
     const today = formatDate(getToday());

server/src/types.ts

@@ -2,10 +2,39 @@ export interface Choices {
     [location: string]: string[],
 }
 
+// /** Jedna konkrétní pizza */
+interface Pizza {
+    name: string, // název pizzy
+    size: number, // velikost pizzy v cm
+    price: number, // cena pizzy v Kč, včetně krabice
+}
+
+// /** Objednávka jednoho člověka */
+interface Order {
+    customer: string, // název člověka
+    pizzaList: Pizza[], // seznam objednaných pizz
+    totalPrice: number, // celková cena všech objednaných pizz a krabic
+}
+
+// /** Stav pizza dne. */
+export enum State {
+    NOT_CREATED, // Pizza day nebyl založen
+    CREATED, // Pizza day je založen
+    LOCKED // Objednávky uzamčeny
+}
+
+// /** Veškerá data pro zobrazení na klientovi */
+interface PizzaDay {
+    state: State, // stav pizza dne
+    creator: string, // jméno zakladatele
+    orders: Order[], // seznam objednávek, pokud není vyplněno, není založen pizza day
+}
+
 export interface ClientData {
     date: string, // dnešní datum pro zobrazení
     isWeekend: boolean, // příznak, zda je dnes víkend
     choices: Choices, // seznam voleb
+    pizzaDay?: PizzaDay, // pizza day pro dnešní den, pokud existuje
 }
 
 export enum Locations {