feat: Stützpunkte entfernen, hinzufügen und verschieben funktioniert bei Browser-Aktualisierung, zoom in Browser Local storage

components/MapComponent.js

@@ -39,7 +39,13 @@ import { set } from "lodash";
 import { poiLayerVisibleState } from "../store/atoms/poiLayerVisible.js";
 import { data } from "autoprefixer";
 import plusRoundIcon from "./PlusRoundIcon.js";
-import { parsePoint, handleEditPoi, insertNewMarker } from "../utlis/utils.js";
+import {
+  parsePoint,
+  handleEditPoi,
+  insertNewMarker,
+  redrawPolyline,
+  saveLineData,
+} from "../utlis/utils.js";
 import circleIcon from "./CircleIcon";
 import startIcon from "./StartIcon";
 import endIcon from "./EndIcon";
@@ -2298,7 +2304,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
   //---------------------------------------------------------
 
-  function redrawPolyline(lineData) {
+  /*   function redrawPolyline(lineData) {
     if (lineData.polyline) map.removeLayer(lineData.polyline);
     lineData.polyline = L.polyline(lineData.coordinates, {
       color: lineColors[lineData.idModul] || "#000000",
@@ -2319,9 +2325,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     lineData.polyline.on("mouseout", () => {
       lineData.polyline.setStyle({ weight: 5 });
     });
-  }
+  } */
 
-  function saveLineData(lineData) {
+  /*   function saveLineData(lineData) {
     fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
       method: "POST",
       headers: {
@@ -2345,7 +2351,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       .catch((error) => {
         console.error("Fehler beim Speichern der Linienänderungen:", error);
       });
-  }
+  } */
 
   function updateMarkerPosition(newLatLng, lineData, marker) {
     const index = lineData.coordinates.findIndex((coord) =>

utlis/utils.js

@@ -1,4 +1,6 @@
 import { useState } from "react";
+import circleIcon from "../components/CircleIcon";
+
 export const parsePoint = (position) => {
   const [longitude, latitude] = position.slice(6, -1).split(" ");
   return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) };
@@ -194,3 +196,69 @@ export const addItemsToMapContextMenu = () => {
     setMenuItemAdded(true); // Menüpunkt wurde hinzugefült, Zustand aktualisieren
   }
 };
+//----------------------------------------------
+export const saveLineData = (lineData) => {
+  fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      idModul: lineData.idModul,
+      idLD: lineData.idLD,
+      newCoordinates: lineData.coordinates,
+    }),
+  })
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error("Fehler beim Speichern der Linienänderungen");
+      }
+      return response.json();
+    })
+    .then((data) => {
+      console.log("Linienänderungen gespeichert:", data);
+    })
+    .catch((error) => {
+      console.error("Fehler beim Speichern der Linienänderungen:", error);
+    });
+};
+//----------------------------------------------
+/* export const redrawPolyline = (lineData) => {
+  const [lineColors, setLineColors] = useState({}); */
+import L from "leaflet";
+
+export const redrawPolyline = (lineData, lineColors, tooltipContents, map) => {
+  if (!lineData || !lineColors || !tooltipContents || !map) {
+    console.error("Invalid parameters for redrawPolyline");
+    return;
+  }
+
+  if (!lineData.coordinates || !Array.isArray(lineData.coordinates)) {
+    console.error("Invalid coordinates in lineData");
+    return;
+  }
+
+  const color = lineColors[lineData.idModul] || "#000000";
+  const tooltipContent =
+    tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt";
+
+  if (lineData.polyline) map.removeLayer(lineData.polyline);
+
+  lineData.polyline = L.polyline(lineData.coordinates, {
+    color: color,
+  }).addTo(map);
+
+  lineData.polyline.bindTooltip(tooltipContent, {
+    permanent: false,
+    direction: "auto",
+  });
+
+  lineData.polyline.on("mouseover", () => {
+    lineData.polyline.setStyle({ weight: 10 });
+    lineData.polyline.bringToFront();
+  });
+
+  lineData.polyline.on("mouseout", () => {
+    lineData.polyline.setStyle({ weight: 5 });
+  });
+};