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

/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

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

---