Prvotní nástřel fungující aplikace

2023-06-01 23:05:51 +02:00
parent bf379e13ed
commit 12583e6efb
59 changed files with 2194 additions and 1011 deletions
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -0,0 +1,160 @@
+import React, { useContext, useEffect, 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 { useAuth } from './context/auth';
+import Login from './Login';
+import { Locations, ClientData } from './Types';
+import './App.css';
+import { Alert, Form, Table } from 'react-bootstrap';
+
+const EVENT_CONNECT = "connect"
+
+function App() {
+  const auth = useAuth();
+  const [isConnected, setIsConnected] = useState<boolean>(false);
+  const [data, setData] = useState<ClientData>();
+  const [food, setFood] = useState<any>();
+  // const [pizzy, setPizzy] = useState();
+  const socket = useContext(SocketContext);
+
+  // Prvotní načtení aktuálního stavu
+  useEffect(() => {
+    // getPizzy().then(pizzy => {
+    //   setPizzy(pizzy);
+    // });
+    getData().then(data => {
+      setData(data);
+    })
+    getFood().then(food => {
+      setFood(food);
+    })
+  }, []);
+
+  // Registrace socket eventů
+  useEffect(() => {
+    socket.on(EVENT_CONNECT, () => {
+      // console.log("Connected!");
+      setIsConnected(true);
+    });
+    socket.on(EVENT_DISCONNECT, () => {
+      // console.log("Disconnected!");
+      setIsConnected(false);
+    });
+    socket.on(EVENT_MESSAGE, (newData: ClientData) => {
+      // const data: any = JSON.parse(payload);
+      // console.log("Přijata nová data ze socketu", newData);
+      setData(newData);
+    });
+
+    return () => {
+      socket.off(EVENT_CONNECT);
+      socket.off(EVENT_DISCONNECT);
+      socket.off(EVENT_MESSAGE);
+    }
+  }, [socket]);
+
+  const changeChoice = async (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const index = Object.values(Locations).indexOf(event.target.value as unknown as Locations);
+    if (auth?.login) {
+      await updateChoice(auth.login, index > -1 ? index : null);
+    }
+  }
+
+  const renderFoodTable = (name, food) => {
+    return <div className='food-table'>
+      <h3>{name}</h3>
+      <Table striped bordered hover>
+        <tbody>
+          {food.map((f: any, index: number) =>
+            <tr key={index}>
+              <td>{f.amount}</td>
+              <td>{f.name}</td>
+              <td>{f.price}</td>
+            </tr>
+          )}
+        </tbody>
+      </Table>
+    </div>
+  }
+
+  if (!auth || !auth.login) {
+    return <Login />;
+  }
+
+  if (!data || !isConnected || !food) {
+    return <div>Načítám data...</div>
+  }
+
+  // const pizzaDayExists = data?.state > 0;
+
+  return (
+    <div className='wrapper'>
+      <Alert variant={'primary'}>
+        Tvé zobrazované jméno je {auth.login}. Změnu můžeš provést v local storage prohlížeče.<br />
+        <small>Pro gamer move: Změň si své jméno na cizí. Můžeš pak libovolně měnit jejich volbu.</small>
+      </Alert>
+      <h1 className='title'>Dnes je {data.date}</h1>
+      <div className='food-tables'>
+        {renderFoodTable('Sladovnická', food.sladovnicka)}
+        {renderFoodTable('U Motlíků', food["uMotliku:"])}
+        {renderFoodTable('TechTower', food.techTower)}
+      </div>
+      <div className='content-wrapper'>
+        <div className='content'>
+          <p>Jak to dnes vidíš s obědem?</p>
+          <Form.Select onChange={changeChoice}>
+            <option></option>
+            <option value={Locations.SLADOVNICKA}>Sladovnická</option>
+            <option value={Locations.UMOTLIKU}>U Motlíků</option>
+            <option value={Locations.TECHTOWER}>TechTower</option>
+            <option value={Locations.SPSE}>SPŠE</option>
+            <option value={Locations.VLASTNI}>Mám vlastní</option>
+            <option value={Locations.OBJEDNAVAM}>Budu objednávat</option>
+            <option value={Locations.NEOBEDVAM}>Nebudu obědvat</option>
+          </Form.Select>
+          <p style={{ fontSize: "12px", marginTop: "5px" }}>
+            Aktuálně je možné vybrat pouze jednu variantu. Vyber prázdnou položku pro odstranění.
+          </p>
+          {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) =>
+                  <tr key={index}>
+                    <td>{Object.values(Locations)[Number(key)]}</td>
+                    <td>
+                      <ul>
+                        {data.choices[Number(key)].map((p: string, index: number) => <li key={index}>{p}</li>)}
+                      </ul>
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </Table>
+            : <div className='mt-5'><i>Zatím nikdo nehlasoval...</i></div>
+          }
+        </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>
+  );
+}
+
+export default App;