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.
This commit is contained in:
ISA
2025-07-25 13:09:18 +02:00
parent 56a2e305f1
commit 9d7a696f91
7 changed files with 117 additions and 20 deletions

View File

@@ -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());