feat: lade Linienstatusdaten vollständig aus Redux Store

- Entferne direkte Verwendung von `webserviceGisLinesStatusUrl` aus config.js
- Nutze `useLineData()` mit Redux-Toolkit Store
- Baue URL intern in fetchGisLinesStatusService.js dynamisch auf
- Optimiere Tooltip-Generierung aus Webservice-Daten

CHANGELOG.md

@@ -4,6 +4,24 @@ Alle bedeutenden Änderungen an diesem Projekt werden in dieser Datei dokumentie
 
 ---
 
+## [1.1.148] - 2025-05-22
+
+### Hinzugefügt
+
+- Tooltips für Linien vollständig über Redux (`gisLinesStatusFromWebservice`) implementiert.
+- Linienstatusdaten jetzt über `useLineData()` aus dem Redux-Toolkit Store geladen.
+
+### Entfernt
+
+- `webserviceGisLinesStatusUrl` aus `config.js` entfernt – URL wird zentral in `fetchGisLinesStatusService.js` aufgebaut.
+
+### Geändert
+
+- `useLineData.js` angepasst, um Redux Store zu nutzen statt URL-Parameter.
+- `MapComponent.js` entsprechend refaktoriert.
+
+---
+
 ## [1.1.147] - 2025-05-22
 
 ### Hinzugefügt

components/mainComponent/MapComponent.js

@@ -133,7 +133,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
   // Konstanten für die URLs
 
-  const webserviceGisLinesStatusUrl = config.webserviceGisLinesStatusUrl;
   //console.log("priorityConfig in MapComponent1: ", priorityConfig);
   //-----------------------------------------
   const [gmaMarkers, setGmaMarkers] = useState([]); //--------------------station.System === 11 alle sind untetschiedlich Nummern
@@ -155,7 +154,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   //--------------------------------------------
 
   const [linePositions, setLinePositions] = useState([]);
-  const { lineColors, tooltipContents } = useLineData(webserviceGisLinesStatusUrl);
+  const { lineColors, tooltipContents } = useLineData();
   const [polylines, setPolylines] = useState([]);
   const [markers, setMarkers] = useState([]);
   const [newPoint, setNewPoint] = useState(null);
