bereich.png erstellt und bei editMode active marker.setZIndexOffset(1000);

components/DataSheet.js

@@ -218,7 +218,7 @@ function DataSheet() {
 
           {/* Bereiche */}
           <div className="flex items-center">
-            <input type="checkbox" checked={bereicheVisible} onChange={handleBereicheCheckboxChange} id="bereiche-checkbox" disabled={editMode} />
+            <input type="checkbox" checked={bereicheVisible} onChange={handleBereicheCheckboxChange} id="bereiche-checkbox" />
             <label htmlFor="bereiche-checkbox" className="text-sm ml-2">
               Bereiche
             </label>

components/MapComponent.js

@@ -42,6 +42,7 @@ import useLineData from "../hooks/useLineData.js";
 //import { useCreateAndSetDevices } from "../hooks/useCreateAndSetDevices";
 import { useMapComponentState } from "../hooks/useMapComponentState";
 import { disablePolylineEvents, enablePolylineEvents } from "../utils/setupPolylines";
+import { updateLocation } from "../utils/updateBereichUtil";
 //--------------------------------------------
 import { currentPoiState } from "../redux/slices/currentPoiSlice.js";
 import { selectGisStationsStaticDistrict, setGisStationsStaticDistrict } from "../redux/slices/gisStationsStaticDistrictSlice";
@@ -173,6 +174,17 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   });
   const [polylineEventsDisabled, setPolylineEventsDisabled] = useRecoilState(polylineEventsDisabledState); // Recoil State
 
+  const handleLocationUpdate = async (idLocation, idMap, newCoords) => {
+    try {
+      const result = await updateLocation(idLocation, idMap, newCoords);
+      console.log("Erfolgreiche Aktualisierung:", result);
+
+      // Aktualisieren Sie Marker oder andere Elemente
+    } catch (error) {
+      console.error("Fehler beim Aktualisieren der Location:", error);
+    }
+  };
+
   //---------------------------------------------------------------
 
   /*  useEffect(() => {
@@ -795,6 +807,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
   // Bereichs-Marker basierend auf dynamischer URL laden
   const bereicheMarkers = useBereicheMarkersLayer(map, oms, bereichUrl);
+  //const bereicheMarkers = useBereicheMarkersLayer(map, oms, editMode ? `/api/talas_v5_DB/bereich/readBereich?editMode=true` : `/api/talas_v5_DB/bereich/readBereich`);
   //const bereicheMarkers = useBereicheMarkersLayer(map, oms, "/api/talas_v5_DB/bereich/readBereich?m=12");
 
   /*   useEffect(() => {
@@ -803,6 +816,19 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       console.log("Bereiche-Markierungen geladen:", bereicheMarkers);
     }
   }, [map, oms, bereicheMarkers]); */
