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

complete most of the routing task just request to server

Browse Source
This commit is contained in:
mhmjalali
2026-05-24 15:37:12 +03:30
parent 5d9a86f2cf
commit efb260b66d
8 changed files with 252 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -15,6 +15,7 @@
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@hookform/resolvers": "^3.9.0",
"@mapbox/polyline": "^1.2.1",
"@mui/icons-material": "^5.16.7",
"@mui/lab": "^5.0.0-alpha.173",
"@mui/material": "^5.16.7",

46
src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/Routing/DataBox.jsx Normal file
View File

@@ -0,0 +1,46 @@
import { Box, Button, TextField } from "@mui/material";
const DataBox = ({ isSource, isDest, sourcePosition, destPosition, editingTarget, onEditSource, onEditDest }) => {
if (!isSource) return null;
return (
<Box sx={{ position: "absolute", bottom: 5, left: 5, zIndex: 1000, backgroundColor: "white", border: "1px solid #e1e1e1", padding: 1, borderRadius: 2, opacity: 0.8, gap: 1, display: "flex", flexDirection: "column" }}>
<div style={{ display: "flex", alignItems: "end", gap: 4 }}>
<TextField
variant="outlined"
size="small"
readOnly
value={sourcePosition ? `${sourcePosition.lat.toFixed(6)}, ${sourcePosition.lng.toFixed(6)}` : ""}
/>
<Button
variant="contained"
color="success"
size="small"
onClick={onEditSource}
>
ویرایش مبدا
</Button>
</div>
{isDest && (
<div style={{ display: "flex", alignItems: "end", gap: 4 }}>
<TextField
size="small"
variant="outlined"
readOnly
value={destPosition ? `${destPosition.lat.toFixed(6)}, ${destPosition.lng.toFixed(6)}` : ""}
/>
<Button
variant="contained"
color="error"
size="small"
onClick={onEditDest}
>
ویرایش مقصد
</Button>
</div>
)}
</Box>
);
};
export default DataBox;

176
src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/Routing/index.jsx
View File

@@ -1,13 +1,26 @@
import { Marker, useMapEvents } from "react-leaflet";
import { Marker, Polyline, useMapEvents } from "react-leaflet";
import L from "leaflet";
import polyline from "@mapbox/polyline";
import SourceIcon from "@/assets/images/source-icon.svg";
import PrevSourceIcon from "@/assets/images/prev-source-icon.svg";
import { useRef } from "react";
import PrevDestIcon from "@/assets/images/prev-destination-icon.svg";
import DestIcon from "@/assets/images/destination-icon.svg";
import { useRef, useState } from "react";
import DataBox from "./DataBox";
const Routing = () => {
const mapPrevSourceMarker = useRef();
const mapPrevDestMarker = useRef();
const defaultIconSize = [35, 35];
const [isSource, setIsSource] = useState(false);
const [sourcePosition, setSourcePosition] = useState(null);
const [isDest, setIsDest] = useState(false);
const [destPosition, setDestPosition] = useState(null);
const [routeCoords, setRouteCoords] = useState([]);
const [alternateCoords, setAlternateCoords] = useState([]);
const [editingTarget, setEditingTarget] = useState(null);
const [selectedRoute, setSelectedRoute] = useState(null);
const createCustomIcon = (size, iconUrl) => {
return L.icon({
iconUrl: iconUrl,
@@ -17,30 +30,173 @@ const Routing = () => {
});
};
const defaultIcon = createCustomIcon(
defaultIconSize,
isSource && editingTarget !== "source" ? SourceIcon.src : PrevSourceIcon.src
);
const prevDestIcon = createCustomIcon(
defaultIconSize,
isDest && editingTarget !== "dest" ? DestIcon.src : PrevDestIcon.src
);
const isMovingSource = !isSource || editingTarget === "source";
const isMovingDest = isSource && (!isDest || editingTarget === "dest");
const map = useMapEvents({
move(e) {
if (isMovingSource) {
mapPrevSourceMarker.current.setLatLng(e.target.getCenter());
}
if (isMovingDest && mapPrevDestMarker.current) {
mapPrevDestMarker.current.setLatLng(e.target.getCenter());
}
},
movestart() {
if (isMovingSource) {
mapPrevSourceMarker.current.setIcon(createCustomIcon([45, 45], PrevSourceIcon.src));
}
if (isMovingDest && mapPrevDestMarker.current) {
mapPrevDestMarker.current.setIcon(createCustomIcon([45, 45], PrevDestIcon.src));
}
},
moveend() {
if (isMovingSource) {
mapPrevSourceMarker.current.setIcon(createCustomIcon(defaultIconSize, PrevSourceIcon.src));
}
if (isMovingDest && mapPrevDestMarker.current) {
mapPrevDestMarker.current.setIcon(createCustomIcon(defaultIconSize, PrevDestIcon.src));
}
},
});
const handleMarkerClick = () => {
console.log(mapPrevSourceMarker.current.getLatLng().lat);
const fetchRoute = async (source, dest) => {
const locations = [
{ lat: source.lat, lon: source.lng },
{ lat: dest.lat, lon: dest.lng },
];
try {
const response = await fetch("https://jouya.141.ir/api/router/drive", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ locations }),
});
const data = await response.json();
const shape = data.trip.legs[0].shape;
const decoded = polyline.decode(shape, 6);
setRouteCoords(decoded);
setSelectedRoute({ index: "main", coords: decoded });
if (data.alternates && data.alternates.length > 0) {
const decodedAlternates = data.alternates.map((alt) =>
polyline.decode(alt.trip.legs[0].shape, 6)
);
setAlternateCoords(decodedAlternates);
} else {
setAlternateCoords([]);
}
map.flyToBounds(decoded, { padding: [50, 50], duration: 1.5 });
} catch (error) {
console.error("Routing error:", error);
}
};
const handleMarkerClick = async () => {
if (!isSource || editingTarget === "source") {
const clickedPosition = mapPrevSourceMarker.current.getLatLng();
console.log("Source:", clickedPosition.lat, clickedPosition.lng);
setSourcePosition(clickedPosition);
setIsSource(true);
setEditingTarget(null);
setRouteCoords([]);
setAlternateCoords([]);
setSelectedRoute(null);
if (editingTarget === "source" && destPosition) {
await fetchRoute(clickedPosition, destPosition);
}
}
};
const handleDestMarkerClick = async () => {
if (!isDest || editingTarget === "dest") {
const clickedPosition = mapPrevDestMarker.current.getLatLng();
setDestPosition(clickedPosition);
setIsDest(true);
setEditingTarget(null);
await fetchRoute(sourcePosition, clickedPosition);
}
};
const handleEditSource = () => {
setEditingTarget("source");
setRouteCoords([]);
setAlternateCoords([]);
setSelectedRoute(null);
};
const handleEditDest = () => {
setEditingTarget("dest");
setRouteCoords([]);
setAlternateCoords([]);
setSelectedRoute(null);
};
const handleSelectRoute = (index, coords) => {
setSelectedRoute({ index, coords });
map.flyToBounds(coords, { padding: [50, 50], duration: 0.3 });
console.log("Selected route:", index, coords);
};
return (
<>
<DataBox
isSource={isSource}
isDest={isDest}
sourcePosition={sourcePosition}
destPosition={destPosition}
editingTarget={editingTarget}
onEditSource={handleEditSource}
onEditDest={handleEditDest}
/>
<Marker
position={map.getCenter()}
position={sourcePosition || map.getCenter()}
ref={mapPrevSourceMarker}
eventHandlers={{ click: handleMarkerClick }}
icon={L.divIcon({ className: "" })}
icon={defaultIcon}
/>
)
}
{isSource && (
<Marker
position={destPosition || map.getCenter()}
ref={mapPrevDestMarker}
eventHandlers={{ click: handleDestMarkerClick }}
icon={prevDestIcon}
/>
)}
{alternateCoords.map((coords, index) => (
<Polyline
key={`alternate-${index}-${selectedRoute?.index === index}`}
positions={coords}
color={selectedRoute?.index === index ? "#015688" : "#91B2C6"}
weight={selectedRoute?.index === index ? 7 : 6}
opacity={selectedRoute?.index === index ? 1 : 0.7}
eventHandlers={{ click: () => handleSelectRoute(index, coords) }}
/>
))}
{routeCoords.length > 0 && (
<Polyline
key={`main-${selectedRoute?.index === "main"}`}
positions={routeCoords}
color={selectedRoute?.index === "main" ? "#015688" : "#91B2C6"}
weight={selectedRoute?.index === "main" ? 7 : 6}
opacity={selectedRoute?.index === "main" ? 1 : 0.7}
eventHandlers={{ click: () => handleSelectRoute("main", routeCoords) }}
/>
)}
</>
);
};
export default Routing
export default Routing;

