Replace setInterval with recursive setTimeout for better control
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
@@ -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 ? `<span class="inline-block text-gray-800">${msg}</span><br>` : "")).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 ? `<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] = `
|
||||
<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>
|
||||
@@ -122,46 +109,38 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
|
||||
${values.schleifenwert ? `<span class="inline-block text-gray-800">Schleifenwert: ${values.schleifenwert}</span>` : ""}
|
||||
</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);
|
||||
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 };
|
||||
|
||||
Reference in New Issue
Block a user