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

This commit is contained in:
Martin Berka 2023-07-25 23:53:05 +02:00
parent 24c301b141
commit bbf1cf1850
3 changed files with 138 additions and 68 deletions

View File

@ -60,17 +60,16 @@ export const finishDelivery = async (bankAccount?: string, bankAccountHolder?: s
return await api.post<any, any>('/api/finishDelivery', JSON.stringify({ bankAccount, bankAccountHolder }));
}
// TODO smazat
// export const updateChoice = async (choice: number | null) => {
// return await api.post<any, any>('/api/updateChoice', JSON.stringify({ choice }));
// }
export const addChoice = async (locationIndex: number) => {
return await api.post<any, any>('/api/addChoice', JSON.stringify({ locationIndex }));
export const addChoice = async (locationIndex: number, foodIndex?: number) => {
return await api.post<any, any>('/api/addChoice', JSON.stringify({ locationIndex, foodIndex }));
}
export const removeChoices = async (location: Location) => {
return await api.post<any, any>('/api/removeChoices', JSON.stringify({ location }));
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) => {

View File

@ -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 { addChoice, addPizza, createPizzaDay, deletePizzaDay, finishDelivery, finishOrder, getData, getFood, getPizzy, getQrUrl, lockPizzaDay, removeChoices, removePizza, unlockPizzaDay, 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í
@ -93,24 +95,64 @@ function App() {
}
}, [auth?.login, data?.pizzaDay?.orders])
// TODO přejmenovat na addChoice
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);
console.log("Target value", event.target.value)
console.log("Change choices called with index", index);
// TODO implementovat
if (auth?.login) {
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) {
console.log("Remove choice called with key", key)
// await removeChoices(key); // TODO tohle je určitě blbě
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 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 = "";
}
}
}
@ -214,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>Přidání nedělitelných mezer k cenám</li>
<li>Bliká mi žárovka v lednici :(</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>
@ -227,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>
@ -237,24 +280,47 @@ 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" }}>
Aktuálně je možné vybrat pouze jednu variantu.
</p>
{foodChoiceList && <>
<p style={{ marginTop: "10px" }}>Na co dobrého? <small>(nepovinné)</small></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) => {
console.log("Rendering for key", key)
{Object.keys(data.choices).map((locationKey: string) => {
const locationName = Object.values(Locations)[Number(locationKey)];
const locationLoginList = Object.entries(data.choices[Number(locationKey)]);
return (
<tr key={index}>
<td>{Object.values(Locations)[Number(key)]}</td>
<tr key={locationKey}>
<td>{locationName}</td>
<td>
<ul>
{/* {data.choices[Number(key)].map((p: string, index: number) =>
<li key={index}>{p} {p === auth.login && <FontAwesomeIcon onClick={() => {
removeChoice(key);
}} title='Odstranit' className='trash-icon' icon={faTrashCan} />}</li>
)} */}
{locationLoginList.map((entry: [string, number[]], index) => {
const login = entry[0];
const userChoices = entry[1];
return <li key={index}>{login} {login === auth.login && <FontAwesomeIcon onClick={() => {
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>)

View File

@ -204,22 +204,27 @@ app.post("/api/finishDelivery", (req, res) => {
io.emit("message", data);
res.status(200).json({});
});
[
app.post("/api/addChoice", (req, res) => {
const login = getLogin(parseToken(req));
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));
console.log("Remove choices", req.body.location); // TODO smazat
const data = removeChoices(login, req.body.location);
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));
console.log("Remove choice", req.body.location, req.body.foodIndex); // TODO smazat
const data = removeChoice(login, req.body.location, req.body.foodIndex);
const data = removeChoice(login, req.body.locationIndex, req.body.foodIndex);
io.emit("message", data);
res.status(200).json(data);
});