Initial commit

2025-03-12 17:54:16 +04:00
commit b6d8a3cebd
254 changed files with 29963 additions and 0 deletions
--- a/front/src/components/cocktails/CocktailInfoModal.js
+++ b/front/src/components/cocktails/CocktailInfoModal.js
@@ -0,0 +1,180 @@
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import DialogActions from "@mui/material/DialogActions";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import * as React from "react";
+import {useEffect, useState} from "react";
+import {CardMedia} from "@mui/material";
+import Paper from "@mui/material/Paper";
+import Box from "@mui/material/Box";
+import StarBorderIcon from '@mui/icons-material/StarBorder';
+import IconButton from "@mui/material/IconButton";
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+import DeleteIcon from '@mui/icons-material/Delete';
+import {IngredientInfoModal} from "../Ingredients/IngredientInfoModal";
+import {api} from "../../lib/clients/api";
+import {requests} from "../../requests";
+import {useAlert} from "../../hooks/useAlert";
+import {paths} from "../../path";
+import {Loading} from "../core/Loading";
+import {useUser} from "../../hooks/useUser";
+
+export function CocktailInfoModal({open, row, closeHandler}) {
+    const {user} = useUser();
+    const {getError, createError, createSuccess} = useAlert();
+    const [cocktail, setCocktail] = useState(null)
+    const [loading, setLoading] = useState(false);
+    const [selectedIngredient, setSelectedIngredient] = useState(null);
+    const [openIngredientModal, setOpenIngredientModal] = useState(false)
+    const closeIngredientHandler = () => {
+        setOpenIngredientModal(false);
+        setSelectedIngredient(null);
+    }
+    const openIngredientModalHandler = (id) => {
+        api().get(`${requests.bar.ingredient}?id=${id}`)
+            .then((r) => {
+                setSelectedIngredient(r.data)
+                setOpenIngredientModal(true);
+            }).catch(() => createError("Ошибка получения информации об ингредиенте"))
+    }
+    const selectIngredientHandler = (ingredient) => {
+        const url = `${requests.bar.ingredient}?id=${ingredient.id}`;
+        const request = ingredient.isHave ? api().delete(url) : api().put(url);
+        const value = !ingredient.isHave;
+        request.then(() => {
+            const newReceipts = cocktail.receipt.map((r) => {
+                if (r.ingredient.id !== ingredient.id) {
+                    return r;
+                }
+                return {
+                    ...r,
+                    ingredient: {
+                        ...ingredient,
+                        isHave: value
+                    }
+                }
+            })
+            setCocktail({
+                ...cocktail,
+                receipt: newReceipts
+            })
+            createSuccess("Сохранено")
+        }).catch(() => createError("Ошибка сохранения"))
+    }
+
+    useEffect(() => {
+        setLoading(true)
+        if (!row) {
+            setLoading(false)
+            return;
+        }
+        api().get(requests.cocktails.modal + row)
+            .then((r) => {
+                setCocktail(r.data)
+                setLoading(false)
+            })
+            .catch(() => {
+                getError();
+                setLoading(false)
+                closeHandler();
+            })
+    }, [row]);
+
+    if (!row || !cocktail) {
+        return null;
+    }
+    let alko = 0;
+    let volume = 0;
+    return (
+        <Dialog fullWidth={true}
+                open={open} onClose={closeHandler}
+                sx={{
+                    '& .MuiDialog-paper': {
+                        margin: '8px',
+                    },
+                    '& .MuiPaper-root': {
+                        width: 'calc(100% - 16px)',
+                    }
+                }}>
+            <IngredientInfoModal ingredient={selectedIngredient} open={openIngredientModal}
+                                 closeHandler={closeIngredientHandler}/>
+            <Loading loading={loading}/>
+            <DialogTitle>
+                <Stack direction='row' justifyContent={'space-between'}>
+                    <Box>{cocktail.name}</Box>
+
+                    {cocktail.rating.rating > 0 &&
+                        (
+                            <Stack ml={3} direction='row'>
+                                {`${cocktail.rating.rating}/5`}
+                                <StarBorderIcon sx={{pb: "2px"}}/>
+                            </Stack>
+                        )
+                    }
+                </Stack>
+            </DialogTitle>
+            <DialogContent>
+                <CardMedia
+                    image={`${cocktail.image}/preview`}
+                    sx={{
+                        loading: "eager",
+                        borderRadius: 2
+                    }}
+                    component="img"
+                    alt={cocktail.name}
+                    height="300"
+                />
+                <Box mt={1}>
+                    <Typography>Ингредиенты:</Typography>
+                    <Paper sx={{p: 1}} elevation={3}>
+                        <Stack>
+                            {cocktail.receipt.map((r) => {
+                                const hasError = r.count === null || r.unit === null;
+                                const measure = hasError ? r.measure : (r.count + " " + r.unit.name)
+                                if(alko !== null && volume !== null) {
+                                    console.log(r)
+                                }
+                                return (
+                                    <Stack key={r.ingredient.id} direction='row' justifyContent={'space-between'}
+                                           mt={1}>
+                                        <Stack direction='row'>
+                                            {user.role !== "USER" && (
+                                                <IconButton size="small" sx={{pb: "2px"}}
+                                                            onClick={() => selectIngredientHandler(r.ingredient)}>
+                                                    {r.ingredient.isHave
+                                                        ? (<DeleteIcon fontSize="small"/>)
+                                                        : (<ShoppingCartIcon fontSize="small"/>)
+                                                    }
+                                                </IconButton>
+                                            )}
+                                            <Typography
+                                                onClick={() => openIngredientModalHandler(r.ingredient.id)}>{r.ingredient.name}</Typography>
+                                        </Stack>
+                                        <Typography color={hasError && 'red'}>{measure}</Typography>
+                                    </Stack>
+                                )
+                            })}
+                        </Stack>
+                    </Paper>
+                </Box>
+                <Box>
+                    <Typography mt={2}>Инструкция:</Typography>
+                    <Paper sx={{p: 1}} elevation={3}>
+                        <Box>
+                            {cocktail.instructions}
+                        </Box>
+                    </Paper>
+                </Box>
+            </DialogContent>
+            <DialogActions>
+                {user.role.includes("ADMIN") && (
+                    <Button href={`${paths.bar.cocktailEdit}?id=${cocktail.id}`}>Редактировать</Button>
+                )}
+                <Button onClick={closeHandler}>Закрыть</Button>
+            </DialogActions>
+        </Dialog>
+    )
+}