diff --git a/.env.development b/.env.development index 6b075ea4b..34a6633eb 100644 --- a/.env.development +++ b/.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 diff --git a/.env.production b/.env.production index d7f03b3e0..7d884780b 100644 --- a/.env.production +++ b/.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 \ No newline at end of file +NEXT_PUBLIC_APP_VERSION=1.1.303 \ No newline at end of file diff --git a/components/mainComponent/MapComponent.js b/components/mainComponent/MapComponent.js index 0ceb7e5f8..3db1f0584 100644 --- a/components/mainComponent/MapComponent.js +++ b/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()); diff --git a/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js b/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js index 0bfa597ed..89cd14c6c 100644 --- a/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js +++ b/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("� Migrated polylineVisible to kabelstreckenVisible:", storedPolylineVisible); + } + + console.log("�📦 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() {
{ 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;