61 lines
2.4 KiB
JavaScript
61 lines
2.4 KiB
JavaScript
const { Button, IconButton, Tooltip, Box, Dialog, DialogTitle, Typography, DialogContent, DialogActions } = require("@mui/material");
|
|
import LayersIcon from '@mui/icons-material/Layers';
|
|
import CloseIcon from "@mui/icons-material/Close";
|
|
import { useMemo, useState } from 'react';
|
|
import MapLayer from '@/core/components/MapLayer';
|
|
import ShowBound from './ShowBound';
|
|
|
|
const ShowPrimaryArea = ({primaryArea}) => {
|
|
const [openShowAreaDialog, setOpenShowAreaDialog] = useState(false);
|
|
const bound = useMemo(() => {
|
|
const latLngCoords = primaryArea.coordinates.map(coord => [coord[1], coord[0]]);
|
|
return primaryArea.type === "polygon"
|
|
? L.polygon(latLngCoords)
|
|
: L.polyline(latLngCoords);
|
|
}, [primaryArea]);
|
|
|
|
return (
|
|
<Box>
|
|
<Tooltip title="نمایش پلیگان" placement='right' arrow>
|
|
<IconButton size='small' color='primary' onClick={() => setOpenShowAreaDialog(true)}>
|
|
<LayersIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Dialog
|
|
open={openShowAreaDialog}
|
|
onClose={() => setOpenShowAreaDialog(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={() => setOpenShowAreaDialog(false)} size="small">
|
|
<CloseIcon />
|
|
</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>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export default ShowPrimaryArea |