kayashov73/my-bar
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Доработка фронта

Browse Source
This commit is contained in:
Kayashov.SM
2025-04-21 16:22:36 +04:00
parent 704875d297
commit 23316b79f0
13 changed files with 211 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
front/src/components/Ingredients/IngredientInfoModal.js
View File

@@ -6,13 +6,33 @@ import Button from "@mui/material/Button";
import * as React from "react";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
import List from "@mui/material/List";
import {useEffect, useState} from "react";
import {api} from "../../lib/clients/api";
import {requests} from "../../requests";
import {useAlert} from "../../hooks/useAlert";
import ListItem from "@mui/material/ListItem";
import {useSelect} from "../../hooks/useSelect";
export function IngredientInfoModal({ingredient}) {
const [cocktails, setCocktails] = useState([]);
const {closeIngredient, getOpenIngredient, selectCocktail} = useSelect();
const {createError} = useAlert();
useEffect(() => {
if(!ingredient) {
return
}
api().get(requests.cocktails.byIngredient + ingredient.id)
.then((r) => setCocktails(r.data))
.catch(() => createError())
}, [ingredient]);
export function IngredientInfoModal({ingredient, open, closeHandler}) {
if (!ingredient) {
return null;
}
return (
<Dialog fullWidth={true} maxWidth="350px" open={open} onClose={closeHandler}
<Dialog fullWidth={true} maxWidth="350px" open={getOpenIngredient()} onClose={closeIngredient}
sx={{
'& .MuiDialog-paper': {
margin: '8px',
@@ -28,9 +48,30 @@ export function IngredientInfoModal({ingredient, open, closeHandler}) {
{ingredient.alcohol && (<Typography>{`Крепость ${ingredient.abv}`}</Typography>)}
<Typography>{ingredient.description}</Typography>
</Stack>
{cocktails.length > 0 && (
<>
<Typography sx={{ mt:2}}>Коктейли:</Typography>
<List>
{cocktails.map((c) => {
return (
<ListItem key={c.id} onClick={() => {
selectCocktail(c.id)
closeIngredient();
}}>
<Stack direction={'row'}>
<img src={c.image} alt={c.name} loading={"eager"} width={"50"}/>
<Typography sx={{mx:1}}>{c.name}</Typography>
{c.rating.rating > 0 && <Typography> {`${c.rating.rating}/5`}</Typography>}
</Stack>
</ListItem>
)
})}
</List>
</>
)}
</DialogContent>
<DialogActions>
<Button onClick={closeHandler}>Close</Button>
<Button onClick={closeIngredient}>Close</Button>
</DialogActions>
</Dialog>
);

33
front/src/components/cocktails/Cocktail.js
View File

@@ -1,9 +1,6 @@
import {CardActions, CardContent, CardMedia, Rating} from "@mui/material";
import {useAlert} from "../../hooks/useAlert";
import Typography from "@mui/material/Typography";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemText from "@mui/material/ListItemText";
import Button from "@mui/material/Button";
import Grid from "@mui/material/Grid";
import {requests} from "../../requests";
@@ -14,6 +11,7 @@ import FavoriteIcon from '@mui/icons-material/Favorite';
import {api} from "../../lib/clients/api";
import Box from "@mui/material/Box";
import {useUser} from "../../hooks/useUser";
import {CocktailDescription} from "./CocktailDescription";
function renderFavouriteBadge(handleFavourite, row) {
const childIcon = row.rating.favourite ? <FavoriteIcon color='error'/> : <FavoriteBorderIcon color={'warning'}/>;
@@ -71,34 +69,7 @@ export function Cocktail({row, handleFavourite, handleChangeRating, handleSelect
{renderRating(handleChangeRating, row)}
<CardContent sx={{pb: '4px', pl: 2}}>
<Typography variant="h5" minHeight={'50px'} mt={2}>{row.name} </Typography>
<List sx={{py: '0px'}}>
{row.hasError && (
<ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
<ListItemText color={'red'}>Имеет ошибку в рецепте или ингредиентах</ListItemText>
</ListItem>
)}
<ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
<ListItemText>{"Категория: " + row.category}</ListItemText>
</ListItem>
<ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
<ListItemText>{"Алкоголь: " + row.alcoholic}</ListItemText>
</ListItem>
{row.volume !== null && (
<ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
<ListItemText>{"Крепость: ≈" + row.volume}</ListItemText>
</ListItem>
)}
<ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
<ListItemText>{"Подача: " + row.glass}</ListItemText>
</ListItem>
<ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
<ListItemText>{"Состав: " + row.components}</ListItemText>
</ListItem>
{(row.tags && row.tags.length > 0) && (
<ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
<ListItemText>{"Теги: " + row.tags.replaceAll(',', ', ')}</ListItemText>
</ListItem>)}
</List>
<CocktailDescription row={row}/>
</CardContent>
<CardActions>
{(row.isAllowed && session.isActive && user.invited) &&

36
front/src/components/cocktails/CocktailDescription.js Normal file
View File

@@ -0,0 +1,36 @@
import ListItem from "@mui/material/ListItem";
import ListItemText from "@mui/material/ListItemText";
import List from "@mui/material/List";
export function CocktailDescription({row}) {
return (
<List sx={{py: '0px'}}>
{row.hasError && (
<ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
<ListItemText color={'red'}>Имеет ошибку в рецепте или ингредиентах</ListItemText>
</ListItem>
)}
<ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
<ListItemText>{"Категория: " + row.category}</ListItemText>
</ListItem>
<ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
<ListItemText>{"Алкоголь: " + row.alcoholic}</ListItemText>
</ListItem>
{row.volume !== null && (
<ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
<ListItemText>{"Крепость: ≈" + row.volume}</ListItemText>
</ListItem>
)}
<ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
<ListItemText>{"Подача: " + row.glass}</ListItemText>
</ListItem>
<ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
<ListItemText>{"Состав: " + row.components}</ListItemText>
</ListItem>
{(row.tags && row.tags.length > 0) && (
<ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
<ListItemText>{"Теги: " + row.tags.replaceAll(',', ', ')}</ListItemText>
</ListItem>)}
</List>
)
}

31
front/src/components/cocktails/CocktailInfoModal.js
View File

@@ -21,24 +21,20 @@ import {useAlert} from "../../hooks/useAlert";
import {paths} from "../../path";
import {Loading} from "../core/Loading";
import {useUser} from "../../hooks/useUser";
import {useSelect} from "../../hooks/useSelect";
export function CocktailInfoModal({open, row, closeHandler}) {
export function CocktailInfoModal({row}) {
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 {closeCocktail, selectIngredient, getIngredient, getOpenCocktail} = useSelect();
const openIngredientModalHandler = (id) => {
api().get(`${requests.bar.ingredient}?id=${id}`)
.then((r) => {
setSelectedIngredient(r.data)
setOpenIngredientModal(true);
}).catch(() => createError("Ошибка получения информации об ингредиенте"))
selectIngredient(r.data)
})
.catch(() => createError("Ошибка получения информации об ингредиенте"))
}
const selectIngredientHandler = (ingredient) => {
const url = `${requests.bar.ingredient}?id=${ingredient.id}`;
@@ -79,18 +75,17 @@ export function CocktailInfoModal({open, row, closeHandler}) {
.catch(() => {
getError();
setLoading(false)
closeHandler();
closeCocktail();
})
// eslint-disable-next-line
}, [row]);
if (!row || !cocktail) {
return null;
}
let alko = 0;
let volume = 0;
return (
<Dialog fullWidth={true}
open={open} onClose={closeHandler}
open={getOpenCocktail()} onClose={closeCocktail}
sx={{
'& .MuiDialog-paper': {
margin: '8px',
@@ -99,8 +94,7 @@ export function CocktailInfoModal({open, row, closeHandler}) {
width: 'calc(100% - 16px)',
}
}}>
<IngredientInfoModal ingredient={selectedIngredient} open={openIngredientModal}
closeHandler={closeIngredientHandler}/>
<IngredientInfoModal ingredient={getIngredient()}/>
<Loading loading={loading}/>
<DialogTitle>
<Stack direction='row' justifyContent={'space-between'}>
@@ -134,9 +128,6 @@ export function CocktailInfoModal({open, row, closeHandler}) {
{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}>
@@ -173,7 +164,7 @@ export function CocktailInfoModal({open, row, closeHandler}) {
{user.role.includes("ADMIN") && (
<Button href={`${paths.bar.cocktailEdit}?id=${cocktail.id}`}>Редактировать</Button>
)}
<Button onClick={closeHandler}>Закрыть</Button>
<Button onClick={closeCocktail}>Закрыть</Button>
</DialogActions>
</Dialog>
)

16
front/src/components/orders/OrderModal.js
View File

@@ -37,6 +37,7 @@ function renderButtons(row, my, handleChange) {
export default function OrderModal({row, handleClose, open, handleChange, my}) {
const [receipt, setReceipt] = useState([]);
const [instructions, setInstructions] = useState();
const {createError} = useAlert();
useEffect(() => {
@@ -46,6 +47,10 @@ export default function OrderModal({row, handleClose, open, handleChange, my}) {
api().get(requests.bar.receipts + row.cocktail.id)
.then((r) => setReceipt(r.data))
.catch(() => createError("Ошибка получения рецепта"))
api().get(requests.cocktails.instructions + row.cocktail.id)
.then((r) => setInstructions(r.data))
.catch(() => createError("Ошибка получения инструкции"))
// eslint-disable-next-line
}, [row]);
@@ -62,7 +67,6 @@ export default function OrderModal({row, handleClose, open, handleChange, my}) {
<DialogTitle>{"Заказ №" + row.id}</DialogTitle>
<DialogContent>
<DialogContentText>{row.cocktail.name}</DialogContentText>
<DialogContentText>{row.cocktail.alcoholic + " " + row.cocktail.category}</DialogContentText>
<DialogContentText>{"для: " + row.visitor.name + " " + row.visitor.lastName}</DialogContentText>
<Box noValidate component="form"
sx={{display: 'flex', flexDirection: 'column', m: 'auto', width: 'fit-content',}}>
@@ -74,8 +78,14 @@ export default function OrderModal({row, handleClose, open, handleChange, my}) {
return (<Typography key={r.id}>{`${r.ingredient.name} - ${r.measure}`}</Typography>)
})}
</Stack>
<Typography>Инструкция:</Typography>
<Typography pl={1}>{row.cocktail.instructions}</Typography>
{instructions &&
(
<>
<Typography>Инструкция:</Typography>
<Typography pl={1}>{instructions}</Typography>
</>
)
}
{row.cocktail.video && (<iframe width="350" /*height="315"*/
src={row.cocktail.video}