feat: Implementierung des Bearbeitungsmodus

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];

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;

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, {