From d132ac000afda30e6aa612baa215aa73622e996f Mon Sep 17 00:00:00 2001 From: ISA Date: Tue, 10 Sep 2024 14:29:26 +0200 Subject: [PATCH] Replace setInterval with recursive setTimeout for better control MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit In diesem Code wird setTimeout verwendet, um die Funktion fetchData rekursiv nach 20 Sekunden erneut aufzurufen. Dies ersetzt setInterval und bietet eine bessere Kontrolle über das Timing und das Cleanup, um sicherzustellen, dass der Code sauber bleibt, wenn die Komponente unmounted wird --- hooks/useLineData.js | 189 +++++++++++++++++++------------------------ 1 file changed, 84 insertions(+), 105 deletions(-) diff --git a/hooks/useLineData.js b/hooks/useLineData.js index 0d95b4919..daf3edaca 100644 --- a/hooks/useLineData.js +++ b/hooks/useLineData.js @@ -11,97 +11,84 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { const [tooltipContents, setTooltipContents] = useState({}); useEffect(() => { + let isCancelled = false; // Flag to cancel ongoing operations if component unmounts + const fetchData = async () => { try { - console.log("Daten werden abgerufen..."); - const response1 = await fetch(webserviceGisLinesStatusUrl); // original - //const response1 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/gisLines/webserviceGisLinesStatusUrlMock`); //von original kopiert + console.log("Fetching data..."); + const response1 = await fetch(webserviceGisLinesStatusUrl); const data1 = await response1.json(); - //console.log("Daten empfangen data1:", data1); + const response2 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/gisLines/readGisLines`); - //const response2 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/gisLines/readGisLinesMock`); const data2 = await response2.json(); - //console.log("Daten empfangen data2:", data2); + const response3 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/device/getAllStationsNames`); - //const response3 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/device/getAllStationsNamesMock`); const namesData = await response3.json(); - //console.log("Daten empfangen namesData:", namesData); - const colorsByModule = {}; - const newTooltipContents = {}; - const valueMap = {}; + if (!isCancelled) { + const colorsByModule = {}; + const newTooltipContents = {}; + const valueMap = {}; - // Logik zur Gruppierung der Daten - logGroupedData(data1.Statis); + logGroupedData(data1.Statis); - // Sortiere die Meldungen nach Level, damit die höchste Priorität (kleinster Level) zuerst kommt - const sortedStatis = [...data1.Statis].sort((a, b) => a.Level - b.Level); - //console.log("Sortierte Daten:", sortedStatis); + const sortedStatis = [...data1.Statis].sort((a, b) => a.Level - b.Level); - // Filtere Objekte mit gleichem IdLD und Modul, und Level > 0, und entferne die Objekte mit dem höchsten Level - const filteredStatis = []; - const seenKeys = new Set(); + const filteredStatis = []; + const seenKeys = new Set(); - sortedStatis.forEach((statis) => { - const key = `${statis.IdLD}-${statis.Modul}`; + sortedStatis.forEach((statis) => { + const key = `${statis.IdLD}-${statis.Modul}`; - if (statis.Level > 0) { - if (!seenKeys.has(key)) { - seenKeys.add(key); - filteredStatis.push(statis); // Behalte das Objekt mit dem niedrigsten Level (höchste Priorität) + if (statis.Level > 0) { + if (!seenKeys.has(key)) { + seenKeys.add(key); + filteredStatis.push(statis); + } + } else { + filteredStatis.push(statis); } - } else { - // Für Level -1 oder nicht relevante Meldungen einfach hinzufügen - filteredStatis.push(statis); - } - }); + }); - //console.log("Gefilterte Daten (Objekte mit höchstem Level entfernt):", filteredStatis); - - filteredStatis.forEach((statis) => { - const key = `${statis.IdLD}-${statis.Modul}`; - if (!valueMap[key]) { - valueMap[key] = { - messages: [], - messwert: undefined, - schleifenwert: undefined, - }; - } - - // Sammle Messwert und Schleifenwert - 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(statis.Message); - } - }); - - // Jetzt durch alle Prioritätslevel gehen und die Farben sowie Meldungen korrekt setzen - filteredStatis.forEach((statis) => { - const key = `${statis.IdLD}-${statis.Modul}`; - const matchingLine = data2.find((item) => item.idLD === statis.IdLD && item.idModul === statis.Modul); - - if (matchingLine) { - const prioColor = statis.PrioColor === "#ffffff" ? "green" : statis.PrioColor; - const values = valueMap[key]; - - if (!values) { - console.error(`Keine Werte gefunden für Key: ${key}`); - return; + filteredStatis.forEach((statis) => { + const key = `${statis.IdLD}-${statis.Modul}`; + if (!valueMap[key]) { + valueMap[key] = { + messages: [], + messwert: undefined, + schleifenwert: undefined, + }; } - // Nachrichtenanzeige - const messageDisplay = values.messages.map((msg) => (msg ? `${msg}
` : "")).join(""); - const prioNameDisplay = statis.PrioName && statis.PrioName !== "?" ? `(${statis.PrioName})` : ""; + 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(statis.Message); + } + }); + + filteredStatis.forEach((statis) => { + const key = `${statis.IdLD}-${statis.Modul}`; + const matchingLine = data2.find((item) => item.idLD === statis.IdLD && item.idModul === statis.Modul); + + if (matchingLine) { + const prioColor = statis.PrioColor === "#ffffff" ? "green" : statis.PrioColor; + const values = valueMap[key]; + + if (!values) { + console.error(`Keine Werte gefunden für Key: ${key}`); + return; + } + + const messageDisplay = values.messages.map((msg) => (msg ? `${msg}
` : "")).join(""); + const prioNameDisplay = statis.PrioName && statis.PrioName !== "?" ? `(${statis.PrioName})` : ""; + + colorsByModule[key] = prioColor; - // Setze die Farbe und Tooltip für jede Linie (für alle Prioritätslevel) - colorsByModule[key] = prioColor; - // Überprüfe, ob ModulTyp den Text "705-FO" enthält - if (statis.ModulTyp && statis.ModulTyp.includes("705-FO")) { newTooltipContents[key] = `
${statis.ModulName || "Unknown"} @@ -122,46 +109,38 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { ${values.schleifenwert ? `Schleifenwert: ${values.schleifenwert}` : ""}
`; - } else { - newTooltipContents[key] = ` -
- ${statis.ModulName || "Unknown"} -
- ${statis.ModulTyp || "N/A"} -
- Slot: ${statis.Modul || "N/A"} -
- Station: ${namesData[matchingLine.idLD] || "N/A"} -
-
- - ${messageDisplay} -
- ${prioNameDisplay} -
- -
- `; } - } - }); + }); - // Setze die Farben und Tooltip-Inhalte - setLineColors(colorsByModule); - setTooltipContents(newTooltipContents); - setLineStatusData(data1.Statis); + setLineColors(colorsByModule); + setTooltipContents(newTooltipContents); + setLineStatusData(data1.Statis); + } } catch (error) { - console.error("Fehler beim Abrufen der Daten:", error); + if (!isCancelled) { + console.error("Fehler beim Abrufen der Daten:", error); + } } }; + // Funktion für rekursiven Aufruf mit Timeout + const scheduleNextFetch = () => { + if (!isCancelled) { + setTimeout(async () => { + await fetchData(); + scheduleNextFetch(); + }, 20000); + } + }; + + // Starte den ersten Aufruf fetchData(); + scheduleNextFetch(); - // Setze ein Intervall, um die Daten alle 20 Sekunden erneut abzurufen - const intervalId = setInterval(fetchData, 20000); - - // Räumt das Intervall auf, wenn die Komponente entladen wird - return () => clearInterval(intervalId); + // Cleanup-Funktion, um sicherzustellen, dass keine weiteren Daten nach dem Unmount gesetzt werden + return () => { + isCancelled = true; + }; }, [webserviceGisLinesStatusUrl, setLineStatusData]); return { lineColors, tooltipContents };