Version 1.0.2 mit node_modules Verzeichnis

utils/createAndSetDevices.js

@@ -1,3 +1,4 @@
+// /utils/createAndSetDevices.js
 import circleIcon from "../components/gisPolylines/icons/CircleIcon";
 import { saveLineData, redrawPolyline } from "./mapUtils";
 import L from "leaflet";
@@ -20,6 +21,12 @@ const determinePriority = (iconPath, priorityConfig) => {
 // Funktion zum Erstellen und Setzen von Markern
 export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
   try {
+    // Zähler für externe API-Aufrufe in localStorage speichern
+    let requestCount = localStorage.getItem("gisStationsStaticRequestCount-createDevice") || 0;
+    requestCount++;
+    localStorage.setItem("gisStationsStaticRequestCount-createDevice", requestCount);
+    //console.log(`config.mapGisStationsStaticDistrictUrl in  createAndSetDevice wurde ${requestCount} Mal aufgerufen.`);
+
     const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
     const jsonResponse = await response1.json();
     const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
@@ -106,9 +113,18 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
               <span class="text-gray-800"><strong> ${station.Area_Short} </strong>(${station.Area_Name})</span><br>
               <span class="text-gray-800"><strong>${station.Location_Short} </strong> (${station.Location_Name})</span>
               <div class="mt-2">${statusInfo}</div>
-              <a href="${station.Link}" target="_blank" style="color: blue;">${BASE_URL}${station.Link}</a>
             </div>
           `);
+        /*       marker.bindPopup(`
+            <div class="bg-white rounded-lg">
+              <span class="text-lg font-semibold text-gray-900">${station.LD_Name}</span>
+              <span class="text-md font-bold text-gray-800"> ${station.Device}</span><br>
+              <span class="text-gray-800"><strong> ${station.Area_Short} </strong>(${station.Area_Name})</span><br>
+              <span class="text-gray-800"><strong>${station.Location_Short} </strong> (${station.Location_Name})</span>
+              <div class="mt-2">${statusInfo}</div>
+              <a href="${station.Link}" target="_blank" style="color: blue;">${BASE_URL}${station.Link}</a>
+            </div>
+          `); */
 
         return marker;
       });

utils/handlePoiSelect.js

@@ -1,37 +1,35 @@
 // utils/handlePoiSelect.js
 const handlePoiSelect = async (poiData, setSelectedPoi, setLocationDeviceData, setDeviceName, poiLayerRef, poiTypMap) => {
-  setSelectedPoi(poiData); // poiData should be the data of the selected POI
-  //console.log("Selected POI:", poiData);
-  //console.log("Selected POI idLD:", poiData.deviceId);
+  setSelectedPoi(poiData); // Setzt das ausgewählte POI
 
   try {
     const response = await fetch("/api/talas_v5_DB/locationDevice/locationDevices");
     const data = await response.json();
     setLocationDeviceData(data);
-    //console.log("Standort- und Gerätedaten:", data);
 
     const currentDevice = data.find((device) => device.idLD === poiData.deviceId);
     if (currentDevice) {
       setDeviceName(currentDevice.name);
-      //console.log("Current Device name in poiUpdate2:", currentDevice.name);
 
-      // Update the marker popup with the device name and type
+      // Hier speichern wir den POI-Typ im localStorage
+      const poiTypeName = poiTypMap.get(poiData.idPoiTyp);
+      localStorage.setItem("selectedPoiType", poiTypeName);
+
+      // Optional: Update des Markers mit dem POI-Typ
       const marker = poiLayerRef.current.getLayers().find((m) => m.options.id === poiData.id);
       if (marker) {
-        marker.setPopupContent(
-          `
-            <div>
-              <b class="text-xl text-black-700">${poiData.description || "Unbekannt"}</b><br>
-              ${currentDevice.name}<br>
-              ${poiTypMap.get(poiData.idPoiTyp) || "Unbekannt"}<br>
-            </div>
-            `,
-        );
+        marker.setPopupContent(`
+          <div>
+            <b class="text-xl text-black-700">${poiData.description || "Unbekannt"}</b><br>
+            ${currentDevice.name}<br>
+            ${poiTypeName || "Unbekannt"}<br>
+          </div>
+        `);
         marker.openPopup();
       }
     }
   } catch (error) {
-    console.error("Fehler beim Abrufen der Gerätedaten2:", error);
+    console.error("Fehler beim Abrufen der Gerätedaten:", error);
     setLocationDeviceData([]);
   }
 };

utils/initializeMap.js

@@ -5,9 +5,9 @@ import "leaflet/dist/leaflet.css";
 import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
 import * as urls from "../config/urls.js";
 import * as layers from "../config/layers.js";
-import { openInNewTab } from "./openInNewTab.js"; // Korrigiert
+import { openInNewTab } from "./openInNewTab.js";
 
-export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights) => {
+export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, setPolylineEventsDisabled) => {
   if (mapRef.current) {
     const initMap = L.map(mapRef.current, {
       center: [53.111111, 8.4625],
@@ -25,20 +25,25 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
             const link = localStorage.getItem("polylineLink");
             const clickedElement = e.relatedTarget;
 
-            // Überprüfe, ob der Kontextklick auf eine Polyline oder einen Marker erfolgt ist
-            if (link) {
-              const newTab = window.open(link, "_blank");
-              if (newTab) {
-                // Wenn der Tab geöffnet wird, lösche die `localStorage`-Einträge
-                localStorage.removeItem("polylineLink");
-                localStorage.removeItem("lastElementType");
+            // Überprüfe, ob Karte und contextmenu existieren
+            if (initMap && initMap.contextmenu) {
+              // Verarbeite Kontextmenü-Callback
+              if (link) {
+                const newTab = window.open(link, "_blank");
+                if (newTab) {
+                  // Lösche Einträge im localStorage
+                  localStorage.removeItem("polylineLink");
+                  localStorage.removeItem("lastElementType");
+                } else {
+                  console.error("Fehler: Das neue Tab konnte nicht geöffnet werden.");
+                }
+              } else if (clickedElement instanceof L.Marker || clickedElement instanceof L.Polyline) {
+                openInNewTab(e, clickedElement);
               } else {
-                console.error("Fehler: Das neue Tab konnte nicht geöffnet werden.");
+                console.error("Kein gültiges Ziel für den Kontextmenüeintrag");
               }
-            } else if (clickedElement instanceof L.Marker || clickedElement instanceof L.Polyline) {
-              openInNewTab(e, clickedElement); // Verwende openInNewTab für beide Fälle
             } else {
-              console.error("Kein gültiges Ziel für den Kontextmenüeintrag");
+              console.error("Karte oder Kontextmenü nicht verfügbar.");
             }
           },
         },
@@ -46,15 +51,23 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
       ],
     });
 
+    // Füge die Tile-Layer hinzu
     L.tileLayer(urls.ONLINE_TILE_LAYER, {
       attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
     }).addTo(initMap);
 
+    // Initialisiere OverlappingMarkerSpiderfier
     const overlappingMarkerSpiderfier = new OverlappingMarkerSpiderfier(initMap, {
       nearbyDistance: 20,
     });
 
+    // Setze die Map und OMS in den State
     setMap(initMap);
     setOms(overlappingMarkerSpiderfier);
+
+    // Wenn Rechte geladen sind und es noch nicht hinzugefügt wurde, füge das Kontextmenü hinzu
+    if (hasRights && !setMenuItemAdded) {
+      addItemsToMapContextMenu(initMap, setMenuItemAdded, setPolylineEventsDisabled);
+    }
   }
 };

utils/mysqlPool.js

@@ -1,5 +1,4 @@
 import mysql from "mysql2/promise";
-
 // Variablen für den Singleton-Pool
 let cachedPool;
 let connectionCount = 0; // Zähler für die aktiven Verbindungen
@@ -13,28 +12,41 @@ function getPool() {
       password: process.env.DB_PASSWORD,
       database: process.env.DB_NAME,
       port: process.env.DB_PORT,
-      connectionLimit: 10, // Setze ein Limit für gleichzeitige Verbindungen
+      connectionLimit: 20, // Setze ein Limit für gleichzeitige Verbindungen
       waitForConnections: true,
-      queueLimit: 0, // Unbegrenzte Warteschlange für Verbindungen
+      queueLimit: 10, // Warteschlangenlimit für Verbindungen
+      connectTimeout: 5000, // Timeout für Verbindungsversuche (5 Sekunden)
+      acquireTimeout: 10000, // Timeout für Verbindungsanforderungen aus dem Pool (10 Sekunden)
+      idleTimeout: 60000, // 1 Minute
     });
 
     // Ereignisse für das Protokollieren der Verbindungsstatistiken
     cachedPool.on("acquire", () => {
       connectionCount++;
-      console.log("Connection acquired. Active connections: ", connectionCount);
+      console.log(`[ACQUIRE] Active connections: ${connectionCount}`);
     });
 
     cachedPool.on("release", () => {
       connectionCount--;
-      console.log("Connection released. Active connections: ", connectionCount);
+      console.log(`[RELEASE] Active connections: ${connectionCount}`);
     });
 
     cachedPool.on("enqueue", () => {
-      console.log("Waiting for available connection slot.");
+      console.log(`[ENQUEUE] Waiting for available connection slot.`);
     });
   }
 
   return cachedPool;
 }
 
+// Optionale Funktion zum Schließen aller Verbindungen im Pool (manuell aufzurufen)
+export function closePool() {
+  if (cachedPool) {
+    cachedPool.end(() => {
+      console.log("All pool connections closed.");
+    });
+    cachedPool = null; // Setze den Pool auf null, um sicherzustellen, dass er neu erstellt wird, falls benötigt.
+  }
+}
+
 export default getPool;

utils/poiUtils.js

@@ -20,6 +20,7 @@ export const insertNewPOI = (closestPoints, newPoint, lineData, map) => {
 
   // Event-Listener für das Verschieben des Markers hinzufügen
   newMarker.on("dragend", () => {
+    console.log("Marker wurde verschoben in insertNewPOI");
     const newCoords = newMarker.getLatLng();
     setNewCoords(newCoords);
     const newCoordinates = [...lineData.coordinates];
@@ -66,6 +67,8 @@ export const handleEditPoi = (
   fetchPoiData,
   toast // Hier toast als Parameter erhalten
 ) => {
+  const editMode = localStorage.getItem("editMode") === "true";
+  userRights = editMode ? userRights : undefined;
   //console.log("Selected Marker ID (idPoi):", marker.options.id);
   //console.log("Selected Marker Description:", marker.options.description);
   //console.log("User Rights:", userRights);
@@ -106,6 +109,7 @@ export const handleEditPoi = (
     idPoi: marker.options.id,
     name: marker.options.name,
     description: marker.options.description,
+    idLD: marker.options.idLD,
   });
 
   fetchPoiData(marker.options.id);

utils/setupPOIs.js

@@ -29,6 +29,9 @@ export const setupPOIs = async (
   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);
@@ -52,28 +55,35 @@ export const setupPOIs = async (
           id: location.idPoi,
           name: location.name,
           description: location.description,
+          idLD: location.idLD,
           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),
-            },
-          ],
         });
 
+        // 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}<br>
-              ${poiTypName}<br>
-            </div>
-          `);
+          <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,
@@ -81,18 +91,14 @@ export const setupPOIs = async (
               idPoiTyp: location.idPoiTyp,
               typ: poiTypName,
               description: location.description,
+              idLD: location.idLD,
             },
             setSelectedPoi,
             setLocationDeviceData,
-            setDeviceName,
+            setDeviceName, // Stelle sicher, dass dies korrekt funktioniert
             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);
