188 lines
7.5 KiB
TypeScript
188 lines
7.5 KiB
TypeScript
import * as React from "react";
|
||
import { Box, Modal, Fade, Backdrop, Button, TextField } from "@mui/material";
|
||
import theme from "../../../../../theme";
|
||
import { ArrayProps } from "../../../../../model/tariff";
|
||
import { useTariffStore } from "../../../../../stores/tariffs";
|
||
|
||
|
||
export interface MWProps {
|
||
open: boolean;
|
||
type: number;
|
||
variant: number;
|
||
close: () => void;
|
||
}
|
||
|
||
const ModalMini = ({ open, type, variant, close }: MWProps) => {
|
||
let tariffsArray = useTariffStore(state => state.tariffs);
|
||
const tariffsArraySet = useTariffStore(state => state.setTariffs);
|
||
|
||
const types = ["", "Шаблонизатор документов", "Опросник", "Сокращатель ссылок"];
|
||
const variants = ["Количество", "Срок (дней)", "Количество (гб)"];
|
||
|
||
const fieldName = React.useRef<HTMLInputElement | null>(null);
|
||
const fieldTime = React.useRef<HTMLInputElement | null>(null);
|
||
const fieldPrice = React.useRef<HTMLInputElement | null>(null);
|
||
|
||
const checkTariff = () => {
|
||
if (fieldName.current != null && fieldTime.current != null && fieldPrice.current != null) {
|
||
if (fieldName.current.value && fieldTime.current.value && fieldPrice.current.value) {
|
||
|
||
const data = [0, 0, 0];
|
||
|
||
if (variant === 0) { data[0] = parseInt(fieldTime.current.value); }
|
||
if (variant === 1) { data[1] = parseInt(fieldTime.current.value); }
|
||
if (variant === 2) { data[2] = parseInt(fieldTime.current.value); }
|
||
|
||
const tariffsArrayNew = [...tariffsArray, {
|
||
"id": new Date().getTime(),
|
||
"name": fieldName.current.value,
|
||
"type": "tariff",
|
||
"service": types[type],
|
||
"disk": data[2],
|
||
"time": data[1],
|
||
"points": data[0],
|
||
"price": +fieldPrice.current.value
|
||
} as ArrayProps];
|
||
|
||
tariffsArraySet(tariffsArrayNew);
|
||
|
||
close();
|
||
}
|
||
}
|
||
};
|
||
|
||
return (
|
||
<React.Fragment>
|
||
<Modal
|
||
aria-labelledby="transition-modal-title"
|
||
aria-describedby="transition-modal-description"
|
||
open={open}
|
||
onClose={() => close()}
|
||
closeAfterTransition
|
||
BackdropComponent={Backdrop}
|
||
BackdropProps={{
|
||
timeout: 500,
|
||
}}
|
||
>
|
||
<Fade in={open}>
|
||
<Box sx={{
|
||
position: "absolute",
|
||
top: "50%",
|
||
left: "50%",
|
||
transform: "translate(-50%, -50%)",
|
||
width: "350px",
|
||
height: "350px",
|
||
bgcolor: theme.palette.menu.main,
|
||
boxShadow: 24,
|
||
color: theme.palette.secondary.main,
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
}}>
|
||
<TextField
|
||
id="standard-basic"
|
||
label={types[type]}
|
||
disabled={true}
|
||
variant="filled"
|
||
color="secondary"
|
||
sx={{ width: "80%", marginTop: theme.spacing(1) }}
|
||
InputProps={{
|
||
style: {
|
||
backgroundColor: theme.palette.content.main,
|
||
color: theme.palette.secondary.main,
|
||
}
|
||
}}
|
||
InputLabelProps={{
|
||
style: {
|
||
color: theme.palette.secondary.main
|
||
}
|
||
}}
|
||
/>
|
||
|
||
<TextField
|
||
id="standard-basic"
|
||
label={"Название тарифа"}
|
||
variant="filled"
|
||
color="secondary"
|
||
sx={{ width: "80%", marginTop: theme.spacing(1) }}
|
||
InputProps={{
|
||
style: {
|
||
backgroundColor: theme.palette.content.main,
|
||
color: theme.palette.secondary.main,
|
||
}
|
||
}}
|
||
InputLabelProps={{
|
||
style: {
|
||
color: theme.palette.secondary.main
|
||
}
|
||
}}
|
||
inputRef={fieldName}
|
||
/>
|
||
|
||
<TextField
|
||
id="standard-basic"
|
||
label={variants[variant]}
|
||
variant="filled"
|
||
color="secondary"
|
||
sx={{ width: "80%", marginTop: theme.spacing(1) }}
|
||
InputProps={{
|
||
style: {
|
||
backgroundColor: theme.palette.content.main,
|
||
color: theme.palette.secondary.main,
|
||
}
|
||
}}
|
||
InputLabelProps={{
|
||
style: {
|
||
color: theme.palette.secondary.main
|
||
}
|
||
}}
|
||
inputRef={fieldTime}
|
||
/>
|
||
|
||
<TextField
|
||
id="standard-basic"
|
||
label="Цена"
|
||
variant="filled"
|
||
color="secondary"
|
||
sx={{ width: "80%", marginTop: theme.spacing(1) }}
|
||
InputProps={{
|
||
style: {
|
||
backgroundColor: theme.palette.content.main,
|
||
color: theme.palette.secondary.main,
|
||
}
|
||
}}
|
||
InputLabelProps={{
|
||
style: {
|
||
color: theme.palette.secondary.main
|
||
}
|
||
}}
|
||
inputRef={fieldPrice}
|
||
/>
|
||
|
||
|
||
<Button
|
||
variant="contained"
|
||
onClick={() => checkTariff()}
|
||
sx={{
|
||
backgroundColor: theme.palette.grayDark.main,
|
||
marginTop: "30px",
|
||
height: "42px",
|
||
fontWeight: "normal",
|
||
fontSize: "17px",
|
||
"&:hover": {
|
||
backgroundColor: theme.palette.grayMedium.main
|
||
}
|
||
}}>
|
||
Применить
|
||
</Button>
|
||
</Box>
|
||
</Fade>
|
||
</Modal>
|
||
</React.Fragment>
|
||
);
|
||
};
|
||
|
||
|
||
export default ModalMini;
|