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

Feature/gasht cartables

Browse Source
This commit is contained in:
Amin Ghasempoor
2024-12-30 10:03:53 +00:00
committed by AmirHossein Mahmoodi
parent d33d069c1e
commit 97e6c509f0
11 changed files with 157 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/core/components/MapInfoOneMarker.jsx
View File

@@ -12,24 +12,19 @@ const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
ssr: false,
});
const createCustomIcon = (size, iconUrl, labelText) => {
const createCustomIcon = (size, iconUrl, labelText, color) => {
if (labelText) {
return L.divIcon({
className: "custom-marker", // Apply your custom CSS class
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 style="position: relative; text-align: center; width: 50px;">
<div style="background-color: ${color}; color: white; border-radius: 20px; padding: 5px;">
<span style="font-family: 'IRANSansFaNum', sans-serif;">${labelText}</span>
</div>
</div>
`,
iconSize: size,
iconAnchor: [size[0] / 2, size[1]],
popupAnchor: [0, -size[1]],
<div style="width: 5px; height: 20px; background: ${color}; margin: auto;border-bottom-left-radius: 50%; border-bottom-right-radius: 50%;"></div>
</div>`,
iconSize: [100, 50], // Adjust icon size to fit your content
iconAnchor: [50, 25], // Adjust to position the marker correctly
});
}
@@ -45,6 +40,7 @@ const MAX_ZOOM_FOR_MARKER = 13;
const MapInteraction = ({ setValue, startLat, startLng }) => {
const [isMarkerLocked, setIsMarkerLocked] = useState(!!(startLat && startLng)); // وضعیت قفل مارکر
const [enableSend, setEnableSend] = useState(false);
const [startIconColor, setStartIconColor] = useState(startLat ? "#1CAC66" : "#003d4f"); // رنگ آیکن شروع
const [markerPosition, setMarkerPosition] = useState(
startLat && startLng ? { lat: startLat, lng: startLng } : null
);
@@ -79,6 +75,7 @@ const MapInteraction = ({ setValue, startLat, startLng }) => {
setValue("start_point", { lat: center.lat.toString(), lng: center.lng.toString() });
setMarkerPosition({ lat: center.lat, lng: center.lng }); // به‌روزرسانی موقعیت مارکر
setIsMarkerLocked(true);
setStartIconColor("#1CAC66");
}
};
@@ -86,6 +83,7 @@ const MapInteraction = ({ setValue, startLat, startLng }) => {
setValue("start_point", null); // حذف مقدار قبلی
setIsMarkerLocked(false); // باز کردن قفل مارکر
setMarkerPosition(null); // تنظیم مارکر به مرکز نقشه
setStartIconColor("#003d4f");
};
return (
@@ -93,7 +91,7 @@ const MapInteraction = ({ setValue, startLat, startLng }) => {
<Marker
position={markerPosition || map.getCenter()} // استفاده از موقعیت
ref={markerRef}
icon={createCustomIcon([35, 35], HereIcon.src, "اینجا")}
icon={createCustomIcon([35, 35], HereIcon.src, "اینجا", startIconColor)}
eventHandlers={{
click: handleMarkerClick,
}}

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

@@ -12,27 +12,21 @@ const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
loading: () => <MapLoading />,
ssr: false,
});
const createCustomIcon = (size, iconUrl, labelText) => {
const createCustomIcon = (size, iconUrl, labelText, color) => {
if (labelText) {
return L.divIcon({
className: "custom-marker", // Apply your custom CSS class
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 style="position: relative; text-align: center; width: 50px;">
<div style="background-color: ${color}; color: white; border-radius: 20px; padding: 5px;">
<span style="font-family: 'IRANSansFaNum', sans-serif;">${labelText}</span>
</div>
</div>
`,
iconSize: size,
iconAnchor: [size[0] / 2, size[1]],
popupAnchor: [0, -size[1]],
<div style="width: 5px; height: 20px; background: ${color}; margin: auto;border-bottom-left-radius: 50%; border-bottom-right-radius: 50%;"></div>
</div>`,
iconSize: [100, 50], // Adjust icon size to fit your content
iconAnchor: [50, 25], // Adjust to position the marker correctly
});
}
return L.icon({
iconUrl: iconUrl,
iconSize: size,
@@ -48,6 +42,8 @@ const MapInteraction = ({ setValue, startLat, startLng, 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 [startIconColor, setStartIconColor] = useState(startLat ? "#1CAC66" : "#003d4f"); // رنگ آیکن شروع
const [endIconColor, setEndIconColor] = useState(endLat ? "#D13131" : "#003d4f"); // رنگ آیکن پایان
const startRef = useRef();
const endRef = useRef();
@@ -86,6 +82,7 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
setIsStartLocked(false);
setStartPosition(null);
setValue("start_point", null);
setStartIconColor("#003d4f");
};
const handleUnlockEnd = () => {
@@ -95,6 +92,8 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
setStartPosition(null);
setValue("end_point", "");
setValue("start_point", null);
setStartIconColor("#003d4f");
setEndIconColor("#003d4f");
};
return (
@@ -102,7 +101,7 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
<Marker
position={startPosition || map.getCenter()}
ref={startRef}
icon={createCustomIcon([35, 35], StartIcon.src, "نقطه شروع")}
icon={createCustomIcon([35, 35], StartIcon.src, "شروع", startIconColor)}
eventHandlers={{
click: () => {
if (!enableSend) return;
@@ -111,6 +110,7 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
setValue("start_point", { lat: center.lat.toString(), lng: center.lng.toString() });
setStartPosition({ lat: center.lat, lng: center.lng });
setIsStartLocked(true);
setStartIconColor("#1CAC66");
}
},
}}
@@ -172,7 +172,7 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
<Marker
position={endPosition || map.getCenter()}
ref={endRef}
icon={createCustomIcon([35, 35], EndIcon.src, "نقطه پایان")}
icon={createCustomIcon([35, 35], EndIcon.src, "پایان", endIconColor)}
eventHandlers={{
click: () => {
if (!enableSend) return;
@@ -181,6 +181,7 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
setValue("end_point", { lat: center.lat.toString(), lng: center.lng.toString() });
setEndPosition({ lat: center.lat, lng: center.lng });
setIsEndLocked(true);
setEndIconColor("#D13131");
}
},
}}

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

@@ -30,9 +30,10 @@ export const UPDATE_AZMAYESH_TYPE = api + "/api/v3/azmayesh_types/update";
//road patrol
export const GET_ROAD_PATROL_OPERATOR_LIST = api + "/api/v3/road_patrols/operator_index";
export const EXPORT_ROAD_PATROL_OPERATOR_LIST = "https://rms.rmto.ir/v2/road_patrols/operator/cartable/report";
export const EXPORT_ROAD_PATROL_OPERATOR_LIST = "https://rms.witel.ir/v2/road_patrols/operator/cartable/report";
export const GET_ROAD_PATROL_SUPERVISOR_LIST = api + "/api/v3/road_patrols/supervisor_index";
export const EXPORT_ROAD_PATROL_SUPERVISOR_LIST = "https://rms.rmto.ir/v2/road_patrols/supervisor/cartable/report";
export const EXPORT_ROAD_PATROL_SUPERVISOR_LIST = "https://rms.witel.ir/v2/road_patrols/supervisor/cartable/report";
export const DELETE_ROAD_PATROL_SUPERVISOR = api + "/api/v3/road_patrols/delete";
// road items
export const GET_ROAD_ITEMS_SUPERVISOR_LIST = api + "/api/v3/road_items/supervisor_index";