From 04e50c30f8ac26f50598fdbe788f2e29fdfc1124 Mon Sep 17 00:00:00 2001 From: ISA Date: Fri, 6 Sep 2024 14:08:39 +0200 Subject: [PATCH] feat: Implementierung des Bearbeitungsmodus --- components/PoiUtils.js | 7 +- components/pois/PoiUtils.js | 1 + utils/poiUtils.js | 1 + utils/setupPOIs.js | 1 + utils/setupPolylines.js | 184 +++++++++++++++++++++--------------- 5 files changed, 112 insertions(+), 82 deletions(-) diff --git a/components/PoiUtils.js b/components/PoiUtils.js index a66985054..065b52a65 100644 --- a/components/PoiUtils.js +++ b/components/PoiUtils.js @@ -23,6 +23,7 @@ export const addMarkersToMap = (markers, map, layerGroup) => { marker.on("mouseover", () => marker.openPopup()); marker.on("mouseout", () => marker.closePopup()); marker.on("dragend", (e) => { + console.log("Marker wurde verschoben in addMarkersToMap"); const newLat = e.target.getLatLng().lat; const newLng = e.target.getLatLng().lng; const markerId = e.target.options.id; @@ -32,11 +33,7 @@ export const addMarkersToMap = (markers, map, layerGroup) => { }; // Funktion zum Aktualisieren der Standorte in der Datenbank -export const updateLocationInDatabase = async ( - id, - newLatitude, - newLongitude -) => { +export const updateLocationInDatabase = async (id, newLatitude, newLongitude) => { const response = await fetch("/api/talas_v5_DB/pois/updateLocation", { method: "POST", headers: { "Content-Type": "application/json" }, diff --git a/components/pois/PoiUtils.js b/components/pois/PoiUtils.js index 003145249..9275f95f1 100644 --- a/components/pois/PoiUtils.js +++ b/components/pois/PoiUtils.js @@ -24,6 +24,7 @@ export const addMarkersToMap = (markers, map, layerGroup) => { marker.on("mouseover", () => marker.openPopup()); marker.on("mouseout", () => marker.closePopup()); marker.on("dragend", (e) => { + console.log("Marker wurde verschoben in addMarkersToMap"); const newLat = e.target.getLatLng().lat; const newLng = e.target.getLatLng().lng; const markerId = e.target.options.id; diff --git a/utils/poiUtils.js b/utils/poiUtils.js index cd0ebca01..8348cbde6 100644 --- a/utils/poiUtils.js +++ b/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]; diff --git a/utils/setupPOIs.js b/utils/setupPOIs.js index 558941719..0ecc86906 100644 --- a/utils/setupPOIs.js +++ b/utils/setupPOIs.js @@ -105,6 +105,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; diff --git a/utils/setupPolylines.js b/utils/setupPolylines.js index dffd60b42..5981cef75 100644 --- a/utils/setupPolylines.js +++ b/utils/setupPolylines.js @@ -9,6 +9,7 @@ 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"; // Funktion zum Deaktivieren der Polyline-Ereignisse export function disablePolylineEvents(polylines) { @@ -39,6 +40,7 @@ export function enablePolylineEvents(polylines, lineColors) { export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter) => { const markers = []; const polylines = []; + const editMode = localStorage.getItem("editMode") === "true"; // Prüfen, ob der Bearbeitungsmodus aktiv ist linePositions.forEach((lineData, lineIndex) => { const lineMarkers = []; @@ -51,96 +53,124 @@ 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, {