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.

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

View File

@@ -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 # 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 # basePath wird jetzt in public/config.json gepflegt
# App-Versionsnummer # App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.1.333 NEXT_PUBLIC_APP_VERSION=1.1.334

View File

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

View File

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

View File

@@ -16,7 +16,7 @@ import { incrementZoomTrigger } from "@/redux/slices/zoomTriggerSlice";
function MapLayersControlPanel() { function MapLayersControlPanel() {
const [editMode, setEditMode] = useState(false); // Zustand für editMode const [editMode, setEditMode] = useState(false); // Zustand für editMode
const [localStorageLoaded, setLocalStorageLoaded] = useState(false); // Tracking ob localStorage geladen wurde 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 poiVisible = useSelector(state => state.poiLayerVisible.visible);
const setPoiVisible = value => dispatch(setVisible(value)); const setPoiVisible = value => dispatch(setVisible(value));
const dispatch = useDispatch(); const dispatch = useDispatch();
@@ -40,18 +40,12 @@ function MapLayersControlPanel() {
const handlePolylineCheckboxChange = event => { const handlePolylineCheckboxChange = event => {
const checked = event.target.checked; const checked = event.target.checked;
setKabelstreckenVisible(checked);
localStorage.setItem("kabelstreckenVisible", checked.toString());
localStorage.setItem("polylineVisible", checked.toString());
dispatch(setPolylineVisible(checked)); dispatch(setPolylineVisible(checked));
setTimeout(() => {
const event = new Event("polylineVisibilityChanged");
window.dispatchEvent(event);
}, 100);
// Wenn aktiviert, TALAS aktivieren // Wenn aktiviert, TALAS aktivieren
if (checked) { if (checked) {
const talasKey = "system-1"; const talasKey = "system-1";
dispatch(setLayerVisibility({ layer: talasKey, visibility: true })); dispatch(setLayerVisibility({ layer: talasKey, visibility: true }));
// Optional: mapLayersVisibility im localStorage aktualisieren, aber nicht mehr für Sichtbarkeit nutzen
const mapId = localStorage.getItem("currentMapId"); const mapId = localStorage.getItem("currentMapId");
const userId = localStorage.getItem("currentUserId"); const userId = localStorage.getItem("currentUserId");
const mapStorageKey = const mapStorageKey =
@@ -62,47 +56,12 @@ function MapLayersControlPanel() {
}; };
useEffect(() => { useEffect(() => {
// LocalStorage Werte beim ersten Laden der Komponente wiederherstellen // LocalStorage Werte beim ersten Laden der Komponente wiederherstellen (nur für POI und mapLayersVisibility, nicht mehr für Kabelstrecken)
console.log("🔄 Loading localStorage values...");
const storedPoiVisible = localStorage.getItem("poiVisible"); const storedPoiVisible = localStorage.getItem("poiVisible");
console.log("📦 POI localStorage value:", storedPoiVisible);
if (storedPoiVisible !== null) { if (storedPoiVisible !== null) {
setPoiVisible(storedPoiVisible === "true"); 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 // Kartenspezifischer localStorage-Key verwenden
const mapId = localStorage.getItem("currentMapId"); const mapId = localStorage.getItem("currentMapId");
const userId = localStorage.getItem("currentUserId"); const userId = localStorage.getItem("currentUserId");
@@ -110,8 +69,6 @@ function MapLayersControlPanel() {
mapId && userId ? `mapLayersVisibility_m${mapId}_u${userId}` : "mapLayersVisibility"; mapId && userId ? `mapLayersVisibility_m${mapId}_u${userId}` : "mapLayersVisibility";
const storedMapLayersVisibility = localStorage.getItem(mapStorageKey); const storedMapLayersVisibility = localStorage.getItem(mapStorageKey);
console.log(`📦 MapLayers localStorage value for ${mapStorageKey}:`, storedMapLayersVisibility);
if (storedMapLayersVisibility) { if (storedMapLayersVisibility) {
const parsedVisibility = JSON.parse(storedMapLayersVisibility); const parsedVisibility = JSON.parse(storedMapLayersVisibility);
Object.keys(parsedVisibility).forEach(key => { Object.keys(parsedVisibility).forEach(key => {
@@ -119,30 +76,21 @@ function MapLayersControlPanel() {
}); });
} else { } else {
// Initialisiere mapLayersVisibility basierend auf Allow & Map (nur Systeme mit Map===1 anzeigen) // 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)) { if (Array.isArray(GisSystemStatic)) {
const initialVisibility = {}; const initialVisibility = {};
GisSystemStatic.forEach(system => { GisSystemStatic.forEach(system => {
const systemKey = `system-${system.IdSystem}`; const systemKey = `system-${system.IdSystem}`;
const visibility = system.Allow === 1 && system.Map === 1; // <— angepasst const visibility = system.Allow === 1 && system.Map === 1;
if (visibility) { if (visibility) {
// nur speichern wenn grundsätzlich sichtbar
initialVisibility[systemKey] = visibility; initialVisibility[systemKey] = visibility;
dispatch(setLayerVisibility({ layer: 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)); localStorage.setItem(mapStorageKey, JSON.stringify(initialVisibility));
console.log(`💾 Saved initial mapLayersVisibility to ${mapStorageKey}:`, initialVisibility);
} }
} }
const storedEditMode = localStorage.getItem("editMode"); const storedEditMode = localStorage.getItem("editMode");
console.log("📦 EditMode localStorage value:", storedEditMode);
setEditMode(storedEditMode === "true"); setEditMode(storedEditMode === "true");
setLocalStorageLoaded(true); setLocalStorageLoaded(true);

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{ {
"name": "nodemap", "name": "nodemap",
"version": "1.1.333", "version": "1.1.334",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "nodemap", "name": "nodemap",
"version": "1.1.333", "version": "1.1.334",
"dependencies": { "dependencies": {
"@emotion/react": "^11.13.3", "@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0", "@emotion/styled": "^11.13.0",

View File

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