Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace setInterval with recursive setTimeout for better control

Browse Source 
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
This commit is contained in:
ISA
2024-09-10 14:29:26 +02:00
parent 77bc63f22e
commit d132ac000a
1 changed files with 84 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
hooks/useLineData.js
View File

@@ -11,97 +11,84 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
const [tooltipContents, setTooltipContents] = useState({}); const [tooltipContents, setTooltipContents] = useState({});
useEffect(() => { useEffect(() => {
let isCancelled = false; // Flag to cancel ongoing operations if component unmounts
const fetchData = async () => { const fetchData = async () => {
try { try {
console.log("Daten werden abgerufen..."); console.log("Fetching data...");
const response1 = await fetch(webserviceGisLinesStatusUrl); // original const response1 = await fetch(webserviceGisLinesStatusUrl);
//const response1 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/gisLines/webserviceGisLinesStatusUrlMock`); //von original kopiert
const data1 = await response1.json(); 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/readGisLines`);
//const response2 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/gisLines/readGisLinesMock`);
const data2 = await response2.json(); 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/getAllStationsNames`);
//const response3 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/device/getAllStationsNamesMock`);
const namesData = await response3.json(); const namesData = await response3.json();
//console.log("Daten empfangen namesData:", namesData);
const colorsByModule = {}; if (!isCancelled) {
const newTooltipContents = {}; const colorsByModule = {};
const valueMap = {}; 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);
const sortedStatis = [...data1.Statis].sort((a, b) => a.Level - b.Level);
//console.log("Sortierte Daten:", sortedStatis);
// Filtere Objekte mit gleichem IdLD und Modul, und Level > 0, und entferne die Objekte mit dem höchsten Level const filteredStatis = [];
const filteredStatis = []; const seenKeys = new Set();
const seenKeys = new Set();
sortedStatis.forEach((statis) => { sortedStatis.forEach((statis) => {
const key = `${statis.IdLD}-${statis.Modul}`; const key = `${statis.IdLD}-${statis.Modul}`;
if (statis.Level > 0) { if (statis.Level > 0) {
if (!seenKeys.has(key)) { if (!seenKeys.has(key)) {
seenKeys.add(key); seenKeys.add(key);
filteredStatis.push(statis); // Behalte das Objekt mit dem niedrigsten Level (höchste Priorität) 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}`;
filteredStatis.forEach((statis) => { if (!valueMap[key]) {
const key = `${statis.IdLD}-${statis.Modul}`; valueMap[key] = {
if (!valueMap[key]) { messages: [],
valueMap[key] = { messwert: undefined,
messages: [], schleifenwert: undefined,
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;
} }
// Nachrichtenanzeige if (statis.DpName.endsWith("_Messwert") && statis.Value !== "True" && !valueMap[key].messwert) {
const messageDisplay = values.messages.map((msg) => (msg ? `<span class="inline-block text-gray-800">${msg}</span><br>` : "")).join(""); valueMap[key].messwert = statis.Value;
const prioNameDisplay = statis.PrioName && statis.PrioName !== "?" ? `(${statis.PrioName})` : ""; }
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 ? `<span class="inline-block text-gray-800">${msg}</span><br>` : "")).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] = ` newTooltipContents[key] = `
<div class="bg-white rounded-lg m-0 p-2 w-[210px]"> <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> <span class="text-lg font-semibold text-gray-900">${statis.ModulName || "Unknown"}</span>
@@ -122,46 +109,38 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
${values.schleifenwert ? `<span class="inline-block text-gray-800">Schleifenwert: ${values.schleifenwert}</span>` : ""} ${values.schleifenwert ? `<span class="inline-block text-gray-800">Schleifenwert: ${values.schleifenwert}</span>` : ""}
</div> </div>
`; `;
} else {
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;">
<span class="inline-block w-2 h-2 rounded-full mr-2" style="background-color: ${prioColor || "#000000"};"></span>
${messageDisplay}
</div>
<span class="text-gray-800" style="color: ${prioColor || "#000000"};">${prioNameDisplay}</span>
<br>
</div>
`;
} }
} });
});
// Setze die Farben und Tooltip-Inhalte setLineColors(colorsByModule);
setLineColors(colorsByModule); setTooltipContents(newTooltipContents);
setTooltipContents(newTooltipContents); setLineStatusData(data1.Statis);
setLineStatusData(data1.Statis); }
} catch (error) { } 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(); fetchData();
scheduleNextFetch();
// Setze ein Intervall, um die Daten alle 20 Sekunden erneut abzurufen // Cleanup-Funktion, um sicherzustellen, dass keine weiteren Daten nach dem Unmount gesetzt werden
const intervalId = setInterval(fetchData, 20000); return () => {
isCancelled = true;
// Räumt das Intervall auf, wenn die Komponente entladen wird };
return () => clearInterval(intervalId);
}, [webserviceGisLinesStatusUrl, setLineStatusData]); }, [webserviceGisLinesStatusUrl, setLineStatusData]);
return { lineColors, tooltipContents }; return { lineColors, tooltipContents };