fix: Kabelstrecken werden ausgeblendet

.env.development

@@ -24,4 +24,4 @@ NEXT_PUBLIC_USE_MOCKS=true
 # z.B. http://10.10.0.13/xyz/index.aspx -> basePath in config.json auf /xyz setzen
 # basePath wird jetzt in public/config.json gepflegt
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.1.341
+NEXT_PUBLIC_APP_VERSION=1.1.342

.env.production

@@ -25,4 +25,4 @@ NEXT_PUBLIC_USE_MOCKS=false
 # basePath wird jetzt in public/config.json gepflegt
 
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.1.341
+NEXT_PUBLIC_APP_VERSION=1.1.342

components/mainComponent/MapComponent.js

@@ -367,6 +367,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   //Tooltip an mouse position anzeigen für die Linien
   useEffect(() => {
     if (!map) return;
+    console.log(
+      "[MapComponent/useEffect] polylineVisible:",
+      polylineVisible,
+      "isTalasAllowed:",
+      isTalasAllowed,
+      "poiLayerVisible:",
+      poiLayerVisible
+    );
 
     // Wenn TALAS nicht erlaubt ist, Polyline-Checkbox und Anzeige deaktivieren
     if (!isTalasAllowed) {
@@ -381,6 +389,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       marker.remove();
     });
     cleanupPolylinesForMemory(polylines, map);
+    console.log("[MapComponent/useEffect] Nach cleanupPolylinesForMemory, polylines:", polylines);
 
     // Setze neue Marker und Polylinien mit den aktuellen Daten (asynchron!)
     const updatePolylines = async () => {
@@ -442,9 +451,19 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         cleanupMarkers(markers, oms);
         setMarkers(newMarkers);
         setPolylines(newPolylines);
+        console.log("[MapComponent/useEffect] setPolylines (sichtbar):", newPolylines);
       } else {
+        // Entferne wirklich alle Polylinien-Layer von der Karte
+        if (map) {
+          map.eachLayer(layer => {
+            if (layer instanceof L.Polyline) {
+              map.removeLayer(layer);
+            }
+          });
+        }
         cleanupPolylinesForMemory(polylines, map);
         setPolylines([]);
+        console.log("[MapComponent/useEffect] setPolylines ([]), alle Polylinien entfernt");
       }
     };
     updatePolylines();

components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js

@@ -6,7 +6,6 @@ import { useSelector, useDispatch } from "react-redux";
 import {
   selectPolylineVisible,
   setPolylineVisible,
-  initializePolylineFromLocalStorageThunk,
 } from "@/redux/slices/database/polylines/polylineLayerVisibleSlice";
 import { selectGisSystemStatic } from "@/redux/slices/webservice/gisSystemStaticSlice";
 import { selectGisStationsStaticDistrict } from "@/redux/slices/webservice/gisStationsStaticDistrictSlice";
