From 421844611fda28fb33af2ee0b292cea84ecbac99 Mon Sep 17 00:00:00 2001 From: ISA Date: Wed, 4 Sep 2024 11:18:25 +0200 Subject: [PATCH] =?UTF-8?q?St=C3=BCtzpunkt=20entfernen=20Funktion=20ist=20?= =?UTF-8?q?wieder=20da?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/config.js | 12 ++++--- utils/openInNewTab.js | 17 +++++++--- utils/setupPolylines.js | 74 ++++++++++++++++++++++++++++++++--------- 3 files changed, 77 insertions(+), 26 deletions(-) diff --git a/config/config.js b/config/config.js index d65aaa16a..f6ea0a555 100644 --- 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 diff --git a/utils/openInNewTab.js b/utils/openInNewTab.js index 86f43f50a..51d0f667b 100644 --- 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; } diff --git a/utils/setupPolylines.js b/utils/setupPolylines.js index 57d4fefd2..ff23a2998 100644 --- 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); });