<!-- /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

---