@@ -372,7 +371,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
     newPolylines.forEach((polyline, index) => {
       //console.log("polyline: ", polyline);
-      const tooltipContent = tooltipContents[`${linePositions[index].idLD}-${linePositions[index].idModul}`] || "Standard-Tooltip-Inhalt";
+      const tooltipContent = tooltipContents[`${linePositions[index].idLD}-${linePositions[index].idModul}`] || "Die Linie ist noch nicht in Webservice vorhanden oder bekommt keine Daten";
 
       polyline.bindTooltip(tooltipContent, {
         permanent: false,

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.148";
+export const APP_VERSION = "1.1.149";

config/config.js

@@ -25,7 +25,6 @@ if (typeof window !== "undefined") {
 
 // Initialisieren von Variablen, die später im Browserkontext gesetzt werden
 let windowHeight, url_string, url, idMap, idUser;
-let webserviceGisLinesStatusUrl;
 
 // URL-Setup - dynamisch abhängig von Mock oder Echtbetrieb
 if (typeof window !== "undefined") {
@@ -38,17 +37,7 @@ if (typeof window !== "undefined") {
   idUser = url.searchParams.get("u");
   console.log(`4- Parameter 'idMap' : ${idMap}`);
   console.log(`5- Parameter 'idUser': ${idUser}`);
-
-  if (isMockMode()) {
-    // Mock-Daten jetzt über API-Endpunkte aus pages/api/mockData/webService/
-    webserviceGisLinesStatusUrl = "/api/mockData/webService/GisLinesStatusMock";
-    console.log("📡 Mock-Mode aktiv: Daten werden aus /api/mockData/webService geladen.");
-  } else {
-    // Echte URLs zur Webservice-API
-    webserviceGisLinesStatusUrl = `${serverURL}${BASE_URL}/ClientData/WebServiceMap.asmx/GisLinesStatus?idMap=${idMap}`;
-    console.log("🌐 Echt-Mode aktiv: Daten werden von der API geholt.");
-  }
 }
 
 // Export der Variablen und URLs
-export { serverURL, windowHeight, url_string, url, idMap, idUser, webserviceGisLinesStatusUrl, isMockMode };
+export { serverURL, windowHeight, url_string, url, idMap, idUser, isMockMode };

hooks/useLineData.js

@@ -1,130 +1,92 @@
 // hooks/useLineData.js //fix v1.0.8.1
 import { useEffect, useState } from "react";
-import { toast } from "react-toastify";
+import { useSelector, useDispatch } from "react-redux";
-import { SERVER_URL } from "../config/urls";
+import { selectGisLinesStatusFromWebservice } from "../redux/slices/webservice/gisLinesStatusSlice";
-import { useDispatch, useSelector } from "react-redux";
+import { fetchGisLinesThunk } from "../redux/thunks/database/fetchGisLinesThunk";
+import { fetchGisLinesStatusThunk } from "../redux/thunks/webservice/fetchGisLinesStatusThunk";
 
-const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
+const useLineData = () => {
   const dispatch = useDispatch();
-  const messages = useSelector((state) => state.messages);
+
+  const { data: statisData } = useSelector(selectGisLinesStatusFromWebservice);
+  const linesData = useSelector((state) => state.gisLinesFromDatabase.data);
   const [lineColors, setLineColors] = useState({});
   const [tooltipContents, setTooltipContents] = useState({});
 
   useEffect(() => {
-    let isCancelled = false;
+    dispatch(fetchGisLinesThunk());
+    dispatch(fetchGisLinesStatusThunk());
+  }, [dispatch]);
 
-    const fetchData = async () => {
+  useEffect(() => {
-      try {
+    if (!statisData || !Array.isArray(statisData)) return;
-        const response1 = await fetch(webserviceGisLinesStatusUrl);
-        if (!response1.ok) throw new Error("Fehler bei GIS-Linienstatus");
 
-        const data1 = await response1.json();
+    const colorsByModule = {};
-        const response2 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/gisLines/readGisLines`);
+    const newTooltipContents = {};
-        if (!response2.ok) throw new Error("Fehler beim Abrufen der GIS-Linien");
+    const valueMap = {};
 
-        const data2 = await response2.json();
+    const sortedStatis = [...statisData].sort((a, b) => a.Level - b.Level);
-        const response3 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/device/getAllStationsNames`);
-        if (!response3.ok) throw new Error("Fehler beim Abrufen der Stationsnamen");
 
-        const namesData = await response3.json();
+    sortedStatis.forEach((statis) => {
-
+      const key = `${statis.IdLD}-${statis.Modul}`;
-        if (!isCancelled) {
+      if (!valueMap[key]) {
-          if (!data1.Statis || data1.Statis.length === 0) {
+        valueMap[key] = {
-            toast.warn("Keine Linienstatus-Daten verfügbar!", { position: "top-center", autoClose: 5000 });
+          messages: [],
-            setLineStatusData([]);
+          messwert: undefined,
-            return;
+          schleifenwert: undefined,
-          }
+        };
-
-          const colorsByModule = {};
-          const newTooltipContents = {};
-          const valueMap = {};
-
-          const sortedStatis = [...data1.Statis].sort((a, b) => a.Level - b.Level);
-
-          sortedStatis.forEach((statis) => {
-            const key = `${statis.IdLD}-${statis.Modul}`;
-
-            if (!valueMap[key]) {
-              valueMap[key] = {
-                messages: [],
-                messwert: undefined,
-                schleifenwert: undefined,
-              };
-            }
-
-            if (statis.DpName.endsWith("_Messwert") && statis.Value !== "True" && !valueMap[key].messwert) {
-              valueMap[key].messwert = statis.Value;
-            }
-            if (statis.DpName.endsWith("_Schleifenwert") && !valueMap[key].schleifenwert) {
-              valueMap[key].schleifenwert = statis.Value;
-            }
-
-            if (statis.Message && statis.Message !== "?") {
-              valueMap[key].messages.push({
-                message: statis.Message,
-                prioColor: statis.PrioColor && statis.PrioColor !== "#ffffff" ? statis.PrioColor : "green",
-              });
-            }
-          });
-
-          sortedStatis.forEach((statis) => {
-            const key = `${statis.IdLD}-${statis.Modul}`;
-            const matchingLine = data2.find((item) => item.idLD === statis.IdLD && item.idModul === statis.Modul);
-
-            if (matchingLine) {
-              const values = valueMap[key];
-
-              const messageDisplay = values.messages.map((msg) => `<span class="inline-block text-gray-800"><span class="inline-block w-2 h-2 rounded-full mr-2" style="background-color: ${msg.prioColor};"></span>${msg.message}</span><br>`).join("");
-
-              colorsByModule[key] = values.messages.length > 0 ? values.messages[0].prioColor : "green";
-
-              newTooltipContents[key] = `
-                <div class="bg-white rounded-lg m-0 p-2 w-[210px]">
-                  <span class="text-lg font-semibold text-gray-900">${statis.ModulName || "Unknown"}</span>
-                  <br>
-                  <span class="text-md font-bold text-gray-800">${statis.ModulTyp || "N/A"}</span>
-                  <br>
-                  <span class="text-md font-bold text-gray-800">Slot: ${statis.Modul || "N/A"}</span>
-                  <br>
-                  <span class="text-md font-bold text-gray-800">Station: ${namesData[matchingLine.idLD] || "N/A"}</span>
-                  <br>
-                  <div style="max-width: 100%; overflow-wrap: break-word; word-break: break-word; white-space: normal;">
-                    ${messageDisplay}
-                  </div>
-                  <br>
-                  ${values.messwert ? `<span class="inline-block text-gray-800">Messwert: ${values.messwert}</span><br>` : ""}
-                  ${values.schleifenwert ? `<span class="inline-block text-gray-800">Schleifenwert: ${values.schleifenwert}</span>` : ""}
-                </div>
-              `;
-            }
-          });
-
-          setLineColors(colorsByModule);
-          setTooltipContents(newTooltipContents);
-          setLineStatusData(data1.Statis);
-        }
-      } catch (error) {
-        //console.error("Fehler beim Abrufen der Daten in useLineData.js:", error);
-        // toast.error("Fehler beim Abrufen der Linienstatus-Daten!", { position: "top-center", autoClose: 5000 });
-        console.warn("Fehler beim Abrufen der Linienstatus-Daten in useLineData.js ");
       }
-    };
 
-    const scheduleNextFetch = () => {
+      if (statis.DpName.endsWith("_Messwert") && statis.Value !== "True" && !valueMap[key].messwert) {
-      if (!isCancelled) {
+        valueMap[key].messwert = statis.Value;
-        fetchData();
-        setTimeout(scheduleNextFetch, 30000);
       }
-    };
 
-    fetchData();
+      if (statis.DpName.endsWith("_Schleifenwert") && !valueMap[key].schleifenwert) {
-    scheduleNextFetch();
+        valueMap[key].schleifenwert = statis.Value;
+      }
 
-    return () => {
+      if (statis.Message && statis.Message !== "?") {
-      isCancelled = true;
+        valueMap[key].messages.push({
-      localStorage.removeItem("contextMenuExpired");
+          message: statis.Message,
-    };
+          prioColor: statis.PrioColor && statis.PrioColor !== "#ffffff" ? statis.PrioColor : "green",
-  }, [webserviceGisLinesStatusUrl, setLineStatusData]);
+        });
+      }
+    });
+
+    sortedStatis.forEach((statis) => {
+      const key = `${statis.IdLD}-${statis.Modul}`;
+      const matchingLine = linesData.find((item) => item.idLD === statis.IdLD && item.idModul === statis.Modul);
+
+      if (matchingLine) {
+        const values = valueMap[key];
+        const messageDisplay = values.messages.map((msg) => `<span class="inline-block text-gray-800"><span class="inline-block w-2 h-2 rounded-full mr-2" style="background-color: ${msg.prioColor};"></span>${msg.message}</span><br>`).join("");
+
+        colorsByModule[key] = values.messages.length > 0 ? values.messages[0].prioColor : "green";
+
+        newTooltipContents[key] = `
+          <div class="bg-white rounded-lg m-0 p-2 w-[210px]">
+            <span class="text-lg font-semibold text-gray-900">${statis.ModulName || "Unknown"}</span>
+            <br>
+            <span class="text-md font-bold text-gray-800">${statis.ModulTyp || "N/A"}</span>
+            <br>
+            <span class="text-md font-bold text-gray-800">Slot: ${statis.Modul || "N/A"}</span>
+            <br>
+            <span class="text-md font-bold text-gray-800">Station: ${matchingLine.name || "N/A"}</span>
+            <br>
+            <div style="max-width: 100%; overflow-wrap: break-word; word-break: break-word; white-space: normal;">
+              ${messageDisplay}
+            </div>
+            <br>
+            ${values.messwert ? `<span class="inline-block text-gray-800">Messwert: ${values.messwert}</span><br>` : ""}
+            ${values.schleifenwert ? `<span class="inline-block text-gray-800">Schleifenwert: ${values.schleifenwert}</span>` : ""}
+          </div>
+        `;
+      }
+    });
+
+    setLineColors(colorsByModule);
+    setTooltipContents(newTooltipContents);
+  }, [statisData, linesData]);
 
   return { lineColors, tooltipContents };
 };