feat: Add persistent localStorage for Kabelstrecken (polylines) visibility

- Add kabelstreckenVisible state with localStorage persistence
- Implement dual localStorage variables (kabelstreckenVisible + polylineVisible) for compatibility
- Add event system for cross-component polyline visibility updates
- Update MapComponent to listen for polylineVisibilityChanged events
- Ensure polylines display correctly on browser reload
- Migrate from Redux-only state to localStorage-first approach
- Add comprehensive debug logging for troubleshooting

Fixes issue where Kabelstrecken checkbox state was lost on page reload
and polylines were not displayed until manual toggle.

.env.development

@@ -25,4 +25,4 @@ NEXT_PUBLIC_USE_MOCKS=true
 NEXT_PUBLIC_BASE_PATH=/talas5
 # Oder leer lassen für direkten Zugriff ->  NEXT_PUBLIC_BASE_PATH=
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.1.302
+NEXT_PUBLIC_APP_VERSION=1.1.303

.env.production

@@ -26,4 +26,4 @@ NEXT_PUBLIC_BASE_PATH=/talas5
 # Oder leer lassen für direkten Zugriff ->  NEXT_PUBLIC_BASE_PATH=
 
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.1.302
+NEXT_PUBLIC_APP_VERSION=1.1.303

components/mainComponent/MapComponent.js

@@ -635,11 +635,40 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
   //--------------------------------------------
   //  Beim ersten Client-Render den Wert aus localStorage laden
+  //  Prüfe beide localStorage-Variablen (neue und alte)
   useEffect(() => {
-    const storedPolylineVisible = localStorage.getItem("polylineVisible") === "true";
+    let storedPolylineVisible = localStorage.getItem("kabelstreckenVisible") === "true";
+
+    // Fallback auf alte Variable, falls neue nicht existiert
+    if (localStorage.getItem("kabelstreckenVisible") === null) {
+      const oldValue = localStorage.getItem("polylineVisible") === "true";
+      storedPolylineVisible = oldValue;
+      // Migriere zur neuen Variable
+      localStorage.setItem("kabelstreckenVisible", oldValue.toString());
+    }
+
+    console.log(
+      "🔄 MapComponent: Loading polylineVisible from localStorage:",
+      storedPolylineVisible
+    );
     dispatch(setPolylineVisible(storedPolylineVisible));
   }, [dispatch]);
   //--------------------------------------------