5
src/components/dashboard/roadMissions/reports/taradodReports/Search/index.jsx
View File

@@ -5,10 +5,7 @@ const SearchReportList = ({ handleSubmit, onSearchSubmit, control, hasProvincesP
return (
<>
<StyledForm onSubmit={handleSubmit(onSearchSubmit)}>
<SearchReportField
control={control}
hasProvincesPermission={hasProvincesPermission}
/>
<SearchReportField control={control} hasProvincesPermission={hasProvincesPermission} />
</StyledForm>
</>
);

5
src/components/dashboard/roadMissions/reports/violationsReports/Search/index.jsx
View File

@@ -5,10 +5,7 @@ const SearchReportList = ({ handleSubmit, onSearchSubmit, control, hasProvincesP
return (
<>
<StyledForm onSubmit={handleSubmit(onSearchSubmit)}>
<SearchReportField
control={control}
hasProvincesPermission={hasProvincesPermission}
/>
<SearchReportField control={control} hasProvincesPermission={hasProvincesPermission} />
</StyledForm>
</>
);

6
src/core/utils/routes.js
View File

@@ -47,10 +47,8 @@ export const GET_COUNTRY_ACTIVITY_REPORT = api + "/api/v3/missions/report/countr
export const EXPORT_COUNTRY_ROAD_PATROL_REPORTS = api + "/api/v3/road_patrols/report/country_activity_excel";
export const EXPORT_PROVINCE_ROAD_PATROL_REPORTS = api + "/api/v3/road_patrols/report/province_activity_excel";
export const GET_MISSIONS_REPORT_TARADOD_COUNTRY_ACTIVITY =
api + "/api/v3/missions/report_taradod/country_activity";
export const GET_MISSIONS_REPORT_TARADOD_PROVINCE_ACTIVITY =
api + "/api/v3/missions/report_taradod/province_activity";
export const GET_MISSIONS_REPORT_TARADOD_COUNTRY_ACTIVITY = api + "/api/v3/missions/report_taradod/country_activity";
export const GET_MISSIONS_REPORT_TARADOD_PROVINCE_ACTIVITY = api + "/api/v3/missions/report_taradod/province_activity";
export const EXPORT_MISSIONS_REPORT_TARADOD_COUNTRY_EXCEL_ACTIVITY =
api + "/api/v3/missions/report_taradod/country_excel_activity";
export const EXPORT_MISSIONS_REPORT_TARADOD_PROVINCE_EXCEL_ACTIVITY =