@@ -103,6 +109,7 @@ export const setupPOIs = async (
         });
 
         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;

utils/setupPolylines-back.js

@@ -0,0 +1,341 @@
+// utils/setupPolylines.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 "./openInNewTab";
+import { toast } from "react-toastify";
+import { polylineLayerVisibleState } from "../store/atoms/polylineLayerVisibleState";
+import { useRecoilValue } from "recoil";
+
+// Funktion zum Deaktivieren der Polyline-Ereignisse
+export function disablePolylineEvents(polylines) {
+  polylines.forEach((polyline) => {
+    polyline.off("mouseover");
+    polyline.off("mouseout");
+  });
+}
+
+// Funktion zum Aktivieren der Polyline-Ereignisse
+export function enablePolylineEvents(polylines, lineColors) {
+  // Überprüfe, ob polylines definiert ist und ob es Elemente enthält
+  if (!polylines || polylines.length === 0) {
+    //console.warn("Keine Polylinien vorhanden oder polylines ist undefined.");
+    return;
+  }
+
+  // Falls Polylinien vorhanden sind, wende die Events an
+  polylines.forEach((polyline) => {
+    polyline.on("mouseover", (e) => {
+      //console.log("Mouseover on polyline", polyline.options);
+      polyline.setStyle({ weight: 14 });
+      const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${polyline.options.idLD}`;
+      //localStorage.setItem("lastElementType", "polyline");
+      //localStorage.setItem("polylineLink", link);
+    });
+
+    polyline.on("mouseout", (e) => {
+      //console.log("Mouseout from polyline", polyline.options);
+      polyline.setStyle({ weight: 3 });
+    });
+  });
+}
+
+export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter, polylineVisible) => {
+  if (localStorage.getItem("polylineVisible") === null) {
+    localStorage.setItem("polylineVisible", "true"); // Standardwert setzen
+    polylineVisible = true; // Wert in der Funktion initialisieren
+  } else {
+    polylineVisible = localStorage.getItem("polylineVisible") === "true";
+  }
+
+  if (!polylineVisible) {
+    // Entferne alle Polylinien, wenn sie ausgeblendet werden sollen
+    if (window.polylines) {
+      window.polylines.forEach((polyline) => {
+        if (map.hasLayer(polyline)) {
+          map.removeLayer(polyline);
+        }
+      });
+    }
+    return { markers: [], polylines: [] };
+  }
+  const markers = [];
+  const polylines = [];
+  const editMode = localStorage.getItem("editMode") === "true"; // Prüfen, ob der Bearbeitungsmodus aktiv ist
+
+  linePositions.forEach((lineData, lineIndex) => {
+    const lineMarkers = [];
+
+    lineData.coordinates.forEach((coord, index) => {
+      let icon = circleIcon;
+      if (index === 0) {
+        icon = startIcon;
+      } else if (index === lineData.coordinates.length - 1) {
+        icon = endIcon;
+      }
+
+      // Nur Marker mit circleIcon ausblenden, wenn Bearbeitungsmodus deaktiviert ist
+      if (icon !== circleIcon || editMode) {
+        const marker = L.marker(coord, {
+          icon: icon,
+          draggable: editMode, // Nur verschiebbar, wenn Bearbeitungsmodus aktiv ist
+          contextmenu: true,
+          contextmenuInheritItems: false,
+          contextmenuItems: [],
+        }).addTo(map);
+
+        marker.on("dragend", () => {
+          console.log("Marker wurde verschoben in setupPolylines.js");
+          if (editMode) {
+            const newCoords = marker.getLatLng();
+            setNewCoords(newCoords);
+            const newCoordinates = [...lineData.coordinates];
+            newCoordinates[index] = [newCoords.lat, newCoords.lng];
+
+            const updatedPolyline = L.polyline(newCoordinates, {
+              color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
+            }).addTo(map);
+
+            updatedPolyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
+              permanent: false,
+              direction: "auto",
+            });
+
+            updatedPolyline.on("mouseover", () => {
+              updatedPolyline.setStyle({ weight: 20 });
+              updatedPolyline.bringToFront();
+            });
+
+            updatedPolyline.on("mouseout", () => {
+              updatedPolyline.setStyle({ weight: 3 });
+            });
+
+            polylines[lineIndex].remove();
+            polylines[lineIndex] = updatedPolyline;
+            lineData.coordinates = newCoordinates;
+
+            const requestData = {
+              idModul: lineData.idModul,
+              idLD: lineData.idLD,
+              newCoordinates,
+            };
+
+            fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify(requestData),
+            })
+              .then((response) => {
+                if (!response.ok) {
+                  return response.json().then((data) => {
+                    throw new Error(data.error || "Unbekannter Fehler");
+                  });
+                }
+                return response.json();
+              })
+              .then((data) => {
+                console.log("Koordinaten erfolgreich aktualisiert:", data);
+              })
+              .catch((error) => {
+                console.error("Fehler beim Aktualisieren der Koordinaten:", error.message);
+              });
+          } else {
+            toast.error("Benutzer hat keine Berechtigung zum Bearbeiten.", {
+              position: "top-center",
+              autoClose: 5000,
+              hideProgressBar: false,
+              closeOnClick: true,
+              pauseOnHover: true,
+              draggable: true,
+              progress: undefined,
+            });
+          }
+        });
+
+        marker.on("mouseover", function () {
+          this.bindContextMenu({
+            contextmenuItems: [
+              {
+                text: "Stützpunkt entfernen",
+                icon: "/img/icons/gisLines/remove-support-point.svg",
+                callback: () => {
+                  if (editMode) {
+                    const newCoords = marker.getLatLng();
+                    const newCoordinates = [...lineData.coordinates];
+                    newCoordinates[index] = [newCoords.lat, newCoords.lng];
+
+                    removePOI(marker, lineData, currentZoom, currentCenter);
+                    polylines[lineIndex].remove();
+                    lineData.coordinates = newCoordinates;
+                  } else {
+                    toast.error("Benutzer hat keine Berechtigung zum Bearbeiten.", {
+                      position: "top-center",
+                      autoClose: 5000,
+                      hideProgressBar: false,
+                      closeOnClick: true,
+                      pauseOnHover: true,
+                      draggable: true,
+                      progress: undefined,
+                    });
+                  }
+                },
+              },
+            ],
+          });
+        });
+
+        marker.on("mouseout", function () {
+          this.unbindContextMenu();
+        });
+
+        lineMarkers.push(marker);
+      }
+    });
+
+    const polyline = L.polyline(lineData.coordinates, {
+      color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
+      weight: 3,
+      contextmenu: true,
+      contextmenuInheritItems: false, // Standard-Kontextmenü deaktivieren
+      contextmenuItems: [],
+    }).addTo(map);
+
+    // Füge "Stützpunkt hinzufügen" nur hinzu, wenn editMode aktiv ist
+    if (editMode) {
+      polyline.options.contextmenuItems.push(
+        {
+          text: "Station öffnen (Tab)",
+          icon: "/img/screen_new.png",
+          callback: (e) => {
+            const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;
+            window.open(link, "_blank");
+          },
+        },
+        { separator: true },
+
+        {
+          text: "Koordinaten anzeigen",
+          icon: "/img/not_listed_location.png",
+          callback: (e) => {
+            alert("Breitengrad: " + e.latlng.lat.toFixed(5) + "\nLängengrad: " + e.latlng.lng.toFixed(5));
+          },
+        },
+        { separator: true },
+        {
+          text: "Reinzoomen",
+          icon: "/img/zoom_in.png",
+          callback: (e) => map.zoomIn(),
+        },
+        {
+          text: "Rauszoomen",
+          icon: "/img/zoom_out.png",
+          callback: (e) => map.zoomOut(),
+        },
+        {
+          text: "Hier zentrieren",
+          icon: "/img/center_focus.png",
+          callback: (e) => map.panTo(e.latlng),
+        },
+        { separator: true },
+        {
+          text: "POI hinzufügen",
+          icon: "/img/add_station.png",
+          callback: (e) => {
+            // Hier kannst du die Logik für das Hinzufügen eines POIs implementieren
+            alert("POI hinzufügen an: " + e.latlng);
+          },
+        },
+        {
+          text: "Stützpunkt hinzufügen",
+          icon: "/img/icons/gisLines/add-support-point.svg",
+          callback: (e) => {
+            if (tempMarker) {
+              tempMarker.remove();
+            }
+            const newPoint = e.latlng;
+            const closestPoints = findClosestPoints(lineData.coordinates, newPoint, map);
+            insertNewPOI(closestPoints, newPoint, lineData, map);
+            redrawPolyline(lineData, lineColors, tooltipContents, map);
+            window.location.reload();
+          },
+        }
+      );
+    }
+
+    // Hier wird der Tooltip hinzugefügt
+    polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
+      permanent: false,
+      direction: "auto",
+    });
+
+    polyline.on("mouseover", (e) => {
+      const startTime = Date.now(); // Startzeit erfassen
+      localStorage.setItem("contextMenuStartTime", startTime); // Speichern in localStorage
+
+      // Starte einen Intervall-Timer, um die Differenz zu berechnen
+      const countdownInterval = setInterval(() => {
+        const currentTime = Date.now();
+        const elapsedTime = (currentTime - startTime) / 1000; // Differenz in Sekunden
+
+        // Speichern der abgelaufenen Zeit in localStorage
+        localStorage.setItem("contextMenuCountdown", elapsedTime);
+
+        // Wenn die Zeit 17 Sekunden erreicht, schließe das Menü
+        if (elapsedTime >= 17) {
+          clearInterval(countdownInterval);
+          const contextMenu = map.contextmenu; // Zugriff auf das Kontextmenü
+          contextMenu.hide(); // Kontextmenü schließen
+        }
+      }, 1000); // Jede Sekunde
+      //console.log("Mouseover on polyline", lineData);
+      polyline.setStyle({ weight: 14 });
+      const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;
+      console.log("Link der Linie:", link);
+      //localStorage.setItem("lastElementType", "polyline");
+      //localStorage.setItem("polylineLink", link);
+    });
+
+    polyline.on("mouseout", (e) => {
+      // console.log("Mouseout from polyline", lineData);
+      polyline.setStyle({ weight: 3 });
+      // Setze den Countdown auf 0, wenn mouseout ausgelöst wird
+      localStorage.setItem("contextMenuCountdown", 0);
+    });
+    // Speichere den Link bei einem Rechtsklick (Kontextmenü)
+    /*  
+       polyline.on("contextmenu", (e) => {
+      const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;
+      console.log("Link der Linie (via Rechtsklick):", link);
+      localStorage.setItem("lastElementType", "polyline");
+      localStorage.setItem("polylineLink", link);
+    });
+     */
+    // Starte den Timer zum Schließen des Kontextmenüs nach 15 Sekunden
+    polyline.on("contextmenu", function (e) {
+      const contextMenu = this._map.contextmenu; // Zugriff auf das Kontextmenü
+      const closeMenu = () => contextMenu.hide(); // Funktion zum Schließen des Menüs
+
+      const countdown = parseInt(localStorage.getItem("contextMenuCountdown"), 30);
+      if (countdown >= 28) {
+        closeMenu();
+      }
+    });
+
+    polylines.push(polyline);
+    markers.push(...lineMarkers);
+  });
+
+  // Speichere Polylines und LineColors global für den Zugriff in anderen Funktionen
+  window.polylines = polylines;
+  window.lineColors = lineColors;
+
+  return { markers, polylines };
+};

utils/setupPolylines.js

@@ -9,6 +9,9 @@ import startIcon from "../components/gisPolylines/icons/StartIcon";
 import endIcon from "../components/gisPolylines/icons/EndIcon";
 import { redrawPolyline } from "./mapUtils";
 import { openInNewTab } from "./openInNewTab";
+import { toast } from "react-toastify";
+import { polylineLayerVisibleState } from "../store/atoms/polylineLayerVisibleState";
+import { useRecoilValue } from "recoil";
 
 // Funktion zum Deaktivieren der Polyline-Ereignisse
 export function disablePolylineEvents(polylines) {
@@ -42,10 +45,64 @@ export function enablePolylineEvents(polylines, lineColors) {
     });
   });
 }
+// Funktion zum Schließen des Kontextmenüs und Entfernen der Markierung
+function closePolylineSelectionAndContextMenu(map) {
+  try {
+    // Entferne alle markierten Polylinien
+    if (window.selectedPolyline) {
+      window.selectedPolyline.setStyle({ weight: 3 }); // Originalstil wiederherstellen
+      window.selectedPolyline = null;
+    }
 
-export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter) => {
+    // Überprüfe, ob map und map.contextmenu definiert sind
+    if (map && map.contextmenu) {
+      map.contextmenu.hide(); // Kontextmenü schließen
+    } else {
+      console.warn("Kontextmenü ist nicht verfügbar.");
+    }
+  } catch (error) {
+    console.error("Fehler beim Schließen des Kontextmenüs:", error);
+    window.location.reload();
+  }
+
+  // Countdown-Status zurücksetzen
+  localStorage.removeItem("contextMenuCountdown");
+  localStorage.removeItem("contextMenuExpired");
+}
+
+// Überprüft regelmäßig den Status in localStorage
+function monitorContextMenu(map) {
+  setInterval(() => {
+    const isContextMenuExpired = localStorage.getItem("contextMenuExpired") === "true";
+    if (isContextMenuExpired) {
+      closePolylineSelectionAndContextMenu(map);
+      localStorage.removeItem("contextMenuExpired"); // Flagge entfernen, um wiederverwendbar zu sein
+    }
+  }, 1000); // Alle 1 Sekunde überprüfen
+}
+
+export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter, polylineVisible) => {
+  if (localStorage.getItem("polylineVisible") === null) {
+    localStorage.setItem("polylineVisible", "true"); // Standardwert setzen
+    polylineVisible = true; // Wert in der Funktion initialisieren
+  } else {
+    polylineVisible = localStorage.getItem("polylineVisible") === "true";
+  }
+
+  if (!polylineVisible) {
+    // Entferne alle Polylinien, wenn sie ausgeblendet werden sollen
+    if (window.polylines) {
+      window.polylines.forEach((polyline) => {
+        if (map.hasLayer(polyline)) {
+          map.removeLayer(polyline);
+        }
+      });
+    }
+    return { markers: [], polylines: [] };
+  }
   const markers = [];
   const polylines = [];
+  const editMode = localStorage.getItem("editMode") === "true"; // Prüfen, ob der Bearbeitungsmodus aktiv ist
 
   linePositions.forEach((lineData, lineIndex) => {
     const lineMarkers = [];
@@ -58,103 +115,179 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
         icon = endIcon;
       }
 
-      const marker = L.marker(coord, {
-        icon: icon,
-        draggable: true,
-        contextmenu: true,
-        contextmenuInheritItems: false,
-        contextmenuItems: [],
-      }).addTo(map);
-
-      marker.on("dragend", () => {
-        const newCoords = marker.getLatLng();
-        setNewCoords(newCoords);
-        const newCoordinates = [...lineData.coordinates];
-        newCoordinates[index] = [newCoords.lat, newCoords.lng];
-
-        const updatedPolyline = L.polyline(newCoordinates, {
-          color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
+      // Nur Marker mit circleIcon ausblenden, wenn Bearbeitungsmodus deaktiviert ist
+      if (icon !== circleIcon || editMode) {
+        const marker = L.marker(coord, {
+          icon: icon,
+          draggable: editMode, // Nur verschiebbar, wenn Bearbeitungsmodus aktiv ist
+          contextmenu: true,
+          contextmenuInheritItems: false,
+          contextmenuItems: [],
         }).addTo(map);
 
-        updatedPolyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
-          permanent: false,
-          direction: "auto",
-        });
+        marker.on("dragend", () => {
+          console.log("Marker wurde verschoben in setupPolylines.js");
+          if (editMode) {
+            const newCoords = marker.getLatLng();
+            setNewCoords(newCoords);
+            const newCoordinates = [...lineData.coordinates];
+            newCoordinates[index] = [newCoords.lat, newCoords.lng];
 
-        updatedPolyline.on("mouseover", () => {
-          updatedPolyline.setStyle({ weight: 20 });
-          updatedPolyline.bringToFront();
-        });
+            const updatedPolyline = L.polyline(newCoordinates, {
+              color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
+            }).addTo(map);
 
-        updatedPolyline.on("mouseout", () => {
-          updatedPolyline.setStyle({ weight: 3 });
-        });
+            updatedPolyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
+              permanent: false,
+              direction: "auto",
+            });
 
-        polylines[lineIndex].remove();
-        polylines[lineIndex] = updatedPolyline;
-        lineData.coordinates = newCoordinates;
+            updatedPolyline.on("mouseover", () => {
+              updatedPolyline.setStyle({ weight: 20 });
+              updatedPolyline.bringToFront();
+            });
 
-        const requestData = {
-          idModul: lineData.idModul,
-          idLD: lineData.idLD,
-          newCoordinates,
-        };
+            updatedPolyline.on("mouseout", () => {
+              updatedPolyline.setStyle({ weight: 3 });
+            });
 
-        fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(requestData),
-        })
-          .then((response) => {
-            if (!response.ok) {
-              return response.json().then((data) => {
-                throw new Error(data.error || "Unbekannter Fehler");
-              });
-            }
-            return response.json();
-          })
-          .then((data) => {
-            console.log("Koordinaten erfolgreich aktualisiert:", data);
-          })
-          .catch((error) => {
-            console.error("Fehler beim Aktualisieren der Koordinaten:", error.message);
-          });
-      });
+            polylines[lineIndex].remove();
+            polylines[lineIndex] = updatedPolyline;
+            lineData.coordinates = newCoordinates;
 
-      marker.on("mouseover", function () {
-        this.bindContextMenu({
-          contextmenuItems: [
-            {
-              text: "Stützpunkt entfernen",
-              icon: "/img/icons/gisLines/remove-support-point.svg",
-              callback: () => {
-                const newCoords = marker.getLatLng();
-                const newCoordinates = [...lineData.coordinates];
-                newCoordinates[index] = [newCoords.lat, newCoords.lng];
+            const requestData = {
+              idModul: lineData.idModul,
+              idLD: lineData.idLD,
+              newCoordinates,
+            };
 
-                removePOI(marker, lineData, currentZoom, currentCenter);
-                polylines[lineIndex].remove();
-                lineData.coordinates = newCoordinates;
+            fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
               },
-            },
-          ],
+              body: JSON.stringify(requestData),
+            })
+              .then((response) => {
+                if (!response.ok) {
+                  return response.json().then((data) => {
+                    throw new Error(data.error || "Unbekannter Fehler");
+                  });
+                }
+                return response.json();
+              })
+              .then((data) => {
+                console.log("Koordinaten erfolgreich aktualisiert:", data);
+              })
+              .catch((error) => {
+                console.error("Fehler beim Aktualisieren der Koordinaten:", error.message);
+              });
+          } else {
+            toast.error("Benutzer hat keine Berechtigung zum Bearbeiten.", {
+              position: "top-center",
+              autoClose: 5000,
+              hideProgressBar: false,
+              closeOnClick: true,
+              pauseOnHover: true,
+              draggable: true,
+              progress: undefined,
+            });
+          }
         });
-      });
 
-      marker.on("mouseout", function () {
-        this.unbindContextMenu();
-      });
+        marker.on("mouseover", function () {
+          this.bindContextMenu({
+            contextmenuItems: [
+              {
+                text: "Stützpunkt entfernen",
+                icon: "/img/icons/gisLines/remove-support-point.svg",
+                callback: () => {
+                  if (editMode) {
+                    const newCoords = marker.getLatLng();
+                    const newCoordinates = [...lineData.coordinates];
+                    newCoordinates[index] = [newCoords.lat, newCoords.lng];
 
-      lineMarkers.push(marker);
+                    removePOI(marker, lineData, currentZoom, currentCenter);
+                    polylines[lineIndex].remove();
+                    lineData.coordinates = newCoordinates;
+                  } else {
+                    toast.error("Benutzer hat keine Berechtigung zum Bearbeiten.", {
+                      position: "top-center",
+                      autoClose: 5000,
+                      hideProgressBar: false,
+                      closeOnClick: true,
+                      pauseOnHover: true,
+                      draggable: true,
+                      progress: undefined,
+                    });
+                  }
+                },
+              },
+            ],
+          });
+        });
+
+        marker.on("mouseout", function () {
+          this.unbindContextMenu();
+        });
+
+        lineMarkers.push(marker);
+      }
     });
 
     const polyline = L.polyline(lineData.coordinates, {
       color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
       weight: 3,
       contextmenu: true,
-      contextmenuItems: [
+      contextmenuInheritItems: false, // Standard-Kontextmenü deaktivieren
+      contextmenuItems: [],
+    }).addTo(map);
+
+    // Füge "Stützpunkt hinzufügen" nur hinzu, wenn editMode aktiv ist
+    if (editMode) {
+      polyline.options.contextmenuItems.push(
+        {
+          text: "Station öffnen (Tab)",
+          icon: "/img/screen_new.png",
+          callback: (e) => {
+            const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;
+            window.open(link, "_blank");
+          },
+        },
+        { separator: true },
+
+        {
+          text: "Koordinaten anzeigen",
+          icon: "/img/not_listed_location.png",
+          callback: (e) => {
+            alert("Breitengrad: " + e.latlng.lat.toFixed(5) + "\nLängengrad: " + e.latlng.lng.toFixed(5));
+          },
+        },
+        { separator: true },
+        {
+          text: "Reinzoomen",
+          icon: "/img/zoom_in.png",
+          callback: (e) => map.zoomIn(),
+        },
+        {
+          text: "Rauszoomen",
+          icon: "/img/zoom_out.png",
+          callback: (e) => map.zoomOut(),
+        },
+        {
+          text: "Hier zentrieren",
+          icon: "/img/center_focus.png",
+          callback: (e) => map.panTo(e.latlng),
+        },
+        { separator: true },
+        {
+          text: "POI hinzufügen",
+          icon: "/img/add_station.png",
+          callback: (e) => {
+            // Hier kannst du die Logik für das Hinzufügen eines POIs implementieren
+            alert("POI hinzufügen an: " + e.latlng);
+          },
+        },
         {
           text: "Stützpunkt hinzufügen",
           icon: "/img/icons/gisLines/add-support-point.svg",
@@ -168,9 +301,55 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
             redrawPolyline(lineData, lineColors, tooltipContents, map);
             window.location.reload();
           },
+        }
+      );
+    } else {
+      polyline.options.contextmenuItems.push(
+        {
+          text: "Station öffnen (Tab)",
+          icon: "/img/screen_new.png",
+          callback: (e) => {
+            const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;
+            window.open(link, "_blank");
+          },
         },
-      ],
-    }).addTo(map);
+        { separator: true },
+
+        {
+          text: "Koordinaten anzeigen",
+          icon: "/img/not_listed_location.png",
+          callback: (e) => {
+            alert("Breitengrad: " + e.latlng.lat.toFixed(5) + "\nLängengrad: " + e.latlng.lng.toFixed(5));
+          },
+        },
+        { separator: true },
+        {
+          text: "Reinzoomen",
+          icon: "/img/zoom_in.png",
+          callback: (e) => map.zoomIn(),
+        },
+        {
+          text: "Rauszoomen",
+          icon: "/img/zoom_out.png",
+          callback: (e) => map.zoomOut(),
+        },
+
+        {
+          text: "Hier zentrieren",
+          icon: "/img/center_focus.png",
+          callback: (e) => map.panTo(e.latlng),
+        },
+        { separator: true },
+        {
+          text: "POI hinzufügen",
+          icon: "/img/add_station.png",
+          callback: (e) => {
+            // Hier kannst du die Logik für das Hinzufügen eines POIs implementieren
+            alert("POI hinzufügen an: " + e.latlng);
+          },
+        }
+      );
+    }
 
     // Hier wird der Tooltip hinzugefügt
     polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
@@ -179,36 +358,11 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
     });
 
     polyline.on("mouseover", (e) => {
-      //console.log("Mouseover on polyline", lineData);
-      polyline.setStyle({ weight: 14 });
-      const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;
-      console.log("Link der Linie:", link);
-      //localStorage.setItem("lastElementType", "polyline");
-      //localStorage.setItem("polylineLink", link);
-    });
-
-    polyline.on("mouseout", (e) => {
-      // console.log("Mouseout from polyline", lineData);
-      polyline.setStyle({ weight: 3 });
-    });
-    // Speichere den Link bei einem Rechtsklick (Kontextmenü)
-    polyline.on("contextmenu", (e) => {
-      const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;
-      console.log("Link der Linie (via Rechtsklick):", link);
-      localStorage.setItem("lastElementType", "polyline");
-      localStorage.setItem("polylineLink", link);
-    });
-     */
-    // Starte den Timer zum Schließen des Kontextmenüs nach 15 Sekunden
-    polyline.on("contextmenu", function (e) {
-      const contextMenu = this._map.contextmenu; // Zugriff auf das Kontextmenü
-      const closeMenu = () => contextMenu.hide(); // Funktion zum Schließen des Menüs
-
       const startTime = Date.now(); // Startzeit erfassen
       localStorage.setItem("contextMenuStartTime", startTime); // Speichern in localStorage
 
       // Starte einen Intervall-Timer, um die Differenz zu berechnen
-      const countdownInterval = setInterval(() => {
+      /*      const countdownInterval = setInterval(() => {
         const currentTime = Date.now();
         const elapsedTime = (currentTime - startTime) / 1000; // Differenz in Sekunden
 
@@ -221,7 +375,35 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
           const contextMenu = map.contextmenu; // Zugriff auf das Kontextmenü
           contextMenu.hide(); // Kontextmenü schließen
         }
-      }, 1000); // Jede Sekunde
+      }, 1000);  */
+      // Jede Sekunde
+      //console.log("Mouseover on polyline", lineData);
+      polyline.setStyle({ weight: 14 });
+      const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;
+      console.log("Link der Linie:", link);
+      //localStorage.setItem("lastElementType", "polyline");
+      //localStorage.setItem("polylineLink", link);
+    });
+
+    polyline.on("mouseout", (e) => {
+      // console.log("Mouseout from polyline", lineData);
+      polyline.setStyle({ weight: 3 });
+      // Setze den Countdown auf 0, wenn mouseout ausgelöst wird
+      localStorage.setItem("contextMenuCountdown", 0);
+    });
+    // Speichere den Link bei einem Rechtsklick (Kontextmenü)
+    /*  
+       polyline.on("contextmenu", (e) => {
+      const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;
+      console.log("Link der Linie (via Rechtsklick):", link);
+      localStorage.setItem("lastElementType", "polyline");
+      localStorage.setItem("polylineLink", link);
+    });
+     */
+    // Starte den Timer zum Schließen des Kontextmenüs nach 15 Sekunden
+    polyline.on("contextmenu", function (e) {
+      const contextMenu = this._map.contextmenu; // Zugriff auf das Kontextmenü
+      const closeMenu = () => contextMenu.hide(); // Funktion zum Schließen des Menüs
 
       const countdown = parseInt(localStorage.getItem("contextMenuCountdown"), 30);
       if (countdown >= 28) {
@@ -236,6 +418,6 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
   // Speichere Polylines und LineColors global für den Zugriff in anderen Funktionen
   window.polylines = polylines;
   window.lineColors = lineColors;
-
+  monitorContextMenu(map);
   return { markers, polylines };
 };