+  // Event-Listener für Polyline-Sichtbarkeitsänderungen
+  useEffect(() => {
+    const handlePolylineVisibilityChange = () => {
+      const storedValue = localStorage.getItem("kabelstreckenVisible") === "true";
+      console.log("🔄 MapComponent: Received polylineVisibilityChanged event, value:", storedValue);
+      dispatch(setPolylineVisible(storedValue));
+    };
+
+    window.addEventListener("polylineVisibilityChanged", handlePolylineVisibilityChange);
+
+    return () => {
+      window.removeEventListener("polylineVisibilityChanged", handlePolylineVisibilityChange);
+    };
+  }, [dispatch]);
+  //--------------------------------------------
   useEffect(() => {
     if (statusStaticDistrict === "idle") {
       dispatch(fetchGisStationsStaticDistrictThunk());

components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js

@@ -15,6 +15,8 @@ import { incrementZoomTrigger } from "@/redux/slices/zoomTriggerSlice";
 
 function MapLayersControlPanel() {
   const [editMode, setEditMode] = useState(false); // Zustand für editMode
+  const [localStorageLoaded, setLocalStorageLoaded] = useState(false); // Tracking ob localStorage geladen wurde
+  const [kabelstreckenVisible, setKabelstreckenVisible] = useState(false); // Lokaler State für Kabelstrecken
   const poiVisible = useSelector(state => state.poiLayerVisible.visible);
   const setPoiVisible = value => dispatch(setVisible(value));
   const dispatch = useDispatch();
@@ -24,7 +26,10 @@ function MapLayersControlPanel() {
   const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict) || [];
   const GisSystemStatic = useSelector(selectGisSystemStatic) || [];
 
-  const polylineVisible = useSelector(selectPolylineVisible);
+  // Debug: Kabelstrecken state verfolgen
+  useEffect(() => {
+    console.log("🎯 kabelstreckenVisible state changed to:", kabelstreckenVisible);
+  }, [kabelstreckenVisible]);
 
   // Prüfen, ob TALAS (IdSystem 1) erlaubt ist
   const isTalasAllowed = Array.isArray(GisSystemStatic)
@@ -33,8 +38,24 @@ function MapLayersControlPanel() {
 
   const handlePolylineCheckboxChange = event => {
     const checked = event.target.checked;
+    console.log("🖱️ Kabelstrecken checkbox clicked, new value:", checked);
+
+    // Beide localStorage-Variablen setzen für Kompatibilität
+    setKabelstreckenVisible(checked);
+    localStorage.setItem("kabelstreckenVisible", checked.toString());
+    localStorage.setItem("polylineVisible", checked.toString()); // Auch die alte Variable setzen
+    console.log("💾 Saved to localStorage as kabelstreckenVisible:", checked);
+    console.log("💾 Saved to localStorage as polylineVisible:", checked);
+
+    // Redux für andere Teile der App aktualisieren
     dispatch(setPolylineVisible(checked));
-    localStorage.setItem("polylineVisible", checked);
+
+    // Event auslösen, damit andere Komponenten über die Änderung informiert werden
+    setTimeout(() => {
+      const event = new Event("polylineVisibilityChanged");
+      window.dispatchEvent(event);
+      console.log("📢 Event 'polylineVisibilityChanged' dispatched");
+    }, 100);
 
     if (checked) {
       dispatch(setLayerVisibility({ layer: "TALAS", visibility: true }));
@@ -46,18 +67,49 @@ function MapLayersControlPanel() {
   };
 
   useEffect(() => {
-    // LocalStorage Werte laden
+    // LocalStorage Werte beim ersten Laden der Komponente wiederherstellen
+    console.log("🔄 Loading localStorage values...");
+
     const storedPoiVisible = localStorage.getItem("poiVisible");
+    console.log("📦 POI localStorage value:", storedPoiVisible);
     if (storedPoiVisible !== null) {
       setPoiVisible(storedPoiVisible === "true");
     }
+
+    // Neue Variable für Kabelstrecken mit Fallback auf die alte Variable
+    let storedKabelstreckenVisible = localStorage.getItem("kabelstreckenVisible");
     const storedPolylineVisible = localStorage.getItem("polylineVisible");
-    if (storedPolylineVisible !== null) {
-      dispatch(setPolylineVisible(storedPolylineVisible === "true"));
+
+    // Falls kabelstreckenVisible nicht existiert, aber polylineVisible schon, übernehmen wir den Wert
+    if (storedKabelstreckenVisible === null && storedPolylineVisible !== null) {
+      storedKabelstreckenVisible = storedPolylineVisible;
+      localStorage.setItem("kabelstreckenVisible", storedPolylineVisible);
+      console.log("<22> Migrated polylineVisible to kabelstreckenVisible:", storedPolylineVisible);
+    }
+
+    console.log("<22>📦 Kabelstrecken localStorage value:", storedKabelstreckenVisible);
+    console.log("📦 Polyline localStorage value:", storedPolylineVisible);
+
+    if (storedKabelstreckenVisible !== null) {
+      const shouldBeVisible = storedKabelstreckenVisible === "true";
+      console.log("🎯 Setting kabelstreckenVisible to:", shouldBeVisible);
+      setKabelstreckenVisible(shouldBeVisible);
+
+      // Beide localStorage-Variablen synchronisieren
+      localStorage.setItem("polylineVisible", shouldBeVisible.toString());
+      // Redux für Konsistenz setzen
+      dispatch(setPolylineVisible(shouldBeVisible));
+
+      // Event auslösen nach dem Laden
+      setTimeout(() => {
+        const event = new Event("polylineVisibilityChanged");
+        window.dispatchEvent(event);
+        console.log("📢 Event 'polylineVisibilityChanged' dispatched on load");
+      }, 200);
     }
 
-    // Layer-Sichtbarkeiten aus localStorage laden
     const storedMapLayersVisibility = localStorage.getItem("mapLayersVisibility");
+    console.log("📦 MapLayers localStorage value:", storedMapLayersVisibility);
     if (storedMapLayersVisibility) {
       const parsedVisibility = JSON.parse(storedMapLayersVisibility);
       Object.keys(parsedVisibility).forEach(key => {
@@ -65,10 +117,15 @@ function MapLayersControlPanel() {
       });
     }
 
-    // EditMode lesen
     const storedEditMode = localStorage.getItem("editMode");
+    console.log("📦 EditMode localStorage value:", storedEditMode);
     setEditMode(storedEditMode === "true");
-  }, [setPoiVisible, dispatch]); // ✅ `setMapLayersVisibility` entfernt
+
+    setLocalStorageLoaded(true);
+  }, []); // Läuft nur beim Mount
+
+  // Entferne den komplexen Konsistenz-Check useEffect - nicht mehr nötig
+  // da wir direkt mit localStorage arbeiten
 
   const handleAreaChange = event => {
     const selectedIndex = event.target.options.selectedIndex;
@@ -138,7 +195,7 @@ function MapLayersControlPanel() {
   const handlePoiCheckboxChange = event => {
     const { checked } = event.target;
     setPoiVisible(checked);
-    localStorage.setItem("poiVisible", checked); // Store POI visibility in localStorage
+    localStorage.setItem("poiVisible", checked.toString()); // Store POI visibility in localStorage
   };
 
   const handleIconClick = () => {
@@ -260,7 +317,7 @@ function MapLayersControlPanel() {
                   <div className="flex items-center">
                     <input
                       type="checkbox"
-                      checked={polylineVisible} // Zustand für Kabelstrecken
+                      checked={kabelstreckenVisible} // Lokaler State statt Redux
                       onChange={handlePolylineCheckboxChange}
                       id="polyline-checkbox"
                       disabled={!isTalasAllowed || editMode}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "nodemap",
-  "version": "1.1.302",
+  "version": "1.1.303",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "nodemap",
-      "version": "1.1.302",
+      "version": "1.1.303",
       "dependencies": {
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodemap",
-  "version": "1.1.302",
+  "version": "1.1.303",
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",

redux/slices/database/polylines/polylineLayerVisibleSlice.js

@@ -2,7 +2,8 @@
 import { createSlice } from "@reduxjs/toolkit";
 
 const initialState = {
-  visible: false, // oder Standardwert
+  visible: false, // Standardwert - wird in der Komponente aus localStorage überschrieben
+  isInitialized: false, // Flag um zu verfolgen, ob der Wert aus localStorage geladen wurde
 };
 
 const polylineLayerVisibleSlice = createSlice({
@@ -11,11 +12,21 @@ const polylineLayerVisibleSlice = createSlice({
   reducers: {
     setPolylineVisible: (state, action) => {
       state.visible = action.payload;
-      localStorage.setItem("polylineVisible", action.payload);
+      state.isInitialized = true;
+      localStorage.setItem("polylineVisible", action.payload.toString());
+      console.log("💾 Redux: setPolylineVisible called with:", action.payload);
+    },
+    initializePolylineFromLocalStorage: (state, action) => {
+      // Diese Action wird nur beim Initialisieren aus localStorage verwendet
+      state.visible = action.payload;
+      state.isInitialized = true;
+      console.log("🔧 Redux: initializePolylineFromLocalStorage called with:", action.payload);
     },
   },
 });
 
-export const { setPolylineVisible } = polylineLayerVisibleSlice.actions;
-export const selectPolylineVisible = (state) => state.polylineLayerVisible.visible;
+export const { setPolylineVisible, initializePolylineFromLocalStorage } =
+  polylineLayerVisibleSlice.actions;
+export const selectPolylineVisible = state => state.polylineLayerVisible.visible;
+export const selectPolylineInitialized = state => state.polylineLayerVisible.isInitialized;
 export default polylineLayerVisibleSlice.reducer;