fix(ui): Dropdown in MapLayersControlPanel zeigt jetzt Stationen/Bereiche korrekt an

- Zugriff auf GisStationsStaticDistrict.Points korrigiert
- Verhindert leere Dropdown-Liste bei gültigen Daten
- Neue Markdown-Dokus für UI-Komponenten erstellt (MapLayersControlPanel, EditModeToggle, VersionInfoModal, CoordinateInput)
- Version auf 1.1.190 gesetzt

CHANGELOG.md

@@ -4,6 +4,27 @@ Alle bedeutenden Änderungen an diesem Projekt werden in dieser Datei dokumentie
 
 ---
 
+[1.1.190] – 2025-05-27
+🐞 Fixed
+Dropdown im UI Widget MapLayersControlPanel zeigte keine Stations-/Bereichsnamen an
+🔧 Fehler behoben: Zugriff auf GisStationsStaticDistrict.Points statt auf das Objekt selbst
+
+📄 Dokumentation
+Neue technische Markdown-Dokumentationen erstellt:
+
+/docs/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.md
+
+/docs/components/uiWidgets/mapLayersControlPanel/EditModeToggle.md
+
+/docs/components/uiWidgets/VersionInfoModal.md
+
+/docs/components/uiWidgets/CoordinateInput.md
+
+🔧 Version
+📦 Version erhöht auf 1.1.190
+
+---
+
 ## [1.1.188] – 2025-05-27
 
 ### ♻️ Refactor

bugs.md

@@ -2,9 +2,9 @@
 
 ## 1. Stationen Dropdown leer
 
-- [ ] Webservice-Aufruf überprüfen (`fetchGisStationsStaticDistrict`)
+- [x] Webservice-Aufruf überprüfen (`fetchGisStationsStaticDistrict`)
-- [ ] Redux-State prüfen (`selectGisStationsStaticDistrict`)
+- [x] Redux-State prüfen (`selectGisStationsStaticDistrict`)
-- [ ] basePath in `.env.local` korrekt?
+- [x] basePath in `.env.local` korrekt?
 
 ## 2. Kontextmenü dupliziert
 

components/uiWidgets/CoordinateInput.js

