refactor: Polyline-Sichtbarkeit auf Redux umgestellt (ersetzt Recoil)

- Sichtbarkeitsstatus für Kabelstrecken/Polylines wird jetzt zentral im Redux-Store verwaltet.
- Initialer Zustand wird aus localStorage gelesen und direkt in Redux gesetzt.
- DataSheet-Checkbox steuert Redux-Status und synchronisiert mit localStorage.
- MapComponent.js verwendet Redux-State direkt zur Steuerung von setupPolylines.
- setupPolylines.js ist jetzt komplett "dumm" und bekommt den Sichtbarkeitsstatus nur noch als Parameter.
- Konsistente Lösung für Initial-Laden, Checkbox-Wechsel und Map-Neuladen umgesetzt.

components/DataSheet.js

@@ -9,8 +9,9 @@ import { zoomTriggerState } from "../redux/slices/zoomTriggerSlice.js";
 import { poiLayerVisibleState } from "../redux/slices/poiLayerVisibleSlice";
 import EditModeToggle from "./EditModeToggle";
 import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleSlice"; // Import für Polyline-Visibility
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import { selectGisStationsStaticDistrict } from "../redux/slices/gisStationsStaticDistrictSlice";
+import { selectPolylineVisible, setPolylineVisible } from "../redux/slices/polylineLayerVisibleSlice";
 
 function DataSheet() {
   const [editMode, setEditMode] = useState(false); // Zustand für editMode
@@ -23,7 +24,15 @@ function DataSheet() {
   const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict);
   const GisSystemStatic = useRecoilValue(gisSystemStaticState);
   const setZoomTrigger = useSetRecoilState(zoomTriggerState);
-  const [polylineVisible, setPolylineVisible] = useRecoilState(polylineLayerVisibleState); // Zustand für Polylines
+  const dispatch = useDispatch();
+  const polylineVisible = useSelector(selectPolylineVisible);
+
+  const handlePolylineCheckboxChange = (event) => {
+    const checked = event.target.checked;
+    dispatch(setPolylineVisible(checked));
+    localStorage.setItem("polylineVisible", checked);
+  };
+
   const [bereicheVisible, setBereicheVisible] = useState(false); // NEU: Bereiche-Status
   const [standordVisible, setStandorteVisible] = useState(false); // NEU: Standorte-Status
   useEffect(() => {
@@ -34,7 +43,7 @@ function DataSheet() {
     }
     const storedPolylineVisible = localStorage.getItem("polylineVisible");
     if (storedPolylineVisible !== null) {
-      setPolylineVisible(storedPolylineVisible === "true");
+      dispatch(setPolylineVisible(storedPolylineVisible === "true"));
     }
 
     const storedMapLayersVisibility = localStorage.getItem("mapLayersVisibility");
@@ -128,25 +137,6 @@ function DataSheet() {
     setSelectedArea("Station wählen");
     setZoomTrigger((current) => current + 1);
   };
-  const handlePolylineCheckboxChange = (event) => {
-    const { checked } = event.target;
-
-    // Setze den Zustand von Kabelstrecken
-    setPolylineVisible(checked);
-    localStorage.setItem("polylineVisible", checked);
-
-    // Wenn Kabelstrecken aktiviert werden, aktiviere TALAS
-    if (checked) {
-      setMapLayersVisibility((prev) => {
-        const newState = {
-          ...prev,
-          TALAS: true,
-        };
-        localStorage.setItem("mapLayersVisibility", JSON.stringify(newState));
-        return newState;
-      });
-    }
-  };
 
   //---------------------------
   const handleBereicheCheckboxChange = (event) => {
@@ -161,6 +151,7 @@ function DataSheet() {
     setStandorteVisible(checked);
     localStorage.setItem("standorteVisible", checked);
   };
+  //------------------------------
 
   //---------------------------
   return (

components/MapComponent.js

@@ -67,12 +67,14 @@ import { fetchGisStationsStatusDistrict } from "../services/api/fetchGisStations
 
 import { fetchGisStationsMeasurements } from "../services/api/fetchGisStationsMeasurements.js";
 import { fetchGisSystemStatic } from "../services/api/fetchGisSystemStatic.js";
+import { usePolylineTooltipLayer } from "../hooks/usePolylineTooltipLayer";
+import { selectPolylineVisible, setPolylineVisible } from "../redux/slices/polylineLayerVisibleSlice";
 
 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const dispatch = useDispatch();
   const currentPoi = useSelector(selectCurrentPoi);
   //const setCurrentPoi = useSetRecoilState(currentPoiState);
-  const polylineVisible = useRecoilValue(polylineLayerVisibleState);
+  const polylineVisible = useSelector(selectPolylineVisible);
   const [editMode, setEditMode] = useState(false); // editMode Zustand
   const { deviceName, setDeviceName } = useMapComponentState();
   const { poiTypData, isPoiTypLoaded } = usePoiTypData("/api/talas_v5_DB/poiTyp/readPoiTyp");
@@ -558,7 +560,17 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     polylines.forEach((polyline) => polyline.remove());
 
     // Setze neue Marker und Polylinien mit den aktuellen Daten
-    const { markers: newMarkers, polylines: newPolylines } = setupPolylines(map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, polylineVisible);
+    const { markers: newMarkers, polylines: newPolylines } = setupPolylines(
+      map,
+      linePositions,
+      lineColors,
+      tooltipContents,
+      setNewCoords,
+      tempMarker,
+      currentZoom,
+      currentCenter,
+      polylineVisible // kommt aus Redux
+    );
 
     newPolylines.forEach((polyline, index) => {
       console.log("polyline: ", polyline);
@@ -992,6 +1004,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     }
   }, [map, menuItemAdded]);
   //--------------------------------------------
+  //  Beim ersten Client-Render den Wert aus localStorage laden
+  useEffect(() => {
+    const storedPolylineVisible = localStorage.getItem("polylineVisible") === "true";
+    dispatch(setPolylineVisible(storedPolylineVisible));
+  }, [dispatch]);
 
   //----------------------------------------------