117 lines
3.9 KiB
JavaScript
117 lines
3.9 KiB
JavaScript
import { Delete, Route } from "@mui/icons-material";
|
|
import { Box, Button, Stack, Typography } from "@mui/material";
|
|
import { useReducer } from "react";
|
|
import DrawPolygon from "./DrawBound";
|
|
|
|
const statusType = [
|
|
{
|
|
id: 0,
|
|
message: "برای آغاز ترسیم محدوده، کلیک کنید!",
|
|
buttons: [
|
|
{
|
|
label: "شروع ترسیم محدوده",
|
|
key: "start",
|
|
color: "warning",
|
|
icon: <Route />,
|
|
onclick: (controlDispach) => {
|
|
controlDispach({ type: "SET_STATUS", status: 1 });
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: 1,
|
|
message: "محدودهی موردنظر را با کلیک روی نقشه مشخص کنید. برای اتمام، روی نقطهی ابتدایی کلیک کنید!",
|
|
buttons: [],
|
|
},
|
|
{
|
|
id: 2,
|
|
message: "برای اصلاح محدوده، گوشهها را بکشید. برای ترسیم دوباره، آن را حذف کنید",
|
|
buttons: [
|
|
{
|
|
label: "حذف",
|
|
key: "end",
|
|
color: "error",
|
|
icon: <Delete />,
|
|
onclick: (controlDispach) => {
|
|
controlDispach({ type: "SET_STATUS", status: 0 });
|
|
},
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
const createInitialState = (drawBound) => {
|
|
if (drawBound) {
|
|
return { status: 2 };
|
|
}
|
|
return { status: 0 };
|
|
};
|
|
|
|
const reducer = (state, action) => {
|
|
switch (action.type) {
|
|
case "SET_STATUS":
|
|
return { ...state, status: action.status };
|
|
default:
|
|
return state;
|
|
}
|
|
};
|
|
|
|
const MapDrawPolygon = ({ drawBound, setDrawBound }) => {
|
|
const [control, controlDispach] = useReducer(reducer, drawBound, createInitialState);
|
|
|
|
return (
|
|
<>
|
|
<DrawPolygon drawBound={drawBound} setDrawBound={setDrawBound} control={control} controlDispach={controlDispach} />
|
|
<Stack
|
|
direction={"row"}
|
|
justifyContent={"center"}
|
|
sx={{ position: "absolute", left: 0, top: 0, zIndex: 2000, width: "100%" }}
|
|
>
|
|
<Box
|
|
sx={{
|
|
background: (theme) => theme.palette.secondary.main,
|
|
borderBottomLeftRadius: 8,
|
|
borderBottomRightRadius: 8,
|
|
py: 0.5,
|
|
px: 2,
|
|
}}
|
|
>
|
|
<Typography align="center" component={"div"} variant="caption" color={"#fff"}>
|
|
{statusType.find((st) => st.id == control.status).message}
|
|
</Typography>
|
|
</Box>
|
|
</Stack>
|
|
<Box
|
|
sx={{
|
|
position: "absolute",
|
|
left: 0,
|
|
bottom: 0,
|
|
zIndex: 2000,
|
|
width: "100%",
|
|
py: 1,
|
|
background: "linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0))",
|
|
}}
|
|
>
|
|
<Stack direction={"row"} justifyContent={"center"} spacing={2}>
|
|
{statusType
|
|
.find((st) => st.id == control.status)
|
|
.buttons.map((button) => (
|
|
<Button
|
|
size="medium"
|
|
key={button.key}
|
|
variant="contained"
|
|
onClick={() => button.onclick(controlDispach)}
|
|
color={button.color}
|
|
startIcon={button.icon}
|
|
>
|
|
{button.label}
|
|
</Button>
|
|
))}
|
|
</Stack>
|
|
</Box>
|
|
</>
|
|
);
|
|
};
|
|
export default MapDrawPolygon;
|