Feature/faaliyat rozane cartable

2024-12-23 08:20:46 +00:00
parent f2ef4cd1db
commit 4b25071e41
75 changed files with 3722 additions and 236 deletions
--- a/src/core/components/MapInfoOneMarker.jsx
+++ b/src/core/components/MapInfoOneMarker.jsx
@@ -0,0 +1,137 @@
+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 dynamic from "next/dynamic";
+import MapLoading from "@/core/components/MapLayer/Loading";
+import HereIcon from "@/assets/images/examine_marker_active.png";
+
+const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
+    loading: () => <MapLoading />,
+    ssr: false,
+});
+
+const createCustomIcon = (size, iconUrl, labelText) => {
+    if (labelText) {
+        return L.divIcon({
+            html: `
+                <div style="position: relative; display: inline-block; text-align: center;">
+                    <img 
+                        src="${iconUrl}" 
+                        style="width: ${size[0]}px; height: ${size[1]}px;" 
+                        alt="icon"
+                    />
+                    <div style="position: absolute; top: 100%; left: 50%; transform: translate(-50%, 0); color: black; font-size: 12px;">
+                        ${labelText}
+                    </div>
+                </div>
+            `,
+            iconSize: size,
+            iconAnchor: [size[0] / 2, size[1]],
+            popupAnchor: [0, -size[1]],
+        });
+    }
+
+    return L.icon({
+        iconUrl: iconUrl,
+        iconSize: size,
+        iconAnchor: [size[0] / 2, size[1]],
+        popupAnchor: [0, -size[1]],
+    });
+};
+
+const MapInteraction = ({ setValue, startLat, startLng }) => {
+    const [isMarkerLocked, setIsMarkerLocked] = useState(!!(startLat && startLng)); // وضعیت قفل مارکر
+    const [markerPosition, setMarkerPosition] = useState(
+        startLat && startLng ? { lat: startLat, lng: startLng } : null
+    );
+    const markerRef = useRef();
+
+    const map = useMapEvents({
+        move(e) {
+            if (!isMarkerLocked && markerRef.current) {
+                markerRef.current.setLatLng(e.target.getCenter());
+            }
+        },
+        zoom(e) {
+            if (!isMarkerLocked && markerRef.current) {
+                markerRef.current.setLatLng(e.target.getCenter());
+            }
+        },
+    });
+
+    useEffect(() => {
+        if (startLat && startLng) {
+            const position = { lat: startLat, lng: startLng };
+            map.setView(position, 15);
+        }
+    }, [startLat, startLng, map]);
+
+    const handleMarkerClick = () => {
+        if (!isMarkerLocked) {
+            const center = map.getCenter();
+            setValue("start_point", { lat: center.lat.toString(), lng: center.lng.toString() });
+            setMarkerPosition({ lat: center.lat, lng: center.lng }); // به‌روزرسانی موقعیت مارکر
+            setIsMarkerLocked(true);
+        }
+    };
+
+    const handleUnlockMarker = () => {
+        setValue("start_point", null); // حذف مقدار قبلی
+        setIsMarkerLocked(false); // باز کردن قفل مارکر
+        setMarkerPosition(null); // تنظیم مارکر به مرکز نقشه
+    };
+
+    return (
+        <>
+            <Marker
+                position={markerPosition || map.getCenter()} // استفاده از موقعیت
+                ref={markerRef}
+                icon={createCustomIcon([35, 35], HereIcon.src, "اینجا")}
+                eventHandlers={{
+                    click: handleMarkerClick,
+                }}
+            />
+            {isMarkerLocked && (
+                <Box
+                    sx={{
+                        position: "absolute",
+                        bottom: 10,
+                        left: 10,
+                        zIndex: 1000,
+                    }}
+                >
+                    <Button variant="contained" onClick={handleUnlockMarker}>
+                        ویرایش
+                    </Button>
+                </Box>
+            )}
+        </>
+    );
+};
+
+const MapInfoOneMarker = ({ setValue, errors, StartPoint = null }) => {
+    return (
+        <Box>
+            <Box sx={{ width: "100%", height: "400px", marginBottom: "16px" }}>
+                <MapLayer style={{ border: "1px solid #0009", borderRadius: "4px" }}>
+                    <MapInteraction
+                        setValue={setValue}
+                        startLat={StartPoint ? StartPoint.lat : null}
+                        startLng={StartPoint ? StartPoint.lng : null}
+                    />
+                </MapLayer>
+            </Box>
+            <Box display="flex" gap={2}>
+                {errors.start_point && (
+                    <Typography color="error" variant="body2">
+                        {errors.start_point.message}
+                    </Typography>
+                )}
+            </Box>
+        </Box>
+    );
+};
+
+export default MapInfoOneMarker;