feat: Fix Redux-Datenstruktur für GisStationsStaticDistrict und Bereichs-Dropdown

- `GisStationsStaticDistrict` wird jetzt korrekt aus Redux gelesen und verwendet `Points` als Array.
- Fehler `find is not a function` behoben durch Zugriff auf `GisStationsStaticDistrict.Points`.
- Sicherstellung, dass `Points` existiert, bevor darauf zugegriffen wird.
- Konsole-Logs für Debugging hinzugefügt, um leere oder ungültige Daten zu erkennen.
- Bereichsauswahl im Dropdown funktioniert jetzt korrekt und fliegt zur gewählten Station auf der Karte.

✅ Tested: Dropdown zeigt jetzt die `Area_Name`-Werte und `map.flyTo()` funktioniert korrekt.

components/DataSheet.js

@@ -10,9 +10,12 @@ import { poiLayerVisibleState } from "../redux/slices/poiLayerVisibleSlice";
 import EditModeToggle from "./EditModeToggle";
 import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleSlice"; // Import für Polyline-Visibility
 import { useSelector, useDispatch } from "react-redux";
-import { selectGisStationsStaticDistrict } from "../redux/slices/webService/gisStationsStaticDistrictSlice";
 import { selectPolylineVisible, setPolylineVisible } from "../redux/slices/polylineLayerVisibleSlice";
 import { selectGisSystemStatic } from "../redux/slices/webService/gisSystemStaticSlice";
+import { useInitGisStationsStatic } from "../components/mainComponent/hooks/useInitGisStationsStatic";
+
+import { fetchGisStationsStatic, selectGisStationsStatic } from "../redux/slices/webService/gisStationsStaticSlice";
+import { selectGisStationsStaticDistrict } from "../redux/slices/webService/gisStationsStaticDistrictSlice";
 
 function DataSheet() {
   const [editMode, setEditMode] = useState(false); // Zustand für editMode
@@ -23,6 +26,7 @@ function DataSheet() {
   const [systemListing, setSystemListing] = useState([]);
   const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict) || [];
   const GisSystemStatic = useSelector(selectGisSystemStatic) || [];
+  const GisStationsStatic = useSelector(selectGisStationsStatic) || []; //Area-Name/Bereiche dropdownmenu
 
   const setZoomTrigger = useSetRecoilState(zoomTriggerState);
   const dispatch = useDispatch();
@@ -156,8 +160,48 @@ function DataSheet() {
   };
   //------------------------------
   useEffect(() => {
-    console.log("GisSystemStatic aus Redux:", GisSystemStatic); // ✅ Debugging: Ist es ein Array?
+    // console.log("GisSystemStatic aus Redux:", GisSystemStatic); // ✅ Debugging: Ist es ein Array?
   }, [GisSystemStatic]);
+  //-----------------------------
+  useInitGisStationsStatic();
+  //---------------------------
+  useEffect(() => {
+    console.log("🔍 GisStationsStatic Inhalt:", GisStationsStatic);
+
+    if (!GisStationsStatic) {
+      console.warn("⚠️ GisStationsStatic ist `null` oder nicht geladen.");
+      return;
+    }
+
+    if (typeof GisStationsStatic !== "object") {
+      console.warn("⚠️ GisStationsStatic ist kein Objekt:", GisStationsStatic);
+      return;
+    }
+
+    if (!GisStationsStatic.Points || !Array.isArray(GisStationsStatic.Points)) {
+      console.warn("⚠️ GisStationsStatic.Points ist nicht vorhanden oder kein Array.", GisStationsStatic);
+      return;
+    }
+
+    const seenNames = new Set();
+    const filteredAreas = GisStationsStatic.Points.filter((item) => {
+      if (!item.Area_Name) return false; // Sicherstellen, dass Area_Name existiert
+      const isUnique = !seenNames.has(item.Area_Name);
+      if (isUnique) {
+        seenNames.add(item.Area_Name);
+      }
+      return isUnique;
+    });
+
+    setStationListing(
+      filteredAreas.map((area, index) => ({
+        id: area.IdArea || index + 1,
+        name: area.Area_Name || "Unbekannt",
+      }))
+    );
+
+    console.log("📌 stationListing aktualisiert:", filteredAreas);
+  }, [GisStationsStatic]);
 
   //---------------------------
   return (

components/mainComponent/MapComponent.js

@@ -647,16 +647,30 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     }
   }, [map]);
   //--------------------------------------------
