Stützpunkt entfernen Funktion ist wieder da

2024-09-04 11:18:25 +02:00
parent eea9a3af4c
commit 421844611f
3 changed files with 77 additions and 26 deletions
--- a/config/config.js
+++ b/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("URL origin in config:", url.origin); //http://localhost:3000
+  console.log("%c 2- URL in config:", "color: #006400; font-size: 16px; background-color: #f0f0f0;", url);
+
+  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(`Parameter 'idUser': ${idUser}`);
+  console.log(`4- Parameter 'idMap' : ${idMap}`);
+  console.log(`5- Parameter 'idUser': ${idUser}`);

  // Konstruktion von URLs, die auf spezifische Ressourcen auf dem Server zeigen
  //http://localhost:3000/?m=10&u=485
--- a/utils/openInNewTab.js
+++ b/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 {
-    console.error("Fehler: Ungültiges Ziel oder keine gültige 'link' Eigenschaft.");
+  } else if (!link) {
+    console.error("Fehler: Es wurde kein gültiger Link gefunden.");
    return;
  }

--- a/utils/setupPolylines.js
+++ b/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);
  });