🧭 MapLayersControlPanel.js

Dieses UI-Widget zeigt eine interaktive Steuereinheit für Layer, POIs und Stationsbereiche auf der rechten Seite der Karte.
Es ist vollständig an den Redux-Store angebunden und reagiert auf Änderungen der Layer-Sichtbarkeit, Bearbeitungsmodus und Stationsauswahl.

🔧 Pfad

/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js

📌 Zweck

Das MapLayersControlPanel ermöglicht Nutzern:

Die Auswahl eines Stationsbereichs (Dropdown)
Das Aktivieren/Deaktivieren einzelner GIS-Systeme (Checkboxen)
Das Anzeigen von POIs oder Kabelstrecken (TALAS-spezifisch)
Das Ein-/Ausschalten des Bearbeitungsmodus
Die Steuerung der Karten-Zentrierung über ein Icon

🧠 Verwendete Redux-Slices

Slice	Zweck
`gisStationsStaticDistrictSlice`	Enthält die Gerätebereiche (mit `.Points`)
`gisSystemStaticSlice`	Enthält die konfigurierten GIS-Systeme mit Anzeigeerlaubnis
`mapLayersSlice`	Speichert die Sichtbarkeit aller Layer
`poiLayerVisibleSlice`	Steuert Sichtbarkeit der POIs
`polylineLayerVisibleSlice`	Steuert Sichtbarkeit der Kabelstrecken (TALAS)
`zoomTriggerSlice`	Löst Neuzentrierung der Karte aus
`selectedAreaSlice`	Speichert den gewählten Bereich/Station

🔄 Logikübersicht

Dropdown Stationsauswahl:
Wird dynamisch aus GisStationsStaticDistrict.Points befüllt
Nur eindeutige Area_Name, wenn System erlaubt ist
Checkboxen für Layer:
Zeigen alle Systeme aus GisSystemStatic, bei denen Allow === 1
Sonderfall: TALAS erhält ein Untermenü für „Kabelstrecken“
Lokale Speicherung:
Sichtbarkeiten, Bearbeitungsmodus und POI-Zustand werden in localStorage geschrieben und bei Initialisierung geladen
Bearbeitungsmodus:
Wenn aktiv (editMode === true), sind Layer-Checkboxen deaktiviert

📥 Wichtige Funktionen

Funktion	Zweck
`handleAreaChange()`	Setzt `selectedArea` im Redux Store
`handleCheckboxChange()`	Schaltet Sichtbarkeit einzelner Layer
`handlePolylineCheckboxChange()`	Aktiviert Sichtbarkeit von Kabelstrecken
`handlePoiCheckboxChange()`	Aktiviert Sichtbarkeit von POIs
`handleIconClick()`	Setzt Station zurück und triggert Zoom

🧩 UI-Struktur

[Dropdown: Station wählen]
[🟩 EditModeToggle] [🔍 Expand-Icon]

[ ] GIS-System 1
[ ] GIS-System 2
 └─ [ ] Kabelstrecken (falls "TALAS")

[ ] POIs

🐞 Debug-Hinweise

Debug-Logs:
console.log("🔍 GisStationsStaticDistrict Inhalt:", ...)
werden ausgegeben, um sicherzustellen, dass Daten korrekt geladen wurden
Warnungen:
Falls .Points nicht vorhanden ist, wird dies in der Konsole gewarnt

🛠 ToDos / Erweiterungsideen

Checkboxen für Bereiche („Bereiche“, „Standorte“) sind bereits vorbereitet, aber auskommentiert
Möglichkeit, Tooltips zu aktivieren/deaktivieren?
Gruppierung von Layern nach Typ (z. B. Linien, Geräte, POIs)

📄 Verwendete Komponenten

EditModeToggle – Schaltfläche für Umschalten des Bearbeitungsmodus

✅ Zustand: Lokal & Global

Global: useSelector(...) aus Redux
Lokal: useState(...) für editMode, stationListing, systemListing

📦 LokaleStorage-Keys

Key	Beschreibung
`poiVisible`	Sichtbarkeit der POI-Marker
`polylineVisible`	Sichtbarkeit der Kabelstrecken
`mapLayersVisibility`	Sichtbarkeiten der einzelnen Systeme
`editMode`	Zustand des Bearbeitungsmodus (true/false)

🧪 Testempfehlung

Dropdown zeigt erwartete Area_Name-Werte?
Layer-Checkboxen werden korrekt gespeichert?
Bei TALAS erscheint zusätzlich: „Kabelstrecken“?
Bei Wechsel der Station wird setSelectedArea ausgelöst?

🧩 Verknüpfte Dateien

redux/slices/webservice/gisStationsStaticDistrictSlice.js
redux/slices/webservice/gisSystemStaticSlice.js
redux/slices/mapLayersSlice.js
redux/slices/selectedAreaSlice.js
redux/slices/database/polylines/polylineLayerVisibleSlice.js
redux/slices/database/pois/poiLayerVisibleSlice.js

4.9 KiB Raw Blame History Unescape Escape