RMS/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature/gasht rahdari cartable

Browse Source
This commit is contained in:
Amin Ghasempoor
2024-12-28 13:54:05 +00:00
committed by AmirHossein Mahmoodi
parent 7b09b61151
commit e2d092346e
49 changed files with 1202 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/core/components/MapInfoTwoMarker.jsx
View File

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
import { Marker, useMapEvents } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import { Box, Button, Typography } from "@mui/material";
import { Alert, Box, Button, Stack, Typography, Zoom } from "@mui/material";
import dynamic from "next/dynamic";
import MapLoading from "@/core/components/MapLayer/Loading";
import EndIcon from "@/assets/images/examine_marker_active.png";
@@ -40,17 +40,20 @@ const createCustomIcon = (size, iconUrl, labelText) => {
popupAnchor: [0, -size[1]],
});
};
const MAX_ZOOM_FOR_MARKER = 13;
const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
const [isStartLocked, setIsStartLocked] = useState(!!(startLat && startLng)); // وضعیت قفل نقطه آغاز
const [isEndLocked, setIsEndLocked] = useState(!!(endLat && endLng)); // وضعیت قفل نقطه پایان
const [startPosition, setStartPosition] = useState(startLat && startLng ? { lat: startLat, lng: startLng } : null);
const [endPosition, setEndPosition] = useState(endLat && endLng ? { lat: endLat, lng: endLng } : null);
const [enableSend, setEnableSend] = useState(false);
const startRef = useRef();
const endRef = useRef();
const map = useMapEvents({
move(e) {
setEnableSend(e.target.getZoom() > MAX_ZOOM_FOR_MARKER);
if (!isStartLocked && startRef.current) {
startRef.current.setLatLng(e.target.getCenter());
} else if (isStartLocked && !isEndLocked && endRef.current) {
@@ -58,6 +61,7 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
}
},
zoom(e) {
setEnableSend(e.target.getZoom() > MAX_ZOOM_FOR_MARKER);
if (!isStartLocked && startRef.current) {
startRef.current.setLatLng(e.target.getCenter());
} else if (isStartLocked && !isEndLocked && endRef.current) {
@@ -101,6 +105,7 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
icon={createCustomIcon([35, 35], StartIcon.src, "نقطه شروع")}
eventHandlers={{
click: () => {
if (!enableSend) return;
if (!isStartLocked) {
const center = map.getCenter();
setValue("start_point", { lat: center.lat.toString(), lng: center.lng.toString() });
@@ -110,6 +115,23 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
},
}}
/>
<Stack
direction={"row"}
justifyContent={"center"}
sx={{
zIndex: "400",
width: "100%",
position: "absolute",
top: 0,
left: 0,
}}
>
<Zoom in={!enableSend}>
<Alert sx={{ mt: 1, py: 0.5, px: 2, borderRadius: 2, border: 1 }} icon={false} color={"warning"}>
برای ثبت محل فعالیت، لطفاً نقشه را بیشتر زوم کنید.
</Alert>
</Zoom>
</Stack>
{isStartLocked && !isEndLocked && (
<Box
sx={{
@@ -125,21 +147,45 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
</Box>
)}
{isStartLocked && (
<Marker
position={endPosition || map.getCenter()}
ref={endRef}
icon={createCustomIcon([35, 35], EndIcon.src, "نقطه پایان")}
eventHandlers={{
click: () => {
if (!isEndLocked) {
const center = map.getCenter();
setValue("end_point", { lat: center.lat.toString(), lng: center.lng.toString() });
setEndPosition({ lat: center.lat, lng: center.lng });
setIsEndLocked(true);
}
},
}}
/>
<>
<Stack
direction={"row"}
justifyContent={"center"}
sx={{
zIndex: "400",
width: "100%",
position: "absolute",
top: 0,
left: 0,
}}
>
<Zoom in={!enableSend}>
<Alert
sx={{ mt: 1, py: 0.5, px: 2, borderRadius: 2, border: 1 }}
icon={false}
color={"warning"}
>
برای ثبت محل فعالیت، لطفاً نقشه را بیشتر زوم کنید.
</Alert>
</Zoom>
</Stack>
<Marker
position={endPosition || map.getCenter()}
ref={endRef}
icon={createCustomIcon([35, 35], EndIcon.src, "نقطه پایان")}
eventHandlers={{
click: () => {
if (!enableSend) return;
if (!isEndLocked) {
const center = map.getCenter();
setValue("end_point", { lat: center.lat.toString(), lng: center.lng.toString() });
setEndPosition({ lat: center.lat, lng: center.lng });
setIsEndLocked(true);
}
},
}}
/>
</>
)}
{isEndLocked && (
<Box