feat: Implementierung des Bearbeitungsmodus

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 (
+export const updateLocationInDatabase = async (id, newLatitude, newLongitude) => {
-  id,
-  newLatitude,
-  newLongitude
-) => {
   const response = await fetch("/api/talas_v5_DB/pois/updateLocation", {
     method: "POST",
     headers: { "Content-Type": "application/json" },

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;

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, {
+      // Nur Marker mit circleIcon ausblenden, wenn Bearbeitungsmodus deaktiviert ist
-        icon: icon,
+      if (icon !== circleIcon || editMode) {
-        draggable: true,
+        const marker = L.marker(coord, {
-        contextmenu: true,
+          icon: icon,
-        contextmenuInheritItems: false,
+          draggable: editMode, // Nur verschiebbar, wenn Bearbeitungsmodus aktiv ist
-        contextmenuItems: [],
+          contextmenu: true,
-      }).addTo(map);
+          contextmenuInheritItems: false,
-
+          contextmenuItems: [],
-      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",
         }).addTo(map);
 
-        updatedPolyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
+        marker.on("dragend", () => {
-          permanent: false,
+          console.log("Marker wurde verschoben in setupPolylines.js");
-          direction: "auto",
+          if (editMode) {
-        });
+            const newCoords = marker.getLatLng();
+            setNewCoords(newCoords);
+            const newCoordinates = [...lineData.coordinates];
+            newCoordinates[index] = [newCoords.lat, newCoords.lng];
 
-        updatedPolyline.on("mouseover", () => {
+            const updatedPolyline = L.polyline(newCoordinates, {
-          updatedPolyline.setStyle({ weight: 20 });
+              color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
-          updatedPolyline.bringToFront();
+            }).addTo(map);
-        });
 
-        updatedPolyline.on("mouseout", () => {
+            updatedPolyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
-          updatedPolyline.setStyle({ weight: 3 });
+              permanent: false,
-        });
+              direction: "auto",
+            });
 
-        polylines[lineIndex].remove();
+            updatedPolyline.on("mouseover", () => {
-        polylines[lineIndex] = updatedPolyline;
+              updatedPolyline.setStyle({ weight: 20 });
-        lineData.coordinates = newCoordinates;
+              updatedPolyline.bringToFront();
+            });
 
-        const requestData = {
+            updatedPolyline.on("mouseout", () => {
-          idModul: lineData.idModul,
+              updatedPolyline.setStyle({ weight: 3 });
-          idLD: lineData.idLD,
+            });
-          newCoordinates,
-        };
 
-        fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
+            polylines[lineIndex].remove();
-          method: "POST",
+            polylines[lineIndex] = updatedPolyline;
-          headers: {
+            lineData.coordinates = newCoordinates;
-            "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);
-          });
-      });
 
-      marker.on("mouseover", function () {
+            const requestData = {
-        this.bindContextMenu({
+              idModul: lineData.idModul,
-          contextmenuItems: [
+              idLD: lineData.idLD,
-            {
+              newCoordinates,
-              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);
+            fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
-                polylines[lineIndex].remove();
+              method: "POST",
-                lineData.coordinates = newCoordinates;
+              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 () {
+        marker.on("mouseover", function () {
-        this.unbindContextMenu();
+          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, {