-
+  // Bereich in DataSheet ->dropdownmenu
   useEffect(() => {
+    console.log("🔍 GisStationsStaticDistrict Inhalt:", GisStationsStaticDistrict);
+
+    // Sicherstellen, dass `Points` existiert und ein Array ist
+    const points = GisStationsStaticDistrict?.Points;
+    if (!Array.isArray(points)) {
+      console.warn("⚠️ GisStationsStaticDistrict.Points ist nicht vorhanden oder kein Array.", points);
+      return;
+    }
+
     if (selectedArea && map) {
-      const station = GisStationsStaticDistrict.find((s) => s.Area_Name === selectedArea);
+      const station = points.find((s) => s.Area_Name === selectedArea);
+
       if (station) {
+        console.log("📌 Gefundene Station:", station);
         map.flyTo([station.X, station.Y], 14);
+      } else {
+        console.warn("⚠️ Keine passende Station für die Area gefunden:", selectedArea);
       }
     }
   }, [selectedArea, map, GisStationsStaticDistrict]);
 
+  //-------------------------------------
   useEffect(() => {
     if (zoomTrigger && map) {
       map.flyTo([51.41321407879154, 7.739617925303934], 7);
@@ -945,7 +959,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       // Ergebnis im Dispatch speichern oder State aktualisieren
       dispatch({ type: "SET_GIS_STATIONS", payload: data });
 
-      console.log("Daten erfolgreich geladen:", data);
+      //console.log("Daten erfolgreich geladen:", data);
       return data; // Optional: Rückgabe der Daten
     } catch (error) {
       console.error("Fehler beim Laden der GIS-Daten:", error);

components/mainComponent/hooks/useInitGisStationsStatic.js

@@ -0,0 +1,21 @@
+// /components/mainComponent/hooks/useInitGisStationsStatic.js
+//Bereiche/Area-Name Dropdownmenu für Datasheet wird hier initialisiert und in der Komponente verwendet
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { fetchGisStationsStatic, selectGisStationsStatic } from "../../../redux/slices/webService/gisStationsStaticSlice";
+
+export const useInitGisStationsStatic = () => {
+  const dispatch = useDispatch();
+  const gisStationsStatic = useSelector(selectGisStationsStatic);
+
+  useEffect(() => {
+    console.log("🔍 useInitGisStationsStatic - Aktueller Wert:", gisStationsStatic);
+
+    if (!gisStationsStatic || gisStationsStatic === null) {
+      console.log("🚀 Starte fetchGisStationsStatic...");
+      dispatch(fetchGisStationsStatic());
+    }
+  }, [gisStationsStatic, dispatch]);
+
+  return gisStationsStatic;
+};

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.28";
+export const APP_VERSION = "1.1.29";

hooks/useMapComponentState.js

@@ -49,19 +49,31 @@ export const useMapComponentState = () => {
 
     const fetchDeviceData = async () => {
       try {
-        const response = await fetch("/api/talas5/location_device");
+        const apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
 
-        // Sicherstellen, dass die Antwort JSON ist
+        // URL-Parameter aus der aktuellen Browser-URL holen
-        const contentType = response.headers.get("content-type");
+        const params = new URLSearchParams(window.location.search);
-        if (!contentType || !contentType.includes("application/json")) {
+        const idMap = params.get("idMap") || "12"; // Fallback auf "12" falls nicht gesetzt
-          throw new Error("❌ Ungültige Antwort: Kein JSON erhalten");
-        }
 
-        const data = await response.json();
+        const url = `${apiBaseUrl}/GisStationsStatic?idMap=${idMap}`;
-        setLocationDeviceData(data);
 
-        if (data.length > 0) {
+        //console.log("📡 API Request URL:", url);
-          setDeviceName(data[0].name);
+
+        const response = await fetch(url);
+
+        //console.log("📡 API Response Status:", response.status);
+        // console.log("📡 API Response Headers:", response.headers.get("content-type"));
+
+        const text = await response.text();
+        //console.log("📡 API Response Text:", text);
+
+        // JSON manuell parsen, falls die API keinen JSON-Header sendet
+        const data = JSON.parse(text);
+
+        setLocationDeviceData(data.Points || []);
+
+        if (data.Points && data.Points.length > 0) {
+          setDeviceName(data.Points[0].LD_Name);
         }
       } catch (error) {
         console.error("❌ Fehler beim Abrufen der Gerätedaten:", error);

redux/api/fromWebService/fetchGisStationsMeasurements.js

@@ -8,7 +8,7 @@ export const fetchGisStationsMeasurements = async () => {
   const idMap = params.get("idMap") || process.env.NEXT_PUBLIC_DEFAULT_ID_MAP || "12";
   const idUser = params.get("idUser") || process.env.NEXT_PUBLIC_DEFAULT_ID_USER || "484";
 
-  console.log("🔍 fetchGisStationsMeasurements - URL:", `${apiBaseUrl}/GisStationsMeasurements?idMap=${idMap}&idUser=${idUser}`);
+  //console.log("🔍 fetchGisStationsMeasurements - URL:", `${apiBaseUrl}/GisStationsMeasurements?idMap=${idMap}&idUser=${idUser}`);
 
   const response = await fetch(`${apiBaseUrl}/GisStationsMeasurements?idMap=${idMap}&idUser=${idUser}`);
 
@@ -17,6 +17,6 @@ export const fetchGisStationsMeasurements = async () => {
   }
 
   const data = await response.json();
-  console.log("✅ fetchGisStationsMeasurements - Daten:", data);
+  //console.log("✅ fetchGisStationsMeasurements - Daten:", data);
   return data;
 };

redux/api/fromWebService/fetchGisStationsStatic.js

@@ -0,0 +1,25 @@
+// /redux/api/fromWebService/fetchGisStationsStatic.js
+// z.B. http://192.168.10.33/talas5/ClientData/WebServiceMap.asmx/GisStationsStatic?idMap=12
+const apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
+
+export const fetchGisStationsStatic = async () => {
+  try {
+    const response = await fetch(`${apiBaseUrl}/GisStationsStatic?idMap=12`);
+
+    //console.log("📡 API Response Status:", response.status);
+    //console.log("📡 API Response Headers:", response.headers.get("content-type"));
+
+    const text = await response.text();
+    console.log("📡 API Response Text von fetch:", text);
+    console.log("📡 API Response response von fetch:", response);
+
+    if (!response.ok || !response.headers.get("content-type")?.includes("application/json")) {
+      throw new Error("❌ Fehler: Antwort ist kein gültiges JSON");
+    }
+
+    return JSON.parse(text);
+  } catch (error) {
+    console.error("❌ Fehler beim Abrufen der GIS Stations Static:", error);
+    return null;
+  }
+};

redux/api/fromWebService/fetchGisStationsStaticDistrict.js

@@ -8,7 +8,7 @@ export const fetchGisStationsStaticDistrict = async () => {
   const idMap = params.get("idMap") || process.env.NEXT_PUBLIC_DEFAULT_ID_MAP || "12";
   const idUser = params.get("idUser") || process.env.NEXT_PUBLIC_DEFAULT_ID_USER || "484";
 
-  console.log("🔍 fetchGisStationsStaticDistrict - URL:", `${apiBaseUrl}/GisStationsStaticDistrict?idMap=${idMap}&idUser=${idUser}`);
+  // console.log("🔍 fetchGisStationsStaticDistrict - URL:", `${apiBaseUrl}/GisStationsStaticDistrict?idMap=${idMap}&idUser=${idUser}`);
 
   const response = await fetch(`${apiBaseUrl}/GisStationsStaticDistrict?idMap=${idMap}&idUser=${idUser}`);
 
@@ -17,6 +17,6 @@ export const fetchGisStationsStaticDistrict = async () => {
   }
 
   const data = await response.json();
-  console.log("✅ fetchGisStationsStaticDistrict - Daten:", data);
+  // console.log("✅ fetchGisStationsStaticDistrict - Daten:", data);
   return data;
 };

redux/api/fromWebService/fetchGisStationsStatusDistrict.js

@@ -8,7 +8,7 @@ export const fetchGisStationsStatusDistrict = async () => {
   const idMap = params.get("idMap") || process.env.NEXT_PUBLIC_DEFAULT_ID_MAP || "12";
   const idUser = params.get("idUser") || process.env.NEXT_PUBLIC_DEFAULT_ID_USER || "484";
 
-  console.log("🔍 fetchGisStationsStatusDistrict - URL:", `${apiBaseUrl}/GisStationsStatusDistrict?idMap=${idMap}&idUser=${idUser}`);
+  //console.log("🔍 fetchGisStationsStatusDistrict - URL:", `${apiBaseUrl}/GisStationsStatusDistrict?idMap=${idMap}&idUser=${idUser}`);
 
   const response = await fetch(`${apiBaseUrl}/GisStationsStatusDistrict?idMap=${idMap}&idUser=${idUser}`);
 
@@ -17,6 +17,6 @@ export const fetchGisStationsStatusDistrict = async () => {
   }
 
   const data = await response.json();
-  console.log("✅ fetchGisStationsStatusDistrict - Daten:", data);
+  //console.log("✅ fetchGisStationsStatusDistrict - Daten:", data);
   return data;
 };

redux/api/fromWebService/fetchGisSystemStatic.js

@@ -8,11 +8,11 @@ export async function fetchGisSystemStatic() {
   const idMap = params.get("idMap") || process.env.NEXT_PUBLIC_DEFAULT_ID_MAP || "12";
   const idUser = params.get("idUser") || process.env.NEXT_PUBLIC_DEFAULT_ID_USER || "484";
 
-  console.log("🔍 fetchGisSystemStatic - URL:", `${apiBaseUrl}/GisSystemStatic?idMap=${idMap}&idUser=${idUser}`);
+  //console.log("🔍 fetchGisSystemStatic - URL:", `${apiBaseUrl}/GisSystemStatic?idMap=${idMap}&idUser=${idUser}`);
 
   const response = await fetch(`${apiBaseUrl}/GisSystemStatic?idMap=${idMap}&idUser=${idUser}`);
   const data = await response.json();
 
-  console.log("✅ fetchGisSystemStatic - Daten:", data);
+  //console.log("✅ fetchGisSystemStatic - Daten:", data);
   return data;
 }

redux/slices/webService/gisStationsStaticSlice.js

@@ -0,0 +1,58 @@
+// /redux/api/fromDB/fetchLocationDevices.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 = process.env.NEXT_PUBLIC_API_BASE_URL;
+
+    // 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 url = `${apiBaseUrl}/GisStationsStatic?idMap=${idMap}`;
+    console.log("📡 API Request URL:", url);
+
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      throw new Error("GisStationsStatic konnte nicht geladen werden");
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    return rejectWithValue(error.message);
+  }
+});
+
+// Redux-Slice
+const gisStationsStaticSlice = createSlice({
+  name: "gisStationsStatic",
+  initialState: {
+    data: null,
+    status: "idle",
+    error: null,
+  },
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchGisStationsStatic.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(fetchGisStationsStatic.fulfilled, (state, action) => {
+        state.status = "succeeded";
+        state.data = action.payload;
+      })
+      .addCase(fetchGisStationsStatic.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.payload;
+      });
+  },
+});
+
+// Selector-Funktion
+export const selectGisStationsStatic = (state) => state.gisStationsStatic.data;
+
+export default gisStationsStaticSlice.reducer;

redux/store.js

@@ -1,3 +1,4 @@
+// /redux/store.js
 import { configureStore } from "@reduxjs/toolkit";
 import lineVisibilityReducer from "./slices/lineVisibilitySlice";
 import currentPoiReducer from "./slices/currentPoiSlice";
@@ -7,6 +8,7 @@ import gisStationsStaticDistrictReducer from "./slices/webService/gisStationsSta
 import gisStationsStatusDistrictReducer from "./slices/webService/gisStationsStatusDistrictSlice";
 import gisStationsMeasurementsReducer from "./slices/webService/gisStationsMeasurementsSlice";
 import gisSystemStaticReducer from "./slices/webService/gisSystemStaticSlice";
+import gisStationsStaticReducer from "./slices/webService/gisStationsStaticSlice";
 
 export const store = configureStore({
   reducer: {
@@ -18,5 +20,6 @@ export const store = configureStore({
     gisStationsStatusDistrict: gisStationsStatusDistrictReducer,
     gisStationsMeasurements: gisStationsMeasurementsReducer,
     gisSystemStatic: gisSystemStaticReducer,
+    gisStationsStatic: gisStationsStaticReducer,
   },
 });