<!-- /docs/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.md -->

# 🧭 MapLayersControlPanel.js

Dieses UI-Widget zeigt eine interaktive Steuereinheit für Layer, POIs und Stationsbereiche auf der
rechten Seite der Karte.  
Es ist vollständig an den Redux-Store angebunden und reagiert auf Änderungen der Layer-Sichtbarkeit,
Bearbeitungsmodus und Stationsauswahl.

---

## 🔧 Pfad

```bash
/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js
```

---

## 📌 Zweck

Das `MapLayersControlPanel` ermöglicht Nutzern:

- Die Auswahl eines Stationsbereichs (Dropdown)
- Das Aktivieren/Deaktivieren einzelner GIS-Systeme (Checkboxen)
- Das Anzeigen von POIs oder Kabelstrecken (TALAS-spezifisch)
- Das Ein-/Ausschalten des Bearbeitungsmodus
- Die Steuerung der Karten-Zentrierung über ein Icon

---

## 🧠 Verwendete Redux-Slices

| Slice                            | Zweck                                                       |
| -------------------------------- | ----------------------------------------------------------- |
| `gisStationsStaticDistrictSlice` | Enthält die Gerätebereiche (mit `.Points`)                  |
| `gisSystemStaticSlice`           | Enthält die konfigurierten GIS-Systeme mit Anzeigeerlaubnis |
| `mapLayersSlice`                 | Speichert die Sichtbarkeit aller Layer                      |
| `poiLayerVisibleSlice`           | Steuert Sichtbarkeit der POIs                               |
| `polylineLayerVisibleSlice`      | Steuert Sichtbarkeit der Kabelstrecken (TALAS)              |
| `zoomTriggerSlice`               | Löst Neuzentrierung der Karte aus                           |
| `selectedAreaSlice`              | Speichert den gewählten Bereich/Station                     |

---

## 🔄 Logikübersicht

- **Dropdown Stationsauswahl:**  
  Wird dynamisch aus `GisStationsStaticDistrict.Points` befüllt  
  Nur eindeutige `Area_Name`, wenn `System` erlaubt ist

- **Checkboxen für Layer:**  
  Zeigen alle Systeme aus `GisSystemStatic`, bei denen `Allow === 1`  
  Sonderfall: `TALAS` erhält ein Untermenü für „Kabelstrecken“

- **Lokale Speicherung:**  
  Sichtbarkeiten, Bearbeitungsmodus und POI-Zustand werden in `localStorage` geschrieben und bei
  Initialisierung geladen

- **Bearbeitungsmodus:**  
  Wenn aktiv (`editMode === true`), sind Layer-Checkboxen deaktiviert

---

## 📥 Wichtige Funktionen

| Funktion                         | Zweck                                    |
| -------------------------------- | ---------------------------------------- |
| `handleAreaChange()`             | Setzt `selectedArea` im Redux Store      |
| `handleCheckboxChange()`         | Schaltet Sichtbarkeit einzelner Layer    |
| `handlePolylineCheckboxChange()` | Aktiviert Sichtbarkeit von Kabelstrecken |
| `handlePoiCheckboxChange()`      | Aktiviert Sichtbarkeit von POIs          |
| `handleIconClick()`              | Setzt Station zurück und triggert Zoom   |

---

## 🧩 UI-Struktur

```plaintext
[Dropdown: Station wählen]
[🟩 EditModeToggle] [🔍 Expand-Icon]

[ ] GIS-System 1
[ ] GIS-System 2
 └─ [ ] Kabelstrecken (falls "TALAS")

[ ] POIs
```

---

## 🐞 Debug-Hinweise

- Debug-Logs:  
  `console.log("🔍 GisStationsStaticDistrict Inhalt:", ...)`  
  werden ausgegeben, um sicherzustellen, dass Daten korrekt geladen wurden

- Warnungen:  
  Falls `.Points` nicht vorhanden ist, wird dies in der Konsole gewarnt

---

## 🛠 ToDos / Erweiterungsideen

- Checkboxen für Bereiche („Bereiche“, „Standorte“) sind bereits vorbereitet, aber auskommentiert
- Möglichkeit, Tooltips zu aktivieren/deaktivieren?
- Gruppierung von Layern nach Typ (z. B. Linien, Geräte, POIs)

---

## 📄 Verwendete Komponenten

- `EditModeToggle` – Schaltfläche für Umschalten des Bearbeitungsmodus

---

## ✅ Zustand: Lokal & Global

- **Global:** `useSelector(...)` aus Redux
- **Lokal:** `useState(...)` für editMode, stationListing, systemListing

---

## 📦 LokaleStorage-Keys

| Key                   | Beschreibung                               |
| --------------------- | ------------------------------------------ |
| `poiVisible`          | Sichtbarkeit der POI-Marker                |
| `polylineVisible`     | Sichtbarkeit der Kabelstrecken             |
| `mapLayersVisibility` | Sichtbarkeiten der einzelnen Systeme       |
| `editMode`            | Zustand des Bearbeitungsmodus (true/false) |

---

## 🧪 Testempfehlung

- Dropdown zeigt erwartete `Area_Name`-Werte?
- Layer-Checkboxen werden korrekt gespeichert?
- Bei `TALAS` erscheint zusätzlich: „Kabelstrecken“?
- Bei Wechsel der Station wird `setSelectedArea` ausgelöst?

---

## 🧩 Verknüpfte Dateien

- `redux/slices/webservice/gisStationsStaticDistrictSlice.js`
- `redux/slices/webservice/gisSystemStaticSlice.js`
- `redux/slices/mapLayersSlice.js`
- `redux/slices/selectedAreaSlice.js`
- `redux/slices/database/polylines/polylineLayerVisibleSlice.js`
- `redux/slices/database/pois/poiLayerVisibleSlice.js`

---

---

[Zurück zur Übersicht](../../../README.md)