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

feat: lade Linienstatusdaten vollständig aus Redux Store

Browse Source 
- 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
This commit is contained in:
ISA
2025-05-22 14:27:52 +02:00
parent 72de632c86
commit ef3c511694
5 changed files with 94 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
hooks/useLineData.js
View File

@@ -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) => `<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 ");
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) => `<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 };
};