86 lines
2.6 KiB
Markdown
86 lines
2.6 KiB
Markdown
<!-- /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
|
||
|
||
---
|