diff --git a/public/icons/destination-icon.svg b/public/icons/destination-icon.svg new file mode 100644 index 0000000..ad8a633 --- /dev/null +++ b/public/icons/destination-icon.svg @@ -0,0 +1,18 @@ + +
 + + + + + + + + + + + + + + + + diff --git a/public/icons/origin-icon.svg b/public/icons/origin-icon.svg new file mode 100644 index 0000000..295c9da --- /dev/null +++ b/public/icons/origin-icon.svg @@ -0,0 +1,18 @@ + +
 + + + + + + + + + + + + + + + + diff --git a/src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/MapControlPolyline/index.jsx b/src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/MapControlPolyline/index.jsx index 8d9b5d0..7302f7d 100644 --- a/src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/MapControlPolyline/index.jsx +++ b/src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/MapControlPolyline/index.jsx @@ -1,116 +1,113 @@ -import { Delete, Route } from "@mui/icons-material"; -import { Box, Button, Stack, Typography } from "@mui/material"; -import { useReducer } from "react"; -import DrawBound from "./DrawBound"; +"use client"; -const statusType = [ - { - id: 0, - message: "برای آغاز ترسیم مسیر، کلیک کنید!", - buttons: [ - { - label: "شروع ترسیم مسیر", - key: "start", - color: "primary", - icon: , - onclick: (controlDispach) => { - controlDispach({ type: "SET_STATUS", status: 1 }); - }, - }, - ], - }, - { - id: 1, - message: "مسیر موردنظر را با کلیک روی نقشه مشخص کنید. برای اتمام، روی نقطه‌ی پایانی کلیک کنید!", - buttons: [], - }, - { - id: 2, - message: "برای اصلاح مسیر، گوشه‌ها را بکشید. برای ترسیم دوباره، آن را حذف کنید", - buttons: [ - { - label: "حذف", - key: "end", - color: "error", - icon: , - onclick: (controlDispach) => { - controlDispach({ type: "SET_STATUS", status: 0 }); - }, - }, - ], - }, -]; +import { useEffect, useState } from "react"; +import { Marker, Polyline, useMap } from "react-leaflet"; +import L from "leaflet"; -const createInitialState = (bound) => { - if (bound) { - return { status: 2 }; - } - return { status: 0 }; -}; +// ===== Icons ===== +const originIcon = new L.Icon({ + iconUrl: "/icons/origin-marker.png", + iconSize: [32, 32], + iconAnchor: [16, 32], +}); -const reducer = (state, action) => { - switch (action.type) { - case "SET_STATUS": - return { ...state, status: action.status }; - default: - return state; - } -}; +const destinationIcon = new L.Icon({ + iconUrl: "/icons/destination-marker.png", + iconSize: [32, 32], + iconAnchor: [16, 32], +}); -const MapControlPolyline = ({ bound, setBound }) => { - const [control, controlDispach] = useReducer(reducer, bound, createInitialState); +// ===== Track Center ===== +function MapCenterTracker({ setCenter }) { + const map = useMap(); + + useEffect(() => { + const updateCenter = () => { + setCenter(map.getCenter()); + }; + + updateCenter(); + + map.on("move", updateCenter); + + return () => { + map.off("move", updateCenter); + }; + }, [map, setCenter]); + + return null; +} + +// ===== Fixed Center Marker ===== +function FixedCenterMarker() { + return ( +
+ center +
+ ); +} + +export default function Example() { + const [center, setCenter] = useState(null); + + const [origin, setOrigin] = useState(null); + const [destination, setDestination] = useState(null); + + const [step, setStep] = useState("origin"); + + const handleOk = () => { + if (!center) return; + + if (step === "origin") { + setOrigin(center); + setStep("destination"); + return; + } + + if (step === "destination") { + setDestination(center); + setStep("done"); + } + }; return ( - <> - - - theme.palette.info.main, - borderBottomLeftRadius: 8, - borderBottomRightRadius: 8, - py: 0.5, - px: 2, - }} - > - - {statusType.find((st) => st.id == control.status).message} - - - - +
- - {statusType - .find((st) => st.id == control.status) - .buttons.map((button) => ( - - ))} - - - + + + {/* saved markers */} + {origin && } + + {destination && } + + {/* route line */} + {origin && destination && } + + {/* fixed center pin */} + {step !== "done" && } +
+ +
+ +
+ ); -}; -export default MapControlPolyline; +} diff --git a/src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/index.jsx b/src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/index.jsx index a4240b3..dac1df2 100644 --- a/src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/index.jsx +++ b/src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/index.jsx @@ -3,6 +3,7 @@ import { Box, Button, DialogActions, DialogContent, Stack } from "@mui/material" import dynamic from "next/dynamic"; import { useCallback, useState } from "react"; import MapControlPolyline from "./MapControlPolyline"; +import Example from "./MapControlPolyline"; const MapLayer = dynamic(() => import("@/core/components/MapLayer"), { loading: () => , ssr: false, @@ -22,7 +23,7 @@ const Area = ({ allData, setAllData, handlePrev, setTabState }) => { - +