feat: zadávání cen

client/src/App.tsx

@@ -18,18 +18,20 @@ import './themes/bocchi.scss';
 import { faCircleCheck, faNoteSticky, faTrashCan, faComment } from '@fortawesome/free-regular-svg-icons';
 import { useSettings } from './context/settings';
 import Footer from './components/Footer';
-import { faArrowUpRightFromSquare, faBasketShopping, faChainBroken, faChevronLeft, faChevronRight, faDharmachakra, faGear, faMoneyBillTransfer, faSatelliteDish, faSearch, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
+import { faArrowUpRightFromSquare, faBasketShopping, faTag, faChainBroken, faChevronLeft, faChevronRight, faDharmachakra, faGear, faMoneyBillTransfer, faSatelliteDish, faSearch, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
 import { useNavigate } from 'react-router-dom';
 import Loader from './components/Loader';
 import { getHumanDateTime, isInTheFuture } from './Utils';
 import NoteModal from './components/modals/NoteModal';
+import PriceModal from './components/modals/PriceModal';
+import { parsePriceCzk } from './utils/parsePrice';
 import PayForAllModal from './components/modals/PayForAllModal';
 import SpinWheelModal, { WheelPick } from './components/modals/SpinWheelModal';
 import EaterBadge from './components/EaterBadge';
 import PendingPayments from './components/PendingPayments';
 import { useEasterEgg } from './context/eggs';
-import { ClientData, Food, MealSlot, PendingQr, PizzaOrder, DepartureTime, PizzaDayState, Restaurant, RestaurantDayMenu, RestaurantDayMenuMap, LunchChoice, LocationLunchChoicesMap, UserLunchChoice, PizzaVariant, getData, getEasterEggImage, addPizza, removePizza, updatePizzaDayNote, createPizzaDay, deletePizzaDay, lockPizzaDay, unlockPizzaDay, finishOrder, finishDelivery, addChoice, jdemeObed, removeChoices, removeChoice, updateNote, changeDepartureTime, setBuyer, generateQr } from '../../types';
-import { getLunchChoiceName } from './enums';
+import { ClientData, Food, MealSlot, PendingQr, PizzaOrder, DepartureTime, PizzaDayState, Restaurant, RestaurantDayMenu, RestaurantDayMenuMap, LunchChoice, LocationLunchChoicesMap, UserLunchChoice, PizzaVariant, getData, getEasterEggImage, addPizza, removePizza, updatePizzaDayNote, createPizzaDay, deletePizzaDay, lockPizzaDay, unlockPizzaDay, finishOrder, finishDelivery, addChoice, jdemeObed, removeChoices, removeChoice, updateNote, updatePrice, changeDepartureTime, setBuyer, generateQr } from '../../types';
+import { CHOICES_WITHOUT_PRICE, getLunchChoiceName } from './enums';
 import { isArrowNavigationBlocked } from './utils/arrowNavigation';
 // import FallingLeaves, { LEAF_PRESETS, LEAF_COLOR_THEMES } from './FallingLeaves';
 // import './FallingLeaves.scss';
@@ -88,6 +90,7 @@ function App() {
   const [dayIndex, setDayIndex] = useState<number>();
   const [loadingPizzaDay, setLoadingPizzaDay] = useState<boolean>(false);
   const [noteModalOpen, setNoteModalOpen] = useState<boolean>(false);
+  const [priceModalOpen, setPriceModalOpen] = useState<boolean>(false);
   const [payForAllLocationKey, setPayForAllLocationKey] = useState<LunchChoice | null>(null);
   const [spinWheelOpen, setSpinWheelOpen] = useState<boolean>(false);
   const [eggImage, setEggImage] = useState<Blob>();
@@ -443,6 +446,13 @@ function App() {
     }
   }
 
+  const savePrice = async (price?: number) => {
+    if (auth?.login) {
+      await updatePrice({ body: { price, dayIndex } });
+      setPriceModalOpen(false);
+    }
+  }
+
   const copyNote = async (note: string) => {
     if (auth?.login && note) {
       await updateNote({ body: { note, dayIndex } });
@@ -666,6 +676,15 @@ function App() {
   const noOrders = data?.pizzaDay?.orders?.length === 0;
   const canChangeChoice = dayIndex == null || data.todayDayIndex == null || dayIndex >= data.todayDayIndex;
 
+  const ownChoice = auth?.login ? Object.entries(data.choices)
+    .map(([locationKey, loginMap]) => ({ locationKey: locationKey as LunchChoice, choice: loginMap?.[auth.login!] }))
+    .find(entry => entry.choice != null) as { locationKey: LunchChoice, choice: UserLunchChoice } | undefined : undefined;
+  // Součet cen vybraných jídel z menu jako návrh ceny; pokud některou cenu nelze přečíst, nenavrhujeme nic
+  const ownFoodPrices = ownChoice?.choice.selectedFoods?.map(index => parsePriceCzk(food[ownChoice.locationKey as Restaurant]?.food?.[index]?.price)) ?? [];
+  const ownSuggestedPrice = ownFoodPrices.length && !ownFoodPrices.includes(null)
+    ? Math.round((ownFoodPrices as number[]).reduce((sum, price) => sum + price, 0) * 100)
+    : undefined;
+
   const { path, url, startOffset, endOffset, duration, ...style } = easterEgg || {};
 
   return (
@@ -781,6 +800,7 @@ function App() {
                                           <strong>{login}</strong>
                                           {userPayload.departureTime && <small className="ms-2" style={{ color: 'var(--luncher-text-muted)' }}>({userPayload.departureTime})</small>}
                                           {userPayload.note && <span className="ms-2" style={{ fontSize: 'small', color: 'var(--luncher-text-secondary)' }}>({userPayload.note})</span>}
+                                          {login === auth.login && userPayload.price != null && <small className="ms-2" style={{ color: 'var(--luncher-text-muted)' }}>{userPayload.price / 100} Kč</small>}
                                         </div>
                                         <div className="user-actions">
                                           {login === auth.login && canChangeChoice && locationKey === LunchChoice.OBJEDNAVAM && <span title='Označit/odznačit se jako objednávající'>
@@ -804,6 +824,9 @@ function App() {
                                           {login === auth.login && canChangeChoice && locationKey === LunchChoice.ROZHODUJI && <span title='Roztočit kolo štěstí'>
                                             <FontAwesomeIcon onClick={() => setSpinWheelOpen(true)} className='action-icon spin-wheel-icon' icon={faDharmachakra} />
                                           </span>}
+                                          {login === auth.login && canChangeChoice && !CHOICES_WITHOUT_PRICE.includes(locationKey) && <span title='Zadat cenu oběda do přehledu stravování'>
+                                            <FontAwesomeIcon onClick={() => setPriceModalOpen(true)} className='action-icon' icon={faTag} />
+                                          </span>}
                                           {login === auth.login && canChangeChoice && <span title='Upravit poznámku'>
                                             <FontAwesomeIcon onClick={() => {
                                               setNoteModalOpen(true);
@@ -969,6 +992,13 @@ function App() {
       <Footer />
       {spinWheelOpen && <SpinWheelModal isOpen onClose={() => setSpinWheelOpen(false)} menus={food} onPick={handleWheelPick} />}
       <NoteModal isOpen={noteModalOpen} onClose={() => setNoteModalOpen(false)} onSave={saveNote} />
+      <PriceModal
+        isOpen={priceModalOpen}
+        onClose={() => setPriceModalOpen(false)}
+        price={ownChoice?.choice.price}
+        suggestedPrice={ownSuggestedPrice}
+        onSave={savePrice}
+      />
       {payForAllLocationKey && data && (
         <PayForAllModal
           isOpen

client/src/components/modals/PayForAllModal.tsx

@@ -49,9 +49,10 @@ export default function PayForAllModal({ isOpen, onClose, locationName, location
         if (!isOpen) return;
         const entries: DinerEntry[] = Object.entries(locationChoices).map(([login, choice]) => {
             const selectedFoods = choice.selectedFoods ?? [];
-            let baseAmount = 0;
+            // Cena, kterou si strávník zadal sám, má přednost před cenami z menu
+            let baseAmount = choice.price ?? 0;
             let baseAmountParseFailed = false;
-            if (menu) {
+            if (menu && choice.price == null) {
                 for (const idx of selectedFoods) {
                     const priceKc = parsePriceCzk(menu.food?.[idx]?.price);
                     if (priceKc === null) {
@@ -168,7 +169,7 @@ export default function PayForAllModal({ isOpen, onClose, locationName, location
                     <>
                         <p>Zaplatili jste za skupinu v restauraci. Nastavte příplatky a společné poplatky, poté vygenerujte QR kódy pro ostatní.</p>
 
-                        {!hasMenu && (
+                        {!hasMenu && !diners.some(d => d.baseAmount > 0) && (
                             <Alert variant="info">
                                 Pro tuto skupinu nejsou k dispozici ceny jídel — vyplňte příplatky ručně.
                             </Alert>
@@ -219,7 +220,7 @@ export default function PayForAllModal({ isOpen, onClose, locationName, location
                                             <td>
                                                 <small>
                                                     {foodNames || <span className="text-muted">—</span>}
-                                                    {hasMenu && d.baseAmount > 0 && <span className="text-muted"> ({d.baseAmount / 100} Kč)</span>}
+                                                    {d.baseAmount > 0 && <span className="text-muted"> ({d.baseAmount / 100} Kč)</span>}
                                                     {d.baseAmountParseFailed && <span className="text-warning"> ⚠</span>}
                                                 </small>
                                             </td>

client/src/components/modals/PriceModal.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useState } from "react";
+import { Modal, Button, Form } from "react-bootstrap";
+
+type Props = {
+    isOpen: boolean,
+    onClose: () => void,
+    /** Uložená cena v haléřích */
+    price?: number,
+    /** Cena v haléřích spočtená z vybraných jídel v menu, nabídne se, pokud cena ještě není uložená */
+    suggestedPrice?: number,
+    /** Cena v haléřích, undefined cenu odstraní */
+    onSave: (price?: number) => void,
+}
+
+const toCrownsText = (amount?: number) => amount ? String(amount / 100).replace('.', ',') : '';
+
+/** Modální dialog pro zadání ceny oběda, která se promítne do přehledu stravování. */
+const PriceModal = ({ isOpen, onClose, price, suggestedPrice, onSave }: Readonly<Props>) => {
+    const [value, setValue] = useState('');
+
+    useEffect(() => {
+        if (isOpen) {
+            setValue(toCrownsText(price ?? suggestedPrice));
+        }
+    }, [isOpen, price, suggestedPrice]);
+
+    const parsed = value.trim().length ? Number.parseFloat(value.replace(',', '.')) : undefined;
+    const invalid = parsed != null && (Number.isNaN(parsed) || parsed < 0);
+
+    const save = () => {
+        if (invalid) return;
+        onSave(parsed == null ? undefined : Math.round(parsed * 100));
+    }
+
+    return <Modal show={isOpen} onHide={onClose}>
+        <Modal.Header closeButton>
+            <Modal.Title>Cena oběda</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+            <p className="text-muted small">Cena se promítne do vašeho měsíčního přehledu stravování (export).</p>
+            <div className="d-flex align-items-center gap-2">
+                <Form.Control
+                    autoFocus
+                    type="text"
+                    inputMode="decimal"
+                    placeholder="např. 145"
+                    value={value}
+                    isInvalid={invalid}
+                    onChange={e => setValue(e.target.value.replace(/[^0-9.,]/g, ''))}
+                    onKeyDown={event => {
+                        if (event.key === 'Enter') {
+                            save();
+                        }
+                        event.stopPropagation();
+                    }}
+                />
+                <span>Kč</span>
+            </div>
+        </Modal.Body>
+        <Modal.Footer>
+            {price != null && <Button variant="outline-danger" className="me-auto" onClick={() => onSave(undefined)}>
+                Odstranit cenu
+            </Button>}
+            <Button variant="secondary" onClick={() => onClose()}>
+                Storno
+            </Button>
+            <Button variant="primary" onClick={() => save()} disabled={invalid}>
+                Uložit
+            </Button>
+        </Modal.Footer>
+    </Modal>
+}
+
+export default PriceModal;

client/src/enums.ts

@@ -1,5 +1,8 @@
 import { LunchChoice, Restaurant } from "../../types";
 
+/** Volby, u kterých se nezadává cena oběda — cena je dána objednávkou, Pizza day, nebo se neobědvá. */
+export const CHOICES_WITHOUT_PRICE: LunchChoice[] = [LunchChoice.OBJEDNAVAM, LunchChoice.PIZZA, LunchChoice.NEOBEDVAM, LunchChoice.ROZHODUJI];
+
 export function getRestaurantName(restaurant: Restaurant) {
     switch (restaurant) {
         case Restaurant.SLADOVNICKA: