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 () => {
-    return await api.post<any, any>('/api/createPizzaDay', {});
+export const createPizzaDay = async (creator) => {
+    return await api.post<any, any>('/api/createPizzaDay', JSON.stringify({ creator }));
 }
 
-export const deletePizzaDay = async () => {
-    return await api.post<any, any>('/api/deletePizzaDay', {});
+export const deletePizzaDay = async (login) => {
+    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 { Alert, Col, Form, Row, Table } from 'react-bootstrap';
+import { Locations, ClientData, Pizza } from './Types';
+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 => {
-    //   setPizzy(pizzy);
-    // });
+    getPizzy().then(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
-    price: number, // cena pizzy v Kč, včetně krabice
+    ingredients: string[], // seznam ingrediencí
+    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 {
@@ -31,4 +47,10 @@ export enum Locations {
     VLASTNI = 'Mám vlastní',
     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"