From 467be2c106e67b905a2bac99218cc42d00f4e6cc Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Tue, 9 Jul 2024 06:47:44 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20St=C3=BCtzpunkte=20entfernen,=20hinzuf?=
 =?UTF-8?q?=C3=BCgen=20und=20verschieben=20funktioniert=20bei=20Browser-Ak?=
 =?UTF-8?q?tualisierung,=20zoom=20in=20Browser=20Local=20storage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/MapComponent.js | 16 ++++++---
 utlis/utils.js             | 68 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 79 insertions(+), 5 deletions(-)

diff --git a/components/MapComponent.js b/components/MapComponent.js
index 3d7d514df..f613e56f0 100644
--- a/components/MapComponent.js
+++ b/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) =>
diff --git a/utlis/utils.js b/utlis/utils.js
index 276fdc516..35c88a662 100644
--- a/utlis/utils.js
+++ b/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 });
+  });
+};