Files
nodeMap/utils/setupPOIs.js

132 lines
4.4 KiB
JavaScript

// utils/setupPOIs.js
import { findClosestPoints } from "./geometryUtils";
import handlePoiSelect from "./handlePoiSelect";
import { updateLocationInDatabase } from "../services/api/updateLocationInDatabase";
import { handleEditPoi, insertNewPOI, removePOI } from "./poiUtils";
import { parsePoint } from "./geometryUtils";
import circleIcon from "../components/gisPolylines/icons/CircleIcon";
import startIcon from "../components/gisPolylines/icons/StartIcon";
import endIcon from "../components/gisPolylines/icons/EndIcon";
import { redrawPolyline } from "./polylines/redrawPolyline";
import { openInNewTab } from "../utils/openInNewTab";
import { disablePolylineEvents, enablePolylineEvents } from "./polylines/setupPolylines"; // Importiere die Funktionen
export const setupPOIs = async (
map,
locations,
poiData,
poiTypMap,
userRights,
poiLayerRef,
setSelectedPoi,
setLocationDeviceData,
setDeviceName,
setCurrentPoi,
poiLayerVisible,
fetchPoiData,
toast,
setShowPoiUpdateModal,
setCurrentPoiData,
deviceName
) => {
const editMode = localStorage.getItem("editMode") === "true"; // Prüfen, ob der Bearbeitungsmodus aktiv ist
userRights = editMode ? userRights : undefined; // Nur Berechtigungen anwenden, wenn editMode true ist
if (map && poiLayerRef.current) {
map.removeLayer(poiLayerRef.current);
poiLayerRef.current = new L.LayerGroup().addTo(map);
for (const location of locations) {
try {
const { latitude, longitude } = parsePoint(location.position);
const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt";
const canDrag = userRights ? userRights.includes(56) : false;
const matchingIcon = poiData.find((poi) => poi.idPoi === location.idPoi);
const iconUrl = matchingIcon ? `/img/icons/pois/${matchingIcon.path}` : "/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: location.idPoi,
name: location.name,
description: location.description,
idLD: location.idLD,
link: location.link,
});
// Nur das Kontextmenü "POI Bearbeiten" hinzufügen, wenn editMode true ist
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.bindPopup(`
<div>
<b class="text-xl text-black-700">${location.description || "Unbekannt"}</b><br>
${deviceName || "unbekannt"} <br>
${poiTypName}<br>
</div>
`);
marker.on("mouseover", function () {
console.log("Device Name:", marker); // Debugging
handlePoiSelect(
{
id: location.idPoi,
deviceId: location.idLD,
idPoiTyp: location.idPoiTyp,
typ: poiTypName,
description: location.description,
idLD: location.idLD,
},
setSelectedPoi,
setLocationDeviceData,
setDeviceName, // Stelle sicher, dass dies korrekt funktioniert
poiLayerRef,
poiTypMap
);
localStorage.setItem("lastElementType", "marker");
localStorage.setItem("markerLink", this.options.link);
});
marker.on("mouseout", function () {
this.closePopup();
});
marker.on("dragend", (e) => {
console.log("Marker wurde verschoben in setupPOIs");
if (canDrag) {
const newLat = e.target.getLatLng().lat;
const newLng = e.target.getLatLng().lng;
const markerId = e.target.options.id;
updateLocationInDatabase(markerId, newLat, newLng).then(() => {});
} else {
console.error("Drag operation not allowed");
}
});
if (poiLayerVisible) {
marker.addTo(poiLayerRef.current);
}
} catch (error) {
console.error("Error processing a location:", error);
}
}
}
};