fix(ui): Dropdown in MapLayersControlPanel zeigt jetzt Stationen/Bereiche korrekt an
- 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
This commit is contained in:
ISA
@@ -0,0 +1,85 @@
|
||||
<!-- /docs/components/uiWidgets/mapLayersControlPanel/EditModeToggle.md -->
|
||||
|
||||
# ✏️ EditModeToggle.js
|
||||
|
||||
Die Komponente `EditModeToggle` stellt einen interaktiven Umschalter für den Bearbeitungsmodus bereit.
|
||||
Sie ermöglicht das Ein- und Ausschalten des Modus, in dem POIs, Polylines (Strecken) und Bereiche bearbeitet werden können.
|
||||
|
||||
---
|
||||
|
||||
## 📦 Pfad
|
||||
|
||||
```bash
|
||||
/components/uiWidgets/mapLayersControlPanel/EditModeToggle.js
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🧩 Zweck
|
||||
|
||||
Der Bearbeitungsmodus wirkt sich auf die Interaktivität der Map aus:
|
||||
|
||||
- Wenn **aktiv**:
|
||||
- Checkboxen für Layer sind deaktiviert
|
||||
- POI-Funktionen (Hinzufügen, Verschieben, Löschen) werden ermöglicht
|
||||
- Wenn **inaktiv**:
|
||||
- Keine Bearbeitung möglich
|
||||
- UI ist auf Betrachtung beschränkt
|
||||
|
||||
---
|
||||
|
||||
## 🖱 Verhalten
|
||||
|
||||
Beim Klick auf das Icon:
|
||||
|
||||
1. Wird der lokale Zustand `editMode` umgeschaltet
|
||||
2. `localStorage` speichert den neuen Status (`true` oder `false`)
|
||||
3. Die Seite wird neu geladen (`window.location.reload()`), um globale Effekte zu aktivieren
|
||||
|
||||
---
|
||||
|
||||
## 🧠 Interner Zustand
|
||||
|
||||
```js
|
||||
const [editMode, setEditMode] = useState(() => localStorage.getItem("editMode") === "true");
|
||||
```
|
||||
|
||||
- Initialisiert aus `localStorage`
|
||||
- Persistente Speicherung des Zustands browserseitig
|
||||
- Aufruf in anderen Komponenten (z. B. `MapLayersControlPanel.js`) basiert ebenfalls auf diesem Wert
|
||||
|
||||
---
|
||||
|
||||
## 🧰 UI-Darstellung
|
||||
|
||||
- Verwendet **Material-UI-Icons**:
|
||||
- 🟢 `ModeEditIcon`: Bearbeitungsmodus **aus** → wird angeboten zum **Aktivieren**
|
||||
- 🔴 `EditOffIcon`: Bearbeitungsmodus **ein** → wird angeboten zum **Deaktivieren**
|
||||
- Tooltip informiert den Nutzer über die jeweilige Aktion
|
||||
|
||||
---
|
||||
|
||||
## 🧪 Testfälle
|
||||
|
||||
| Zustand | Erwartetes Verhalten |
|
||||
| ------------------ | ------------------------------------------------------ |
|
||||
| `editMode = false` | Icon: ✏️ → Tooltip: „Bearbeitungsmodus aktivieren“ |
|
||||
| `editMode = true` | Icon: 🚫✏️ → Tooltip: „Bearbeitungsmodus deaktivieren“ |
|
||||
| Klick auf Icon | Status umschalten, Seite neu laden |
|
||||
|
||||
---
|
||||
|
||||
## 💡 Erweiterungsideen
|
||||
|
||||
- 🔄 Statt `window.location.reload()` → globalen Zustand über Redux-Dispatch steuern
|
||||
- 📢 Feedback-Toast nach Umschalten anzeigen (z. B. „Bearbeitungsmodus aktiviert“)
|
||||
- 🧩 Integration in Redux-Store zur globalen Synchronisierung ohne Reload
|
||||
|
||||
---
|
||||
|
||||
## 📄 Verwandte Komponenten
|
||||
|
||||
- `MapLayersControlPanel.js`: liest `localStorage.editMode` und deaktiviert Layer-Checkboxen im aktiven Modus
|
||||
- `PoiUpdateModal`, `AddPOIModal`: nutzen den Bearbeitungsmodus für UI-Freigabe
|
||||
|
||||
---
|
||||
@@ -0,0 +1,150 @@
|
||||
<!-- /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`
|
||||
|
||||
---
|
||||
Reference in New Issue
Block a user