Files
nodeMap/utils/setupPOIs.js
Ismail Ali 8e5dac82b5 feat: Geräteauswahl und Anzeige beim POI-Handling auf WebService umgestellt
- setupPOIs.js angepasst: Gerätedaten (LD_Name) aus GisStationsStaticDistrict verwendet
- MapComponent.js übergibt WebService-Geräte (`Points`) als gisDevices an setupPOIs
- PoiUpdateModal.js nutzt LD_Name für react-select Dropdown statt name aus DB
- Dropdown-Anzeige und Tooltip-Daten für POIs nun konsistent mit WebService-Geräteliste
2025-06-10 17:55:36 +02:00

148 lines
4.5 KiB
JavaScript

// utils/setupPOIs.js
import { parsePoint } from "@/utils/geometryUtils";
import { handleEditPoi } from "@/utils/poiUtils";
import { updateLocationInDatabaseService } from "@/services/database/updateLocationInDatabaseService";
import { setSelectedPoi, clearSelectedPoi } from "@/redux/slices/database/pois/selectedPoiSlice";
import { cleanupMarkers } from "@/utils/common/cleanupMarkers";
export const setupPOIs = async (
map,
pois,
poiData, // enthält aktuell: idPoi + path
poiTypMap,
userRights,
poiLayerRef,
setSelectedPoi,
setLocationDeviceData,
setDeviceName,
setCurrentPoi,
poiLayerVisible,
fetchPoiData,
toast,
setShowPoiUpdateModal,
setCurrentPoiData,
gisDevices,
dispatch
) => {
const editMode = localStorage.getItem("editMode") === "true";
userRights = editMode ? userRights : undefined;
// ✅ Mapping vorbereiten: idPoi → icon path
const iconMap = new Map();
poiData.forEach(item => {
if (item.idPoi && item.path) {
iconMap.set(item.idPoi, item.path);
}
});
if (map && poiLayerRef.current) {
const existingMarkers = poiLayerRef.current?.getLayers?.();
if (existingMarkers?.length) {
cleanupMarkers(existingMarkers);
}
map.removeLayer(poiLayerRef.current);
poiLayerRef.current = new L.LayerGroup().addTo(map);
for (const poi of pois) {
try {
// console.log("👉 poi an Modal übergeben:", poi);
const { latitude, longitude } = parsePoint(poi.position);
const poiTypName = poiTypMap.get(poi.idPoiTyp) || "Unbekannt";
const canDrag = userRights ? userRights.some(r => r.IdRight === 56) : false;
const matchingDevice = gisDevices.find(d => d.IdLD === poi.idLD);
const deviceLabel = matchingDevice?.LD_Name || "unbekannt";
// ✅ Icon korrekt über idPoi auflösen
const iconPath = iconMap.get(poi.idPoi);
const iconUrl = iconPath
? `/img/icons/pois/${iconPath}`
: "/img/icons/pois/default-icon.png";
const marker = L.marker([latitude, longitude], {
icon: L.icon({
iconUrl: iconUrl,
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
}),
draggable: canDrag,
id: poi.idPoi,
name: poi.name,
description: poi.description,
idLD: poi.idLD,
idPoiTyp: poi.idPoiTyp,
link: poi.link,
});
if (editMode) {
marker.bindContextMenu({
contextmenu: true,
contextmenuWidth: 140,
contextmenuItems: [
{
text: "POI Bearbeiten",
icon: "/img/poi-edit.png",
callback: () =>
handleEditPoi(
marker,
userRights,
setCurrentPoiData,
setShowPoiUpdateModal,
fetchPoiData,
toast
),
},
],
});
}
marker.bindTooltip(
`
<div class="bg-white text-gray-800 text-sm rounded-xl px-4 py-2 w-56">
<div class="font-semibold text-blue-500 mb-1">${poi.description || "Unbekannt"}</div>
<div class="text-gray-600 text-sm">Gerät: ${deviceLabel || "unbekannt"}</div>
<div class="text-gray-600 text-sm">Typ: ${poiTypName}</div>
</div>
`,
{
direction: "top",
offset: [0, -10],
opacity: 0.95,
sticky: true,
}
);
marker.on("mouseover", function () {
dispatch(setSelectedPoi(poi));
dispatch(setCurrentPoi(poi));
localStorage.setItem("lastElementType", "marker");
localStorage.setItem("markerLink", this.options.link);
});
marker.on("mouseout", function () {
dispatch(clearSelectedPoi());
//this.closePopup();
});
marker.on("dragend", e => {
if (canDrag) {
const newLat = e.target.getLatLng().lat;
const newLng = e.target.getLatLng().lng;
const markerId = e.target.options.id;
updateLocationInDatabaseService(markerId, newLat, newLng);
} else {
console.error("Drag operation not allowed");
}
});
if (poiLayerVisible) {
marker.addTo(poiLayerRef.current);
}
} catch (error) {
console.error("❌ Fehler bei POI Marker:", error);
}
}
}
};