Marbes/Luncher
5
2
Fork 0
Code Issues 22 Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: Marbes:e404b8112dc1b26d1016788086fdd2e2ec2f0aad
Branches Tags
Marbes:master Marbes:feat/generovaniQr Marbes:feat/refaktor Marbes:feat/refreshMenu Marbes:feat/openapi Marbes:feat/jdemeNaObed Marbes:feat/DayOfWeekIndex Marbes:feat/enumFixes
..
compare: Marbes:feat/generovaniQr
Branches Tags
Marbes:master Marbes:feat/generovaniQr Marbes:feat/refaktor Marbes:feat/refreshMenu Marbes:feat/openapi Marbes:feat/jdemeNaObed Marbes:feat/DayOfWeekIndex Marbes:feat/enumFixes

2 Commits
e404b8112d ... feat/gener

Author SHA1 Message Date
Martin Berka
2e8774900f feat: Základ generování QR kódů 2025-12-02 11:46:52 +01:00
Martin Berka
0179afca75 feat: část refaktoru databáze 2025-11-25 13:42:06 +01:00
37 changed files with 2397 additions and 3039 deletions
Expand all files Collapse all files

20
client/index.html
View File

@@ -10,26 +10,6 @@
<link rel="apple-touch-icon" href="/logo192.png" /> <link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<title>Luncher</title> <title>Luncher</title>
<script>
(function() {
try {
var saved = localStorage.getItem('theme_preference');
var theme;
if (saved === 'dark') {
theme = 'dark';
} else if (saved === 'light') {
theme = 'light';
} else {
// 'system' nebo neuloženo - použij systémové nastavení
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
document.documentElement.setAttribute('data-bs-theme', theme);
} catch (e) {
// Fallback pokud localStorage není dostupný
document.documentElement.setAttribute('data-bs-theme', 'light');
}
})();
</script>
</head> </head>
<body> <body>

1
client/package.json
View File

@@ -24,7 +24,6 @@
"react-router": "^7.9.5", "react-router": "^7.9.5",
"react-router-dom": "^7.9.5", "react-router-dom": "^7.9.5",
"react-select-search": "^4.1.6", "react-select-search": "^4.1.6",
"react-snow-overlay": "^1.0.14",
"react-snowfall": "^2.3.0", "react-snowfall": "^2.3.0",
"react-toastify": "^11.0.5", "react-toastify": "^11.0.5",
"recharts": "^3.4.1", "recharts": "^3.4.1",

1110
client/src/App.scss
View File

File diff suppressed because it is too large Load Diff

298
client/src/App.tsx
View File

@@ -13,15 +13,15 @@ import './App.scss';
import { faCircleCheck, faNoteSticky, faTrashCan, faComment } from '@fortawesome/free-regular-svg-icons'; import { faCircleCheck, faNoteSticky, faTrashCan, faComment } from '@fortawesome/free-regular-svg-icons';
import { useSettings } from './context/settings'; import { useSettings } from './context/settings';
import Footer from './components/Footer'; import Footer from './components/Footer';
import { faBasketShopping, faChainBroken, faChevronLeft, faChevronRight, faGear, faSatelliteDish, faSearch } from '@fortawesome/free-solid-svg-icons'; import { faChainBroken, faChevronLeft, faChevronRight, faGear, faSatelliteDish, faSearch } from '@fortawesome/free-solid-svg-icons';
import Loader from './components/Loader'; import Loader from './components/Loader';
import { getHumanDateTime, isInTheFuture } from './Utils'; import { getDayOfWeekIndex, getHumanDate, getHumanDateTime, getIsWeekend, isInTheFuture } from './Utils';
import NoteModal from './components/modals/NoteModal'; import NoteModal from './components/modals/NoteModal';
import { useEasterEgg } from './context/eggs'; import { useEasterEgg } from './context/eggs';
import { ClientData, Food, PizzaOrder, DepartureTime, PizzaDayState, Restaurant, RestaurantDayMenu, RestaurantDayMenuMap, LunchChoice, UserLunchChoice, PizzaVariant, getData, getEasterEggImage, addPizza, removePizza, updatePizzaDayNote, createPizzaDay, deletePizzaDay, lockPizzaDay, unlockPizzaDay, finishOrder, finishDelivery, addChoice, jdemeObed, removeChoices, removeChoice, updateNote, changeDepartureTime, setBuyer } from '../../types'; import { ClientData, Food, PizzaOrder, DepartureTime, PizzaDayState, Restaurant, RestaurantDayMenu, RestaurantDayMenuMap, LunchChoice, UserLunchChoice, PizzaVariant, getData, getEasterEggImage, addPizza, removePizza, updatePizzaDayNote, createPizzaDay, deletePizzaDay, lockPizzaDay, unlockPizzaDay, finishOrder, finishDelivery, addChoice, jdemeObed, removeChoices, removeChoice, updateNote, changeDepartureTime } from '../../types';
import { getLunchChoiceName } from './enums'; import { getLunchChoiceName } from './enums';
// import FallingLeaves, { LEAF_PRESETS, LEAF_COLOR_THEMES } from './FallingLeaves'; import FallingLeaves, { LEAF_PRESETS, LEAF_COLOR_THEMES } from './FallingLeaves';
// import './FallingLeaves.scss'; import './FallingLeaves.scss';
const EVENT_CONNECT = "connect" const EVENT_CONNECT = "connect"
@@ -71,7 +71,10 @@ function App() {
const departureChoiceRef = useRef<HTMLSelectElement>(null); const departureChoiceRef = useRef<HTMLSelectElement>(null);
const pizzaPoznamkaRef = useRef<HTMLInputElement>(null); const pizzaPoznamkaRef = useRef<HTMLInputElement>(null);
const [failure, setFailure] = useState<boolean>(false); const [failure, setFailure] = useState<boolean>(false);
const [dayIndex, setDayIndex] = useState<number>(); const [dayIndex, setDayIndex] = useState<number>(); // Index zobrazovaného dne
// TODO berka zde je nutné dořešit mocking pro testování
const [todayDayIndex, setTodayDayIndex] = useState<number>(getDayOfWeekIndex(new Date())); // Index dnešního dne
const [isTodayWeekend, setIsTodayWeekend] = useState<boolean>(getIsWeekend(new Date()));
const [loadingPizzaDay, setLoadingPizzaDay] = useState<boolean>(false); const [loadingPizzaDay, setLoadingPizzaDay] = useState<boolean>(false);
const [noteModalOpen, setNoteModalOpen] = useState<boolean>(false); const [noteModalOpen, setNoteModalOpen] = useState<boolean>(false);
const [eggImage, setEggImage] = useState<Blob>(); const [eggImage, setEggImage] = useState<Blob>();
@@ -89,8 +92,9 @@ function App() {
const data = response.data const data = response.data
if (data) { if (data) {
setData(data); setData(data);
setDayIndex(data.dayIndex); const dayIndex = getDayOfWeekIndex(new Date(data.date));
dayIndexRef.current = data.dayIndex; setDayIndex(dayIndex);
dayIndexRef.current = dayIndex;
setFood(data.menus); setFood(data.menus);
} }
}).catch(e => { }).catch(e => {
@@ -103,6 +107,8 @@ function App() {
if (!auth?.login) { if (!auth?.login) {
return return
} }
setTodayDayIndex(getDayOfWeekIndex(new Date()));
setIsTodayWeekend(getIsWeekend(new Date()));
getData({ query: { dayIndex: dayIndex } }).then(response => { getData({ query: { dayIndex: dayIndex } }).then(response => {
const data = response.data; const data = response.data;
setData(data); setData(data);
@@ -125,7 +131,7 @@ function App() {
socket.on(EVENT_MESSAGE, (newData: ClientData) => { socket.on(EVENT_MESSAGE, (newData: ClientData) => {
// console.log("Přijata nová data ze socketu", newData); // console.log("Přijata nová data ze socketu", newData);
// Aktualizujeme pouze, pokud jsme dostali data pro den, který máme aktuálně zobrazený // Aktualizujeme pouze, pokud jsme dostali data pro den, který máme aktuálně zobrazený
if (dayIndexRef.current == null || newData.dayIndex === dayIndexRef.current) { if (dayIndexRef.current == null || getDayOfWeekIndex(new Date(newData.date)) === dayIndexRef.current) {
setData(newData); setData(newData);
} }
}); });
@@ -141,6 +147,16 @@ function App() {
if (!auth?.login) { if (!auth?.login) {
return return
} }
// TODO tohle občas náhodně nezafunguje, nutno přepsat, viz https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780
// TODO nutno opravit
// if (data?.choices && choiceRef.current) {
// for (let entry of Object.entries(data.choices)) {
// if (entry[1].includes(auth.login)) {
// const value = entry[0] as any as number; // TODO tohle je absurdní
// choiceRef.current.value = Object.values(Locations)[value];
// }
// }
// }
}, [auth, auth?.login, data?.choices]) }, [auth, auth?.login, data?.choices])
// Reference na mojí objednávku // Reference na mojí objednávku
@@ -204,7 +220,7 @@ function App() {
const doAddClickFoodChoice = async (location: LunchChoice, foodIndex?: number) => { const doAddClickFoodChoice = async (location: LunchChoice, foodIndex?: number) => {
if (document.getSelection()?.type !== 'Range') { // pouze pokud se nejedná o výběr textu if (document.getSelection()?.type !== 'Range') { // pouze pokud se nejedná o výběr textu
if (canChangeChoice && auth?.login) { if (auth?.login) {
await addChoice({ body: { locationKey: location, foodIndex, dayIndex } }); await addChoice({ body: { locationKey: location, foodIndex, dayIndex } });
} }
} }
@@ -212,7 +228,7 @@ function App() {
const doAddChoice = async (event: React.ChangeEvent<HTMLSelectElement>) => { const doAddChoice = async (event: React.ChangeEvent<HTMLSelectElement>) => {
const locationKey = event.target.value as LunchChoice; const locationKey = event.target.value as LunchChoice;
if (canChangeChoice && auth?.login) { if (auth?.login) {
await addChoice({ body: { locationKey, dayIndex } }); await addChoice({ body: { locationKey, dayIndex } });
if (foodChoiceRef.current?.value) { if (foodChoiceRef.current?.value) {
foodChoiceRef.current.value = ""; foodChoiceRef.current.value = "";
@@ -274,12 +290,6 @@ function App() {
} }
} }
const markAsBuyer = async () => {
if (auth?.login) {
await setBuyer();
}
}
const pizzaSuggestions = useMemo(() => { const pizzaSuggestions = useMemo(() => {
if (!data?.pizzaList) { if (!data?.pizzaList) {
return []; return [];
@@ -300,7 +310,7 @@ function App() {
const handlePizzaChange = async (value: SelectedOptionValue | SelectedOptionValue[]) => { const handlePizzaChange = async (value: SelectedOptionValue | SelectedOptionValue[]) => {
if (auth?.login && data?.pizzaList) { if (auth?.login && data?.pizzaList) {
if (typeof value !== 'string') { if (typeof value !== 'string') {
throw new TypeError('Nepodporovaný typ hodnoty: ' + typeof value); throw Error('Nepodporovaný typ hodnoty');
} }
const s = value.split('|'); const s = value.split('|');
const pizzaIndex = Number.parseInt(s[0]); const pizzaIndex = Number.parseInt(s[0]);
@@ -321,6 +331,30 @@ function App() {
updatePizzaDayNote({ body: { note: pizzaPoznamkaRef.current?.value } }); updatePizzaDayNote({ body: { note: pizzaPoznamkaRef.current?.value } });
} }
// const addToCart = async () => {
// TODO aktuálně nefunkční - nedokážeme poslat PHPSESSIONID cookie
// if (data?.pizzaDay?.orders) {
// for (const order of data?.pizzaDay?.orders) {
// for (const pizzaOrder of order.pizzaList) {
// const url = 'https://www.pizzachefie.cz/pridat.html';
// const payload = new URLSearchParams();
// payload.append('varId', pizzaOrder.varId.toString());
// await fetch(url, {
// method: "POST",
// mode: "no-cors",
// cache: "no-cache",
// credentials: "same-origin",
// headers: {
// 'Content-Type': 'application/x-www-form-urlencoded',
// },
// body: payload,
// })
// }
// }
// // TODO otevřít košík v nové záložce
// }
// }
const handleChangeDepartureTime = async (event: React.ChangeEvent<HTMLSelectElement>) => { const handleChangeDepartureTime = async (event: React.ChangeEvent<HTMLSelectElement>) => {
if (foodChoiceList?.length && choiceRef.current?.value) { if (foodChoiceList?.length && choiceRef.current?.value) {
await changeDepartureTime({ body: { time: event.target.value as DepartureTime, dayIndex } }); await changeDepartureTime({ body: { time: event.target.value as DepartureTime, dayIndex } });
@@ -344,53 +378,41 @@ function App() {
const renderFoodTable = (location: Restaurant, menu: RestaurantDayMenu) => { const renderFoodTable = (location: Restaurant, menu: RestaurantDayMenu) => {
let content; let content;
if (menu?.closed) { if (menu?.closed) {
content = <div className="restaurant-closed">Zavřeno</div> content = <h3>Zavřeno</h3>
} else if (menu?.food?.length && menu.food.length > 0) { } else if (menu?.food?.length && menu.food.length > 0) {
const hideSoups = settings?.hideSoups; const hideSoups = settings?.hideSoups;
content = <Table className="food-table"> content = <Table striped bordered hover>
<tbody style={{ cursor: canChangeChoice ? 'pointer' : 'default' }}> <tbody style={{ cursor: 'pointer' }}>
{menu.food.map((f: Food, index: number) => {menu.food.map((f: Food, index: number) =>
(!hideSoups || !f.isSoup) && (!hideSoups || !f.isSoup) &&
<tr key={f.name} onClick={() => doAddClickFoodChoice(location, index)}> <tr key={f.name} onClick={() => doAddClickFoodChoice(location, index)}>
<td>{f.amount}</td>
<td> <td>
<div className="food-name">
{f.name} {f.name}
{f.allergens && f.allergens.length > 0 && ( {f.allergens && f.allergens.length > 0 && (
<span className="food-allergens"> <> ({f.allergens.map((a, idx) => (
{' '}({f.allergens.map((a, idx) => (
<span key={a}> <span key={a}>
<span className="allergen-link" title={ALLERGENS[a]} onClick={e => { <span title={ALLERGENS[a]} style={{ cursor: 'help', textDecoration: 'underline' }} onClick={e => {
e.stopPropagation(); e.stopPropagation();
window.open(LINK_ALLERGENS, '_blank'); window.open(LINK_ALLERGENS, '_blank');
}}>{a}</span> }}>{a}</span>
{idx < f.allergens!.length - 1 && ','} {idx < f.allergens!.length - 1 && ','}
</span> </span>
))}) ))})</>
</span>
)} )}
</div>
<div className="food-meta">
{f.amount && f.amount !== '-' && <span className="food-amount">{f.amount}</span>}
<span className="food-price">{f.price}</span>
</div>
</td> </td>
<td>{f.price}</td>
</tr> </tr>
)} )}
</tbody> </tbody>
</Table> </Table>
} else { } else {
content = <div className="restaurant-error">Chyba načtení dat</div> content = <h3>Chyba načtení dat</h3>
} }
return <Col md={6} lg={3} className='mt-3'> return <Col md={12} lg={3} className='mt-3'>
<div className="restaurant-card"> <h3 style={{ cursor: 'pointer' }} onClick={() => doAddClickFoodChoice(location)}>{getLunchChoiceName(location)}</h3>
<div className="restaurant-header" style={{ cursor: canChangeChoice ? 'pointer' : 'default' }} onClick={() => doAddClickFoodChoice(location)}> {menu?.lastUpdate && <small>Poslední aktualizace: {getHumanDateTime(new Date(menu.lastUpdate))}</small>}
<h3>
{getLunchChoiceName(location)}
</h3>
{menu?.lastUpdate && <small>Aktualizace: {getHumanDateTime(new Date(menu.lastUpdate))}</small>}
</div>
{content} {content}
</div>
</Col> </Col>
} }
@@ -423,39 +445,50 @@ function App() {
} }
const noOrders = data?.pizzaDay?.orders?.length === 0; const noOrders = data?.pizzaDay?.orders?.length === 0;
const canChangeChoice = dayIndex == null || data.todayDayIndex == null || dayIndex >= data.todayDayIndex; const canChangeChoice = dayIndex == null || dayIndex >= todayDayIndex;
const { path, url, startOffset, endOffset, duration, ...style } = easterEgg || {}; const { path, url, startOffset, endOffset, duration, ...style } = easterEgg || {};
return ( return (
<div className="app-container"> <div className="app-container">
{easterEgg && eggImage && <img ref={eggRef} alt='' src={URL.createObjectURL(eggImage)} style={{ position: 'absolute', ...EASTER_EGG_STYLE, ...style, animationDuration: `${duration ?? EASTER_EGG_DEFAULT_DURATION}s` }} />} {easterEgg && eggImage && <img ref={eggRef} alt='' src={URL.createObjectURL(eggImage)} style={{ position: 'absolute', ...EASTER_EGG_STYLE, ...style, animationDuration: `${duration ?? EASTER_EGG_DEFAULT_DURATION}s` }} />}
<Header /> <Header dayIndex={dayIndex} />
<div className='wrapper'> <div className='wrapper'>
{data.isWeekend ? <h4>Užívejte víkend :)</h4> : <> {isTodayWeekend ? <h4>Užívejte víkend :)</h4> : <>
<Alert variant={'primary'}>
{/* <img alt="" src='hat.png' style={{ position: "absolute", width: "70px", rotate: "-45deg", left: -40, top: -58 }} />
<img alt="" src='snowman.png' style={{ position: "absolute", height: "110px", right: 10, top: 5 }} /> */}
Poslední změny:
<ul>
<li>Zobrazení alergenu při najetí myší a proklik na seznam alergenů</li>
<li>Přesun přenačtení menu do samostatného dialogu</li>
<li>Podzimní atmosféra</li>
</ul>
</Alert>
{dayIndex != null && {dayIndex != null &&
<div className='day-navigator'> <div className='day-navigator'>
<span title='Předchozí den'> <span title='Předchozí den'>
<FontAwesomeIcon icon={faChevronLeft} style={{ cursor: "pointer", visibility: dayIndex > 0 ? "initial" : "hidden" }} onClick={() => handleDayChange(dayIndex - 1)} /> <FontAwesomeIcon icon={faChevronLeft} style={{ cursor: "pointer", visibility: dayIndex > 0 ? "initial" : "hidden" }} onClick={() => handleDayChange(dayIndex - 1)} />
</span> </span>
<h1 className={`title ${dayIndex !== data.todayDayIndex ? 'text-muted' : ''}`}>{data.date}</h1> <h1 className='title' style={{ color: dayIndex === todayDayIndex ? 'black' : 'gray' }}>{getHumanDate(new Date(data.date))}</h1>
<span title="Následující den"> <span title="Následující den">
<FontAwesomeIcon icon={faChevronRight} style={{ cursor: "pointer", visibility: dayIndex < 4 ? "initial" : "hidden" }} onClick={() => handleDayChange(dayIndex + 1)} /> <FontAwesomeIcon icon={faChevronRight} style={{ cursor: "pointer", visibility: dayIndex < 4 ? "initial" : "hidden" }} onClick={() => handleDayChange(dayIndex + 1)} />
</span> </span>
</div> </div>
} }
<Row className='food-tables'> <Row className='food-tables'>
{Object.keys(Restaurant).map(key => { {/* TODO zjednodušit, stačí iterovat klíče typu Restaurant */}
const locationKey = key as Restaurant; {food['SLADOVNICKA'] && renderFoodTable('SLADOVNICKA', food['SLADOVNICKA'])}
return food[locationKey] && renderFoodTable(locationKey, food[locationKey]); {food['TECHTOWER'] && renderFoodTable('TECHTOWER', food['TECHTOWER'])}
})} {food['ZASTAVKAUMICHALA'] && renderFoodTable('ZASTAVKAUMICHALA', food['ZASTAVKAUMICHALA'])}
{food['SENKSERIKOVA'] && renderFoodTable('SENKSERIKOVA', food['SENKSERIKOVA'])}
</Row> </Row>
<div className='content-wrapper'> <div className='content-wrapper'>
<div className='content'> <div className='content'>
{canChangeChoice && <div className="choice-section fade-in"> {canChangeChoice && <>
<p>{`Jak to ${dayIndex == null || dayIndex === data.todayDayIndex ? 'dnes' : 'tento den'} vidíš s obědem?`}</p> <p>{`Jak to ${dayIndex == null || dayIndex === todayDayIndex ? 'dnes' : 'tento den'} vidíš s obědem?`}</p>
<Form.Select ref={choiceRef} onChange={doAddChoice}> <Form.Select ref={choiceRef} onChange={doAddChoice}>
<option value="">Vyber možnost...</option> <option></option>
{Object.entries(LunchChoice) {Object.entries(LunchChoice)
.filter(entry => { .filter(entry => {
const locationKey = entry[0] as Restaurant; const locationKey = entry[0] as Restaurant;
@@ -465,71 +498,56 @@ function App() {
</Form.Select> </Form.Select>
<small>Je možné vybrat jen jednu možnost. Výběr jiné odstraní předchozí.</small> <small>Je možné vybrat jen jednu možnost. Výběr jiné odstraní předchozí.</small>
{foodChoiceList && !closed && <> {foodChoiceList && !closed && <>
<p className="mt-3">Na co dobrého? <small style={{ color: 'var(--luncher-text-muted)' }}>(nepovinné)</small></p> <p style={{ marginTop: "10px" }}>Na co dobrého? <small>(nepovinné)</small></p>
<Form.Select ref={foodChoiceRef} onChange={doAddFoodChoice}> <Form.Select ref={foodChoiceRef} onChange={doAddFoodChoice}>
<option value="">Vyber jídlo...</option> <option></option>
{foodChoiceList.map((food, index) => <option key={food.name} value={index}>{food.name}</option>)} {foodChoiceList.map((food, index) => <option key={food.name} value={index}>{food.name}</option>)}
</Form.Select> </Form.Select>
</>} </>}
{foodChoiceList && !closed && <> {foodChoiceList && !closed && <>
<p className="mt-3">V kolik hodin preferuješ odchod?</p> <p style={{ marginTop: "10px" }}>V kolik hodin preferuješ odchod?</p>
<Form.Select ref={departureChoiceRef} onChange={handleChangeDepartureTime}> <Form.Select ref={departureChoiceRef} onChange={handleChangeDepartureTime}>
<option value="">Vyber čas...</option> <option></option>
{Object.values(DepartureTime) {Object.values(DepartureTime)
.filter(time => isInTheFuture(time)) .filter(time => isInTheFuture(time))
.map(time => <option key={time} value={time}>{time}</option>)} .map(time => <option key={time} value={time}>{time}</option>)}
</Form.Select> </Form.Select>
</>} </>}
</div>} </>}
{Object.keys(data.choices).length > 0 ? {Object.keys(data.choices).length > 0 ?
<Table className='choices-table mt-4 fade-in'> <Table bordered className='mt-5'>
<tbody> <tbody>
{Object.keys(data.choices).map(key => { {Object.keys(data.choices).map(key => {
const locationKey = key as LunchChoice; const locationKey = key as LunchChoice;
const locationName = getLunchChoiceName(locationKey); const locationName = getLunchChoiceName(locationKey);
const loginObject = data.choices[locationKey]; const loginObject = data.choices[locationKey];
if (!loginObject) { if (!loginObject) {
return null; return;
} }
const locationLoginList = Object.entries(loginObject); const locationLoginList = Object.entries(loginObject);
const locationPickCount = locationLoginList.length const locationPickCount = locationLoginList.length
return ( return (
<tr key={key}> <tr key={key}>
<td> {(locationPickCount ?? 0) > 1 ? (
{locationName} <td>{locationName} ({locationPickCount})</td>
{(locationPickCount ?? 0) > 1 && <span className="ms-1">({locationPickCount})</span>} ) : (
</td> <td>{locationName}</td>)}
<td className='p-0'> <td className='p-0'>
<Table className="nested-table"> <Table>
<tbody> <tbody>
{locationLoginList.map((entry: [string, UserLunchChoice]) => { {locationLoginList.map((entry: [string, UserLunchChoice], index) => {
const login = entry[0]; const login = entry[0];
const userPayload = entry[1]; const userPayload = entry[1];
const userChoices = userPayload?.selectedFoods; const userChoices = userPayload?.selectedFoods;
const trusted = userPayload?.trusted || false; const trusted = userPayload?.trusted || false;
const isBuyer = userPayload?.isBuyer || false;
return <tr key={entry[0]}> return <tr key={entry[0]}>
<td> <td>
<div className="user-row">
<div className="user-info">
{trusted && <span className='trusted-icon' title='Uživatel ověřený doménovým přihlášením'> {trusted && <span className='trusted-icon' title='Uživatel ověřený doménovým přihlášením'>
<FontAwesomeIcon icon={faCircleCheck} style={{ cursor: "help" }} /> <FontAwesomeIcon icon={faCircleCheck} style={{ cursor: "help" }} />
</span>} </span>}
<strong>{login}</strong> {login}
{userPayload.departureTime && <small className="ms-2" style={{ color: 'var(--luncher-text-muted)' }}>({userPayload.departureTime})</small>} {userPayload.departureTime && <small> ({userPayload.departureTime})</small>}
{userPayload.note && <span className="ms-2" style={{ fontSize: 'small', color: 'var(--luncher-text-secondary)' }}>({userPayload.note})</span>} {userPayload.note && <span style={{ fontSize: 'small' }}> ({userPayload.note})</span>}
</div>
<div className="user-actions">
{login === auth.login && canChangeChoice && locationKey === LunchChoice.OBJEDNAVAM && <span title='Označit/odznačit se jako objednávající'>
<FontAwesomeIcon onClick={() => {
markAsBuyer();
}} icon={faBasketShopping} className={isBuyer ? 'buyer-icon' : 'action-icon'} style={{cursor: 'pointer'}} />
</span>}
{login !== auth.login && locationKey === LunchChoice.OBJEDNAVAM && isBuyer && <span title='Objednávající'>
<FontAwesomeIcon onClick={() => {
copyNote(userPayload.note!);
}} icon={faBasketShopping} className='buyer-icon' />
</span>}
{login !== auth.login && canChangeChoice && userPayload?.note?.length && <span title='Převzít poznámku'> {login !== auth.login && canChangeChoice && userPayload?.note?.length && <span title='Převzít poznámku'>
<FontAwesomeIcon onClick={() => { <FontAwesomeIcon onClick={() => {
copyNote(userPayload.note!); copyNote(userPayload.note!);
@@ -545,26 +563,24 @@ function App() {
doRemoveChoices(key as LunchChoice); doRemoveChoices(key as LunchChoice);
}} className='action-icon' icon={faTrashCan} /> }} className='action-icon' icon={faTrashCan} />
</span>} </span>}
</div> </td>
</div> {userChoices?.length && food ? <td>
{userChoices && userChoices.length > 0 && food && ( <ul>
<div className="food-choices"> {userChoices?.map(foodIndex => {
{userChoices.map(foodIndex => {
const restaurantKey = key as Restaurant; const restaurantKey = key as Restaurant;
const foodName = food[restaurantKey]?.food?.[foodIndex].name; const foodName = food[restaurantKey]?.food?.[foodIndex].name;
return <div key={foodIndex} className="food-choice-item"> return <li key={foodIndex}>
<span className="food-choice-name">{foodName}</span> {foodName}
{login === auth.login && canChangeChoice && {login === auth.login && canChangeChoice &&
<span title={`Odstranit ${foodName}`}> <span title={`Odstranit ${foodName}`}>
<FontAwesomeIcon onClick={() => { <FontAwesomeIcon onClick={() => {
doRemoveFoodChoice(restaurantKey, foodIndex); doRemoveFoodChoice(restaurantKey, foodIndex);
}} className='action-icon' icon={faTrashCan} /> }} className='action-icon' icon={faTrashCan} />
</span>} </span>}
</div> </li>
})} })}
</div> </ul>
)} </td> : null}
</td>
</tr> </tr>
} }
)} )}
@@ -576,94 +592,94 @@ function App() {
)} )}
</tbody> </tbody>
</Table> </Table>
: <div className='no-votes mt-4'>Zatím nikdo nehlasoval...</div> : <div className='mt-5'><i>Zatím nikdo nehlasoval...</i></div>
} }
</div> </div>
{dayIndex === data.todayDayIndex && {dayIndex === todayDayIndex &&
<div className='pizza-section fade-in'> <div className='mt-5'>
{!data.pizzaDay && {!data.pizzaDay &&
<> <div style={{ textAlign: 'center' }}>
<h3>Pizza Day</h3>
<p>Pro dnešní den není aktuálně založen Pizza day.</p> <p>Pro dnešní den není aktuálně založen Pizza day.</p>
{loadingPizzaDay ? {loadingPizzaDay ?
<span style={{ color: 'var(--luncher-primary)' }}> <span>
<FontAwesomeIcon icon={faGear} className='fa-spin me-2' /> Zjišťujeme dostupné pizzy <FontAwesomeIcon icon={faGear} className='fa-spin' /> Zjišťujeme dostupné pizzy
</span> </span>
: :
<div> <>
<Button onClick={async () => { <Button onClick={async () => {
setLoadingPizzaDay(true); setLoadingPizzaDay(true);
await createPizzaDay().then(() => setLoadingPizzaDay(false)); await createPizzaDay().then(() => setLoadingPizzaDay(false));
}}>Založit Pizza day</Button> }}>Založit Pizza day</Button>
<Button variant="outline-primary" onClick={doJdemeObed}>Jdeme na oběd!</Button> <Button onClick={doJdemeObed} style={{ marginLeft: "14px" }}>Jdeme na oběd !</Button>
</div>
}
</> </>
} }
</div>
}
{data.pizzaDay && {data.pizzaDay &&
<> <div>
<h3>Pizza Day</h3> <div style={{ textAlign: 'center' }}>
<h3>Pizza day</h3>
{ {
data.pizzaDay.state === PizzaDayState.CREATED && data.pizzaDay.state === PizzaDayState.CREATED &&
<> <div>
<p> <p>
Pizza Day je založen a spravován uživatelem <strong>{data.pizzaDay.creator}</strong>.<br /> Pizza Day je založen a spravován uživatelem {data.pizzaDay.creator}.<br />
Můžete upravovat své objednávky. Můžete upravovat své objednávky.
</p> </p>
{ {
data.pizzaDay.creator === auth.login && data.pizzaDay.creator === auth.login &&
<div className="mb-4"> <>
<Button variant="danger" title="Smaže kompletně pizza day, včetně dosud zadaných objednávek." onClick={async () => { <Button className='danger mb-3' title="Smaže kompletně pizza day, včetně dosud zadaných objednávek." onClick={async () => {
await deletePizzaDay(); await deletePizzaDay();
}}>Smazat Pizza day</Button> }}>Smazat Pizza day</Button>
<Button title={noOrders ? "Nelze uzamknout - neexistuje žádná objednávka" : "Zamezí přidávat/odebírat objednávky. Použij před samotným objednáním, aby již nemohlo docházet ke změnám."} disabled={noOrders} onClick={async () => { <Button className='mb-3' style={{ marginLeft: '20px' }} title={noOrders ? "Nelze uzamknout - neexistuje žádná objednávka" : "Zamezí přidávat/odebírat objednávky. Použij před samotným objednáním, aby již nemohlo docházet ke změnám."} disabled={noOrders} onClick={async () => {
await lockPizzaDay(); await lockPizzaDay();
}}>Uzamknout</Button> }}>Uzamknout</Button>
</div>
}
</> </>
} }
</div>
}
{ {
data.pizzaDay.state === PizzaDayState.LOCKED && data.pizzaDay.state === PizzaDayState.LOCKED &&
<> <div>
<p>Objednávky jsou uzamčeny uživatelem <strong>{data.pizzaDay.creator}</strong></p> <p>Objednávky jsou uzamčeny uživatelem {data.pizzaDay.creator}</p>
{data.pizzaDay.creator === auth.login && {data.pizzaDay.creator === auth.login &&
<div className="mb-4"> <>
<Button variant="secondary" title="Umožní znovu editovat objednávky." onClick={async () => { <Button className='danger mb-3' title="Umožní znovu editovat objednávky." onClick={async () => {
await unlockPizzaDay(); await unlockPizzaDay();
}}>Odemknout</Button> }}>Odemknout</Button>
<Button title={noOrders ? "Nelze objednat - neexistuje žádná objednávka" : "Použij po objednání. Objednávky zůstanou zamčeny."} disabled={noOrders} onClick={async () => { <Button className='danger mb-3' style={{ marginLeft: '20px' }} title={noOrders ? "Nelze objednat - neexistuje žádná objednávka" : "Použij po objednání. Objednávky zůstanou zamčeny."} disabled={noOrders} onClick={async () => {
await finishOrder(); await finishOrder();
}}>Objednáno</Button> }}>Objednáno</Button>
</div>
}
</> </>
} }
</div>
}
{ {
data.pizzaDay.state === PizzaDayState.ORDERED && data.pizzaDay.state === PizzaDayState.ORDERED &&
<> <div>
<p>Pizzy byly objednány uživatelem <strong>{data.pizzaDay.creator}</strong></p> <p>Pizzy byly objednány uživatelem {data.pizzaDay.creator}</p>
{data.pizzaDay.creator === auth.login && {data.pizzaDay.creator === auth.login &&
<div className="mb-4"> <div>
<Button variant="secondary" title="Vrátí stav do předchozího kroku (před objednáním)." onClick={async () => { <Button className='danger mb-3' title="Vrátí stav do předchozího kroku (před objednáním)." onClick={async () => {
await lockPizzaDay(); await lockPizzaDay();
}}>Vrátit do "uzamčeno"</Button> }}>Vrátit do "uzamčeno"</Button>
<Button title="Nastaví stav na 'Doručeno' - koncový stav." onClick={async () => { <Button className='danger mb-3' style={{ marginLeft: '20px' }} title="Nastaví stav na 'Doručeno' - koncový stav." onClick={async () => {
await finishDelivery({ body: { bankAccount: settings?.bankAccount, bankAccountHolder: settings?.holderName } }); await finishDelivery({ body: { bankAccount: settings?.bankAccount, bankAccountHolder: settings?.holderName } });
}}>Doručeno</Button> }}>Doručeno</Button>
</div> </div>
} }
</> </div>
} }
{ {
data.pizzaDay.state === PizzaDayState.DELIVERED && data.pizzaDay.state === PizzaDayState.DELIVERED &&
<p> <div>
Pizzy byly doručeny. <p>{`Pizzy byly doručeny.${myOrder?.hasQr ? ` Objednávku můžete uživateli ${data.pizzaDay.creator} uhradit pomocí QR kódu níže.` : ''}`}</p>
{myOrder?.hasQr ? ` Objednávku můžete uživateli ${data.pizzaDay.creator} uhradit pomocí QR kódu níže.` : ''} </div>
</p>
} }
</div>
{data.pizzaDay.state === PizzaDayState.CREATED && {data.pizzaDay.state === PizzaDayState.CREATED &&
<div className="pizza-order-form"> <div style={{ textAlign: 'center' }}>
<SelectSearch <SelectSearch
search={true} search={true}
options={pizzaSuggestions} options={pizzaSuggestions}
@@ -672,41 +688,39 @@ function App() {
onBlur={_ => { }} onBlur={_ => { }}
onFocus={_ => { }} onFocus={_ => { }}
/> />
<div className="d-flex align-items-center gap-2"> Poznámka: <input ref={pizzaPoznamkaRef} className='mt-3' type="text" onKeyDown={event => {
<label style={{ color: 'var(--luncher-text-secondary)' }}>Poznámka:</label>
<input ref={pizzaPoznamkaRef} type="text" placeholder="Např. bez cibule" onKeyDown={event => {
if (event.key === 'Enter') { if (event.key === 'Enter') {
handlePizzaPoznamkaChange(); handlePizzaPoznamkaChange();
} }
event.stopPropagation(); event.stopPropagation();
}} /> }} />
<Button <Button
style={{ marginLeft: '20px' }}
disabled={!myOrder?.pizzaList?.length} disabled={!myOrder?.pizzaList?.length}
onClick={handlePizzaPoznamkaChange}> onClick={handlePizzaPoznamkaChange}>
Uložit Uložit
</Button> </Button>
</div> </div>
</div>
} }
<PizzaOrderList state={data.pizzaDay.state!} orders={data.pizzaDay.orders!} onDelete={handlePizzaDelete} creator={data.pizzaDay.creator!} /> <PizzaOrderList state={data.pizzaDay.state!} orders={data.pizzaDay.orders!} onDelete={handlePizzaDelete} creator={data.pizzaDay.creator!} />
{ {
data.pizzaDay.state === PizzaDayState.DELIVERED && myOrder?.hasQr && data.pizzaDay.state === PizzaDayState.DELIVERED && myOrder?.hasQr ?
<div className='qr-code'> <div className='qr-code'>
<h3>QR platba</h3> <h3>QR platba</h3>
<img src={`/api/qr?login=${auth.login}`} alt='QR kód' /> <img src={`/api/qr?login=${auth.login}`} alt='QR kód' />
</div> </div> : null
} }
</> </div>
} }
</div> </div>
} }
</div> </div>
</> || "Jejda, něco se nám nepovedlo :("} </> || "Jejda, něco se nám nepovedlo :("}
</div> </div>
{/* <FallingLeaves <FallingLeaves
numLeaves={LEAF_PRESETS.NORMAL} numLeaves={LEAF_PRESETS.NORMAL}
leafVariants={LEAF_COLOR_THEMES.AUTUMN} leafVariants={LEAF_COLOR_THEMES.AUTUMN}
/> */} />
<Footer /> <Footer />
<NoteModal isOpen={noteModalOpen} onClose={() => setNoteModalOpen(false)} onSave={saveNote} /> <NoteModal isOpen={noteModalOpen} onClose={() => setNoteModalOpen(false)} onSave={saveNote} />
</div> </div>

2
client/src/AppRoutes.tsx
View File

@@ -1,7 +1,6 @@
import { Routes, Route } from "react-router-dom"; import { Routes, Route } from "react-router-dom";
import { ProvideSettings } from "./context/settings"; import { ProvideSettings } from "./context/settings";
// import Snowfall from "react-snowfall"; // import Snowfall from "react-snowfall";
import { SnowOverlay } from 'react-snow-overlay';
import { ToastContainer } from "react-toastify"; import { ToastContainer } from "react-toastify";
import { SocketContext, socket } from "./context/socket"; import { SocketContext, socket } from "./context/socket";
import StatsPage from "./pages/StatsPage"; import StatsPage from "./pages/StatsPage";
@@ -23,7 +22,6 @@ export default function AppRoutes() {
width: '100vw', width: '100vw',
height: '100vh' height: '100vh'
}} /> */} }} /> */}
<SnowOverlay color={'rgba(240, 240, 240, 0.9)'} disabledOnSingleCpuDevices={true} />
<App /> <App />
</> </>
<ToastContainer /> <ToastContainer />

92
client/src/Login.css
View File

@@ -1,89 +1,13 @@
.login-page { .login {
min-height: 100vh; height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--luncher-bg);
padding: 24px;
}
.login-card {
background: var(--luncher-bg-card);
border-radius: var(--luncher-radius-xl);
box-shadow: var(--luncher-shadow-lg);
padding: 48px;
max-width: 420px;
width: 100%;
text-align: center;
border: 1px solid var(--luncher-border-light);
}
.login-logo {
font-size: 2.5rem;
font-weight: 700;
color: var(--luncher-text);
margin-bottom: 8px;
letter-spacing: -0.5px;
}
.login-subtitle {
color: var(--luncher-text-secondary);
font-size: 1rem;
margin-bottom: 40px;
line-height: 1.5;
}
.login-form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px; text-align: center;
justify-content: center;
} }
.login-form label { .login-inner {
display: block; display: flex;
text-align: left; flex-direction: column;
font-weight: 500; align-items: center;
color: var(--luncher-text);
margin-bottom: 8px;
}
.login-form .hint {
font-size: 0.85rem;
color: var(--luncher-text-muted);
margin-top: 8px;
text-align: left;
line-height: 1.5;
}
.login-form input[type="text"] {
width: 100%;
padding: 14px 18px;
font-size: 1rem;
border: 2px solid var(--luncher-border);
border-radius: var(--luncher-radius-sm);
background: var(--luncher-bg);
color: var(--luncher-text);
transition: var(--luncher-transition);
}
.login-form input[type="text"]:hover {
border-color: var(--luncher-text-muted);
}
.login-form input[type="text"]:focus {
border-color: var(--luncher-primary);
box-shadow: 0 0 0 3px var(--luncher-primary-light);
outline: none;
}
.login-form input[type="text"]::placeholder {
color: var(--luncher-text-muted);
}
.login-form .btn {
width: 100%;
padding: 14px 24px;
font-size: 1rem;
font-weight: 600;
margin-top: 8px;
} }

36
client/src/Login.tsx
View File

@@ -26,7 +26,7 @@ export default function Login() {
}, [auth]); }, [auth]);
const doLogin = useCallback(async () => { const doLogin = useCallback(async () => {
const length = loginRef?.current?.value.length && loginRef.current.value.replaceAll(/\s/g, '').length const length = loginRef?.current?.value.length && loginRef.current.value.replace(/\s/g, '').length
if (length) { if (length) {
const response = await login({ body: { login: loginRef.current?.value } }); const response = await login({ body: { login: loginRef.current?.value } });
if (response.data) { if (response.data) {
@@ -36,35 +36,21 @@ export default function Login() {
}, [auth]); }, [auth]);
if (!auth?.login) { if (!auth?.login) {
return ( return <div className='login'>
<div className='login-page'> <h1>Luncher</h1>
<div className='login-card'> <h4 style={{ marginBottom: "50px" }}>Aplikace pro profesionální management obědů</h4>
<h1 className='login-logo'>Luncher</h1> <div className='login-inner'>
<p className='login-subtitle'>Aplikace pro profesionální management obědů</p> <p style={{ fontSize: "12px", marginTop: "10px" }}>
<div className='login-form'> Zobrazované jméno by mělo být vaše jméno nebo přezdívka, pod kterou vás kolegové dokáží snadno identifikovat. Jméno je možné kdykoli změnit.
<div> </p>
<label htmlFor="login-input">Zobrazované jméno</label> Zobrazované jméno: <input style={{ marginTop: "10px" }} ref={loginRef} type='text' onKeyDown={event => {
<input
id="login-input"
ref={loginRef}
type='text'
placeholder="Např. Jan Novák"
onKeyDown={event => {
if (event.key === 'Enter') { if (event.key === 'Enter') {
doLogin() doLogin()
} }
}} }} />
/> <Button onClick={doLogin} style={{ marginTop: "20px" }}>Uložit</Button>
<p className='hint'>
Zadejte jméno nebo přezdívku, pod kterou vás kolegové snadno identifikují.
Jméno je možné kdykoli změnit.
</p>
</div>
<Button onClick={doLogin}>Pokračovat</Button>
</div> </div>
</div> </div>
</div>
);
} }
return <div>Neplatný stav</div> return <div>Neplatný stav</div>
} }

10
client/src/Utils.tsx
View File

@@ -73,16 +73,22 @@ export const getDayOfWeekIndex = (date: Date) => {
return (((date.getDay() - 1) % 7) + 7) % 7; return (((date.getDay() - 1) % 7) + 7) % 7;
} }
/** Vrátí true, pokud je předané datum o víkendu. */
export function getIsWeekend(date: Date) {
const index = getDayOfWeekIndex(date);
return index == 5 || index == 6;
}
/** Vrátí první pracovní den v týdnu předaného data. */ /** Vrátí první pracovní den v týdnu předaného data. */
export function getFirstWorkDayOfWeek(date: Date) { export function getFirstWorkDayOfWeek(date: Date) {
const firstDay = new Date(date); const firstDay = new Date(date.getTime());
firstDay.setDate(date.getDate() - getDayOfWeekIndex(date)); firstDay.setDate(date.getDate() - getDayOfWeekIndex(date));
return firstDay; return firstDay;
} }
/** Vrátí poslední pracovní den v týdnu předaného data. */ /** Vrátí poslední pracovní den v týdnu předaného data. */
export function getLastWorkDayOfWeek(date: Date) { export function getLastWorkDayOfWeek(date: Date) {
const lastDay = new Date(date); const lastDay = new Date(date.getTime());
lastDay.setDate(date.getDate() + (4 - getDayOfWeekIndex(date))); lastDay.setDate(date.getDate() + (4 - getDayOfWeekIndex(date)));
return lastDay; return lastDay;
} }

20
client/src/components/Footer.tsx
View File

@@ -1,12 +1,12 @@
import { Navbar } from "react-bootstrap";
export default function Footer() { export default function Footer() {
return ( return <Navbar className="text-light" variant='dark' expand="lg" style={{
<footer className="footer"> display: "flex",
<span> justifyContent: "center",
Zdroj. kódy dostupné na{' '} marginTop: "auto", // Pushne footer na spodek
<a href="https://gitea.melancholik.eu/mates/Luncher" target="_blank" rel="noopener noreferrer"> flexShrink: 0 // Zabrání zmenšování při malém obsahu
Gitea }}>
</a> <span>🄯 Žádná práva nevyhrazena. TODO a zdrojové kódy dostupné <a href="https://gitea.melancholik.eu/mates/Luncher">zde</a>.</span>
</span> </Navbar >
</footer>
);
} }

90
client/src/components/Header.tsx
View File

@@ -1,24 +1,21 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Navbar, Nav, NavDropdown, Modal, Button } from "react-bootstrap"; import { Navbar, Nav, NavDropdown } from "react-bootstrap";
import { useAuth } from "../context/auth"; import { useAuth } from "../context/auth";
import SettingsModal from "./modals/SettingsModal"; import SettingsModal from "./modals/SettingsModal";
import { useSettings, ThemePreference } from "../context/settings"; import { useSettings } from "../context/settings";
import FeaturesVotingModal from "./modals/FeaturesVotingModal"; import FeaturesVotingModal from "./modals/FeaturesVotingModal";
import PizzaCalculatorModal from "./modals/PizzaCalculatorModal"; import PizzaCalculatorModal from "./modals/PizzaCalculatorModal";
import RefreshMenuModal from "./modals/RefreshMenuModal"; import RefreshMenuModal from "./modals/RefreshMenuModal";
import GenerateQRModal from "./modals/GenerateQRModal";
import { useNavigate } from "react-router"; import { useNavigate } from "react-router";
import { STATS_URL } from "../AppRoutes"; import { STATS_URL } from "../AppRoutes";
import { FeatureRequest, getVotes, updateVote } from "../../../types"; import { FeatureRequest, getVotes, updateVote } from "../../../types";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
const CHANGELOG = [ type Props = {
"Nový moderní design aplikace", dayIndex?: number;
"Oprava parsování Sladovnické a TechTower", }
"Možnost označit se jako objednávající u volby \"budu objednávat\"",
];
export default function Header() { export default function Header({ dayIndex }: Readonly<Props>) {
const auth = useAuth(); const auth = useAuth();
const settings = useSettings(); const settings = useSettings();
const navigate = useNavigate(); const navigate = useNavigate();
@@ -26,29 +23,9 @@ export default function Header() {
const [votingModalOpen, setVotingModalOpen] = useState<boolean>(false); const [votingModalOpen, setVotingModalOpen] = useState<boolean>(false);
const [pizzaModalOpen, setPizzaModalOpen] = useState<boolean>(false); const [pizzaModalOpen, setPizzaModalOpen] = useState<boolean>(false);
const [refreshMenuModalOpen, setRefreshMenuModalOpen] = useState<boolean>(false); const [refreshMenuModalOpen, setRefreshMenuModalOpen] = useState<boolean>(false);
const [changelogModalOpen, setChangelogModalOpen] = useState<boolean>(false); const [generateQRModalOpen, setGenerateQRModalOpen] = useState<boolean>(false);
const [featureVotes, setFeatureVotes] = useState<FeatureRequest[] | undefined>([]); const [featureVotes, setFeatureVotes] = useState<FeatureRequest[] | undefined>([]);
// Zjistíme aktuální efektivní téma (pro zobrazení správné ikony)
const [effectiveTheme, setEffectiveTheme] = useState<'light' | 'dark'>('light');
useEffect(() => {
const updateEffectiveTheme = () => {
if (settings?.themePreference === 'system') {
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
setEffectiveTheme(isDark ? 'dark' : 'light');
} else {
setEffectiveTheme(settings?.themePreference || 'light');
}
};
updateEffectiveTheme();
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
mediaQuery.addEventListener('change', updateEffectiveTheme);
return () => mediaQuery.removeEventListener('change', updateEffectiveTheme);
}, [settings?.themePreference]);
useEffect(() => { useEffect(() => {
if (auth?.login) { if (auth?.login) {
getVotes().then(response => { getVotes().then(response => {
@@ -73,10 +50,8 @@ export default function Header() {
setRefreshMenuModalOpen(false); setRefreshMenuModalOpen(false);
} }
const toggleTheme = () => { const closeGenerateQRModal = () => {
// Přepínáme mezi light a dark (ignorujeme system pro jednoduchost) setGenerateQRModalOpen(false);
const newTheme: ThemePreference = effectiveTheme === 'dark' ? 'light' : 'dark';
settings?.setThemePreference(newTheme);
} }
const isValidInteger = (str: string) => { const isValidInteger = (str: string) => {
@@ -89,19 +64,19 @@ export default function Header() {
return n !== Infinity && String(n) === str && n >= 0; return n !== Infinity && String(n) === str && n >= 0;
} }
const saveSettings = (bankAccountNumber?: string, bankAccountHolderName?: string, hideSoupsOption?: boolean, themePreference?: ThemePreference) => { const saveSettings = (bankAccountNumber?: string, bankAccountHolderName?: string, hideSoupsOption?: boolean) => {
if (bankAccountNumber) { if (bankAccountNumber) {
try { try {
// Validace kódu banky // Validace kódu banky
if (!bankAccountNumber.includes('/')) { if (bankAccountNumber.indexOf('/') < 0) {
throw new Error("Číslo účtu neobsahuje lomítko/kód banky") throw Error("Číslo účtu neobsahuje lomítko/kód banky")
} }
const split = bankAccountNumber.split("/"); const split = bankAccountNumber.split("/");
if (split[1].length !== 4) { if (split[1].length !== 4) {
throw new Error("Kód banky musí být 4 číslice") throw Error("Kód banky musí být 4 číslice")
} }
if (!isValidInteger(split[1])) { if (!isValidInteger(split[1])) {
throw new Error("Kód banky není číslo") throw Error("Kód banky není číslo")
} }
// Validace čísla a předčíslí // Validace čísla a předčíslí
@@ -111,7 +86,7 @@ export default function Header() {
cislo = cislo.replace('-', ''); cislo = cislo.replace('-', '');
} }
if (!isValidInteger(cislo)) { if (!isValidInteger(cislo)) {
throw new Error("Předčíslí nebo číslo účtu neobsahuje pouze číslice") throw Error("Předčíslí nebo číslo účtu neobsahuje pouze číslice")
} }
if (cislo.length < 16) { if (cislo.length < 16) {
cislo = cislo.padStart(16, '0'); cislo = cislo.padStart(16, '0');
@@ -124,7 +99,7 @@ export default function Header() {
sum += Number.parseInt(char) * weight sum += Number.parseInt(char) * weight
} }
if (sum % 11 !== 0) { if (sum % 11 !== 0) {
throw new Error("Číslo účtu je neplatné") throw Error("Číslo účtu je neplatné")
} }
} catch (e: any) { } catch (e: any) {
alert(e.message) alert(e.message)
@@ -134,9 +109,6 @@ export default function Header() {
settings?.setBankAccountNumber(bankAccountNumber); settings?.setBankAccountNumber(bankAccountNumber);
settings?.setBankAccountHolderName(bankAccountHolderName); settings?.setBankAccountHolderName(bankAccountHolderName);
settings?.setHideSoupsOption(hideSoupsOption); settings?.setHideSoupsOption(hideSoupsOption);
if (themePreference) {
settings?.setThemePreference(themePreference);
}
closeSettingsModal(); closeSettingsModal();
} }
@@ -156,21 +128,13 @@ export default function Header() {
<Navbar.Toggle aria-controls="basic-navbar-nav" /> <Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav"> <Navbar.Collapse id="basic-navbar-nav">
<Nav className="nav"> <Nav className="nav">
<button
className="theme-toggle"
onClick={toggleTheme}
title={effectiveTheme === 'dark' ? 'Přepnout na světlý režim' : 'Přepnout na tmavý režim'}
aria-label="Přepnout barevný motiv"
>
<FontAwesomeIcon icon={effectiveTheme === 'dark' ? faSun : faMoon} />
</button>
<NavDropdown align="end" title={auth?.login} id="basic-nav-dropdown"> <NavDropdown align="end" title={auth?.login} id="basic-nav-dropdown">
<NavDropdown.Item onClick={() => setSettingsModalOpen(true)}>Nastavení</NavDropdown.Item> <NavDropdown.Item onClick={() => setSettingsModalOpen(true)}>Nastavení</NavDropdown.Item>
<NavDropdown.Item onClick={() => setRefreshMenuModalOpen(true)}>Přenačtení menu</NavDropdown.Item> <NavDropdown.Item onClick={() => setRefreshMenuModalOpen(true)}>Přenačtení menu</NavDropdown.Item>
<NavDropdown.Item onClick={() => setGenerateQRModalOpen(true)}>Generování QR</NavDropdown.Item>
<NavDropdown.Item onClick={() => setVotingModalOpen(true)}>Hlasovat o nových funkcích</NavDropdown.Item> <NavDropdown.Item onClick={() => setVotingModalOpen(true)}>Hlasovat o nových funkcích</NavDropdown.Item>
<NavDropdown.Item onClick={() => setPizzaModalOpen(true)}>Pizza kalkulačka</NavDropdown.Item> <NavDropdown.Item onClick={() => setPizzaModalOpen(true)}>Pizza kalkulačka</NavDropdown.Item>
<NavDropdown.Item onClick={() => navigate(STATS_URL)}>Statistiky</NavDropdown.Item> <NavDropdown.Item onClick={() => navigate(STATS_URL)}>Statistiky</NavDropdown.Item>
<NavDropdown.Item onClick={() => setChangelogModalOpen(true)}>Novinky</NavDropdown.Item>
<NavDropdown.Divider /> <NavDropdown.Divider />
<NavDropdown.Item onClick={auth?.logout}>Odhlásit se</NavDropdown.Item> <NavDropdown.Item onClick={auth?.logout}>Odhlásit se</NavDropdown.Item>
</NavDropdown> </NavDropdown>
@@ -178,24 +142,8 @@ export default function Header() {
</Navbar.Collapse> </Navbar.Collapse>
<SettingsModal isOpen={settingsModalOpen} onClose={closeSettingsModal} onSave={saveSettings} /> <SettingsModal isOpen={settingsModalOpen} onClose={closeSettingsModal} onSave={saveSettings} />
<RefreshMenuModal isOpen={refreshMenuModalOpen} onClose={closeRefreshMenuModal} /> <RefreshMenuModal isOpen={refreshMenuModalOpen} onClose={closeRefreshMenuModal} />
<GenerateQRModal isOpen={generateQRModalOpen} onClose={closeGenerateQRModal} dayIndex={dayIndex} bankAccount={settings?.bankAccount} bankAccountHolder={settings?.holderName} />
<FeaturesVotingModal isOpen={votingModalOpen} onClose={closeVotingModal} onChange={saveFeatureVote} initialValues={featureVotes} /> <FeaturesVotingModal isOpen={votingModalOpen} onClose={closeVotingModal} onChange={saveFeatureVote} initialValues={featureVotes} />
<PizzaCalculatorModal isOpen={pizzaModalOpen} onClose={closePizzaModal} /> <PizzaCalculatorModal isOpen={pizzaModalOpen} onClose={closePizzaModal} />
<Modal show={changelogModalOpen} onHide={() => setChangelogModalOpen(false)}>
<Modal.Header closeButton>
<Modal.Title><h2>Novinky</h2></Modal.Title>
</Modal.Header>
<Modal.Body>
<ul>
{CHANGELOG.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={() => setChangelogModalOpen(false)}>
Zavřít
</Button>
</Modal.Footer>
</Modal>
</Navbar> </Navbar>
} }

10
client/src/components/Loader.tsx
View File

@@ -9,13 +9,11 @@ type Props = {
} }
function Loader(props: Readonly<Props>) { function Loader(props: Readonly<Props>) {
return ( return <div className='loader'>
<div className='loader'> <h1>{props.title ?? 'Prosím čekejte...'}</h1>
<FontAwesomeIcon icon={props.icon} className={`loader-icon ${props.animation ?? ''}`} /> <FontAwesomeIcon icon={props.icon} className={`loader-icon mb-3 ` + (props.animation ?? '')} />
<h2 className='loader-title'>{props.title ?? 'Prosím čekejte...'}</h2> <p>{props.description}</p>
<p className='loader-description'>{props.description}</p>
</div> </div>
);
} }
export default Loader; export default Loader;

38
client/src/components/PizzaOrderList.tsx
View File

@@ -15,43 +15,29 @@ export default function PizzaOrderList({ state, orders, onDelete, creator }: Rea
} }
if (!orders?.length) { if (!orders?.length) {
return <p className="mt-4" style={{ color: 'var(--luncher-text-muted)', fontStyle: 'italic' }}>Zatím žádné objednávky...</p> return <p className="mt-3"><i>Zatím žádné objednávky...</i></p>
} }
const total = orders.reduce((total, order) => total + order.totalPrice, 0); const total = orders.reduce((total, order) => total + order.totalPrice, 0);
return ( return <Table className="mt-3" striped bordered hover>
<div className="mt-4" style={{ <thead>
background: 'var(--luncher-bg-card)',
borderRadius: 'var(--luncher-radius-lg)',
overflow: 'hidden',
border: '1px solid var(--luncher-border-light)',
boxShadow: 'var(--luncher-shadow)'
}}>
<Table className="mb-0" style={{ color: 'var(--luncher-text)' }}>
<thead style={{ background: 'var(--luncher-primary-light)' }}>
<tr> <tr>
<th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none' }}>Jméno</th> <th>Jméno</th>
<th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none' }}>Objednávka</th> <th>Objednávka</th>
<th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none' }}>Poznámka</th> <th>Poznámka</th>
<th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none' }}>Příplatek</th> <th>Příplatek</th>
<th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none', textAlign: 'right' }}>Cena</th> <th>Cena</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{orders.map(order => <tr key={order.customer} style={{ borderColor: 'var(--luncher-border-light)' }}> {orders.map(order => <tr key={order.customer}>
<PizzaOrderRow creator={creator} state={state} order={order} onDelete={onDelete} onFeeModalSave={saveFees} /> <PizzaOrderRow creator={creator} state={state} order={order} onDelete={onDelete} onFeeModalSave={saveFees} />
</tr>)} </tr>)}
<tr style={{ <tr style={{ fontWeight: 'bold' }}>
fontWeight: 700, <td colSpan={4}>Celkem</td>
background: 'var(--luncher-bg-hover)', <td>{`${total} Kč`}</td>
borderTop: '2px solid var(--luncher-border)'
}}>
<td colSpan={4} style={{ padding: '16px 20px', border: 'none' }}>Celkem</td>
<td style={{ padding: '16px 20px', border: 'none', textAlign: 'right', color: 'var(--luncher-primary)' }}>{`${total} Kč`}</td>
</tr> </tr>
</tbody> </tbody>
</Table> </Table>
</div>
);
} }

176
client/src/components/modals/GenerateQRModal.tsx Normal file
View File

@@ -0,0 +1,176 @@
import { useEffect, useState } from "react";
import { Modal, Button, Table, Form, Alert } from "react-bootstrap";
import { ClientData, generateQr, getData } from "../../../../types";
type Props = {
isOpen: boolean,
onClose: () => void,
dayIndex?: number,
bankAccount?: string,
bankAccountHolder?: string,
}
type UserQRData = {
login: string;
selected: boolean;
note: string;
amount: string;
}
/** Modální dialog pro generování QR kódů. */
export default function GenerateQRModal({ isOpen, onClose, dayIndex, bankAccount, bankAccountHolder }: Readonly<Props>) {
const [users, setUsers] = useState<UserQRData[]>([]);
const [loading, setLoading] = useState<boolean>(false);
const isBankDataValid = bankAccount && bankAccountHolder;
useEffect(() => {
if (isOpen) {
setLoading(true);
getData({ query: { dayIndex } }).then(response => {
const data: ClientData = response.data;
const userList: UserQRData[] = [];
// Projdeme všechny volby stravování a získáme uživatele
if (data.choices) {
Object.entries(data.choices).forEach(([locationKey, locationUsers]) => {
Object.keys(locationUsers).forEach(login => {
// Přidáme uživatele pouze pokud tam ještě není
if (!userList.find(u => u.login === login)) {
userList.push({
login,
selected: false,
note: '',
amount: ''
});
}
});
});
}
setUsers(userList);
setLoading(false);
}).catch(() => {
setLoading(false);
});
}
}, [isOpen, dayIndex]);
const handleCheckboxChange = (login: string) => {
setUsers(users.map(u =>
u.login === login ? { ...u, selected: !u.selected } : u
));
};
const handleNoteChange = (login: string, note: string) => {
setUsers(users.map(u =>
u.login === login ? { ...u, note } : u
));
};
const handleAmountChange = (login: string, amount: string) => {
setUsers(users.map(u =>
u.login === login ? { ...u, amount } : u
));
};
const handleGenerate = async () => {
const selectedUsers = users.filter(u => u.selected);
// TODO: Implementovat generování QR kódů
console.log('Generování QR pro:', selectedUsers);
alert('Funkce generování QR bude implementována');
await generateQr({
body: {
bankAccount: bankAccount!,
bankAccountHolder: bankAccountHolder!,
qrCodes: selectedUsers.map(u => ({
login: u.login,
des: u.note,
amount: Number.parseFloat(u.amount)
}))
},
})
};
const handleClose = () => {
setUsers([]);
onClose();
};
return (
<Modal show={isOpen} onHide={handleClose} size="lg">
<Modal.Header closeButton>
<Modal.Title><h2>Generování QR kódů</h2></Modal.Title>
</Modal.Header>
<Modal.Body>
{!isBankDataValid && (
<Alert variant="warning">
<strong>Upozornění:</strong> Pro generování QR kódů je nutné mít v nastavení vyplněné číslo bankovního účtu a jméno majitele účtu.
</Alert>
)}
{loading ? (
<p>Načítání uživatelů...</p>
) : users.length === 0 ? (
<p>Pro aktuální den nemá žádný uživatel vybranou volbu stravování.</p>
) : (
<Table striped bordered hover>
<thead>
<tr>
<th style={{ width: '50px' }}></th>
<th>Uživatel</th>
<th>Poznámka</th>
<th style={{ width: '120px' }}>Částka (Kč)</th>
</tr>
</thead>
<tbody>
{users.map(user => (
<tr key={user.login}>
<td className="text-center">
<Form.Check
type="checkbox"
checked={user.selected}
onChange={() => handleCheckboxChange(user.login)}
/>
</td>
<td>{user.login}</td>
<td>
<Form.Control
type="text"
value={user.note}
onChange={(e) => handleNoteChange(user.login, e.target.value)}
placeholder="Poznámka"
disabled={!user.selected}
/>
</td>
<td>
<Form.Control
type="number"
step="0.01"
min="0"
value={user.amount}
onChange={(e) => handleAmountChange(user.login, e.target.value)}
placeholder="0.00"
disabled={!user.selected}
/>
</td>
</tr>
))}
</tbody>
</Table>
)}
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Zavřít
</Button>
<Button
variant="primary"
onClick={handleGenerate}
disabled={users.filter(u => u.selected).length === 0 || !isBankDataValid}
>
Generovat
</Button>
</Modal.Footer>
</Modal>
);
}

4
client/src/components/modals/PizzaAdditionalFeeModal.tsx
View File

@@ -15,12 +15,12 @@ export default function PizzaAdditionalFeeModal({ customerName, isOpen, onClose,
const priceRef = useRef<HTMLInputElement>(null); const priceRef = useRef<HTMLInputElement>(null);
const doSubmit = () => { const doSubmit = () => {
onSave(customerName, textRef.current?.value, Number.parseInt(priceRef.current?.value ?? "0")); onSave(customerName, textRef.current?.value, parseInt(priceRef.current?.value ?? "0"));
} }
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
onSave(customerName, textRef.current?.value, Number.parseInt(priceRef.current?.value ?? "0")); onSave(customerName, textRef.current?.value, parseInt(priceRef.current?.value ?? "0"));
} }
} }

12
client/src/components/modals/PizzaCalculatorModal.tsx
View File

@@ -36,13 +36,13 @@ export default function PizzaCalculatorModal({ isOpen, onClose }: Readonly<Props
// 1. pizza // 1. pizza
if (diameter1Ref.current?.value) { if (diameter1Ref.current?.value) {
const diameter1 = Number.parseInt(diameter1Ref.current?.value); const diameter1 = parseInt(diameter1Ref.current?.value);
r.pizza1 ??= {}; r.pizza1 ??= {};
if (diameter1 && diameter1 > 0) { if (diameter1 && diameter1 > 0) {
r.pizza1.diameter = diameter1; r.pizza1.diameter = diameter1;
r.pizza1.area = Math.PI * Math.pow(diameter1 / 2, 2); r.pizza1.area = Math.PI * Math.pow(diameter1 / 2, 2);
if (price1Ref.current?.value) { if (price1Ref.current?.value) {
const price1 = Number.parseInt(price1Ref.current?.value); const price1 = parseInt(price1Ref.current?.value);
if (price1) { if (price1) {
r.pizza1.pricePerM = price1 / r.pizza1.area; r.pizza1.pricePerM = price1 / r.pizza1.area;
} else { } else {
@@ -56,13 +56,13 @@ export default function PizzaCalculatorModal({ isOpen, onClose }: Readonly<Props
// 2. pizza // 2. pizza
if (diameter2Ref.current?.value) { if (diameter2Ref.current?.value) {
const diameter2 = Number.parseInt(diameter2Ref.current?.value); const diameter2 = parseInt(diameter2Ref.current?.value);
r.pizza2 ??= {}; r.pizza2 ??= {};
if (diameter2 && diameter2 > 0) { if (diameter2 && diameter2 > 0) {
r.pizza2.diameter = diameter2; r.pizza2.diameter = diameter2;
r.pizza2.area = Math.PI * Math.pow(diameter2 / 2, 2); r.pizza2.area = Math.PI * Math.pow(diameter2 / 2, 2);
if (price2Ref.current?.value) { if (price2Ref.current?.value) {
const price2 = Number.parseInt(price2Ref.current?.value); const price2 = parseInt(price2Ref.current?.value);
if (price2) { if (price2) {
r.pizza2.pricePerM = price2 / r.pizza2.area; r.pizza2.pricePerM = price2 / r.pizza2.area;
} else { } else {
@@ -77,8 +77,8 @@ export default function PizzaCalculatorModal({ isOpen, onClose }: Readonly<Props
// Srovnání // Srovnání
if (r.pizza1?.pricePerM && r.pizza2?.pricePerM && r.pizza1.diameter && r.pizza2.diameter) { if (r.pizza1?.pricePerM && r.pizza2?.pricePerM && r.pizza1.diameter && r.pizza2.diameter) {
r.choice = r.pizza1.pricePerM < r.pizza2.pricePerM ? 1 : 2; r.choice = r.pizza1.pricePerM < r.pizza2.pricePerM ? 1 : 2;
const bigger = Math.max(r.pizza1.pricePerM, r.pizza2.pricePerM); const bigger = r.pizza1.pricePerM > r.pizza2.pricePerM ? r.pizza1.pricePerM : r.pizza2.pricePerM;
const smaller = Math.min(r.pizza1.pricePerM, r.pizza2.pricePerM); const smaller = r.pizza1.pricePerM < r.pizza2.pricePerM ? r.pizza1.pricePerM : r.pizza2.pricePerM;
r.ratio = (bigger / smaller) - 1; r.ratio = (bigger / smaller) - 1;
r.diameterDiff = Math.abs(r.pizza1.diameter - r.pizza2.diameter); r.diameterDiff = Math.abs(r.pizza1.diameter - r.pizza2.diameter);
} else { } else {

32
client/src/components/modals/RefreshMenuModal.tsx
View File

@@ -1,5 +1,5 @@
import { useRef, useState } from "react"; import { useRef, useState } from "react";
import { Modal, Button, Alert, Form } from "react-bootstrap"; import { Modal, Button, Alert } from "react-bootstrap";
type Props = { type Props = {
isOpen: boolean; isOpen: boolean;
@@ -30,6 +30,7 @@ export default function RefreshMenuModal({ isOpen, onClose }: Readonly<Props>) {
if (res.ok) { if (res.ok) {
setRefreshMessage({ type: 'success', text: 'Uspesny fetch' }); setRefreshMessage({ type: 'success', text: 'Uspesny fetch' });
if (refreshPassRef.current) { if (refreshPassRef.current) {
// Clean hesla xd
refreshPassRef.current.value = ''; refreshPassRef.current.value = '';
} }
} else { } else {
@@ -49,7 +50,7 @@ export default function RefreshMenuModal({ isOpen, onClose }: Readonly<Props>) {
}; };
return ( return (
<Modal show={isOpen} onHide={handleClose}> <Modal show={isOpen} onHide={handleClose} size="lg">
<Modal.Header closeButton> <Modal.Header closeButton>
<Modal.Title><h2>Přenačtení menu</h2></Modal.Title> <Modal.Title><h2>Přenačtení menu</h2></Modal.Title>
</Modal.Header> </Modal.Header>
@@ -62,29 +63,36 @@ export default function RefreshMenuModal({ isOpen, onClose }: Readonly<Props>) {
</Alert> </Alert>
)} )}
<Form.Group className="mb-3"> <div className="mb-3">
<Form.Label>Heslo</Form.Label> Heslo: <input
<Form.Control
ref={refreshPassRef} ref={refreshPassRef}
type="password" type="password"
placeholder="Zadejte heslo" placeholder="Zadejte heslo"
className="form-control d-inline-block"
style={{ width: 'auto', marginLeft: '10px' }}
onKeyDown={e => e.stopPropagation()} onKeyDown={e => e.stopPropagation()}
/> />
</Form.Group> </div>
<Form.Group className="mb-3"> <div className="mb-3">
<Form.Label>Typ refreshe</Form.Label> Typ refreshe: <select
<Form.Select ref={refreshTypeRef} defaultValue="week"> ref={refreshTypeRef}
className="form-select d-inline-block"
style={{ width: 'auto', marginLeft: '10px' }}
defaultValue="week"
>
<option value="week">Týden</option> <option value="week">Týden</option>
<option value="day">Den</option> <option value="day">Den</option>
</Form.Select> </select>
</Form.Group> </div>
<Button <Button
variant="info"
onClick={handleRefresh} onClick={handleRefresh}
disabled={refreshLoading} disabled={refreshLoading}
className="mb-3"
> >
{refreshLoading ? 'Načítám...' : 'Obnovit menu'} {refreshLoading ? 'Refreshing...' : 'Refresh'}
</Button> </Button>
</Modal.Body> </Modal.Body>
<Modal.Footer> <Modal.Footer>

77
client/src/components/modals/SettingsModal.tsx
View File

@@ -1,11 +1,11 @@
import { useRef } from "react"; import { useRef } from "react";
import { Modal, Button, Form } from "react-bootstrap" import { Modal, Button } from "react-bootstrap"
import { useSettings, ThemePreference } from "../../context/settings"; import { useSettings } from "../../context/settings";
type Props = { type Props = {
isOpen: boolean, isOpen: boolean,
onClose: () => void, onClose: () => void,
onSave: (bankAccountNumber?: string, bankAccountHolderName?: string, hideSoupsOption?: boolean, themePreference?: ThemePreference) => void, onSave: (bankAccountNumber?: string, bankAccountHolderName?: string, hideSoupsOption?: boolean) => void,
} }
/** Modální dialog pro uživatelská nastavení. */ /** Modální dialog pro uživatelská nastavení. */
@@ -14,84 +14,29 @@ export default function SettingsModal({ isOpen, onClose, onSave }: Readonly<Prop
const bankAccountRef = useRef<HTMLInputElement>(null); const bankAccountRef = useRef<HTMLInputElement>(null);
const nameRef = useRef<HTMLInputElement>(null); const nameRef = useRef<HTMLInputElement>(null);
const hideSoupsRef = useRef<HTMLInputElement>(null); const hideSoupsRef = useRef<HTMLInputElement>(null);
const themeRef = useRef<HTMLSelectElement>(null);
return ( return <Modal show={isOpen} onHide={onClose} size="lg">
<Modal show={isOpen} onHide={onClose} size="lg">
<Modal.Header closeButton> <Modal.Header closeButton>
<Modal.Title><h2>Nastavení</h2></Modal.Title> <Modal.Title><h2>Nastavení</h2></Modal.Title>
</Modal.Header> </Modal.Header>
<Modal.Body> <Modal.Body>
<h4>Vzhled</h4>
<Form.Group className="mb-3">
<Form.Label>Barevný motiv</Form.Label>
<Form.Select ref={themeRef} defaultValue={settings?.themePreference}>
<option value="system">Podle systému</option>
<option value="light">Světlý</option>
<option value="dark">Tmavý</option>
</Form.Select>
</Form.Group>
<hr />
<h4>Obecné</h4> <h4>Obecné</h4>
<Form.Group className="mb-3"> <span title="V nabídkách nebudou zobrazovány polévky. Tato funkce je experimentální, a zejména u TechTower bývá často problém polévky spolehlivě rozeznat. V případě využití této funkce průběžně nahlašujte stále se zobrazující polévky." style={{ "cursor": "help" }}>
<Form.Check <input ref={hideSoupsRef} type="checkbox" defaultChecked={settings?.hideSoups} /> Skrýt polévky
id="hideSoupsCheckbox" </span>
ref={hideSoupsRef}
type="checkbox"
label="Skrýt polévky"
defaultChecked={settings?.hideSoups}
title="V nabídkách nebudou zobrazovány polévky. Tato funkce je experimentální."
/>
<Form.Text className="text-muted">
Experimentální funkce - zejména u TechTower bývá problém polévky spolehlivě rozeznat.
</Form.Text>
</Form.Group>
<hr /> <hr />
<h4>Bankovní účet</h4> <h4>Bankovní účet</h4>
<p> <p>Nastavením čísla účtu umožníte automatické generování QR kódů pro úhradu za vámi provedené objednávky v rámci Pizza day.<br />Pokud vaše číslo účtu neobsahuje předčíslí, je možné ho zcela vynechat.<br /><br />Číslo účtu není ukládáno na serveru, posílá se na něj pouze za účelem vygenerování QR kódů.</p>
Nastavením čísla účtu umožníte automatické generování QR kódů pro úhradu za vámi provedené objednávky v rámci Pizza day. Číslo účtu: <input className="mb-3" ref={bankAccountRef} type="text" placeholder="123456-1234567890/1234" defaultValue={settings?.bankAccount} onKeyDown={e => e.stopPropagation()} /> <br />
</p> Název příjemce (jméno majitele účtu): <input ref={nameRef} type="text" placeholder="Jan Novák" defaultValue={settings?.holderName} onKeyDown={e => e.stopPropagation()} />
<Form.Group className="mb-3">
<Form.Label>Číslo účtu</Form.Label>
<Form.Control
ref={bankAccountRef}
type="text"
placeholder="123456-1234567890/1234"
defaultValue={settings?.bankAccount}
onKeyDown={e => e.stopPropagation()}
/>
<Form.Text className="text-muted">
Pokud vaše číslo účtu neobsahuje předčíslí, je možné ho zcela vynechat.
</Form.Text>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label>Název příjemce</Form.Label>
<Form.Control
ref={nameRef}
type="text"
placeholder="Jan Novák"
defaultValue={settings?.holderName}
onKeyDown={e => e.stopPropagation()}
/>
<Form.Text className="text-muted">
Jméno majitele účtu pro QR platbu.
</Form.Text>
</Form.Group>
</Modal.Body> </Modal.Body>
<Modal.Footer> <Modal.Footer>
<Button variant="secondary" onClick={onClose}> <Button variant="secondary" onClick={onClose}>
Storno Storno
</Button> </Button>
<Button onClick={() => onSave(bankAccountRef.current?.value, nameRef.current?.value, hideSoupsRef.current?.checked, themeRef.current?.value as ThemePreference)}> <Button variant="primary" onClick={() => onSave(bankAccountRef.current?.value, nameRef.current?.value, hideSoupsRef.current?.checked)}>
Uložit Uložit
</Button> </Button>
</Modal.Footer> </Modal.Footer>
</Modal> </Modal>
);
} }

2
client/src/context/auth.tsx
View File

@@ -55,7 +55,7 @@ function useProvideAuth(): AuthContextProps {
setLoginName(undefined); setLoginName(undefined);
setTrusted(undefined); setTrusted(undefined);
if (trusted && logoutUrl?.length) { if (trusted && logoutUrl?.length) {
globalThis.location.replace(logoutUrl); window.location.replace(logoutUrl);
} }
} }

47
client/src/context/settings.tsx
View File

@@ -3,19 +3,14 @@ import React, { ReactNode, useContext, useEffect, useState } from "react"
const BANK_ACCOUNT_NUMBER_KEY = 'bank_account_number'; const BANK_ACCOUNT_NUMBER_KEY = 'bank_account_number';
const BANK_ACCOUNT_HOLDER_KEY = 'bank_account_holder_name'; const BANK_ACCOUNT_HOLDER_KEY = 'bank_account_holder_name';
const HIDE_SOUPS_KEY = 'hide_soups'; const HIDE_SOUPS_KEY = 'hide_soups';
const THEME_KEY = 'theme_preference';
export type ThemePreference = 'system' | 'light' | 'dark';
export type SettingsContextProps = { export type SettingsContextProps = {
bankAccount?: string, bankAccount?: string,
holderName?: string, holderName?: string,
hideSoups?: boolean, hideSoups?: boolean,
themePreference: ThemePreference,
setBankAccountNumber: (accountNumber?: string) => void, setBankAccountNumber: (accountNumber?: string) => void,
setBankAccountHolderName: (holderName?: string) => void, setBankAccountHolderName: (holderName?: string) => void,
setHideSoupsOption: (hideSoups?: boolean) => void, setHideSoupsOption: (hideSoups?: boolean) => void,
setThemePreference: (theme: ThemePreference) => void,
} }
type ContextProps = { type ContextProps = {
@@ -33,23 +28,10 @@ export const useSettings = () => {
return useContext(settingsContext); return useContext(settingsContext);
} }
function getInitialTheme(): ThemePreference {
try {
const saved = localStorage.getItem(THEME_KEY) as ThemePreference | null;
if (saved && ['system', 'light', 'dark'].includes(saved)) {
return saved;
}
} catch (e) {
// localStorage nedostupný
}
return 'system';
}
function useProvideSettings(): SettingsContextProps { function useProvideSettings(): SettingsContextProps {
const [bankAccount, setBankAccount] = useState<string | undefined>(); const [bankAccount, setBankAccount] = useState<string | undefined>();
const [holderName, setHolderName] = useState<string | undefined>(); const [holderName, setHolderName] = useState<string | undefined>();
const [hideSoups, setHideSoups] = useState<boolean | undefined>(); const [hideSoups, setHideSoups] = useState<boolean | undefined>();
const [themePreference, setTheme] = useState<ThemePreference>(getInitialTheme);
useEffect(() => { useEffect(() => {
const accountNumber = localStorage.getItem(BANK_ACCOUNT_NUMBER_KEY); const accountNumber = localStorage.getItem(BANK_ACCOUNT_NUMBER_KEY);
@@ -90,29 +72,6 @@ function useProvideSettings(): SettingsContextProps {
} }
}, [hideSoups]); }, [hideSoups]);
useEffect(() => {
localStorage.setItem(THEME_KEY, themePreference);
}, [themePreference]);
useEffect(() => {
const applyTheme = (theme: 'light' | 'dark') => {
document.documentElement.setAttribute('data-bs-theme', theme);
};
if (themePreference === 'system') {
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
applyTheme(mediaQuery.matches ? 'dark' : 'light');
const handler = (e: MediaQueryListEvent) => {
applyTheme(e.matches ? 'dark' : 'light');
};
mediaQuery.addEventListener('change', handler);
return () => mediaQuery.removeEventListener('change', handler);
} else {
applyTheme(themePreference);
}
}, [themePreference]);
function setBankAccountNumber(bankAccount?: string) { function setBankAccountNumber(bankAccount?: string) {
setBankAccount(bankAccount); setBankAccount(bankAccount);
} }
@@ -125,18 +84,12 @@ function useProvideSettings(): SettingsContextProps {
setHideSoups(hideSoups); setHideSoups(hideSoups);
} }
function setThemePreference(theme: ThemePreference) {
setTheme(theme);
}
return { return {
bankAccount, bankAccount,
holderName, holderName,
hideSoups, hideSoups,
themePreference,
setBankAccountNumber, setBankAccountNumber,
setBankAccountHolderName, setBankAccountHolderName,
setHideSoupsOption, setHideSoupsOption,
setThemePreference,
} }
} }

4
client/src/context/socket.js
View File

@@ -7,8 +7,8 @@ if (process.env.NODE_ENV === 'development') {
socketUrl = `http://localhost:3001`; socketUrl = `http://localhost:3001`;
socketPath = undefined; socketPath = undefined;
} else { } else {
socketUrl = `${globalThis.location.host}`; socketUrl = `${window.location.host}`;
socketPath = `${globalThis.location.pathname}socket.io`; socketPath = `${window.location.pathname}socket.io`;
} }
export const socket = socketio.connect(socketUrl, { path: socketPath, transports: ["websocket"] }); export const socket = socketio.connect(socketUrl, { path: socketPath, transports: ["websocket"] });

20
client/src/index.css
View File

@@ -7,32 +7,14 @@ body,
body { body {
margin: 0; margin: 0;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif; sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
line-height: 1.5;
} }
code { code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace; monospace;
} }
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Better focus styles */
:focus-visible {
outline: 2px solid var(--luncher-primary);
outline-offset: 2px;
}
/* Selection color */
::selection {
background: var(--luncher-primary-light);
color: var(--luncher-primary);
}

2
client/src/index.tsx
View File

@@ -17,7 +17,7 @@ client.setConfig({
// Interceptor na vyhození toasteru při chybě // Interceptor na vyhození toasteru při chybě
client.interceptors.response.use(async response => { client.interceptors.response.use(async response => {
// TODO opravit - login je zatím výjimka, voláme ho "naprázdno" abychom zjistili, zda nás nepřihlásily trusted headers // TODO opravit - login je zatím výjimka, voláme ho "naprázdno" abychom zjistili, zda nás nepřihlásily trusted headers
if (!response.ok && !response.url.includes("/login")) { if (!response.ok && response.url.indexOf("/login") == -1) {
const json = await response.json(); const json = await response.json();
toast.error(json.error, { theme: "colored" }); toast.error(json.error, { theme: "colored" });
} }

82
client/src/pages/StatsPage.scss
View File

@@ -2,91 +2,15 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 32px 24px; padding: 20px;
min-height: calc(100vh - 140px);
background: var(--luncher-bg);
h1 {
font-size: 2rem;
font-weight: 700;
color: var(--luncher-text);
margin-bottom: 24px;
}
.week-navigator { .week-navigator {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 24px; font-size: xx-large;
margin-bottom: 32px;
svg {
font-size: 1.5rem;
color: var(--luncher-text-secondary);
cursor: pointer;
padding: 12px;
border-radius: 50%;
background: var(--luncher-bg-card);
box-shadow: var(--luncher-shadow-sm);
transition: var(--luncher-transition);
&:hover {
color: var(--luncher-primary);
background: var(--luncher-primary-light);
transform: scale(1.05);
}
}
.date-range { .date-range {
margin: 0; margin: 5px 20px;
font-size: 1.25rem;
font-weight: 600;
color: var(--luncher-text);
min-width: 280px;
text-align: center;
}
}
// Chart container
.recharts-wrapper {
background: var(--luncher-bg-card);
border-radius: var(--luncher-radius-lg);
box-shadow: var(--luncher-shadow);
padding: 24px;
border: 1px solid var(--luncher-border-light);
}
// Chart text styling
.recharts-cartesian-axis-tick-value {
fill: var(--luncher-text-secondary);
font-size: 0.85rem;
}
.recharts-legend-item-text {
color: var(--luncher-text) !important;
font-weight: 500;
}
.recharts-tooltip-wrapper {
.recharts-default-tooltip {
background: var(--luncher-bg-card) !important;
border: 1px solid var(--luncher-border) !important;
border-radius: var(--luncher-radius-sm) !important;
box-shadow: var(--luncher-shadow-lg) !important;
.recharts-tooltip-label {
color: var(--luncher-text) !important;
font-weight: 600;
margin-bottom: 8px;
}
.recharts-tooltip-item {
color: var(--luncher-text-secondary) !important;
} }
} }
} }
.recharts-cartesian-grid-horizontal line,
.recharts-cartesian-grid-vertical line {
stroke: var(--luncher-border);
}
}

21
client/src/pages/StatsPage.tsx
View File

@@ -17,15 +17,16 @@ const CHART_HEIGHT = 700;
const STROKE_WIDTH = 2.5; const STROKE_WIDTH = 2.5;
const COLORS = [ const COLORS = [
'#ff1493', // Komentáře jsou kvůli vizualizaci barev ve VS Code
'#1e90ff', '#ff1493', // #ff1493
'#c5a700', '#1e90ff', // #1e90ff
'#006400', '#c5a700', // #c5a700
'#b300ff', '#006400', // #006400
'#ff4500', '#b300ff', // #b300ff
'#bc8f8f', '#ff4500', // #ff4500
'#00ff00', '#bc8f8f', // #bc8f8f
'#7c7c7c', '#00ff00', // #00ff00
'#7c7c7c', // #7c7c7c
] ]
export default function StatsPage() { export default function StatsPage() {
@@ -102,7 +103,7 @@ export default function StatsPage() {
return ( return (
<> <>
<Header /> <Header dayIndex={undefined} />
<div className="stats-page"> <div className="stats-page">
<h1>Statistiky</h1> <h1>Statistiky</h1>
<div className="week-navigator"> <div className="week-navigator">

1211
client/yarn.lock
View File

File diff suppressed because it is too large Load Diff

5
server/src/index.ts
View File

@@ -13,6 +13,8 @@ import foodRoutes, { refreshMetoda } from "./routes/foodRoutes";
import votingRoutes from "./routes/votingRoutes"; import votingRoutes from "./routes/votingRoutes";
import easterEggRoutes from "./routes/easterEggRoutes"; import easterEggRoutes from "./routes/easterEggRoutes";
import statsRoutes from "./routes/statsRoutes"; import statsRoutes from "./routes/statsRoutes";
import debugRoutes from "./routes/debugRoutes";
import qrRoutes from "./routes/qrRoutes";
const ENVIRONMENT = process.env.NODE_ENV ?? 'production'; const ENVIRONMENT = process.env.NODE_ENV ?? 'production';
dotenv.config({ path: path.resolve(__dirname, `../.env.${ENVIRONMENT}`) }); dotenv.config({ path: path.resolve(__dirname, `../.env.${ENVIRONMENT}`) });
@@ -99,6 +101,8 @@ app.get("/api/qr", (req, res) => {
// Přeskočení auth pro refresh dat xd // Přeskočení auth pro refresh dat xd
app.use("/api/food/refresh", refreshMetoda); app.use("/api/food/refresh", refreshMetoda);
app.use("/api/debug", debugRoutes);
/** Middleware ověřující JWT token */ /** Middleware ověřující JWT token */
app.use("/api/", (req, res, next) => { app.use("/api/", (req, res, next) => {
if (HTTP_REMOTE_USER_ENABLED) { if (HTTP_REMOTE_USER_ENABLED) {
@@ -143,6 +147,7 @@ app.use("/api/food", foodRoutes);
app.use("/api/voting", votingRoutes); app.use("/api/voting", votingRoutes);
app.use("/api/easterEggs", easterEggRoutes); app.use("/api/easterEggs", easterEggRoutes);
app.use("/api/stats", statsRoutes); app.use("/api/stats", statsRoutes);
app.use("/api/qr", qrRoutes);
app.use('/stats', express.static('public')); app.use('/stats', express.static('public'));
app.use(express.static('public')); app.use(express.static('public'));

122
server/src/mock.ts
View File

@@ -517,6 +517,24 @@ const MOCK_DATA = {
name: "Pečené vepřové koleno, křen, hořčice, chléb", name: "Pečené vepřové koleno, křen, hořčice, chléb",
price: "320\xA0Kč", price: "320\xA0Kč",
isSoup: false, isSoup: false,
},
{
amount: "-",
name: "Slovácké strapačky s uzenou slaninou, zelím, mletým pepřem & sekanou petrželkou",
price: "140\xA0Kč",
isSoup: false,
},
{
amount: "-",
name: "Hovězí guláš s vejcem, zeleninovou garniturkou & žemlovými knedlíky",
price: "145\xA0Kč",
isSoup: false,
},
{
amount: "-",
name: "Kuřecí roláda s kaštanovou nádivkou, demi-glace & smetanovou bramborovou kaší",
price: "150\xA0Kč",
isSoup: false,
} }
], ],
[ [
@@ -531,6 +549,24 @@ const MOCK_DATA = {
name: "Poutine (trhané vepřové, hranolky, sýr, čalamáda, pikantní omáčka)", name: "Poutine (trhané vepřové, hranolky, sýr, čalamáda, pikantní omáčka)",
price: "190\xA0Kč", price: "190\xA0Kč",
isSoup: false, isSoup: false,
},
{
amount: "-",
name: "Slovácké strapačky s uzenou slaninou, zelím, mletým pepřem & sekanou petrželkou",
price: "140\xA0Kč",
isSoup: false,
},
{
amount: "-",
name: "Hovězí guláš s vejcem, zeleninovou garniturkou & žemlovými knedlíky",
price: "145\xA0Kč",
isSoup: false,
},
{
amount: "-",
name: "Kuřecí roláda s kaštanovou nádivkou, demi-glace & smetanovou bramborovou kaší",
price: "150\xA0Kč",
isSoup: false,
} }
], ],
[ [
@@ -545,6 +581,24 @@ const MOCK_DATA = {
name: "Vepřový řízek z kotlety, domácí bramborový salát", name: "Vepřový řízek z kotlety, domácí bramborový salát",
price: "170\xA0Kč", price: "170\xA0Kč",
isSoup: false, isSoup: false,
},
{
amount: "-",
name: "Slovácké strapačky s uzenou slaninou, zelím, mletým pepřem & sekanou petrželkou",
price: "140\xA0Kč",
isSoup: false,
},
{
amount: "-",
name: "Hovězí guláš s vejcem, zeleninovou garniturkou & žemlovými knedlíky",
price: "145\xA0Kč",
isSoup: false,
},
{
amount: "-",
name: "Kuřecí roláda s kaštanovou nádivkou, demi-glace & smetanovou bramborovou kaší",
price: "150\xA0Kč",
isSoup: false,
} }
], ],
[ [
@@ -559,6 +613,24 @@ const MOCK_DATA = {
name: "Burger z Chuck rollu, hranolky, tatarská omáčka", name: "Burger z Chuck rollu, hranolky, tatarská omáčka",
price: "200\xA0Kč", price: "200\xA0Kč",
isSoup: false, isSoup: false,
},
{
amount: "-",
name: "Slovácké strapačky s uzenou slaninou, zelím, mletým pepřem & sekanou petrželkou",
price: "140\xA0Kč",
isSoup: false,
},
{
amount: "-",
name: "Hovězí guláš s vejcem, zeleninovou garniturkou & žemlovými knedlíky",
price: "145\xA0Kč",
isSoup: false,
},
{
amount: "-",
name: "Kuřecí roláda s kaštanovou nádivkou, demi-glace & smetanovou bramborovou kaší",
price: "150\xA0Kč",
isSoup: false,
} }
], ],
], ],
@@ -601,6 +673,18 @@ const MOCK_DATA = {
name: "Hovězí po Burgundsku, bramborová kaše", name: "Hovězí po Burgundsku, bramborová kaše",
price: "155\xA0Kč", price: "155\xA0Kč",
isSoup: false, isSoup: false,
},
{
amount: "-",
name: "Špagety s kuřecím masem, špenátem a smetanou",
price: "145\xA0Kč",
isSoup: false,
},
{
amount: "-",
name: "Medailonky z vepřové panenky s fazolkami se slaninou, šťouchané brambory",
price: "185\xA0Kč",
isSoup: false,
} }
], ],
[ [
@@ -615,6 +699,18 @@ const MOCK_DATA = {
name: "Kuřecí plátky na sušených rajčatech, bylinkách a česneku, bramborová kaše", name: "Kuřecí plátky na sušených rajčatech, bylinkách a česneku, bramborová kaše",
price: "155\xA0Kč", price: "155\xA0Kč",
isSoup: false, isSoup: false,
},
{
amount: "-",
name: "Špagety s kuřecím masem, špenátem a smetanou",
price: "145\xA0Kč",
isSoup: false,
},
{
amount: "-",
name: "Medailonky z vepřové panenky s fazolkami se slaninou, šťouchané brambory",
price: "185\xA0Kč",
isSoup: false,
} }
], ],
[ [
@@ -629,6 +725,18 @@ const MOCK_DATA = {
name: "Rajská s plněnou paprikou, knedlík", name: "Rajská s plněnou paprikou, knedlík",
price: "170\xA0Kč", price: "170\xA0Kč",
isSoup: false, isSoup: false,
},
{
amount: "-",
name: "Špagety s kuřecím masem, špenátem a smetanou",
price: "145\xA0Kč",
isSoup: false,
},
{
amount: "-",
name: "Medailonky z vepřové panenky s fazolkami se slaninou, šťouchané brambory",
price: "185\xA0Kč",
isSoup: false,
} }
], ],
[ [
@@ -643,6 +751,18 @@ const MOCK_DATA = {
name: "Ragú z trhané kachny, onsen vejce, soté ze špenátu a ředkvičky, bramborové pyré, lanýžová sůl, zelený olej", name: "Ragú z trhané kachny, onsen vejce, soté ze špenátu a ředkvičky, bramborové pyré, lanýžová sůl, zelený olej",
price: "189\xA0Kč", price: "189\xA0Kč",
isSoup: false, isSoup: false,
},
{
amount: "-",
name: "Špagety s kuřecím masem, špenátem a smetanou",
price: "145\xA0Kč",
isSoup: false,
},
{
amount: "-",
name: "Medailonky z vepřové panenky s fazolkami se slaninou, šťouchané brambory",
price: "185\xA0Kč",
isSoup: false,
} }
], ],
], ],
@@ -1402,7 +1522,7 @@ const MOCK_PIZZA_LIST = [
* Funkce vrací mock datu ve formátu YYYY-MM-DD * Funkce vrací mock datu ve formátu YYYY-MM-DD
*/ */
export const getTodayMock = (): Date => { export const getTodayMock = (): Date => {
return new Date('2025-01-10'); // pátek return new Date('2025-01-08'); // středa
} }
export const getMenuSladovnickaMock = () => { export const getMenuSladovnickaMock = () => {

62
server/src/restaurants.ts
View File

@@ -100,7 +100,7 @@ export const getMenuSladovnicka = async (firstDayOfWeek: Date, mock: boolean = f
const html = await getHtml(SLADOVNICKA_URL); const html = await getHtml(SLADOVNICKA_URL);
const $ = load(html); const $ = load(html);
// Zjistíme, které dny jsou k dispozici z tab elementů // Nejdříve zjistíme, které dny jsou k dispozici z tab elementů
const tabElements = $('#daily-menu-tab-list').children('button[id^="daily-menu-tab-"]'); const tabElements = $('#daily-menu-tab-list').children('button[id^="daily-menu-tab-"]');
const availableDays: { [dayIndex: number]: number } = {}; // mapování dayIndex -> contentIndex const availableDays: { [dayIndex: number]: number } = {}; // mapování dayIndex -> contentIndex
@@ -112,7 +112,7 @@ export const getMenuSladovnicka = async (firstDayOfWeek: Date, mock: boolean = f
} }
}); });
const menuContentElements = $('#daily-menu-content-list').children('.daily-menu-content__content').not('.daily-menu-content__content--static'); const menuContentElements = $('#daily-menu-content-list').children('[id^="daily-menu-content-"]');
const result: Food[][] = []; const result: Food[][] = [];
@@ -130,32 +130,59 @@ export const getMenuSladovnicka = async (firstDayOfWeek: Date, mock: boolean = f
continue; // Přeskočíme, pokud content element neexistuje continue; // Přeskočíme, pokud content element neexistuje
} }
const contentElement = $(menuContentElements[contentIndexNum]); const dayChildren = $(menuContentElements[contentIndexNum]).children();
const itemElement = contentElement.find('.daily-menu-content__item');
const table = itemElement.find('table.daily-menu-content__table tbody'); // Ověříme, že má element očekávanou strukturu
const rows = table.children('tr'); if (dayChildren.length < 2) {
console.warn(`Neočekávaný počet children v menu Sladovnické pro den ${dayIndexNum}: ${dayChildren.length}, očekávány alespoň 2 (polévka a hlavní jídlo)`);
continue;
}
// Parsování polévky
const soupElement = dayChildren.get(0);
const soupTable = $(soupElement).find('table tbody tr');
const soupCells = soupTable.children('td');
if (soupCells.length !== 3) {
console.warn(`Neočekávaný počet buněk v tabulce polévky pro den ${dayIndexNum}: ${soupCells.length}, ale očekávány byly 3`);
continue;
}
const soupAmount = sanitizeText($(soupCells.get(0)).text());
const soupNameRaw = sanitizeText($(soupCells.get(1)).text());
const soupPrice = sanitizeText($(soupCells.get(2)).text().replace(' ', '\xA0'));
const soupParsed = parseAllergens(soupNameRaw);
// Parsování hlavních jídel
const mainCourseElement = dayChildren.get(1);
const mainCourseTable = $(mainCourseElement).find('table tbody');
const mainCourseRows = mainCourseTable.children('tr');
const currentDayFood: Food[] = []; const currentDayFood: Food[] = [];
// Projdeme všechny řádky - první je polévka, zbytek jsou hlavní jídla // Přidáme polévku do seznamu jídel
rows.each((i, row) => { currentDayFood.push({
const cells = $(row).children('td'); amount: soupAmount,
if (cells.length !== 3) { name: soupParsed.cleanName,
return; // Přeskočíme řádky s nesprávnou strukturou price: soupPrice,
} isSoup: true,
allergens: soupParsed.allergens.length > 0 ? soupParsed.allergens : undefined,
});
// Projdeme všechny řádky hlavních jídel
mainCourseRows.each((i, row) => {
const cells = $(row).children('td');
const amount = sanitizeText($(cells.get(0)).text()); const amount = sanitizeText($(cells.get(0)).text());
const nameRaw = sanitizeText($(cells.get(1)).text()); const nameRaw = sanitizeText($(cells.get(1)).text());
const price = sanitizeText($(cells.get(2)).text().replace(' ', '\xA0')); const price = sanitizeText($(cells.get(2)).text().replace(' ', '\xA0'));
const parsed = parseAllergens(nameRaw); const parsed = parseAllergens(nameRaw);
// Přeskočíme prázdné řádky // Přeskočíme prázdné řádky (první řádek může být prázdný)
if (parsed.cleanName.trim().length > 0) { if (parsed.cleanName.trim().length > 0) {
currentDayFood.push({ currentDayFood.push({
amount, amount,
name: parsed.cleanName, name: parsed.cleanName,
price, price,
isSoup: i === 0, // První řádek je polévka isSoup: false,
allergens: parsed.allergens.length > 0 ? parsed.allergens : undefined, allergens: parsed.allergens.length > 0 ? parsed.allergens : undefined,
}); });
} }
@@ -324,13 +351,8 @@ export const getMenuTechTower = async (firstDayOfWeek: Date, mock: boolean = fal
const split = [tmp.slice(0, -2).join(' ')].concat(tmp.slice(-2)); const split = [tmp.slice(0, -2).join(' ')].concat(tmp.slice(-2));
price = `${split.slice(1)[0]}\xA0Kč` price = `${split.slice(1)[0]}\xA0Kč`
nameRaw = split[0].replace('•', ''); nameRaw = split[0].replace('•', '');
} else if (text.toLowerCase().endsWith(',-')) {
const tmp = text.replace('\xA0', ' ').split(' ');
const split = [tmp.slice(0, -1).join(' ')].concat(tmp.slice(-1));
price = `${split.slice(1)[0].replace(',-', '')}\xA0Kč`
nameRaw = split[0].replace('•', '');
} }
if (nameRaw.endsWith('–')|| nameRaw.endsWith('—')) { if (nameRaw.endsWith('–')) {
nameRaw = nameRaw.slice(0, -1).trim(); nameRaw = nameRaw.slice(0, -1).trim();
} }

45
server/src/routes/debugRoutes.ts Normal file
View File

@@ -0,0 +1,45 @@
import express, { Request } from "express";
import { addChoice, getData, removeChoices } from "../service";
import { ClientData, LunchChoice } from "../../../types";
const NAMES = ["alice", "bob", "carol", "dave", "eve", "frank", "grace", "heidi", "ivan", "judy"];
const DATES = ["2025-01-06", "2025-01-07", "2025-01-08", "2025-01-09", "2025-01-10"];
const router = express.Router();
router.get("/createUsers", async (req: Request<{}, any, any>, res) => {
for (const element of NAMES) {
for (const dateStr of DATES) {
// Se šancí 50 % přidat pro tohoto uživatele tento den náhodnou volbu
if (Math.random() > 0.5) {
const foodIndex = Math.floor(Math.random() * 3); // Předpokládáme, že jsou 3 možnosti jídla
const date = new Date(dateStr);
// Náhodná volba z LunchChoice
const lunchChoices = [
"SLADOVNICKA",
"TECHTOWER",
"ZASTAVKAUMICHALA",
"SENKSERIKOVA",
];
const randomLunchChoice = lunchChoices[Math.floor(Math.random() * lunchChoices.length)];
await addChoice(element, true, randomLunchChoice as LunchChoice, foodIndex, date);
}
}
}
res.status(200).json({});
});
router.get("/clearUsers", async (req: Request<{}, any, any>, res) => {
for (const dateStr of DATES) {
const date = new Date(dateStr);
const data: ClientData = await getData(date);
for (const user of NAMES) {
for (const locationKey in data.choices) {
await removeChoices(user, true, locationKey as keyof ClientData["choices"], date);
}
}
}
res.status(200).json({});
});
export default router;

11
server/src/routes/foodRoutes.ts
View File

@@ -1,6 +1,6 @@
import express, { Request, Response } from "express"; import express, { Request, Response } from "express";
import { getLogin, getTrusted } from "../auth"; import { getLogin, getTrusted } from "../auth";
import { addChoice, getDateForWeekIndex, getToday, removeChoice, removeChoices, updateDepartureTime, updateNote, fetchRestaurantWeekMenuData, saveRestaurantWeekMenu, updateBuyer } from "../service"; import { addChoice, getDateForWeekIndex, getToday, removeChoice, removeChoices, updateDepartureTime, updateNote, fetchRestaurantWeekMenuData, saveRestaurantWeekMenu } from "../service";
import { getDayOfWeekIndex, parseToken, getFirstWorkDayOfWeek } from "../utils"; import { getDayOfWeekIndex, parseToken, getFirstWorkDayOfWeek } from "../utils";
import { getWebsocket } from "../websocket"; import { getWebsocket } from "../websocket";
import { callNotifikace } from "../notifikace"; import { callNotifikace } from "../notifikace";
@@ -182,15 +182,6 @@ router.post("/jdemeObed", async (req, res, next) => {
} catch (e: any) { next(e) } } catch (e: any) { next(e) }
}); });
router.post("/updateBuyer", async (req, res, next) => {
const login = getLogin(parseToken(req));
try {
const data = await updateBuyer(login);
getWebsocket().emit("message", data);
res.status(200).json({});
} catch (e: any) { next(e) }
});
// /api/food/refresh?type=week&heslo=docasnyheslo // /api/food/refresh?type=week&heslo=docasnyheslo
export const refreshMetoda = async (req: Request, res: Response) => { export const refreshMetoda = async (req: Request, res: Response) => {
const { type, heslo } = req.query as { type?: string; heslo?: string }; const { type, heslo } = req.query as { type?: string; heslo?: string };

15
server/src/routes/qrRoutes.ts Normal file
View File

@@ -0,0 +1,15 @@
import express, { Request, Response } from "express";
import { getLogin } from "../auth";
import { parseToken } from "../utils";
import { GenerateQrData } from "../../../types";
const router = express.Router();
router.post("/generate", async (req: Request<{}, any, GenerateQrData["body"]>, res: Response<any>) => {
getLogin(parseToken(req));
console.log("Bank account for QR codes:", req.body.bankAccount);
console.log("Bank account holder for QR codes:", req.body.bankAccountHolder);
console.log("Requested QR codes for users:", req.body.qrCodes);
});
export default router;

31
server/src/service.ts
View File

@@ -1,4 +1,4 @@
import { InsufficientPermissions, formatDate, getDayOfWeekIndex, getFirstWorkDayOfWeek, getHumanDate, getIsWeekend, getWeekNumber } from "./utils"; import { InsufficientPermissions, formatDate, getDayOfWeekIndex, getFirstWorkDayOfWeek, getIsWeekend, getWeekNumber } from "./utils";
import getStorage from "./storage"; import getStorage from "./storage";
import { getMenuSladovnicka, getMenuTechTower, getMenuZastavkaUmichala, getMenuSenkSerikova } from "./restaurants"; import { getMenuSladovnicka, getMenuTechTower, getMenuZastavkaUmichala, getMenuSenkSerikova } from "./restaurants";
import { getTodayMock } from "./mock"; import { getTodayMock } from "./mock";
@@ -31,10 +31,7 @@ export const getDateForWeekIndex = (index: number) => {
function getEmptyData(date?: Date): ClientData { function getEmptyData(date?: Date): ClientData {
const usedDate = date || getToday(); const usedDate = date || getToday();
return { return {
todayDayIndex: getDayOfWeekIndex(getToday()), date: usedDate.toISOString().split('T')[0],
date: getHumanDate(usedDate),
isWeekend: getIsWeekend(usedDate),
dayIndex: getDayOfWeekIndex(usedDate),
choices: {}, choices: {},
}; };
} }
@@ -477,24 +474,6 @@ export async function updateDepartureTime(login: string, time?: string, date?: D
return clientData; return clientData;
} }
/**
* Nastaví/odnastaví uživatele jako objednatele pro dnešní den.
* Objednatelů může být více.
*
* @param login přihlašovací jméno uživatele
*/
export async function updateBuyer(login: string) {
const usedDate = getToday();
let clientData = await getClientData(usedDate);
const userEntry = clientData.choices?.['OBJEDNAVAM']?.[login];
if (!userEntry) {
throw new Error("Nelze nastavit objednatele pro uživatele s jinou volbou než \"Budu objednávat\"");
}
userEntry.isBuyer = !(userEntry.isBuyer || false);
await storage.setData(formatDate(usedDate), clientData);
return clientData;
}
/** /**
* Vrátí data pro klienta pro předaný nebo aktuální den. * Vrátí data pro klienta pro předaný nebo aktuální den.
* *
@@ -504,9 +483,5 @@ export async function updateBuyer(login: string) {
export async function getClientData(date?: Date): Promise<ClientData> { export async function getClientData(date?: Date): Promise<ClientData> {
const targetDate = date ?? getToday(); const targetDate = date ?? getToday();
const dateString = formatDate(targetDate); const dateString = formatDate(targetDate);
const clientData = await storage.getData<ClientData>(dateString) || getEmptyData(date); return await storage.getData<ClientData>(dateString) || getEmptyData(date);
return {
...clientData,
todayDayIndex: getDayOfWeekIndex(getToday()),
}
} }

1404
server/yarn.lock
View File

File diff suppressed because it is too large Load Diff

6
types/api.yml
View File

@@ -26,8 +26,6 @@ paths:
$ref: "./paths/food/changeDepartureTime.yml" $ref: "./paths/food/changeDepartureTime.yml"
/food/jdemeObed: /food/jdemeObed:
$ref: "./paths/food/jdemeObed.yml" $ref: "./paths/food/jdemeObed.yml"
/food/updateBuyer:
$ref: "./paths/food/updateBuyer.yml"
# Pizza day (/api/pizzaDay) # Pizza day (/api/pizzaDay)
/pizzaDay/create: /pizzaDay/create:
@@ -67,6 +65,10 @@ paths:
/voting/updateVote: /voting/updateVote:
$ref: "./paths/voting/updateVote.yml" $ref: "./paths/voting/updateVote.yml"
# QR kódy (/api/qr)
/qr/generate:
$ref: "./paths/qr/generateQr.yml"
components: components:
schemas: schemas:
$ref: "./schemas/_index.yml" $ref: "./schemas/_index.yml"

6
types/paths/food/updateBuyer.yml
View File

@@ -1,6 +0,0 @@
post:
operationId: setBuyer
summary: Nastavení/odnastavení aktuálně přihlášeného uživatele jako objednatele pro stav "Budu objednávat" pro aktuální den.
responses:
"200":
description: Stav byl úspěšně změněn.

12
types/paths/qr/generateQr.yml Normal file
View File

@@ -0,0 +1,12 @@
post:
operationId: generateQr
summary: Generování QR kódů.
requestBody:
required: true
content:
application/json:
schema:
$ref: "../../schemas/_index.yml#/GenerateQrCodesRequest"
responses:
"200":
description: QR kódy byly úspěšně vygenerovány.

54
types/schemas/_index.yml
View File

@@ -21,23 +21,13 @@ ClientData:
type: object type: object
additionalProperties: false additionalProperties: false
required: required:
- todayDayIndex
- date - date
- isWeekend
- choices - choices
properties: properties:
todayDayIndex:
description: Index dnešního dne v týdnu
$ref: "#/DayIndex"
date: date:
description: Human-readable datum dne description: Datum konkrétního dne
type: string type: string
isWeekend: format: date
description: Příznak, zda je tento den víkend
type: boolean
dayIndex:
description: Index dne v týdnu, ke kterému se vztahují tato data
$ref: "#/DayIndex"
choices: choices:
$ref: "#/LunchChoices" $ref: "#/LunchChoices"
menus: menus:
@@ -74,9 +64,6 @@ UserLunchChoice:
note: note:
description: Volitelná, veřejně viditelná uživatelská poznámka k vybrané volbě description: Volitelná, veřejně viditelná uživatelská poznámka k vybrané volbě
type: string type: string
isBuyer:
description: Příznak, zda je tento uživatel objednatelem pro stav "Budu objednávat"
type: boolean
LocationLunchChoicesMap: LocationLunchChoicesMap:
description: Objekt, kde klíčem je možnost stravování ((#LunchChoice)) a hodnotou množina uživatelů s touto volbou ((#LunchChoices)). description: Objekt, kde klíčem je možnost stravování ((#LunchChoice)) a hodnotou množina uživatelů s touto volbou ((#LunchChoices)).
type: object type: object
@@ -482,6 +469,43 @@ PizzaDay:
items: items:
$ref: "#/PizzaOrder" $ref: "#/PizzaOrder"
# --- QR KÓDY ---
QrCodeRequest:
description: Data potřebná pro vygenerování jednoho QR kódu pro platbu
type: object
required:
- login
- note
- amount
properties:
login:
description: Přihlašovací jméno uživatele, pro kterého bude QR kód vygenerován
type: string
note:
description: Popis platby
type: string
amount:
description: Částka platby v Kč
type: number
GenerateQrCodesRequest:
description: Data potřebná pro vygenerování QR kódů pro platbu
type: object
required:
- bankAccount
- bankAccountHolder
properties:
bankAccount:
description: Číslo bankovního účtu objednávajícího
type: string
bankAccountHolder:
description: Jméno majitele bankovního účtu
type: string
qrCodes:
description: Pole požadavků na vygenerování QR kódů
type: array
items:
$ref: "#/QrCodeRequest"
# --- NOTIFIKACE --- # --- NOTIFIKACE ---
UdalostEnum: UdalostEnum:
type: string type: string