From 695ec7a55cae3474faba6101d8f33c250b37be24 Mon Sep 17 00:00:00 2001 From: Ismail Ali Date: Sat, 17 May 2025 12:30:45 +0200 Subject: [PATCH] Datasheet Markdown --- config/appVersion.js | 2 +- docs/frontend/components/DataSheet.md | 100 ++++++++++++++++++ .../webService/gisStationsStaticSlice.md | 92 ++++++++++++++++ hooks/useMapComponentState.js | 14 +-- .../webService/gisStationsStaticSlice.js | 11 +- 5 files changed, 205 insertions(+), 14 deletions(-) create mode 100644 docs/frontend/components/DataSheet.md create mode 100644 docs/frontend/redux/slices/webService/gisStationsStaticSlice.md diff --git a/config/appVersion.js b/config/appVersion.js index 07c809d4c..661301077 100644 --- a/config/appVersion.js +++ b/config/appVersion.js @@ -1,2 +1,2 @@ // /config/appVersion -export const APP_VERSION = "1.1.80"; +export const APP_VERSION = "1.1.81"; diff --git a/docs/frontend/components/DataSheet.md b/docs/frontend/components/DataSheet.md new file mode 100644 index 000000000..f9c3f86e0 --- /dev/null +++ b/docs/frontend/components/DataSheet.md @@ -0,0 +1,100 @@ +# Komponenten-Dokumentation: `DataSheet.js` + +## Zweck +Die Komponente `DataSheet` dient als Kontrollzentrale für die interaktive Kartenanwendung. Sie bietet Funktionen für: + +- Auswahl von Bereichen ("Stationen") aus einem Dropdown-Menü +- Steuerung der Sichtbarkeit von Layern wie POIs und Polyline (z. B. Kabelstrecken) +- Aktivierung des Editiermodus +- Steuerung von Layer-Zuständen über Redux und Recoil + +--- + +## Position im UI +Die Komponente wird als Floating-Panel oben rechts auf der Karte angezeigt. Sie hat eine feste Breite (min/max) und ist als "Sidebar-Lightbox" implementiert. + +--- + +## Abhängigkeiten + +### Redux +- `gisStationsStaticDistrictSlice` +- `gisSystemStaticSlice` +- `mapLayersSlice` +- `polylineLayerVisibleSlice` +- `gisStationsStaticSlice` + +### Recoil +- `selectedAreaState` +- `zoomTriggerState` +- `poiLayerVisibleState` + +### Hooks +- `useInitGisStationsStatic()` + +--- + +## Funktionalität im Überblick + +### 1. **Bereiche Dropdown** +- Gefüllt aus `GisStationsStatic.Points` +- Wird aktualisiert, wenn sich die Redux-Daten ändern +- Bei Auswahl wird `selectedAreaState` aktualisiert + +### 2. **Systemlayer-Checkboxen** +- Daten kommen aus `GisSystemStatic` +- Jeder Eintrag hat `Name` und einen intern generierten `key` +- Sichtbarkeit wird über `mapLayersState` verwaltet +- Zustand wird in `localStorage` gespeichert + +### 3. **TALAS-Untermenu** +- Bei Systemname "TALAS" wird eine Untergruppe angezeigt: + - Checkbox für Polyline (Kabelstrecken) + - Sichtbarkeit auch in `localStorage` + +### 4. **POI-Checkbox** +- Recoil-State `poiLayerVisibleState` +- Sichtbarkeit von POI-Layern auf der Karte + +### 5. **EditModeToggle** +- Eine separate Komponente +- Aktiviert/Deaktiviert den Bearbeitungsmodus (z. B. für Kontextmenü-Einträge) +- Bei aktivem EditMode sind Checkboxen deaktiviert + +--- + +## Lokale Speicherwerte (localStorage) +Folgende Werte werden zwischen Sitzungen gespeichert: + +| Key | Zweck | +|------------------------|----------------------------------| +| `poiVisible` | Sichtbarkeit POI-Layer | +| `polylineVisible` | Sichtbarkeit Kabelstrecken | +| `mapLayersVisibility` | Sichtbarkeitsstatus für alle Layer | +| `editMode` | Status des Bearbeitungsmodus | + +--- + +## Bekannte Besonderheiten +- **Fallbacks** für Redux-Selector: z. B. `|| []` bei leeren Listen +- **Fehlerprüfung** für `GisStationsStatic.Points` im useEffect +- **Doppelte Initialisierung von stationListing** (einmal aus `Points`, einmal aus `District`) + +--- + +## Voraussetzungen für korrekte Funktion +- API-Endpunkt `/GisStationsStatic?idMap=...` muss korrekte Struktur liefern: `{ Points: [...] }` +- Recoil- und Redux-Stores müssen korrekt initialisiert sein +- Hook `useInitGisStationsStatic` muss beim Mount ausgeführt werden + +--- + +## Weiterführende Dateien +- `/hooks/useMapComponentState.js` +- `/components/EditModeToggle.js` +- Redux-Slices unter `/redux/slices/` + +--- + +## Speicherort für Dokumentation +Empfohlenes Ziel: `/docs/DataSheet.md` diff --git a/docs/frontend/redux/slices/webService/gisStationsStaticSlice.md b/docs/frontend/redux/slices/webService/gisStationsStaticSlice.md new file mode 100644 index 000000000..4ccedd907 --- /dev/null +++ b/docs/frontend/redux/slices/webService/gisStationsStaticSlice.md @@ -0,0 +1,92 @@ +# Redux Slice Dokumentation: `gisStationsStaticSlice.js` + +## Zweck +Dieses Slice verwaltet die Daten für **GisStationsStatic**, welche statische Standorte (z. B. Bereiche oder Stationen) für die Kartenanwendung darstellen. Diese Daten werden im `DataSheet.js` Dropdown-Menü verwendet, um auswählbare Stationen darzustellen. + +--- + +## Speicherort +``` +/redux/slices/webService/gisStationsStaticSlice.js +``` + +--- + +## Zustandsstruktur (`initialState`) +```js +{ + data: null, // enthält die API-Datenstruktur (z. B. { Points: [...] }) + status: "idle", // "idle" | "loading" | "succeeded" | "failed" + error: null // Fehlernachricht bei einem API-Fehler +} +``` + +--- + +## Enthaltene Funktionen + +### 1. `fetchGisStationsStatic` +Ein `createAsyncThunk`, der die GIS-Daten vom Webservice lädt. + +```js +export const fetchGisStationsStatic = createAsyncThunk( + "gisStationsStatic/fetchGisStationsStatic", + async (_, { rejectWithValue }) => { ... } +); +``` + +- Die URL wird dynamisch aus `window.location.protocol`, `window.location.hostname` und Port 80 zusammengesetzt. +- `idMap` wird aus der aktuellen URL gelesen (`?m=...`). +- Es wird erwartet, dass der Webservice JSON im Format `{ Points: [...] }` zurückliefert. + +### 2. `gisStationsStaticSlice` +Das eigentliche Redux-Slice mit `createSlice`: + +- Behandelt `pending`, `fulfilled`, `rejected` für `fetchGisStationsStatic` +- Speichert den Ladezustand und die API-Antwort + +### 3. `selectGisStationsStatic` +Selector zum Zugriff auf `state.gisStationsStatic.data`. + +```js +export const selectGisStationsStatic = (state) => state.gisStationsStatic.data; +``` + +--- + +## API-Endpunkt +Der folgende Endpunkt wird aufgerufen: + +``` +http://:80/talas5/ClientData/WebServiceMap.asmx/GisStationsStatic?idMap= +``` + +Dabei wird `idMap` dynamisch aus der aktuellen Browser-URL geholt. + +--- + +## Verwendungsbeispiel +Wird z. B. in `DataSheet.js` verwendet, um die Dropdown-Auswahl zu befüllen: + +```js +const GisStationsStatic = useSelector(selectGisStationsStatic) || []; +``` + +--- + +## Besonderheiten +- Der API-Port ist **hart auf 80 gesetzt**, da der Webservice sowohl in Dev- als auch Prod-Umgebung darüber erreichbar ist. +- Eine Browser-basierte URL-Analyse (`window.location`) bestimmt dynamisch den Host. +- Fehler werden über `rejectWithValue` zurückgegeben und im Slice gespeichert. + +--- + +## Verknüpfte Komponenten +- `DataSheet.js` +- `useMapComponentState.js` +- Webservice: `WebServiceMap.asmx` + +--- + +## Ziel für Dokumentation +Empfohlener Pfad: `/docs/gisStationsStaticSlice.md` diff --git a/hooks/useMapComponentState.js b/hooks/useMapComponentState.js index a8c999008..a74b03ec6 100644 --- a/hooks/useMapComponentState.js +++ b/hooks/useMapComponentState.js @@ -49,29 +49,25 @@ export const useMapComponentState = () => { const fetchDeviceData = async () => { try { + const protocol = window.location.protocol; const host = window.location.hostname; - const port = host === "10.10.0.70" ? "3000" : "80"; - //const apiBaseUrl = `http://${host}:${port}/talas5/ClientData/WebServiceMap.asmx`; - const apiBaseUrl = `http://10.10.0.70/talas5/ClientData/WebServiceMap.asmx`; + // WebService läuft immer auf Port 80 (kein :port anhängen) + const apiBaseUrl = `${protocol}//${host}/talas5/ClientData/WebServiceMap.asmx`; const params = new URLSearchParams(window.location.search); const idMap = params.get("m"); - //console.log("idMap:", idMap); - const url = `${apiBaseUrl}/GisStationsStatic?idMap=${idMap}`; - //console.log("URL:", url); + const url = `${apiBaseUrl}/GisStationsStatic?idMap=${idMap}`; + console.log("🌐 Geräte-API:", url); const response = await fetch(url); - // 🔄 KORREKT: Webservice liefert direkt JSON const data = await response.json(); - //console.log("Standort- und Gerätedaten:", data); setLocationDeviceData(data.Points || []); if (data.Points && data.Points.length > 0) { setDeviceName(data.Points[0].LD_Name); - //console.log("Gerätename:", data.Points[0].LD_Name); } } catch (error) { console.error("❌ Fehler beim Abrufen der Gerätedaten:", error); diff --git a/redux/slices/webService/gisStationsStaticSlice.js b/redux/slices/webService/gisStationsStaticSlice.js index 62a991155..f44b67970 100644 --- a/redux/slices/webService/gisStationsStaticSlice.js +++ b/redux/slices/webService/gisStationsStaticSlice.js @@ -1,18 +1,21 @@ -// /redux/api/fromDB/fetchLocationDevices.js +// /redux/slices/webService/gisStationsStaticSlice.js // das ist für Datasheet dropdownmenu Bereiche/Area-Name import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"; // API-Fetch-Funktion für GIS Stations Static mit dynamischem URL-Parameter export const fetchGisStationsStatic = createAsyncThunk("gisStationsStatic/fetchGisStationsStatic", async (_, { rejectWithValue }) => { try { - const apiBaseUrl = `${window.location.origin}/talas5/ClientData/WebServiceMap.asmx`; + const host = window.location.hostname; + const protocol = window.location.protocol; + const apiPort = 80; // Oder aus einer Umgebungsvariable + const apiBaseUrl = `${protocol}//${host}:${apiPort}/talas5/ClientData/WebServiceMap.asmx`; // URL-Parameter aus der aktuellen Browser-URL holen const params = new URLSearchParams(window.location.search); - const idMap = params.get("idMap") || "12"; // Standardwert "12", falls `idMap` nicht existiert + const idMap = params.get("m"); const url = `${apiBaseUrl}/GisStationsStatic?idMap=${idMap}`; - console.log("📡 API Request URL:", url); + console.log("📡 API Request URL in redux slice:", url); const response = await fetch(url);