Stützpunkt entfernen Funktion ist wieder da

config/config.js

@@ -11,7 +11,8 @@ const serverURL = process.env.NEXT_PUBLIC_SERVER_URL;
 if (!serverURL) {
   throw new Error("Die Umgebungsvariable NEXT_PUBLIC_SERVER_URL ist nicht gesetzt!");
 }
-console.log("serverURL in config:", serverURL);
+console.log("%c 1- serverURL in config:", "color: #006400;", serverURL);
+
 // Initialisieren von Variablen, die später im Browserkontext gesetzt werden
 let windowHeight, url_string, url, idMap, idUser;
 //Online Daten
@@ -23,13 +24,14 @@ if (typeof window !== "undefined") {
   windowHeight = window.innerHeight; // Die Höhe des Browserfensters
   url_string = window.location.href; // Die vollständige URL als String
   url = new URL(url_string); // Die URL als URL-Objekt, um Teile der URL einfacher zu handhaben
-  console.log("URL in config:", url);
+  console.log("%c 2- URL in config:", "color: #006400; font-size: 16px; background-color: #f0f0f0;", url);
-  console.log("URL origin in config:", url.origin); //http://localhost:3000
+
+  console.log("%c 3- URL origin in config:", "color: #006400;", url.origin); //http://localhost:3000
   idMap = url.searchParams.get("m"); // Ein Parameter aus der URL, Standardwert ist '10'
   idUser = url.searchParams.get("u"); // Ein weiterer Parameter aus der URL, Standardwert ist '484 admin zu testen von Stationen ausblenden und einblenden in der Card'
 
-  console.log(`Parameter 'idMap' : ${idMap}`);
+  console.log(`4- Parameter 'idMap' : ${idMap}`);
-  console.log(`Parameter 'idUser': ${idUser}`);
+  console.log(`5- Parameter 'idUser': ${idUser}`);
 
   // Konstruktion von URLs, die auf spezifische Ressourcen auf dem Server zeigen
   //http://localhost:3000/?m=10&u=485

utils/openInNewTab.js

@@ -4,21 +4,28 @@ export function openInNewTab(e, target) {
   const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
   let link;
 
-  // Überprüfen, ob es sich um einen Marker handelt und ein gültiger Link vorhanden ist
+  // Prüfen, ob der Kontextmenü-Eintrag aufgerufen wird, ohne dass ein Marker oder Polyline direkt angesprochen wird
+  if (!target) {
+    // Verwende den in localStorage gespeicherten Link
+    const lastElementType = localStorage.getItem("lastElementType");
+    if (lastElementType === "polyline") {
+      link = localStorage.getItem("polylineLink");
+    }
+  }
+
   if (target instanceof L.Marker && target.options.link) {
-    // Verwende den Link, der im Marker gespeichert ist
     link = `${BASE_URL}${target.options.link}`;
   } else if (target instanceof L.Polyline) {
-    // Polyline-Logik
     const idLD = target.options.idLD;
+    console.log("idLD der Linie", idLD);
     if (idLD) {
       link = `${BASE_URL}cpl.aspx?id=${idLD}`;
     } else {
       console.error("Keine gültige 'idLD' für die Linie gefunden.");
       return;
     }
-  } else {
+  } else if (!link) {
-    console.error("Fehler: Ungültiges Ziel oder keine gültige 'link' Eigenschaft.");
+    console.error("Fehler: Es wurde kein gültiger Link gefunden.");
     return;
   }
 

utils/setupPolylines.js

@@ -1,9 +1,14 @@
 // utils/setupPolylines.js
 import { findClosestPoints } from "./geometryUtils";
-import { redrawPolyline } from "./mapUtils";
+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";
 
 // Funktion zum Deaktivieren der Polyline-Ereignisse
 export function disablePolylineEvents(polylines) {
@@ -17,6 +22,7 @@ export function disablePolylineEvents(polylines) {
 export function enablePolylineEvents(polylines, lineColors) {
   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");
@@ -24,20 +30,19 @@ export function enablePolylineEvents(polylines, lineColors) {
     });
 
     polyline.on("mouseout", (e) => {
+      //console.log("Mouseout from polyline", polyline.options);
       polyline.setStyle({ weight: 3 });
     });
   });
 }
 
-export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker) => {
+export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter) => {
   const markers = [];
   const polylines = [];
 
-  // Loop über die Linienpositionen
   linePositions.forEach((lineData, lineIndex) => {
     const lineMarkers = [];
 
-    // Loop über die Koordinaten der Linie und Erstellung der Marker
     lineData.coordinates.forEach((coord, index) => {
       let icon = circleIcon;
       if (index === 0) {
@@ -49,10 +54,11 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
       const marker = L.marker(coord, {
         icon: icon,
         draggable: true,
-        contextmenu: true, // Ermögliche das Kontextmenü für Marker
+        contextmenu: true,
+        contextmenuInheritItems: false,
+        contextmenuItems: [],
       }).addTo(map);
 
-      // Logik, um Marker zu verschieben und Polyline neu zu zeichnen
       marker.on("dragend", () => {
         const newCoords = marker.getLatLng();
         setNewCoords(newCoords);
@@ -69,7 +75,7 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
         });
 
         updatedPolyline.on("mouseover", () => {
-          updatedPolyline.setStyle({ weight: 14 });
+          updatedPolyline.setStyle({ weight: 20 });
           updatedPolyline.bringToFront();
         });
 
@@ -77,12 +83,10 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
           updatedPolyline.setStyle({ weight: 3 });
         });
 
-        // Alte Polyline entfernen und die neue setzen
         polylines[lineIndex].remove();
         polylines[lineIndex] = updatedPolyline;
         lineData.coordinates = newCoordinates;
 
-        // Koordinaten aktualisieren
         const requestData = {
           idModul: lineData.idModul,
           idLD: lineData.idLD,
@@ -112,37 +116,75 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
           });
       });
 
-      // Marker in die Liste einfügen
+      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];
+
+                removePOI(marker, lineData, currentZoom, currentCenter);
+                polylines[lineIndex].remove();
+                lineData.coordinates = newCoordinates;
+              },
+            },
+          ],
+        });
+      });
+
+      marker.on("mouseout", function () {
+        this.unbindContextMenu();
+      });
+
       lineMarkers.push(marker);
     });
 
-    // Polyline hinzufügen
     const polyline = L.polyline(lineData.coordinates, {
       color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
       weight: 3,
-      contextmenu: true, // Ermögliche das Kontextmenü für Polylines
+      contextmenu: true,
+      contextmenuItems: [
+        {
+          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();
+          },
+        },
+      ],
     }).addTo(map);
 
-    // Tooltip für die Polyline hinzufügen
+    // Hier wird der Tooltip hinzugefügt
     polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
       permanent: false,
       direction: "auto",
     });
 
-    // Hover-Ereignisse für Polylines
     polyline.on("mouseover", (e) => {
+      //console.log("Mouseover on polyline", lineData);
       polyline.setStyle({ weight: 14 });
-      const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${lineData.idLD}`;
+      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 });
     });
 
-    // Polyline und Marker in ihre jeweiligen Listen einfügen
     polylines.push(polyline);
     markers.push(...lineMarkers);
   });