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 (