@@ -1,4 +1,4 @@
-// components/CoordinateInput.js
+// /components/uiWidgets/CoordinateInput.js
 import React, { useState } from "react";
 
 const CoordinateInput = ({ onCoordinatesSubmit }) => {

components/uiWidgets/VersionInfoModal.js

@@ -1,4 +1,4 @@
-// components/VersionInfoModal.js
+// /components/uiWidgets/VersionInfoModal.js
 import React from "react";
 
 const VersionInfoModal = ({ showVersionInfoModal, closeVersionInfoModal, APP_VERSION }) => {

components/uiWidgets/mapLayersControlPanel/EditModeToggle.js

@@ -1,4 +1,4 @@
-// /components/EditModeToggle.js
+// /components/uiWidgets/mapLayersControlPanel/EditModeToggle.js
 import React, { useState, useEffect } from "react";
 import EditOffIcon from "@mui/icons-material/EditOff";
 import ModeEditIcon from "@mui/icons-material/ModeEdit";

components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js

@@ -1,4 +1,4 @@
-// /componentss/MapLayersControlPanel.js
+// /components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js
 import React, { useEffect, useState } from "react";
 import { setSelectedArea } from "../../../redux/slices/selectedAreaSlice";
 import EditModeToggle from "./EditModeToggle";
@@ -69,8 +69,8 @@ function MapLayersControlPanel() {
     const allowedSystems = Array.isArray(GisSystemStatic) ? new Set(GisSystemStatic.filter((system) => system.Allow === 1).map((system) => system.IdSystem)) : new Set();
 
     const seenNames = new Set();
-    const filteredAreas = Array.isArray(GisStationsStaticDistrict)
+    const filteredAreas = GisStationsStaticDistrict?.Points?.length
-      ? GisStationsStaticDistrict.filter((item) => {
+      ? GisStationsStaticDistrict.Points.filter((item) => {
           const isUnique = !seenNames.has(item.Area_Name) && allowedSystems.has(item.System);
           if (isUnique) {
             seenNames.add(item.Area_Name);

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.190";
+export const APP_VERSION = "1.1.191";

docs/components/uiWidgets/CoordinateInput.md

@@ -0,0 +1,101 @@
+<!-- /docs/components/uiWidgets/CoordinateInput.md -->
+
+# 📍 CoordinateInput.js
+
+Die Komponente `CoordinateInput` stellt ein einfaches Eingabefeld für geografische Koordinaten (Latitude, Longitude) bereit.  
+Sie dient typischerweise dazu, einen bestimmten Punkt auf der Karte zu fokussieren bzw. zu markieren.
+
+---
+
+## 🔧 Pfad
+
+```bash
+/components/uiWidgets/CoordinateInput.js
+```
+
+---
+
+## 🎯 Zweck
+
+- Eingabe von Koordinaten (z. B. `53.2,8.1`)
+- Übergabe dieser Koordinaten an eine Callback-Funktion zur weiteren Verarbeitung
+- Positioniert sich dauerhaft in der linken oberen Ecke der Seite (z. B. zur schnellen Navigation)
+
+---
+
+## ⚙️ Props
+
+| Prop                  | Typ        | Beschreibung                                                                          |
+| --------------------- | ---------- | ------------------------------------------------------------------------------------- |
+| `onCoordinatesSubmit` | `function` | Wird beim Abschicken des Formulars mit dem eingegebenen Koordinaten-String aufgerufen |
+
+---
+
+## 🧩 Interne Logik
+
+```js
+const [coordinates, setCoordinates] = useState("");
+```
+
+- Der Eingabewert wird im lokalen State gespeichert
+- Beim Submit (`onSubmit`) wird `onCoordinatesSubmit(coordinates)` aufgerufen, wenn gesetzt
+
+---
+
+## 🧰 UI-Aufbau
+
+- Eingabefeld für Text: Erwartet `lat,lng`
+- Button: „Zu Marker zoomen“
+- Position: `fixed top-5 left-5` → dauerhaft sichtbar
+
+---
+
+## 🎨 Gestaltung (Tailwind CSS)
+
+| Element   | Klassen                                                          |
+| --------- | ---------------------------------------------------------------- |
+| Container | `fixed top-5 left-5 z-50 bg-white shadow-lg rounded-lg p-4 w-72` |
+| Input     | `border p-2 rounded w-full mb-2`                                 |
+| Button    | `bg-blue-500 text-white p-2 rounded w-full hover:bg-blue-600`    |
+
+---
+
+## 🧪 Testfälle
+
+| Eingabe                    | Erwartung                                                 |
+| -------------------------- | --------------------------------------------------------- |
+| `53.2,8.1`                 | Callback `onCoordinatesSubmit("53.2,8.1")` wird ausgelöst |
+| Leer                       | Callback wird ausgelöst mit leerem String                 |
+| Buttonklick                | Löst `handleSubmit()` aus                                 |
+| Enter-Taste im Eingabefeld | Löst ebenfalls Submit aus                                 |
+
+---
+
+## 💡 Erweiterungsideen
+
+- Validierung des Formats (`lat,lng`) vor dem Absenden
+- Automatisches Zentrieren der Leaflet-Karte in der Callback-Funktion
+- Optionale Markierung des Punkts auf der Karte
+
+---
+
+## 📄 Verwendung
+
+Beispiel in einer Map-Komponente:
+
+```jsx
+<CoordinateInput
+  onCoordinatesSubmit={(coords) => {
+    const [lat, lng] = coords.split(",").map(Number);
+    map.setView([lat, lng], 16); // Leaflet
+  }}
+/>
+```
+
+---
+
+## 📦 Verwandte Komponenten
+
+- `MapComponent.js` – kann die übergebenen Koordinaten zur Zentrierung oder Marker-Erstellung nutzen
+
+---

docs/components/uiWidgets/VersionInfoModal.md

@@ -0,0 +1,92 @@
+<!-- /docs/components/uiWidgets/VersionInfoModal.md -->
+
+# 🪪 VersionInfoModal.js
+
+Das `VersionInfoModal` ist ein modales Fenster zur Anzeige von Unternehmensinformationen und der aktuellen App-Version.  
+Es wird meist im Footer oder als Info-Schaltfläche in der Benutzeroberfläche eingeblendet.
+
+---
+
+## 🔧 Pfad
+
+```bash
+/components/uiWidgets/VersionInfoModal.js
+```
+
+---
+
+## 🎯 Zweck
+
+Die Komponente informiert Nutzer über:
+
+- Die **aktuelle TALAS.Map Version**
+- Die **Firmenadresse und Kontaktdaten** der Littwin Systemtechnik GmbH & Co. KG
+- Eine zentral platzierte Grafik mit dem TALAS-Logo
+- Eine Schaltfläche zum Schließen des Modals
+
+---
+
+## ⚙️ Props
+
+| Prop                    | Typ        | Beschreibung                                                   |
+| ----------------------- | ---------- | -------------------------------------------------------------- |
+| `showVersionInfoModal`  | `boolean`  | Steuert, ob das Modal angezeigt wird                           |
+| `closeVersionInfoModal` | `function` | Callback zum Schließen des Modals                              |
+| `APP_VERSION`           | `string`   | Versionstext (z. B. `1.1.188`), meist aus `.env.local` geladen |
+
+---
+
+## 💡 Verhalten
+
+- Wird `showVersionInfoModal` auf `true` gesetzt, erscheint das Modal zentriert über einem halbtransparenten Overlay
+- Klick auf den Hintergrund (schwarzes Overlay) oder auf „Schließen“ führt `closeVersionInfoModal()` aus
+
+---
+
+## 🧩 Inhalt im Modal
+
+```plaintext
++--------------------------+
+| [Logo_TALAS.png]        |
+| Littwin GmbH Adresse    |
+| Telefon & E-Mail        |
+| Version: 1.1.188        |
+| [Schließen] Button      |
++--------------------------+
+```
+
+---
+
+## 🎨 Gestaltung
+
+- Modal-Layout mit Tailwind CSS (`fixed`, `z-50`, `bg-white`, `rounded`, `shadow`)
+- Schaltfläche `Schließen` reagiert auf Hover mit Farbwechsel (`hover:bg-blue-700`)
+- Design folgt der UI-Ästhetik von TALAS.web
+
+---
+
+## 🧪 Testfälle
+
+| Bedingung                       | Erwartung                                 |
+| ------------------------------- | ----------------------------------------- |
+| `showVersionInfoModal = true`   | Modal wird angezeigt                      |
+| Klick auf Hintergrund           | Modal wird geschlossen                    |
+| Klick auf „Schließen“-Button    | Modal wird geschlossen                    |
+| Version `APP_VERSION = 1.1.188` | Text „TALAS.Map Version 1.1.188“ sichtbar |
+
+---
+
+## 📦 Verknüpfte Dateien
+
+- `.env.local` enthält z. B. `NEXT_PUBLIC_APP_VERSION=1.1.188`
+- Aufruf in `Footer` oder `Layout` zur Anzeige bei Klick auf „Version“
+
+---
+
+## 🛠 Verbesserungsideen
+
+- ESC-Taste als Schließen-Funktion ergänzen
+- Option für dynamische Anzeige von Changelog-Link
+- Automatischer Import von Version via `process.env.NEXT_PUBLIC_APP_VERSION`
+
+---

docs/components/uiWidgets/mapLayersControlPanel/EditModeToggle.md

@@ -0,0 +1,85 @@
+<!-- /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
+
+---

docs/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.md

@@ -0,0 +1,150 @@
+<!-- /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`
+
+---