@@ -15,11 +14,9 @@ import { setVisible } from "@/redux/slices/database/pois/poiLayerVisibleSlice";
 import { incrementZoomTrigger } from "@/redux/slices/zoomTriggerSlice";
 
 function MapLayersControlPanel() {
-  // Dummy state to force re-render after checkbox click (workaround for Redux/localStorage sync)
-  const [forceUpdate, setForceUpdate] = useState(0);
   const [editMode, setEditMode] = useState(false); // Zustand für editMode
   const [localStorageLoaded, setLocalStorageLoaded] = useState(false); // Tracking ob localStorage geladen wurde
-  const kabelstreckenVisible = useSelector(selectPolylineVisible); // Redux State für Kabelstrecken
+  const kabelstreckenVisible = useSelector(selectPolylineVisible); // Nur noch Redux
   const poiVisible = useSelector(state => state.poiLayerVisible.visible);
   const setPoiVisible = value => dispatch(setVisible(value));
   const dispatch = useDispatch();
@@ -43,18 +40,26 @@ function MapLayersControlPanel() {
 
   const handlePolylineCheckboxChange = event => {
     const checked = event.target.checked;
+    // Debug-Ausgabe
+    const params = new URLSearchParams(window.location.search);
+    const mapId = params.get("m");
+    const userId = params.get("u");
+    const polylineKey =
+      mapId && userId ? `polylineVisible_m${mapId}_u${userId}` : "polylineVisible";
+    console.log(
+      "[UI/handlePolylineCheckboxChange] checked:",
+      checked,
+      "Redux:",
+      kabelstreckenVisible,
+      "localStorage:",
+      localStorage.getItem(polylineKey)
+    );
     dispatch(setPolylineVisible(checked));
-    // Synchronisiere Redux nach localStorage-Update
-    setTimeout(() => {
-      dispatch(initializePolylineFromLocalStorageThunk());
-      setForceUpdate(f => f + 1); // Force re-render
-      const event = new Event("polylineVisibilityChanged");
-      window.dispatchEvent(event);
-    }, 100);
     // Wenn aktiviert, TALAS aktivieren
     if (checked) {
       const talasKey = "system-1";
       dispatch(setLayerVisibility({ layer: talasKey, visibility: true }));
+      // Optional: mapLayersVisibility im localStorage aktualisieren, aber nicht mehr für Sichtbarkeit nutzen
       const mapId = localStorage.getItem("currentMapId");
       const userId = localStorage.getItem("currentUserId");
       const mapStorageKey =
@@ -64,23 +69,19 @@ function MapLayersControlPanel() {
     }
   };
 
-  // Initialisiere Redux-State für Kabelstrecken-Checkbox bei Kartenwechsel (mapId/userId)
   useEffect(() => {
-    // LocalStorage Werte beim ersten Laden der Komponente oder bei Kartenwechsel wiederherstellen
+    // LocalStorage Werte beim ersten Laden der Komponente wiederherstellen (nur für POI und mapLayersVisibility, nicht mehr für Kabelstrecken)
     const storedPoiVisible = localStorage.getItem("poiVisible");
     if (storedPoiVisible !== null) {
       setPoiVisible(storedPoiVisible === "true");
     }
 
-    // Kartenabhängige Sichtbarkeit für Kabelstrecken initialisieren
+    // Kartenspezifischer localStorage-Key verwenden
     const mapId = localStorage.getItem("currentMapId");
     const userId = localStorage.getItem("currentUserId");
     const mapStorageKey =
       mapId && userId ? `mapLayersVisibility_m${mapId}_u${userId}` : "mapLayersVisibility";
 
-    // Kabelstrecken-Checkbox initialisieren: Redux übernimmt map/user-spezifisch, keine Manipulation von 'polylineVisible' oder 'kabelstreckenVisible' hier mehr!
-
-    // mapLayersVisibility initialisieren
     const storedMapLayersVisibility = localStorage.getItem(mapStorageKey);
     if (storedMapLayersVisibility) {
       const parsedVisibility = JSON.parse(storedMapLayersVisibility);
@@ -88,6 +89,7 @@ function MapLayersControlPanel() {
         dispatch(setLayerVisibility({ layer: key, visibility: parsedVisibility[key] }));
       });
     } else {
+      // Initialisiere mapLayersVisibility basierend auf Allow & Map (nur Systeme mit Map===1 anzeigen)
       if (Array.isArray(GisSystemStatic)) {
         const initialVisibility = {};
         GisSystemStatic.forEach(system => {
@@ -106,7 +108,7 @@ function MapLayersControlPanel() {
     setEditMode(storedEditMode === "true");
 
     setLocalStorageLoaded(true);
-  }, [localStorage.getItem("currentMapId"), localStorage.getItem("currentUserId")]);
+  }, []); // Läuft nur beim Mount
 
   const handleAreaChange = event => {
     const selectedIndex = event.target.options.selectedIndex;
@@ -165,16 +167,32 @@ function MapLayersControlPanel() {
   const handleCheckboxChange = (key, event) => {
     if (editMode) return;
     const { checked } = event.target;
+    // Debug-Ausgabe
+    const params = new URLSearchParams(window.location.search);
+    const mapId = params.get("m");
+    const userId = params.get("u");
+    const polylineKey =
+      mapId && userId ? `polylineVisible_m${mapId}_u${userId}` : "polylineVisible";
+    console.log(
+      "[UI/handleCheckboxChange] key:",
+      key,
+      "checked:",
+      checked,
+      "Redux:",
+      kabelstreckenVisible,
+      "localStorage:",
+      localStorage.getItem(polylineKey)
+    );
     dispatch(setLayerVisibility({ layer: key, visibility: checked }));
-    const mapId = localStorage.getItem("currentMapId");
+    const mapId2 = localStorage.getItem("currentMapId");
-    const userId = localStorage.getItem("currentUserId");
+    const userId2 = localStorage.getItem("currentUserId");
     const mapStorageKey =
-      mapId && userId ? `mapLayersVisibility_m${mapId}_u${userId}` : "mapLayersVisibility";
+      mapId2 && userId2 ? `mapLayersVisibility_m${mapId2}_u${userId2}` : "mapLayersVisibility";
     localStorage.setItem(mapStorageKey, JSON.stringify({ ...mapLayersVisibility, [key]: checked }));
     // Wenn TALAS (system-1) deaktiviert wird, Kabelstrecken deaktivieren
     if (key === "system-1" && !checked) {
-      setKabelstreckenVisible(false);
+      localStorage.setItem("kabelstreckenVisible", "false");
-      // entfernt: keine Manipulation von 'kabelstreckenVisible' oder 'polylineVisible' mehr
+      localStorage.setItem("polylineVisible", "false");
       dispatch(setPolylineVisible(false));
       setTimeout(() => {
         const polylineEvent = new Event("polylineVisibilityChanged");
@@ -319,7 +337,7 @@ function MapLayersControlPanel() {
                   <div className="flex items-center">
                     <input
                       type="checkbox"
-                      checked={kabelstreckenVisible} // Redux State
+                      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.341",
+  "version": "1.1.342",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "nodemap",
-      "version": "1.1.341",
+      "version": "1.1.342",
       "dependencies": {
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",

package.json

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

redux/slices/database/polylines/polylineLayerVisibleSlice.js

@@ -44,6 +44,14 @@ const polylineLayerVisibleSlice = createSlice({
         if (mapId && userId) {
           const key = `polylineVisible_m${mapId}_u${userId}`;
           localStorage.setItem(key, action.payload.toString());
+          console.log(
+            "[Redux/setPolylineVisible] payload:",
+            action.payload,
+            "key:",
+            key,
+            "localStorage:",
+            localStorage.getItem(key)
+          );
         }
       } catch (e) {
         // fallback: do nothing
@@ -54,7 +62,12 @@ const polylineLayerVisibleSlice = createSlice({
       // Diese Action wird nur beim Initialisieren aus localStorage verwendet
       state.visible = action.payload;
       state.isInitialized = true;
-      console.log("🔧 Redux: initializePolylineFromLocalStorage called with:", action.payload);
+      console.log(
+        "🔧 Redux: initializePolylineFromLocalStorage called with:",
+        action.payload,
+        "visible:",
+        state.visible
+      );
     },
   },
 });

utils/polylines/setupPolylines.js

@@ -37,19 +37,15 @@ export const setupPolylines = async (
       basePath = config.basePath || "";
     }
   } catch (e) {}
-  if (!polylineVisible) {
-    //console.warn("Polylines deaktiviert - keine Zeichnung");
-    return { markers: [], polylines: [] };
-  }
-
   if (!polylineVisible) {
     // Entferne alle Polylinien, wenn sie ausgeblendet werden sollen
     if (window.polylines) {
       window.polylines.forEach(polyline => {
-        if (map.hasLayer(polyline)) {
+        if (map && map.hasLayer(polyline)) {
           map.removeLayer(polyline);
         }
       });
+      window.polylines = [];
     }
     return { markers: [], polylines: [] };
   }