Základní funkčnost Pizza Day

client/src/Api.ts

@@ -1,12 +1,4 @@
-// type Pizza = {
-//     name: string;
-//     // TODO ingredience
-//     sizes: [
-//         size: number,
-//         price: number,
-//     ];
-// }
-
+import { PizzaOrder } from "./Types";
 import { getBaseUrl } from "./Utils";
 
 async function request<TResponse>(
@@ -52,4 +44,8 @@ export const updateChoice = async (name: string, choice: number | null) => {
 
 export const addPizza = async (login: string, pizzaIndex: number, pizzaSizeIndex: number) => {
     return await api.post<any, any>('/api/addPizza', JSON.stringify({ login, pizzaIndex, pizzaSizeIndex }));
+}
+
+export const removePizza = async (login: string, pizzaOrder: PizzaOrder) => {
+    return await api.post<any, any>('/api/removePizza', JSON.stringify({ login, pizzaOrder }));
 }

client/src/App.tsx

@@ -1,10 +1,10 @@
 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, getData, getFood, getPizzy, updateChoice } from './Api';
+import { addPizza, createPizzaDay, deletePizzaDay, getData, getFood, getPizzy, removePizza, updateChoice } from './Api';
 import { useAuth } from './context/auth';
 import Login from './Login';
-import { Locations, ClientData, Pizza } from './Types';
+import { Locations, ClientData, Pizza, PizzaOrder } from './Types';
 import { Alert, Button, Col, Form, Row, Table } from 'react-bootstrap';
 import Header from './components/Header';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -99,29 +99,33 @@ function App() {
     }
     const suggestions: SelectSearchOption[] = [];
     pizzy.forEach((pizza, index) => {
+      const group: SelectSearchOption = { name: pizza.name, type: "group", items: [] }
       pizza.sizes.forEach((size, sizeIndex) => {
-        const name = `${pizza.name}, ${size.size} (${size.price} Kč)`;
+        const name = `${size.size} (${size.price} Kč)`;
         const value = `${index}|${sizeIndex}`;
-        suggestions.push({ name, value });
+        group.items?.push({ name, value });
       })
+      suggestions.push(group);
     })
     return suggestions;
   }, [pizzy]);
 
   const handlePizzaChange = async (value) => {
-    console.log("Pizza vybrána", value);
     if (auth?.login && pizzy) {
       const s = value.split('|');
       const pizzaIndex = Number.parseInt(s[0]);
       const pizzaSizeIndex = Number.parseInt(s[1]);
       const pizza = pizzy[pizzaIndex];
-      const size = pizza.sizes[pizzaSizeIndex];
-      // TODO smazat
-      console.log("Vybraná pizza a velikost", pizza, size);
       await addPizza(auth.login, pizzaIndex, pizzaSizeIndex);
     }
   }
 
+  const handlePizzaDelete = (pizzaOrder: PizzaOrder) => {
+    if (auth?.login) {
+      removePizza(auth?.login, pizzaOrder);
+    }
+  }
+
   const renderFoodTable = (name, food) => {
     return <Col md={12} lg={4}>
       <h3>{name}</h3>
@@ -200,29 +204,35 @@ 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 mb-3' onClick={async () => {
-                  await deletePizzaDay(auth.login);
-                }}>Smazat Pizza day</Button>
+            <div className='mt-5'>
+              {!data.pizzaDay &&
+                <div style={{ textAlign: 'center' }}>
+                  <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>
               }
-              <SelectSearch
-                search={true}
-                options={pizzaSuggestions}
-                placeholder='Vyhledat pizzu...'
-                onChange={handlePizzaChange}
-              />
-              <PizzaOrderList orders={data.pizzaDay.orders} />
-            </div>}
+              {data.pizzaDay &&
+                <div>
+                  <div style={{ textAlign: 'center' }}>
+                    <p>Pizza Day je založen uživatelem {data.pizzaDay.creator}</p>
+                    {
+                      data.pizzaDay.creator === auth.login && <Button className='danger mb-3' onClick={async () => {
+                        await deletePizzaDay(auth.login);
+                      }}>Smazat Pizza day</Button>
+                    }
+                  </div>
+                  <SelectSearch
+                    search={true}
+                    options={pizzaSuggestions}
+                    placeholder='Vyhledat pizzu...'
+                    onChange={handlePizzaChange}
+                  />
+                  <PizzaOrderList orders={data.pizzaDay.orders} onDelete={handlePizzaDelete} />
+                </div>
+              }
+            </div>
           </div>
         </>}
       </div>

client/src/Types.tsx

@@ -14,10 +14,17 @@ export interface Pizza {
     sizes: PizzaSize[], // dostupné velikosti pizzy
 }
 
-/** Jedna objednávka v rámci Pizza day */
+/** Objednávka jedné konkrétní pizzy */
+export interface PizzaOrder {
+    name: string, // název pizzy
+    size: string, // velikost pizzy jako string (30cm)
+    price: number, // cena pizzy v Kč, včetně krabice
+}
+
+/** Celková objednávka jednoho člověka */
 export interface Order {
-    customer: string, // název člověka
-    pizzaList: Pizza[], // seznam objednaných pizz
+    customer: string, // jméno objednatele
+    pizzaList: PizzaOrder[], // seznam objednaných pizz
     totalPrice: number, // celková cena všech objednaných pizz a krabic
 }
 

client/src/components/PizzaOrderList.tsx

@@ -1,21 +1,36 @@
 import React from "react";
 import { Table } from "react-bootstrap";
-import { Order } from "../Types";
+import { Order, PizzaOrder } from "../Types";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTrashCan } from "@fortawesome/free-regular-svg-icons";
+import { useAuth } from "../context/auth";
+
+export default function PizzaOrderList({ orders, onDelete }: { orders: Order[], onDelete: (pizzaOrder: PizzaOrder) => void }) {
+    const auth = useAuth();
 
-export default function PizzaOrderList({ orders }: { orders: Order[] }) {
     return <Table className="mt-3" striped bordered hover>
         <thead>
             <tr>
-                <th>Pizza</th>
                 <th>Jméno</th>
-                <th>Cena (Kč)</th>
+                <th>Objednávka</th>
+                <th>Celkem</th>
             </tr>
         </thead>
         <tbody>
-            {orders.map(order => <tr>
-                <td>{order.pizzaList[0].name}</td>
+            {orders.map(order => <tr key={order.customer}>
                 <td>{order.customer}</td>
-                <td>{order.totalPrice}</td>
+                <td>{order.pizzaList.map<React.ReactNode>((pizzaOrder, index) =>
+                    <span key={index}>
+                        {`${pizzaOrder.name}, ${pizzaOrder.size} (${pizzaOrder.price} Kč)`}
+                        {auth?.login === order.customer &&
+                            <FontAwesomeIcon onClick={() => {
+                                onDelete(pizzaOrder);
+                            }} title='Odstranit' className='trash-icon' icon={faTrashCan} />
+                        }
+                    </span>)
+                    .reduce((prev, curr) => [prev, <br />, curr])}
+                </td>
+                <td>{order.totalPrice} Kč</td>
             </tr>)}
         </tbody>
     </Table>