a19bf96843
- Zugriff auf GisStationsStaticDistrict.Points korrigiert - Verhindert leere Dropdown-Liste bei gültigen Daten - Neue Markdown-Dokus für UI-Komponenten erstellt (MapLayersControlPanel, EditModeToggle, VersionInfoModal, CoordinateInput) - Version auf 1.1.190 gesetzt
151 lines
4.9 KiB
Markdown
151 lines
4.9 KiB
Markdown
<!-- /docs/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.md -->
|
||
|
||
# 🧭 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
|
||
|
||
```bash
|
||
/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
|
||
|
||
```plaintext
|
||
[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`
|
||
|
||
---
|