# ✏️ 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 --- --- [Zurück zur Übersicht](../../../README.md)