Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
ISA
2025-05-27 14:12:01 +02:00
parent 69d28844a2
commit a19bf96843
12 changed files with 459 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
CHANGELOG.md
View File

@@ -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

6
bugs.md
View File

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

2
components/uiWidgets/CoordinateInput.js
View File

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

2
components/uiWidgets/VersionInfoModal.js
View File

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

2
components/uiWidgets/mapLayersControlPanel/EditModeToggle.js
View File

@@ -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";

6
components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js
View File

@@ -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)
? GisStationsStaticDistrict.filter((item) => {
const filteredAreas = GisStationsStaticDistrict?.Points?.length
? GisStationsStaticDistrict.Points.filter((item) => {
const isUnique = !seenNames.has(item.Area_Name) && allowedSystems.has(item.System);
if (isUnique) {
seenNames.add(item.Area_Name);

2
config/appVersion.js
View File

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

0
docs/components/TestScript.md Normal file
View File

101
docs/components/uiWidgets/CoordinateInput.md Normal file
View File

@@ -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
---

92
docs/components/uiWidgets/VersionInfoModal.md Normal file
View File

@@ -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`
---

85
docs/components/uiWidgets/mapLayersControlPanel/EditModeToggle.md Normal file
View File

@@ -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
---

150
docs/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.md Normal file
View File

@@ -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`
---