Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Die Anwendung verwendet jetzt ausschließlich den Redux-Slice (polylineLayerVisible.visible) für die Sichtbarkeit der Kabelstrecken (Polylines). Die Checkbox und die Anzeige der Linien sind damit immer synchron und reaktiv – unabhängig von localStorage.

Browse Source
This commit is contained in:
ISA
2025-08-21 09:52:22 +02:00
parent 2da79c9318
commit d179c152c0
6 changed files with 12 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/mainComponent/MapComponent.js
View File

@@ -374,10 +374,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
return;
}
// Prüfe Sichtbarkeit aus localStorage und Redux
const localStoragePolylineVisible = localStorage.getItem("polylineVisible") === "true";
const reduxPolylineLayerVisible = poiLayerVisible; // redux: polylineLayerVisible.visible
// Die Sichtbarkeit der Polylines hängt nur noch vom Redux-Slice ab
// vorherige Marker & Polylinien vollständig bereinigen
(Array.isArray(markers) ? markers : []).forEach(marker => {
marker.remove();
@@ -386,7 +383,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
// Setze neue Marker und Polylinien mit den aktuellen Daten (asynchron!)
const updatePolylines = async () => {
if (localStoragePolylineVisible && reduxPolylineLayerVisible) {
if (polylineVisible) {
const { markers: newMarkers, polylines: newPolylines } = await setupPolylines(
map,
linePositions,
@@ -396,7 +393,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
tempMarker,
currentZoom,
currentCenter,
polylineVisible // kommt aus Redux
polylineVisible
);
(Array.isArray(newPolylines) ? newPolylines : []).forEach((polyline, index) => {

60
components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js
View File

@@ -16,7 +16,7 @@ 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 kabelstreckenVisible = useSelector(selectPolylineVisible); // Nur noch Redux
const poiVisible = useSelector(state => state.poiLayerVisible.visible);
const setPoiVisible = value => dispatch(setVisible(value));
const dispatch = useDispatch();
@@ -40,18 +40,12 @@ function MapLayersControlPanel() {
const handlePolylineCheckboxChange = event => {
const checked = event.target.checked;
setKabelstreckenVisible(checked);
localStorage.setItem("kabelstreckenVisible", checked.toString());
localStorage.setItem("polylineVisible", checked.toString());
dispatch(setPolylineVisible(checked));
setTimeout(() => {
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 =
@@ -62,47 +56,12 @@ function MapLayersControlPanel() {
};
useEffect(() => {
// LocalStorage Werte beim ersten Laden der Komponente wiederherstellen
console.log("🔄 Loading localStorage values...");
// LocalStorage Werte beim ersten Laden der Komponente wiederherstellen (nur für POI und mapLayersVisibility, nicht mehr für Kabelstrecken)
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");
// 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);
}
// Kartenspezifischer localStorage-Key verwenden
const mapId = localStorage.getItem("currentMapId");
const userId = localStorage.getItem("currentUserId");
@@ -110,8 +69,6 @@ function MapLayersControlPanel() {
mapId && userId ? `mapLayersVisibility_m${mapId}_u${userId}` : "mapLayersVisibility";
const storedMapLayersVisibility = localStorage.getItem(mapStorageKey);
console.log(`📦 MapLayers localStorage value for ${mapStorageKey}:`, storedMapLayersVisibility);
if (storedMapLayersVisibility) {
const parsedVisibility = JSON.parse(storedMapLayersVisibility);
Object.keys(parsedVisibility).forEach(key => {
@@ -119,30 +76,21 @@ function MapLayersControlPanel() {
});
} else {
// Initialisiere mapLayersVisibility basierend auf Allow & Map (nur Systeme mit Map===1 anzeigen)
console.log(
"🚀 No stored mapLayersVisibility found, initializing based on Allow && Map values..."
);
if (Array.isArray(GisSystemStatic)) {
const initialVisibility = {};
GisSystemStatic.forEach(system => {
const systemKey = `system-${system.IdSystem}`;
const visibility = system.Allow === 1 && system.Map === 1; // <— angepasst
const visibility = system.Allow === 1 && system.Map === 1;
if (visibility) {
// nur speichern wenn grundsätzlich sichtbar
initialVisibility[systemKey] = visibility;
dispatch(setLayerVisibility({ layer: systemKey, visibility }));
console.log(
`🎯 Setting ${systemKey} (${system.Name}) visibility to ${visibility} (Allow=${system.Allow}, Map=${system.Map})`
);
}
});
localStorage.setItem(mapStorageKey, JSON.stringify(initialVisibility));
console.log(`💾 Saved initial mapLayersVisibility to ${mapStorageKey}:`, initialVisibility);
}
}
const storedEditMode = localStorage.getItem("editMode");
console.log("📦 EditMode localStorage value:", storedEditMode);
setEditMode(storedEditMode === "true");
setLocalStorageLoaded(true);