|
|
|
|
@ -15,7 +15,7 @@ import { useSettings } from './context/settings';
|
|
|
|
|
import Footer from './components/Footer';
|
|
|
|
|
import { faChainBroken, faChevronLeft, faChevronRight, faGear, faSatelliteDish, faSearch } from '@fortawesome/free-solid-svg-icons';
|
|
|
|
|
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 { 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 } from '../../types';
|
|
|
|
|
@ -71,7 +71,10 @@ function App() {
|
|
|
|
|
const departureChoiceRef = useRef<HTMLSelectElement>(null);
|
|
|
|
|
const pizzaPoznamkaRef = useRef<HTMLInputElement>(null);
|
|
|
|
|
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 [noteModalOpen, setNoteModalOpen] = useState<boolean>(false);
|
|
|
|
|
const [eggImage, setEggImage] = useState<Blob>();
|
|
|
|
|
@ -89,8 +92,9 @@ function App() {
|
|
|
|
|
const data = response.data
|
|
|
|
|
if (data) {
|
|
|
|
|
setData(data);
|
|
|
|
|
setDayIndex(data.dayIndex);
|
|
|
|
|
dayIndexRef.current = data.dayIndex;
|
|
|
|
|
const dayIndex = getDayOfWeekIndex(new Date(data.date));
|
|
|
|
|
setDayIndex(dayIndex);
|
|
|
|
|
dayIndexRef.current = dayIndex;
|
|
|
|
|
setFood(data.menus);
|
|
|
|
|
}
|
|
|
|
|
}).catch(e => {
|
|
|
|
|
@ -103,6 +107,8 @@ function App() {
|
|
|
|
|
if (!auth?.login) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
setTodayDayIndex(getDayOfWeekIndex(new Date()));
|
|
|
|
|
setIsTodayWeekend(getIsWeekend(new Date()));
|
|
|
|
|
getData({ query: { dayIndex: dayIndex } }).then(response => {
|
|
|
|
|
const data = response.data;
|
|
|
|
|
setData(data);
|
|
|
|
|
@ -125,7 +131,7 @@ function App() {
|
|
|
|
|
socket.on(EVENT_MESSAGE, (newData: ClientData) => {
|
|
|
|
|
// console.log("Přijata nová data ze socketu", newData);
|
|
|
|
|
// 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);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
@ -439,7 +445,7 @@ function App() {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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 || {};
|
|
|
|
|
|
|
|
|
|
@ -448,7 +454,7 @@ function App() {
|
|
|
|
|
{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 />
|
|
|
|
|
<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 }} /> */}
|
|
|
|
|
@ -464,7 +470,7 @@ function App() {
|
|
|
|
|
<span title='Předchozí den'>
|
|
|
|
|
<FontAwesomeIcon icon={faChevronLeft} style={{ cursor: "pointer", visibility: dayIndex > 0 ? "initial" : "hidden" }} onClick={() => handleDayChange(dayIndex - 1)} />
|
|
|
|
|
</span>
|
|
|
|
|
<h1 className='title' style={{ color: dayIndex === data.todayDayIndex ? 'black' : 'gray' }}>{data.date}</h1>
|
|
|
|
|
<h1 className='title' style={{ color: dayIndex === todayDayIndex ? 'black' : 'gray' }}>{getHumanDate(new Date(data.date))}</h1>
|
|
|
|
|
<span title="Následující den">
|
|
|
|
|
<FontAwesomeIcon icon={faChevronRight} style={{ cursor: "pointer", visibility: dayIndex < 4 ? "initial" : "hidden" }} onClick={() => handleDayChange(dayIndex + 1)} />
|
|
|
|
|
</span>
|
|
|
|
|
@ -480,7 +486,7 @@ function App() {
|
|
|
|
|
<div className='content-wrapper'>
|
|
|
|
|
<div className='content'>
|
|
|
|
|
{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}>
|
|
|
|
|
<option></option>
|
|
|
|
|
{Object.entries(LunchChoice)
|
|
|
|
|
@ -589,7 +595,7 @@ function App() {
|
|
|
|
|
: <div className='mt-5'><i>Zatím nikdo nehlasoval...</i></div>
|
|
|
|
|
}
|
|
|
|
|
</div>
|
|
|
|
|
{dayIndex === data.todayDayIndex &&
|
|
|
|
|
{dayIndex === todayDayIndex &&
|
|
|
|
|
<div className='mt-5'>
|
|
|
|
|
{!data.pizzaDay &&
|
|
|
|
|
<div style={{ textAlign: 'center' }}>
|
|
|
|
|
|