113 lines
5.2 KiB
JavaScript
113 lines
5.2 KiB
JavaScript
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";
|
|
import {CocktailItemStyled} from "./CocktailItemStyled";
|
|
import IconButton from "@mui/material/IconButton";
|
|
import FavoriteBorderIcon from '@mui/icons-material/FavoriteTwoTone';
|
|
import FavoriteIcon from '@mui/icons-material/Favorite';
|
|
import {api} from "../../lib/clients/api";
|
|
import Box from "@mui/material/Box";
|
|
import {useUser} from "../../hooks/useUser";
|
|
|
|
function renderFavouriteBadge(handleFavourite, row) {
|
|
const childIcon = row.rating.favourite ? <FavoriteIcon color='error'/> : <FavoriteBorderIcon color={'warning'}/>;
|
|
return (
|
|
<IconButton sx={{position: 'absolute', top: "15px", right: "15px"}} onClick={() => handleFavourite(row)}>
|
|
{childIcon}
|
|
</IconButton>
|
|
)
|
|
}
|
|
|
|
function renderRating(handleChangeRating, row) {
|
|
return (
|
|
<Rating
|
|
sx={{position: 'absolute', top: '310px', right: '85px'}}
|
|
name="simple-controlled"
|
|
size="large"
|
|
value={row.rating.rating}
|
|
onChange={(event, newValue) => handleChangeRating(row, newValue)}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export function Cocktail({row, handleFavourite, handleChangeRating, handleSelect, editMenuBlock}) {
|
|
const {createAlert, createError} = useAlert();
|
|
const {session, user} = useUser();
|
|
|
|
function pay(cocktailId) {
|
|
api().post(`${requests.bar.pay}cocktail=${cocktailId}`)
|
|
.then(() => createAlert("Ожидайте свой заказ", "success"))
|
|
.catch(() => createError("Ошибка во время создания заказа"))
|
|
}
|
|
|
|
return (
|
|
<Grid item sx={{pr: 2}}>
|
|
<CocktailItemStyled>
|
|
<Box sx={{
|
|
p: '4px 4px',
|
|
m: 1,
|
|
width: '320px',
|
|
position: 'relative',
|
|
}}>
|
|
<CardMedia
|
|
sx={{
|
|
loading: "eager",
|
|
borderRadius: 2
|
|
}}
|
|
onClick={() => handleSelect(row)}
|
|
component="img"
|
|
alt={row.name}
|
|
height="300"
|
|
|
|
image={`${row.image}/preview`}
|
|
/>
|
|
{renderFavouriteBadge(handleFavourite, row)}
|
|
{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>
|
|
</CardContent>
|
|
<CardActions>
|
|
{(row.isAllowed && session.isActive && user.invited) &&
|
|
<Button variant="contained" onClick={() => pay(row.id)}>Заказать</Button>
|
|
}
|
|
{editMenuBlock(row)}
|
|
</CardActions>
|
|
</Box>
|
|
</CocktailItemStyled>
|
|
</Grid>
|
|
)
|
|
} |