56 lines
2.2 KiB
JavaScript
56 lines
2.2 KiB
JavaScript
import MapLayer from "@/core/components/MapLayer";
|
|
import { Close, RemoveRedEye } from "@mui/icons-material";
|
|
import { Box, Dialog, DialogContent, DialogTitle, IconButton, Tooltip, Typography } from "@mui/material";
|
|
import { useMemo, useState } from "react";
|
|
import ShowBound from "../showBound";
|
|
import L from "leaflet";
|
|
|
|
const ShowArea = ({ area }) => {
|
|
const bound = useMemo(() => L.polygon([...area]), [area]);
|
|
const [openAreaDialog, setOpenAreaDialog] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<Tooltip title="محدوده">
|
|
<IconButton color="primary" onClick={() => setOpenAreaDialog(true)}>
|
|
<RemoveRedEye />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Dialog
|
|
open={openAreaDialog}
|
|
onClose={() => setOpenAreaDialog(false)}
|
|
PaperProps={{
|
|
sx: {
|
|
transition: "all .3s",
|
|
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
|
|
borderRadius: 2,
|
|
padding: 1,
|
|
},
|
|
}}
|
|
maxWidth="sm"
|
|
fullWidth
|
|
dir="rtl"
|
|
>
|
|
<DialogTitle sx={{ display: "flex", justifyContent: "space-between", padding: "16px 24px" }}>
|
|
<Typography variant="body1" sx={{ fontWeight: "bold", fontSize: "large" }}>
|
|
محدوده
|
|
</Typography>
|
|
<IconButton onClick={() => setOpenAreaDialog(false)} size="small">
|
|
<Close />
|
|
</IconButton>
|
|
</DialogTitle>
|
|
<DialogContent>
|
|
<Box sx={{ flex: 1 }}>
|
|
<Box sx={{ width: "100%", height: "400px" }}>
|
|
<MapLayer style={{ borderRadius: "4px" }}>
|
|
<ShowBound bound={bound} />
|
|
</MapLayer>
|
|
</Box>
|
|
</Box>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
};
|
|
export default ShowArea;
|