setupMarkers in setupPOIs umbenennt und ausgelagert

2024-09-03 09:10:19 +02:00
parent 46a9f05894
commit 8814f0e450
4 changed files with 128 additions and 116 deletions
--- a/utils/setupPOIs.js
+++ b/utils/setupPOIs.js
@@ -0,0 +1,123 @@
+// utils/setupPOIs.js
+import { findClosestPoints } from "./geometryUtils";
+import handlePoiSelect from "./handlePoiSelect";
+import { updateLocationInDatabase } from "../services/apiService";
+import { handleEditPoi, insertNewMarker, removeMarker } from "./markerUtils";
+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/contextMenuUtils";
+
+export const setupPOIs = async (
+  map,
+  locations,
+  poiData,
+  poiTypMap,
+  userRights,
+  poiLayerRef,
+  setSelectedPoi,
+  setLocationDeviceData,
+  setDeviceName,
+  setCurrentPoi,
+  poiLayerVisible,
+  fetchPoiData,
+  toast,
+  setShowPoiUpdateModal,
+  setCurrentPoiData,
+  deviceName
+) => {
+  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,
+          link: location.link,
+        }).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}<br>
+              ${poiTypName}<br>
+            </div>
+          `);
+
+        marker.on("mouseover", function () {
+          handlePoiSelect(
+            {
+              id: location.idPoi,
+              deviceId: location.idLD,
+              idPoiTyp: location.idPoiTyp,
+              typ: poiTypName,
+              description: location.description,
+            },
+            setSelectedPoi,
+            setLocationDeviceData,
+            setDeviceName,
+            poiLayerRef,
+            poiTypMap
+          );
+          setCurrentPoi(location);
+          this.openPopup();
+
+          // Deaktiviere Polyline-Ereignisse beim Öffnen des Kontextmenüs des Markers
+          disablePolylineEvents(window.polylines);
+
+          localStorage.setItem("lastElementType", "marker");
+          localStorage.setItem("markerLink", this.options.link);
+        });
+
+        marker.on("mouseout", function () {
+          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;
+            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);
+      }
+    }
+  }
+};