From ef3c511694c54ba2e433f8bd651f2e591b33a4d5 Mon Sep 17 00:00:00 2001 From: ISA Date: Thu, 22 May 2025 14:27:52 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20lade=20Linienstatusdaten=20vollst=C3=A4?= =?UTF-8?q?ndig=20aus=20Redux=20Store?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 | 18 +++ components/mainComponent/MapComponent.js | 5 +- config/appVersion.js | 2 +- config/config.js | 13 +- hooks/useLineData.js | 182 +++++++++-------------- 5 files changed, 94 insertions(+), 126 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 248242874..9dd995744 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/components/mainComponent/MapComponent.js b/components/mainComponent/MapComponent.js index f600977c6..d53c31361 100644 --- a/components/mainComponent/MapComponent.js +++ b/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, diff --git a/config/appVersion.js b/config/appVersion.js index ea411a6d6..07fbea74b 100644 --- a/config/appVersion.js +++ b/config/appVersion.js @@ -1,2 +1,2 @@ // /config/appVersion -export const APP_VERSION = "1.1.148"; +export const APP_VERSION = "1.1.149"; diff --git a/config/config.js b/config/config.js index f72db80f9..c69d7f225 100644 --- a/config/config.js +++ b/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 }; diff --git a/hooks/useLineData.js b/hooks/useLineData.js index ae72adb76..16bebe12a 100644 --- a/hooks/useLineData.js +++ b/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 { SERVER_URL } from "../config/urls"; -import { useDispatch, useSelector } from "react-redux"; +import { useSelector, useDispatch } from "react-redux"; +import { selectGisLinesStatusFromWebservice } from "../redux/slices/webservice/gisLinesStatusSlice"; +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 () => { - try { - const response1 = await fetch(webserviceGisLinesStatusUrl); - if (!response1.ok) throw new Error("Fehler bei GIS-Linienstatus"); + useEffect(() => { + if (!statisData || !Array.isArray(statisData)) return; - const data1 = await response1.json(); - const response2 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/gisLines/readGisLines`); - if (!response2.ok) throw new Error("Fehler beim Abrufen der GIS-Linien"); + const colorsByModule = {}; + const newTooltipContents = {}; + const valueMap = {}; - const data2 = await response2.json(); - 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 sortedStatis = [...statisData].sort((a, b) => a.Level - b.Level); - const namesData = await response3.json(); - - if (!isCancelled) { - if (!data1.Statis || data1.Statis.length === 0) { - toast.warn("Keine Linienstatus-Daten verfügbar!", { position: "top-center", autoClose: 5000 }); - setLineStatusData([]); - return; - } - - 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) => `${msg.message}
`).join(""); - - colorsByModule[key] = values.messages.length > 0 ? values.messages[0].prioColor : "green"; - - newTooltipContents[key] = ` -
- ${statis.ModulName || "Unknown"} -
- ${statis.ModulTyp || "N/A"} -
- Slot: ${statis.Modul || "N/A"} -
- Station: ${namesData[matchingLine.idLD] || "N/A"} -
-
- ${messageDisplay} -
-
- ${values.messwert ? `Messwert: ${values.messwert}
` : ""} - ${values.schleifenwert ? `Schleifenwert: ${values.schleifenwert}` : ""} -
- `; - } - }); - - 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 "); + sortedStatis.forEach((statis) => { + const key = `${statis.IdLD}-${statis.Modul}`; + if (!valueMap[key]) { + valueMap[key] = { + messages: [], + messwert: undefined, + schleifenwert: undefined, + }; } - }; - const scheduleNextFetch = () => { - if (!isCancelled) { - fetchData(); - setTimeout(scheduleNextFetch, 30000); + if (statis.DpName.endsWith("_Messwert") && statis.Value !== "True" && !valueMap[key].messwert) { + valueMap[key].messwert = statis.Value; } - }; - fetchData(); - scheduleNextFetch(); + if (statis.DpName.endsWith("_Schleifenwert") && !valueMap[key].schleifenwert) { + valueMap[key].schleifenwert = statis.Value; + } - return () => { - isCancelled = true; - localStorage.removeItem("contextMenuExpired"); - }; - }, [webserviceGisLinesStatusUrl, setLineStatusData]); + 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 = linesData.find((item) => item.idLD === statis.IdLD && item.idModul === statis.Modul); + + if (matchingLine) { + const values = valueMap[key]; + const messageDisplay = values.messages.map((msg) => `${msg.message}
`).join(""); + + colorsByModule[key] = values.messages.length > 0 ? values.messages[0].prioColor : "green"; + + newTooltipContents[key] = ` +
+ ${statis.ModulName || "Unknown"} +
+ ${statis.ModulTyp || "N/A"} +
+ Slot: ${statis.Modul || "N/A"} +
+ Station: ${matchingLine.name || "N/A"} +
+
+ ${messageDisplay} +
+
+ ${values.messwert ? `Messwert: ${values.messwert}
` : ""} + ${values.schleifenwert ? `Schleifenwert: ${values.schleifenwert}` : ""} +
+ `; + } + }); + + setLineColors(colorsByModule); + setTooltipContents(newTooltipContents); + }, [statisData, linesData]); return { lineColors, tooltipContents }; };