Merge branch 'feature/add_current_location_map' into 'develop'

Feature/add current location map

See merge request witel-front-end/rms!88

src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarListItems.jsx

@@ -35,7 +35,11 @@ const SidebarListItems = ({ menuItem, dispatch }) => {
                     {menuItem.badges && (
                         <Stack direction={"row"} sx={{ px: 0.5 }} spacing={0.5}>
                             {menuItem.badges.map((badge, i) => (
-                                <SidebarBadge chipProps={{ color: badge.color || "primary" }} key={badge.key} badge={badge.key} />
+                                <SidebarBadge
+                                    chipProps={{ color: badge.color || "primary" }}
+                                    key={badge.key}
+                                    badge={badge.key}
+                                />
                             ))}
                         </Stack>
                     )}

src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarSubitems.jsx

@@ -33,7 +33,11 @@ const SidebarSubitems = ({ subitem, dispatch }) => {
                     {subitem.badges && (
                         <Stack direction={"row"} sx={{ px: 0.5 }} spacing={0.5}>
                             {subitem.badges.map((badge, i) => (
-                                <SidebarBadge chipProps={{ color: badge.color || "default" }} key={badge.key} badge={badge.key} />
+                                <SidebarBadge
+                                    chipProps={{ color: badge.color || "default" }}
+                                    key={badge.key}
+                                    badge={badge.key}
+                                />
                             ))}
                         </Stack>
                     )}

src/core/components/FlyToLocation.jsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+import { useMap } from "react-leaflet";
+
+const FlyToUserLocation = ({ Component }) => {
+    const [userPosition, setUserPosition] = useState(null);
+    const map = useMap();
+
+    const handleLocateUser = () => {
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(
+                (position) => {
+                    setUserPosition([position.coords.latitude, position.coords.longitude]);
+                },
+                (error) => {
+                    console.error("Location error:", error);
+                }
+            );
+        } else {
+            alert("مرورگر شما از موقعیت‌یاب پشتیبانی نمی‌کند.");
+        }
+    };
+
+    useEffect(() => {
+        if (userPosition) {
+            map.flyTo(userPosition, 16);
+        }
+    }, [userPosition, map]);
+
+    return <Component handleLocateUser={handleLocateUser} />;
+};
+
+export default FlyToUserLocation;

src/core/components/MapInfoOneMarker.jsx

@@ -1,11 +1,13 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Marker, useMapEvents } from "react-leaflet";
-import "leaflet/dist/leaflet.css";
-import L from "leaflet";
-import { Alert, Box, Button, Stack, Typography, Zoom } from "@mui/material";
-import dynamic from "next/dynamic";
-import MapLoading from "@/core/components/MapLayer/Loading";
 import HereIcon from "@/assets/images/examine_marker_active.png";
+import MapLoading from "@/core/components/MapLayer/Loading";
+import { MyLocation } from "@mui/icons-material";
+import { Alert, Box, Button, Stack, Typography, Zoom } from "@mui/material";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+import dynamic from "next/dynamic";
+import { useEffect, useRef, useState } from "react";
+import { Marker, useMapEvents } from "react-leaflet";
+import FlyToUserLocation from "./FlyToLocation";
 
 const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
     loading: () => <MapLoading />,
@@ -113,20 +115,36 @@ const MapInteraction = ({ setValue, startLat, startLng, title }) => {
                     </Alert>
                 </Zoom>
             </Stack>
-            {isMarkerLocked && (
-                <Box
-                    sx={{
-                        position: "absolute",
-                        bottom: 10,
-                        left: 10,
-                        zIndex: 1000,
-                    }}
-                >
-                    <Button variant="contained" color="warning" onClick={handleUnlockMarker}>
+            <Stack
+                direction={"row"}
+                justifyContent={"space-between"}
+                sx={{
+                    zIndex: "1000",
+                    width: "100%",
+                    position: "absolute",
+                    bottom: 0,
+                    left: 0,
+                }}
+            >
+                <Zoom in={isMarkerLocked}>
+                    <Button variant="contained" size="small" color="warning" sx={{ m: 1 }} onClick={handleUnlockMarker}>
                         تغییر مکان
                     </Button>
-                </Box>
-            )}
+                </Zoom>
+                <FlyToUserLocation
+                    Component={(props) => (
+                        <Button
+                            sx={{ m: 1 }}
+                            variant="contained"
+                            size="small"
+                            startIcon={<MyLocation />}
+                            onClick={props.handleLocateUser}
+                        >
+                            موقعیت من
+                        </Button>
+                    )}
+                />
+            </Stack>
         </>
     );
 };

src/core/components/MapInfoTwoMarker.jsx

@@ -7,6 +7,8 @@ import dynamic from "next/dynamic";
 import MapLoading from "@/core/components/MapLayer/Loading";
 import EndIcon from "@/assets/images/examine_marker_active.png";
 import StartIcon from "@/assets/images/examine_marker.png";
+import FlyToUserLocation from "./FlyToLocation";
+import { MyLocation } from "@mui/icons-material";
 
 const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
     loading: () => <MapLoading />,
@@ -137,12 +139,12 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
                 <Box
                     sx={{
                         position: "absolute",
-                        bottom: 10,
-                        left: 10,
+                        bottom: 8,
+                        left: 8,
                         zIndex: 1000,
                     }}
                 >
-                    <Button variant={"contained"} color="warning" onClick={handleUnlockStart}>
+                    <Button variant={"contained"} color="warning" size="small" onClick={handleUnlockStart}>
                         ویرایش نقطه شروع
                     </Button>
                 </Box>
@@ -197,16 +199,38 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
                 <Box
                     sx={{
                         position: "absolute",
-                        bottom: 10,
-                        left: 10,
+                        bottom: 8,
+                        left: 8,
                         zIndex: 1000,
                     }}
                 >
-                    <Button variant={"contained"} color="warning" onClick={handleUnlockEnd}>
+                    <Button variant={"contained"} color="warning" size="small" onClick={handleUnlockEnd}>
                         ویرایش نقاط
                     </Button>
                 </Box>
             )}
+            <Box
+                sx={{
+                    position: "absolute",
+                    bottom: 0,
+                    right: 0,
+                    zIndex: 1000,
+                }}
+            >
+                <FlyToUserLocation
+                    Component={(props) => (
+                        <Button
+                            sx={{ m: 1 }}
+                            variant="contained"
+                            size="small"
+                            startIcon={<MyLocation />}
+                            onClick={props.handleLocateUser}
+                        >
+                            موقعیت من
+                        </Button>
+                    )}
+                />
+            </Box>
         </>
     );
 };

src/core/utils/pageMenu.js

@@ -290,7 +290,10 @@ export const pageMenu = [
         type: "menu",
         icon: <RouteIcon sx={{ width: "inherit", height: "inherit" }} />,
         hasSubitems: true,
-        badges: [{ key: "safetyAndPrivacy.step_one", color: 'warning' }, { key: "safetyAndPrivacy.step_two", color: 'error' }],
+        badges: [
+            { key: "safetyAndPrivacy.step_one", color: "warning" },
+            { key: "safetyAndPrivacy.step_two", color: "error" },
+        ],
         Subitems: [
             {
                 id: "safetyAndPrivacyManagmentOparation",
@@ -519,6 +522,6 @@ export const pageMenu = [
                 icon: <DriveEtaIcon sx={{ width: "inherit", height: "inherit" }} />,
                 permissions: [""],
             },
-        ]
-    }
+        ],
+    },
 ];