diff --git a/CHANGELOG.md b/CHANGELOG.md index e31588d5d..5f56ea0b6 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/bugs.md b/bugs.md index 8f6806a28..84699ccee 100644 --- a/bugs.md +++ b/bugs.md @@ -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 diff --git a/components/uiWidgets/CoordinateInput.js b/components/uiWidgets/CoordinateInput.js index 27003bfec..5c2bac1bb 100644 --- a/components/uiWidgets/CoordinateInput.js +++ b/components/uiWidgets/CoordinateInput.js @@ -1,4 +1,4 @@ -// components/CoordinateInput.js +// /components/uiWidgets/CoordinateInput.js import React, { useState } from "react"; const CoordinateInput = ({ onCoordinatesSubmit }) => { diff --git a/components/uiWidgets/VersionInfoModal.js b/components/uiWidgets/VersionInfoModal.js index 06c724f7b..f11e9802b 100644 --- a/components/uiWidgets/VersionInfoModal.js +++ b/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 }) => { diff --git a/components/uiWidgets/mapLayersControlPanel/EditModeToggle.js b/components/uiWidgets/mapLayersControlPanel/EditModeToggle.js index 289a5e8fc..f8adcb5c2 100644 --- a/components/uiWidgets/mapLayersControlPanel/EditModeToggle.js +++ b/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"; diff --git a/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js b/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js index 77edb1361..fd4de4663 100644 --- a/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js +++ b/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) - ? 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); diff --git a/config/appVersion.js b/config/appVersion.js index 3d04749a3..7bb77aa3f 100644 --- a/config/appVersion.js +++ b/config/appVersion.js @@ -1,2 +1,2 @@ // /config/appVersion -export const APP_VERSION = "1.1.190"; +export const APP_VERSION = "1.1.191"; diff --git a/docs/components/TestScript.md b/docs/components/TestScript.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/components/uiWidgets/CoordinateInput.md b/docs/components/uiWidgets/CoordinateInput.md new file mode 100644 index 000000000..ebbb81513 --- /dev/null +++ b/docs/components/uiWidgets/CoordinateInput.md @@ -0,0 +1,101 @@ + + +# 📍 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 + { + 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 + +--- diff --git a/docs/components/uiWidgets/VersionInfoModal.md b/docs/components/uiWidgets/VersionInfoModal.md new file mode 100644 index 000000000..e211afb8e --- /dev/null +++ b/docs/components/uiWidgets/VersionInfoModal.md @@ -0,0 +1,92 @@ + + +# 🪪 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` + +--- diff --git a/docs/components/uiWidgets/mapLayersControlPanel/EditModeToggle.md b/docs/components/uiWidgets/mapLayersControlPanel/EditModeToggle.md new file mode 100644 index 000000000..237bf2d8c --- /dev/null +++ b/docs/components/uiWidgets/mapLayersControlPanel/EditModeToggle.md @@ -0,0 +1,85 @@ + + +# ✏️ 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 + +--- diff --git a/docs/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.md b/docs/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.md new file mode 100644 index 000000000..8f47f7b7e --- /dev/null +++ b/docs/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.md @@ -0,0 +1,150 @@ + + +# 🧭 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` + +---