105 lines
4.5 KiB
JavaScript
105 lines
4.5 KiB
JavaScript
import * as React from 'react';
|
|
import {useEffect, useState} from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Button from '@mui/material/Button';
|
|
import Dialog from '@mui/material/Dialog';
|
|
import DialogActions from '@mui/material/DialogActions';
|
|
import DialogContent from '@mui/material/DialogContent';
|
|
import DialogContentText from '@mui/material/DialogContentText';
|
|
import DialogTitle from '@mui/material/DialogTitle';
|
|
import Stack from "@mui/material/Stack";
|
|
import Typography from "@mui/material/Typography";
|
|
import {ButtonGroup} from "@mui/material";
|
|
import {requests} from "../../requests";
|
|
import {useAlert} from "../../hooks/useAlert";
|
|
import {api} from "../../lib/clients/api";
|
|
|
|
function renderButtons(row, my, handleChange) {
|
|
if (my) {
|
|
if (row.status === "NEW") {
|
|
return (
|
|
<ButtonGroup variant="contained">
|
|
<Button color="error" onClick={() => handleChange(row, "CANCEL")}>Отмена</Button>
|
|
</ButtonGroup>
|
|
);
|
|
} else {
|
|
return null;
|
|
}
|
|
} else {
|
|
return (
|
|
<ButtonGroup variant="contained">
|
|
<Button color="success" onClick={() => handleChange(row, "DONE")}>Выполнен</Button>
|
|
<Button color="error" onClick={() => handleChange(row, "CANCEL")}>Отмена</Button>
|
|
</ButtonGroup>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default function OrderModal({row, handleClose, open, handleChange, my}) {
|
|
const [receipt, setReceipt] = useState([]);
|
|
const [instructions, setInstructions] = useState();
|
|
const {createError} = useAlert();
|
|
|
|
useEffect(() => {
|
|
if (!row) {
|
|
return;
|
|
}
|
|
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]);
|
|
|
|
if (!row) {
|
|
return null;
|
|
}
|
|
return (
|
|
<Dialog
|
|
fullWidth={true}
|
|
maxWidth="350px"
|
|
open={open}
|
|
onClose={handleClose}
|
|
>
|
|
<DialogTitle>{"Заказ №" + row.id}</DialogTitle>
|
|
<DialogContent>
|
|
<DialogContentText>{row.cocktail.name}</DialogContentText>
|
|
<DialogContentText>{"для: " + row.visitor.name + " " + row.visitor.lastName}</DialogContentText>
|
|
<Box noValidate component="form"
|
|
sx={{display: 'flex', flexDirection: 'column', m: 'auto', width: 'fit-content',}}>
|
|
<Stack>
|
|
<img src={row.cocktail.image} alt={row.cocktail.name} loading={"eager"} width={"300"}/>
|
|
<Typography>Ингредиенты:</Typography>
|
|
<Stack pl={1}>
|
|
{receipt.map((r) => {
|
|
return (<Typography key={r.id}>{`${r.ingredient.name} - ${r.measure}`}</Typography>)
|
|
})}
|
|
</Stack>
|
|
{instructions &&
|
|
(
|
|
<>
|
|
<Typography>Инструкция:</Typography>
|
|
<Typography pl={1}>{instructions}</Typography>
|
|
</>
|
|
)
|
|
}
|
|
|
|
{row.cocktail.video && (<iframe width="350" /*height="315"*/
|
|
src={row.cocktail.video}
|
|
title="YouTube video player"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
referrerPolicy="strict-origin-when-cross-origin"
|
|
allowFullScreen></iframe>)}
|
|
</Stack>
|
|
</Box>
|
|
</DialogContent>
|
|
<DialogActions sx={{justifyContent: "space-between"}}>
|
|
{renderButtons(row, my, handleChange)}
|
|
<Button onClick={handleClose}>Close</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
);
|
|
} |