- `index.js` als Client-Komponente deklariert (`"use client"`) zur Vermeidung von SSR-Problemen. - `useEffect` optimiert, um unendliche API-Requests durch `isMounted`-Check zu verhindern. - `loadData()` angepasst, um API-Fehler korrekt abzufangen und erneute Ladeversuche zu vermeiden. - Doppelte Registrierung von `poiReadFromDbTriggerAtom` durch HMR verhindert. - Ungültige MySQL-Option `acquireTimeout` entfernt, um Verbindungsfehler zu beheben. Diese Änderungen verhindern unerwartete Reloads und verbessern die Stabilität der Anwendung.
132 lines
4.4 KiB
JavaScript
132 lines
4.4 KiB
JavaScript
// utils/setupPOIs.js
|
|
import { findClosestPoints } from "./geometryUtils";
|
|
import handlePoiSelect from "./handlePoiSelect";
|
|
import { updateLocationInDatabase } from "../services/apiService";
|
|
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 "./mapUtils";
|
|
import { openInNewTab } from "../utils/openInNewTab";
|
|
import { disablePolylineEvents, enablePolylineEvents } from "./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);
|
|
}
|
|
}
|
|
}
|
|
};
|