+  useEffect(() => {
+    const editMode = localStorage.getItem("editMode") === "true";
+
+    bereicheMarkers.forEach((marker) => {
+      if (editMode) {
+        marker.dragging.enable();
+        marker.setZIndexOffset(1000); // Marker nach oben setzen
+      } else {
+        marker.dragging.disable();
+        marker.setZIndexOffset(0); // Standard-Z-Index
+      }
+    });
+  }, [bereicheMarkers]);
 
   //----------------------------------
   useEffect(() => {

hooks/layers/useBereicheMarkersLayer.js

@@ -1,10 +1,11 @@
 import { useEffect, useState, useRef } from "react";
 import L from "leaflet";
 import "leaflet/dist/leaflet.css";
+import { updateLocation } from "../../utils/updateBereichUtil";
 
 // Definiere ein Standard-Icon
 const customIcon = new L.Icon({
-  iconUrl: "/img/marker-icon.png",
+  iconUrl: "/img/bereich.png",
   iconSize: [25, 41],
   iconAnchor: [12, 41],
   popupAnchor: [1, -34],
@@ -100,6 +101,64 @@ const useBereicheMarkersLayer = (map, oms, apiUrl) => {
     };
   }, [map, bereicheMarkers, oms]);
 
+  useEffect(() => {
+    const fetchBereiche = async () => {
+      try {
+        const response = await fetch(apiUrl);
+        const data = await response.json();
+
+        const markers = data.map((item) => {
+          const marker = L.marker([item.x, item.y], {
+            icon: customIcon,
+            draggable: true, // Ermöglicht Drag-and-Drop
+          });
+
+          // Tooltip
+          marker.bindTooltip(
+            `<strong>ID Location:</strong> ${item.idLocation} <br />
+             <strong>ID Map:</strong> ${item.idMaps}`,
+            {
+              permanent: false,
+              direction: "top",
+              offset: [0, -20],
+            }
+          );
+
+          // Event-Listener für Drag-End
+          marker.on("dragend", async (e) => {
+            const { lat, lng } = e.target.getLatLng();
+            try {
+              await updateLocation(item.idLocation, item.idMaps, { x: lat, y: lng });
+              console.log("Koordinaten erfolgreich aktualisiert:", { lat, lng });
+            } catch (error) {
+              console.error("Fehler beim Aktualisieren der Koordinaten:", error);
+            }
+          });
+
+          return marker;
+        });
+
+        setBereicheMarkers(markers);
+      } catch (error) {
+        console.error("Fehler beim Laden der Bereiche:", error);
+      }
+    };
+
+    fetchBereiche();
+  }, [apiUrl]);
+
+  useEffect(() => {
+    if (map) {
+      bereicheMarkers.forEach((marker) => marker.addTo(map));
+    }
+
+    return () => {
+      if (map) {
+        bereicheMarkers.forEach((marker) => map.removeLayer(marker));
+      }
+    };
+  }, [map, bereicheMarkers]);
+
   return bereicheMarkers;
 };
 

pages/api/talas_v5_DB/bereich/updateBereich.js

@@ -0,0 +1,34 @@
+import getPool from "../../../utils/mysqlPool"; // Singleton-Pool importieren
+
+export default async function handler(req, res) {
+  const pool = getPool(); // Singleton-Pool verwenden
+
+  if (req.method !== "PUT") {
+    return res.status(405).json({ error: "Nur PUT Methode erlaubt" });
+  }
+
+  const { idLocation, idMap, x, y } = req.body;
+
+  if (!idLocation || !idMap || x === undefined || y === undefined) {
+    return res.status(400).json({ error: "Alle Felder (idLocation, idMap, x, y) sind erforderlich" });
+  }
+
+  let connection;
+
+  try {
+    connection = await pool.getConnection();
+    const query = "UPDATE location_coordinates SET x = ?, y = ? WHERE idLocation = ? AND idMaps = ?";
+    const [result] = await connection.query(query, [x, y, idLocation, idMap]);
+
+    if (result.affectedRows > 0) {
+      res.status(200).json({ success: true, message: "Koordinaten erfolgreich aktualisiert" });
+    } else {
+      res.status(404).json({ error: "Kein Eintrag gefunden, der aktualisiert werden konnte" });
+    }
+  } catch (error) {
+    console.error("Fehler beim Aktualisieren der Koordinaten:", error);
+    res.status(500).json({ error: "Interner Serverfehler beim Aktualisieren der Koordinaten" });
+  } finally {
+    if (connection) connection.release();
+  }
+}

utils/updateBereichUtil.js

@@ -0,0 +1,27 @@
+export const updateLocation = async (idLocation, idMap, newCoords) => {
+  try {
+    const response = await fetch("/api/updateBereich", {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        idLocation,
+        idMap,
+        x: newCoords.x,
+        y: newCoords.y,
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error("Fehler beim Aktualisieren der Koordinaten");
+    }
+
+    const data = await response.json();
+    console.log("Koordinaten erfolgreich aktualisiert:", data);
+    return data;
+  } catch (error) {
+    console.error("Fehler beim Aufruf von updateLocation:", error);
+    throw error;
+  }
+};