добавлена страница калькулятора

2025-08-21 02:49:24 +04:00
parent 34295bc045
commit 9da769beb5
22 changed files with 344 additions and 55 deletions
--- a/front/src/app/NavigationRoutes.js
+++ b/front/src/app/NavigationRoutes.js
@@ -13,6 +13,7 @@ import {EditIngredientPage} from "./pages/ingredients/EditIngredientPage";
 import {EditCocktailPage} from "./pages/cocktails/EditCocktailPage";
 import {useEffect, useState} from "react";
 import {BarChangePage} from "./pages/BarChangePage";
+import {CalcPage} from "./pages/calc/CalcPage";

 export function NavigationRoutes() {
    const {auth} = useAuth();
@@ -59,6 +60,11 @@ const authPages = [
        children: (<LoginPage/>),
        isPrivate: false,
    },
+    {
+      path: paths.bar.calc,
+      children: (<CalcPage/>),
+      isPrivate: true,
+    },
    {
        path: paths.dashboard.overview,
        isPrivate: true,
@@ -96,11 +102,16 @@ const authPages = [

 const guestPages = [
    {
-        path: paths.home,
-        isPrivate: false,
-        children: (<HomeRedirect auth={false}/>),
+        path: paths.dashboard.overview,
+        isPrivate: true,
+        children: (<MenuPage/>),
        exact: true,
    },
+    {
+        children: (<HomeRedirect auth={true}/>),
+        isPrivate: false,
+        path: paths.home,
+    },
    {
        path: paths.auth.tg,
        isPrivate: false,
--- a/front/src/app/pages/calc/CalcPage.js
+++ b/front/src/app/pages/calc/CalcPage.js
@@ -0,0 +1,110 @@
+import Typography from "@mui/material/Typography";
+import * as React from "react";
+import {useEffect, useMemo} from "react";
+import {api} from "../../../lib/clients/api";
+import {requests} from "../../../requests";
+import {useAlert} from "../../../hooks/useAlert";
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+import {CocktailItemCalc} from "./CocktailItemCalc";
+import {IngredientCalcCard} from "./IngredientCalcCard";
+
+export function CalcPage() {
+    const {createError} = useAlert();
+    const [cocktails, setCocktails] = React.useState([]);
+    const [load, setLoad] = React.useState(false);
+    const [cocktailMap, setCocktailMap] = React.useState([]);
+
+    const changeHandler = (id, value) => {
+        setCocktailMap((prev) => ({
+            ...prev,
+            [id]: value
+        }));
+    }
+
+    useEffect(() => {
+        if (load) {
+            return;
+        }
+        api().get(requests.cocktails.calc)
+            .then((r) => {
+                const data = r.data;
+                if (data.length === 0) {
+                    setLoad(false);
+                    return;
+                }
+                setCocktails(data);
+                let map = [];
+                data.map((d) => {
+                    map[d.id] = 1
+                })
+                setCocktailMap(map);
+                setLoad(true);
+            })
+            .catch((r) => {
+                setLoad(true);
+                createError("Ошибка загрузки данных от сервера Status:" + r.code)
+            })
+        // eslint-disable-next-line
+    }, [load]);
+
+    const ingredients = useMemo(() => {
+            let map = {}
+            if (!cocktails) {
+                return [];
+            }
+            cocktails.forEach((c) => {
+                const receipts = c.receipt;
+                const countMeter = cocktailMap[c.id];
+
+                if (!receipts) {
+                    return
+                }
+                receipts.forEach((r) => {
+                    const ingredient = r.ingredient;
+                    const id = ingredient.id;
+                    const ingredientCount = r.count;
+
+                    const resultCount = ingredientCount * countMeter;
+
+                    if (map[id]) {
+                        map[id] = {
+                            ...map[id],
+                            count: map[id].count + resultCount
+                        }
+                    } else {
+                        map[id] = {
+                            ingredient: ingredient,
+                            count: resultCount
+                        }
+                    }
+                })
+            })
+            return Object.values(map);
+        },
+        [cocktails, cocktailMap])
+
+    const deleteHandler = (id) => {
+        const state = cocktails.filter((c) => c.id !== id);
+        setCocktails(state);
+    }
+
+    return (
+        <Box padding={2}>
+            <Typography variant="h4" align="center">Коктейли</Typography>
+            <Stack mt={2}>
+                {cocktails.map((item, i) => (
+                    <CocktailItemCalc key={i} cocktail={item} deleteHandler={deleteHandler}
+                                      changeHandler={changeHandler}/>
+                ))}
+            </Stack>
+
+            <Typography variant="h4" mt={2} align="center">Ингредиенты</Typography>
+            <Stack mt={2}>
+                {ingredients.map((item, i) => (
+                    <IngredientCalcCard key={i} count={item.count} ingredient={item.ingredient}/>
+                ))}
+            </Stack>
+        </Box>
+    )
+}
--- a/front/src/app/pages/calc/CocktailItemCalc.js
+++ b/front/src/app/pages/calc/CocktailItemCalc.js
@@ -0,0 +1,40 @@
+import {Card} from "@mui/material";
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import DeleteIcon from "@mui/icons-material/Delete";
+import React from "react";
+import Typography from "@mui/material/Typography";
+import {Counter} from "./Counter";
+
+export function CocktailItemCalc({cocktail, deleteHandler, changeHandler}) {
+    return (
+        <Card sx={{mb: 1, height: '250px', display: 'relative', p: 2}}>
+            <Stack justifyContent={'start'} spacing={2}>
+                <Stack direction='row' justifyContent='start' alignItems='center'>
+                    <Box sx={{width: '100px', height: '100px'}}>
+                        <img src={cocktail.image} loading='lazy' height={'100px'} width={'100px'} alt={cocktail.id}/>
+                    </Box>
+                    <Box sx={{width: 'calc(90% - 100px)', pr: 2, ml: 2}}>
+                        <Stack>
+                            <Typography>{cocktail.name}</Typography>
+                            <Typography>{cocktail.volume}</Typography>
+                            <Typography>{cocktail.category}</Typography>
+                            <Typography>{cocktail.alcoholic}</Typography>
+                            <Typography color={'textSecondary'}>{cocktail.components}</Typography>
+                        </Stack>
+                    </Box>
+
+                    <Stack direction='row'>
+                        <Stack sx={{width: '5%'}} spacing={1} justifyContent='flex-start'>
+                            <IconButton size='small' onClick={() => deleteHandler(cocktail.id)}>
+                                <DeleteIcon/>
+                            </IconButton>
+                        </Stack>
+                    </Stack>
+                </Stack>
+                <Counter id={cocktail.id} changeHandler={changeHandler}/>
+            </Stack>
+        </Card>
+    )
+}
--- a/front/src/app/pages/calc/Counter.js
+++ b/front/src/app/pages/calc/Counter.js
@@ -0,0 +1,65 @@
+import React, {useState} from 'react';
+import {Box, TextField, Button} from '@mui/material';
+import {styled} from '@mui/material/styles';
+
+// Стилизуем контейнер счетчика
+const CounterContainer = styled(Box)`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 150px;
+    height: 50px;
+    border-radius: 8px;
+    //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    //background-color: #ffffff;
+`;
+
+export function Counter({id, changeHandler}) {
+    const [value, setValue] = useState(1);
+
+    const handleChange = (newValue) => {
+        setValue(newValue);
+        changeHandler(id, newValue);
+    }
+
+    return (
+        <Box>
+            <Button onClick={() => {
+                if (value > 0) {
+                    setValue(value - 1);
+                }
+            }}
+                    sx={{
+                        width: '20px',
+                        height: '55px',
+                        borderRadius: '50%',
+                        margin: '0 8px',
+                        backgroundColor: 'transparent',
+                    }}>−</Button>
+            <TextField
+                value={value}
+                onChange={(e) => {
+                    const newValue = parseInt(e.target.value, 10);
+                    if (!isNaN(newValue)) {
+                        handleChange(newValue);
+                    }
+                }}
+                inputProps={{inputMode: 'numeric'}}
+                sx={{
+                    width: '40px',
+                    height: '15px',
+                    fontSize: '10px',
+                    textAlign: 'center'
+                }}
+            />
+            <Button onClick={() => handleChange(value + 1)}
+                    sx={{
+                        width: '20px',
+                        height: '55px',
+                        borderRadius: '50%',
+                        margin: '0 8px',
+                        backgroundColor: 'transparent',
+                    }}>+</Button>
+        </Box>
+    );
+}
--- a/front/src/app/pages/calc/IngredientCalcCard.js
+++ b/front/src/app/pages/calc/IngredientCalcCard.js
@@ -0,0 +1,21 @@
+import {Card} from "@mui/material";
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+import React from "react";
+
+export function IngredientCalcCard({ingredient, count}) {
+    return (
+        <Card sx={{mb: 1, height: '130px', display: 'relative', pt: 1}}>
+            <Stack direction='row' justifyContent='start' alignItems='center'>
+                <Box sx={{width: '100px', height: '100px'}}>
+                    <img src={ingredient.image} loading='lazy' height={'100px'} width={'100px'} alt={ingredient.id}/>
+                </Box>
+                <Box sx={{width: 'calc(90% - 100px)', pr: 2}}>{ingredient.name}</Box>
+                <Stack direction='row'>
+                    <Box mr={1} pt={'3px'}>{count}</Box>
+                </Stack>
+            </Stack>
+        </Card>
+    )
+
+}
--- a/front/src/components/cocktails/Cocktail.js
+++ b/front/src/components/cocktails/Cocktail.js
@@ -65,7 +65,8 @@ export function Cocktail({row, handleFavourite, handleChangeRating, handleSelect
                        {renderFavouriteBadge(handleFavourite, row)}
                        {renderRating(handleChangeRating, row)}

-                        {user.role !== 'USER' &&
+                        {
+                            (user.role && user.role !== 'USER') &&
                            <>
                                <IconButton size='small' href={`${paths.bar.cocktailEdit}?id=${row.id}`}>
                                    <EditIcon fontSize='small'/>
--- a/front/src/components/cocktails/CocktailInfoModal.js
+++ b/front/src/components/cocktails/CocktailInfoModal.js
@@ -132,7 +132,7 @@ export function CocktailInfoModal({row}) {
                                    <Stack key={r.ingredient.id} direction='row' justifyContent={'space-between'}
                                           mt={1}>
                                        <Stack direction='row'>
-                                            {user.role !== "USER" && (
+                                            {(user.role && user.role !== "USER") && (
                                                <IconButton size="small" sx={{pb: "2px"}}
                                                            onClick={() => selectIngredientHandler(r.ingredient)}>
                                                    {r.ingredient.isHave
@@ -161,7 +161,7 @@ export function CocktailInfoModal({row}) {
                </Box>
            </DialogContent>
            <DialogActions>
-                {user.role.includes("ADMIN") && (
+                {(user.role && user.role.includes("ADMIN")) && (
                    <Button href={`${paths.bar.cocktailEdit}?id=${cocktail.id}`}>Редактировать</Button>
                )}
                <Button onClick={closeCocktail}>Закрыть</Button>
--- a/front/src/components/core/UserPopover.js
+++ b/front/src/components/core/UserPopover.js
@@ -7,11 +7,13 @@ import MenuList from '@mui/material/MenuList';
 import Popover from '@mui/material/Popover';
 import Typography from '@mui/material/Typography';
 import {SignOut as SignOutIcon} from '@phosphor-icons/react/dist/ssr/SignOut';
+import {SignIn as SignInIcon} from '@phosphor-icons/react/dist/ssr/SignIn';
 import {logger} from "../../lib/DefaultLogger";
 import {useAuth} from "../../hooks/useAuth";
 import {authClient} from "../../lib/clients/AuthClient";
 import {useLocation} from "react-router-dom";
 import {useUser} from "../../hooks/useUser";
+import {paths} from "../../path";

 export function UserPopover({anchorEl, onClose, open}) {
    const {checkSession} = useAuth();
@@ -64,24 +66,28 @@ export function UserPopover({anchorEl, onClose, open}) {
                {/*    </ListItemIcon>*/}
                {/*    Профиль*/}
                {/*</MenuItem>*/}
-                <MenuItem onClick={handleSignOut}>
-                    <ListItemIcon>
-                        <SignOutIcon fontSize="var(--icon-fontSize-md)"/>
-                    </ListItemIcon>
-                    Выход
-                </MenuItem>
+                {!user.name ? <MenuItem onClick={() => window.location.replace(paths.auth.signIn)}>
+                        <ListItemIcon>
+                            <SignInIcon fontSize="var(--icon-fontSize-md)"/>
+                        </ListItemIcon>
+                        Вход
+                    </MenuItem> :
+                    <MenuItem onClick={handleSignOut}>
+                        <ListItemIcon>
+                            <SignOutIcon fontSize="var(--icon-fontSize-md)"/>
+                        </ListItemIcon>
+                        Выход
+                    </MenuItem>
+                }
            </MenuList>
        </Popover>
    );
 }

-function userDescriptor(user, session) {
-    if (!user) {
-        return (<Typography variant="subtitle1">Ошибка загрузки данных</Typography>);
+function userDescriptor(user) {
+    if (!user.name) {
+        return (<Typography variant="subtitle1">Гость</Typography>);
    }
-
-    const open = (session.isActive && user.invited) ? "открыт" : "закрыт";
-
    return (
        <>
            <Typography variant="subtitle1">{user.name + " " + user.lastName}</Typography>
--- a/front/src/components/core/navIcons.js
+++ b/front/src/components/core/navIcons.js
@@ -14,7 +14,8 @@ import {
    Martini,
    Storefront,
    Users,
-    Wallet
+    Wallet,
+    Calculator
 } from "@phosphor-icons/react";

 export const navIcons = {
@@ -31,6 +32,7 @@ export const navIcons = {
    'chart-pie': ChartPieIcon,
    'gear-six': GearSixIcon,
    'plugs-connected': PlugsConnectedIcon,
+    'calc': Calculator,
    'x-square': XSquare,
    user: UserIcon,
    users: UsersIcon,
--- a/front/src/context/UserContext.js
+++ b/front/src/context/UserContext.js
@@ -1,10 +1,8 @@
 import * as React from "react";
+import {createContext, useCallback, useEffect, useState} from "react";
 import {logger} from "../lib/DefaultLogger";
 import {userClient} from "../lib/clients/UserClient";
 import {tokenUtil} from "../lib/TokenUtil";
-import {createContext, useCallback, useEffect, useState} from "react";
-import {api} from "../lib/clients/api";
-import {requests} from "../requests";

 export const UserContext = createContext(undefined);

@@ -24,19 +22,10 @@ export function UserProvider({children}) {
    const checkSession = useCallback(async () => {
        try {
            setState((prev) => ({...prev, isLoading: true}));
-            if (!await tokenUtil.checkToken(tokenUtil.getToken())) {
+            if (!tokenUtil.checkToken(tokenUtil.getToken())) {
                setState((prev) => ({...prev, error: '', isLoading: false, user: {}}));
                return;
            }
-            api().get(requests.bar.session.status)
-                .then((r) => setState((prevState) => ({
-                    ...prevState,
-                    session: r.data
-                })))
-                .catch(() => setState((prevState) => ({
-                    ...prevState,
-                    session: {}
-                })))
            if (Object.keys(state.user).length === 0) {
                const {data, errorData} = await userClient.getMe();
                if (errorData) {
--- a/front/src/navItems.js
+++ b/front/src/navItems.js
@@ -5,5 +5,6 @@ export const navItems = [
    {key: 'barList', title: 'Список баров', href: paths.bar.list, icon: 'basket', forBarmen: true},
    {key: 'ingredients', title: 'Список ингредиентов', href: paths.bar.ingredients, icon: 'basket', forBarmen: true},
    {key: 'ingredientEdit', title: 'Ингредиенты', href: paths.bar.ingredientEdit, icon: 'ingredients', forAdmin: true},
-    {key: 'cocktailEdit', title: 'Коктейли', href: paths.bar.cocktailEdit, icon: 'cocktail', forAdmin: true}
+    {key: 'cocktailEdit', title: 'Коктейли', href: paths.bar.cocktailEdit, icon: 'cocktail', forAdmin: true},
+    {key: 'calc', title: 'Калькулятор', href: paths.bar.calc, icon: 'calc', forAdmin: true},
 ];
--- a/front/src/path.js
+++ b/front/src/path.js
@@ -17,7 +17,8 @@ export const paths = {
        cocktails: "/cocktails",
        ingredientEdit: '/ingredients/edit',
        cocktailEdit: '/cocktail/edit',
-        menu: '/menuList'
+        menu: '/menuList',
+        calc: '/calc',
    },
    errors: {notFound: '/errors/not-found'},
    notFound: '*',
--- a/front/src/requests.js
+++ b/front/src/requests.js
@@ -29,7 +29,8 @@ export const requests = {
        rating: routes.cocktails + "/rating?id=",
        receipts: routes.cocktails + "/receipts?id=",
        byIngredient: routes.cocktails + "/byIngredient?id=",
-        instructions: routes.cocktails + "/instructions?id="
+        instructions: routes.cocktails + "/instructions?id=",
+        calc: routes.cocktails + "/calc",
    },
    visitors: {
        all: routes.visitor,