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:
@@ -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
|
||||
|
||||
---
|
||||
Reference in New Issue
Block a user