Datasheet Markdown

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.80";
+export const APP_VERSION = "1.1.81";

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`

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://<hostname>:80/talas5/ClientData/WebServiceMap.asmx/GisStationsStatic?idMap=<id>
+```
+
+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`

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`;
+        // WebService läuft immer auf Port 80 (kein :port anhängen)
-        const apiBaseUrl = `http://10.10.0.70/talas5/ClientData/WebServiceMap.asmx`;
+        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);

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);