fix: Kabelstrecken werden ausgeblendet

2025-08-22 09:46:31 +02:00
parent bf7b62d110
commit f2a322a91b
8 changed files with 82 additions and 36 deletions
--- a/.env.development
+++ b/.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
--- a/.env.production
+++ b/.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
--- a/components/mainComponent/MapComponent.js
+++ b/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();
--- a/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js
+++ b/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 userId = localStorage.getItem("currentUserId");
+    const mapId2 = localStorage.getItem("currentMapId");
+    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);
-      // entfernt: keine Manipulation von 'kabelstreckenVisible' oder 'polylineVisible' mehr
+      localStorage.setItem("kabelstreckenVisible", "false");
+      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}
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/redux/slices/database/polylines/polylineLayerVisibleSlice.js
+++ b/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
+      );
    },
  },
 });
--- a/utils/polylines/setupPolylines.js
+++ b/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: [] };
  }