edit: updateLineCoordinates and tooltip in MapComponent

components/MapComponent.js

@@ -2211,11 +2211,10 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   // Initialisieren eines Zustands für die Speicherung der Polyline-Objekte
   const [polylines, setPolylines] = useState([]);
   const [markers, setMarkers] = useState([]);
-
   useEffect(() => {
     if (!map) return;
 
-    // Entfernen alter Marker und Polylines
+    // Entfernen alter Marker und Polylinien
     markers.forEach((marker) => marker.remove());
     polylines.forEach((polyline) => polyline.remove());
 
@@ -2224,7 +2223,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
     linePositions.forEach((lineData, lineIndex) => {
       const lineMarkers = [];
-      const polylinePoints = lineData.coordinates.map((coord, index) => {
+      lineData.coordinates.forEach((coord, index) => {
         const marker = L.marker(coord, {
           icon: circleIcon,
           draggable: true,
@@ -2234,11 +2233,18 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
           const newCoords = marker.getLatLng();
           const newCoordinates = [...lineData.coordinates];
           newCoordinates[index] = [newCoords.lat, newCoords.lng];
+
+          // Erstellen einer neuen Polyline nach dem Verschieben
           const updatedPolyline = L.polyline(newCoordinates, {
             color: lineColors[lineData.idModul] || "#000000",
           }).addTo(map);
 
-          // Event-Handler für mouseover und mouseout erneut einrichten
+          // Hinzufügen eines Tooltips
+          updatedPolyline.bindTooltip("Informationen oder Name der Linie", {
+            permanent: false, // true, wenn Sie möchten, dass der Tooltip immer sichtbar ist
+            direction: "auto", // Kann 'right', 'left', 'top' oder 'bottom' sein
+          });
+
           updatedPolyline.on("mouseover", () => {
             updatedPolyline.setStyle({ weight: 8 });
             updatedPolyline.bringToFront();
@@ -2247,22 +2253,52 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
             updatedPolyline.setStyle({ weight: 5 });
           });
 
-          // Ersetzen der alten Polyline durch die neue
+          // Entfernen der alten Polyline
           newPolylines[lineIndex].remove();
           newPolylines[lineIndex] = updatedPolyline;
           lineData.coordinates = newCoordinates;
+
+          // Aktualisieren des Polyline-Zustands
+          setPolylines([...newPolylines]);
+
+          // API-Aufruf, um die neuen Koordinaten zu speichern
+          fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              idModul: lineData.idModul,
+              newCoordinates,
+            }),
+          })
+            .then((response) => {
+              if (!response.ok) {
+                throw new Error(
+                  "Fehler beim Aktualisieren der Koordinaten in der Datenbank"
+                );
+              }
+              return response.json();
+            })
+            .then((data) => {
+              console.log("Koordinaten erfolgreich aktualisiert:", data);
+            })
+            .catch((error) => {
+              console.error(
+                "Fehler beim Aktualisieren der Koordinaten:",
+                error
+              );
+            });
         });
 
         lineMarkers.push(marker);
-        return marker;
       });
 
-      // Erstellen der Polyline und Einrichten eines Tooltips
+      // Erstellen der initialen Polyline und Einrichten eines Tooltips
       const polyline = L.polyline(lineData.coordinates, {
         color: lineColors[lineData.idModul] || "#000000",
       }).addTo(map);
 
-      // Hinzufügen eines Tooltips
       polyline.bindTooltip("Informationen oder Name der Linie", {
         permanent: false, // true, wenn Sie möchten, dass der Tooltip immer sichtbar ist
         direction: "auto", // Kann 'right', 'left', 'top' oder 'bottom' sein
@@ -2283,7 +2319,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     setMarkers(newMarkers);
     setPolylines(newPolylines);
   }, [map, linePositions, lineColors]);
-
   //---------------------------------------------------------
   //---------------------------------------------------------