Filter duplicate entries by IdLD and Modul, keeping only the entry with the highest priority (lowest Level). Added console log for filtered results.
This commit is contained in:
40
.env.local
40
.env.local
@@ -17,30 +17,30 @@
|
|||||||
#########################
|
#########################
|
||||||
|
|
||||||
|
|
||||||
#DB_HOST=10.10.0.70
|
DB_HOST=10.10.0.70
|
||||||
#DB_USER=root
|
|
||||||
#DB_PASSWORD="root#$"
|
|
||||||
#DB_NAME=talas_v5
|
|
||||||
#DB_PORT=3306
|
|
||||||
|
|
||||||
|
|
||||||
#########################
|
|
||||||
|
|
||||||
#NEXT_PUBLIC_BASE_URL="http://10.10.0.70/talas5/devices/"
|
|
||||||
#NEXT_PUBLIC_SERVER_URL="http://10.10.0.70"
|
|
||||||
#NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.70"
|
|
||||||
#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"
|
|
||||||
NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
||||||
#########################
|
|
||||||
|
|
||||||
DB_HOST=192.168.10.167
|
|
||||||
DB_USER=root
|
DB_USER=root
|
||||||
DB_PASSWORD="root#$"
|
DB_PASSWORD="root#$"
|
||||||
DB_NAME=talas_v5
|
DB_NAME=talas_v5
|
||||||
DB_PORT=3306
|
DB_PORT=3306
|
||||||
|
|
||||||
|
|
||||||
|
#########################
|
||||||
|
|
||||||
|
NEXT_PUBLIC_BASE_URL="http://10.10.0.70/talas5/devices/"
|
||||||
|
NEXT_PUBLIC_SERVER_URL="http://10.10.0.70"
|
||||||
|
NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.70"
|
||||||
|
#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"
|
||||||
|
NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||||
|
#########################
|
||||||
|
|
||||||
|
#DB_HOST=192.168.10.167
|
||||||
|
#DB_USER=root
|
||||||
|
#DB_PASSWORD="root#$"
|
||||||
|
#DB_NAME=talas_v5
|
||||||
|
#DB_PORT=3306
|
||||||
#########################
|
#########################
|
||||||
#URLs für den Client (clientseitig)
|
#URLs für den Client (clientseitig)
|
||||||
NEXT_PUBLIC_BASE_URL="http://192.168.10.167/talas5/devices/"
|
#NEXT_PUBLIC_BASE_URL="http://192.168.10.167/talas5/devices/"
|
||||||
NEXT_PUBLIC_SERVER_URL="http://192.168.10.167"
|
#NEXT_PUBLIC_SERVER_URL="http://192.168.10.167"
|
||||||
NEXT_PUBLIC_PROXY_TARGET="http://192.168.10.167"
|
#NEXT_PUBLIC_PROXY_TARGET="http://192.168.10.167"
|
||||||
#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://192.168.10.14:3000/mapTiles/{z}/{x}/{y}.png"
|
#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://192.168.10.14:3000/mapTiles/{z}/{x}/{y}.png"
|
||||||
|
|||||||
166
hooks/useLineData copy.js
Normal file
166
hooks/useLineData copy.js
Normal file
@@ -0,0 +1,166 @@
|
|||||||
|
// /hooks/useLineData.js
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { SERVER_URL } from "../config/urls";
|
||||||
|
|
||||||
|
const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
|
||||||
|
const [lineColors, setLineColors] = useState({});
|
||||||
|
const [tooltipContents, setTooltipContents] = useState({});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchData = async () => {
|
||||||
|
try {
|
||||||
|
console.log("Daten werden abgerufen...");
|
||||||
|
const response1 = await fetch(webserviceGisLinesStatusUrl);
|
||||||
|
const data1 = await response1.json();
|
||||||
|
console.log("Daten vom Webservice:", data1);
|
||||||
|
const response2 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/gisLines/readGisLines`);
|
||||||
|
const data2 = await response2.json();
|
||||||
|
console.log("GIS Linien Daten:", data2);
|
||||||
|
|
||||||
|
// Abrufen der Namen basierend auf idLD
|
||||||
|
const response3 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/station/getAllStationsNames`);
|
||||||
|
const namesData = await response3.json();
|
||||||
|
console.log("Namen der Linien:", namesData);
|
||||||
|
|
||||||
|
const colorsByModule = {};
|
||||||
|
const newTooltipContents = {};
|
||||||
|
const valueMap = {};
|
||||||
|
|
||||||
|
logGroupedData(data1.Statis);
|
||||||
|
|
||||||
|
data1.Statis.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(statis.Message);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
data1.Statis.reverse().forEach((statis) => {
|
||||||
|
const matchingLine = data2.find((item) => item.idLD === statis.IdLD && item.idModul === statis.Modul);
|
||||||
|
if (matchingLine) {
|
||||||
|
const prioColor = statis.PrioColor === "#ffffff" ? "green" : statis.PrioColor;
|
||||||
|
const key = `${matchingLine.idLD}-${matchingLine.idModul}`; // Sicherstellen, dass der Key eindeutig ist
|
||||||
|
const values = valueMap[key];
|
||||||
|
|
||||||
|
if (!values) {
|
||||||
|
console.error(`No values found for key: ${key}`); // Debug: Überprüfe, ob Werte existieren
|
||||||
|
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; // Stelle sicher, dass der Key richtig verwendet wird
|
||||||
|
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> <!-- Zeige den Namen -->
|
||||||
|
<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>
|
||||||
|
${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:", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchData();
|
||||||
|
}, [webserviceGisLinesStatusUrl, setLineStatusData]);
|
||||||
|
|
||||||
|
return { lineColors, tooltipContents };
|
||||||
|
};
|
||||||
|
|
||||||
|
function logGroupedData(statisList) {
|
||||||
|
const grouped = statisList.reduce((acc, item) => {
|
||||||
|
const { IdLD, Modul, Level, PrioColor, PrioName, ModulName, ModulTyp, Message, DpName, Value } = item;
|
||||||
|
|
||||||
|
if (!acc[IdLD]) {
|
||||||
|
acc[IdLD] = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!acc[IdLD][Modul]) {
|
||||||
|
acc[IdLD][Modul] = {
|
||||||
|
ModulName: ModulName || "Unknown",
|
||||||
|
ModulTyp: ModulTyp || "N/A",
|
||||||
|
TotalLevel: Level,
|
||||||
|
PrioColors: new Set(),
|
||||||
|
PrioNames: new Set(),
|
||||||
|
Messages: [],
|
||||||
|
Messwert: undefined,
|
||||||
|
Schleifenwert: undefined,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
acc[IdLD][Modul].PrioColors.add(PrioColor);
|
||||||
|
acc[IdLD][Modul].PrioNames.add(PrioName);
|
||||||
|
if (Message && Message !== "?") {
|
||||||
|
acc[IdLD][Modul].Messages.push(Message);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (DpName.endsWith("_Messwert") && !acc[IdLD][Modul].Messwert) {
|
||||||
|
acc[IdLD][Modul].Messwert = Value;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (DpName.endsWith("_Schleifenwert") && !acc[IdLD][Modul].Schleifenwert) {
|
||||||
|
acc[IdLD][Modul].Schleifenwert = Value;
|
||||||
|
}
|
||||||
|
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
|
||||||
|
const formattedData = {};
|
||||||
|
Object.entries(grouped).forEach(([stationId, modules]) => {
|
||||||
|
const filteredModules = Object.entries(modules)
|
||||||
|
.filter(([modulId, data]) => data.ModulName !== "?")
|
||||||
|
.map(([modulId, data]) => ({
|
||||||
|
Modul: modulId,
|
||||||
|
ModulName: data.ModulName,
|
||||||
|
ModulTyp: data.ModulTyp,
|
||||||
|
TotalLevel: data.TotalLevel,
|
||||||
|
PrioColors: Array.from(data.PrioColors).join(", "),
|
||||||
|
PrioNames: Array.from(data.PrioNames).join(", "),
|
||||||
|
Messages: data.Messages.join(" | "),
|
||||||
|
Messwert: data.Messwert,
|
||||||
|
Schleifenwert: data.Schleifenwert,
|
||||||
|
}));
|
||||||
|
|
||||||
|
if (filteredModules.length > 0) {
|
||||||
|
formattedData[stationId] = filteredModules;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log("Aggregierte und gruppierte Daten (gefiltert):", formattedData);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default useLineData;
|
||||||
@@ -1,4 +1,3 @@
|
|||||||
// /hooks/useLineData.js
|
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { SERVER_URL } from "../config/urls";
|
import { SERVER_URL } from "../config/urls";
|
||||||
|
|
||||||
@@ -12,23 +11,43 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
|
|||||||
console.log("Daten werden abgerufen...");
|
console.log("Daten werden abgerufen...");
|
||||||
const response1 = await fetch(webserviceGisLinesStatusUrl);
|
const response1 = await fetch(webserviceGisLinesStatusUrl);
|
||||||
const data1 = await response1.json();
|
const data1 = await response1.json();
|
||||||
console.log("Daten vom Webservice:", 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 data2 = await response2.json();
|
const data2 = await response2.json();
|
||||||
console.log("GIS Linien Daten:", data2);
|
|
||||||
|
|
||||||
// Abrufen der Namen basierend auf idLD
|
|
||||||
const response3 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/station/getAllStationsNames`);
|
const response3 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/station/getAllStationsNames`);
|
||||||
const namesData = await response3.json();
|
const namesData = await response3.json();
|
||||||
console.log("Namen der Linien:", namesData);
|
|
||||||
|
|
||||||
const colorsByModule = {};
|
const colorsByModule = {};
|
||||||
const newTooltipContents = {};
|
const newTooltipContents = {};
|
||||||
const valueMap = {};
|
const valueMap = {};
|
||||||
|
|
||||||
|
// Logik zur Gruppierung der Daten
|
||||||
logGroupedData(data1.Statis);
|
logGroupedData(data1.Statis);
|
||||||
|
|
||||||
data1.Statis.forEach((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);
|
||||||
|
|
||||||
|
// 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();
|
||||||
|
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
} 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}`;
|
const key = `${statis.IdLD}-${statis.Modul}`;
|
||||||
if (!valueMap[key]) {
|
if (!valueMap[key]) {
|
||||||
valueMap[key] = {
|
valueMap[key] = {
|
||||||
@@ -37,6 +56,8 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
|
|||||||
schleifenwert: undefined,
|
schleifenwert: undefined,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Sammle Messwert und Schleifenwert
|
||||||
if (statis.DpName.endsWith("_Messwert") && statis.Value !== "True" && !valueMap[key].messwert) {
|
if (statis.DpName.endsWith("_Messwert") && statis.Value !== "True" && !valueMap[key].messwert) {
|
||||||
valueMap[key].messwert = statis.Value;
|
valueMap[key].messwert = statis.Value;
|
||||||
}
|
}
|
||||||
@@ -48,22 +69,26 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
data1.Statis.reverse().forEach((statis) => {
|
// 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);
|
const matchingLine = data2.find((item) => item.idLD === statis.IdLD && item.idModul === statis.Modul);
|
||||||
|
|
||||||
if (matchingLine) {
|
if (matchingLine) {
|
||||||
const prioColor = statis.PrioColor === "#ffffff" ? "green" : statis.PrioColor;
|
const prioColor = statis.PrioColor === "#ffffff" ? "green" : statis.PrioColor;
|
||||||
const key = `${matchingLine.idLD}-${matchingLine.idModul}`; // Sicherstellen, dass der Key eindeutig ist
|
|
||||||
const values = valueMap[key];
|
const values = valueMap[key];
|
||||||
|
|
||||||
if (!values) {
|
if (!values) {
|
||||||
console.error(`No values found for key: ${key}`); // Debug: Überprüfe, ob Werte existieren
|
console.error(`Keine Werte gefunden für Key: ${key}`);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Nachrichtenanzeige
|
||||||
const messageDisplay = values.messages.map((msg) => (msg ? `<span class="inline-block text-gray-800">${msg}</span><br>` : "")).join("");
|
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})` : "";
|
const prioNameDisplay = statis.PrioName && statis.PrioName !== "?" ? `(${statis.PrioName})` : "";
|
||||||
|
|
||||||
colorsByModule[key] = prioColor; // Stelle sicher, dass der Key richtig verwendet wird
|
// Setze die Farbe und Tooltip für jede Linie (für alle Prioritätslevel)
|
||||||
|
colorsByModule[key] = prioColor;
|
||||||
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>
|
||||||
@@ -72,7 +97,7 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
|
|||||||
<br>
|
<br>
|
||||||
<span class="text-md font-bold text-gray-800">Slot: ${statis.Modul || "N/A"}</span>
|
<span class="text-md font-bold text-gray-800">Slot: ${statis.Modul || "N/A"}</span>
|
||||||
<br>
|
<br>
|
||||||
<span class="text-md font-bold text-gray-800">Station: ${namesData[matchingLine.idLD] || "N/A"}</span> <!-- Zeige den Namen -->
|
<span class="text-md font-bold text-gray-800">Station: ${namesData[matchingLine.idLD] || "N/A"}</span>
|
||||||
<br>
|
<br>
|
||||||
<div style="max-width: 100%; overflow-wrap: break-word; word-break: break-word; white-space: normal;">
|
<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>
|
<span class="inline-block w-2 h-2 rounded-full mr-2" style="background-color: ${prioColor || "#000000"};"></span>
|
||||||
@@ -87,6 +112,7 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Setze die Farben und Tooltip-Inhalte
|
||||||
setLineColors(colorsByModule);
|
setLineColors(colorsByModule);
|
||||||
setTooltipContents(newTooltipContents);
|
setTooltipContents(newTooltipContents);
|
||||||
setLineStatusData(data1.Statis);
|
setLineStatusData(data1.Statis);
|
||||||
@@ -96,11 +122,18 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
fetchData();
|
fetchData();
|
||||||
|
|
||||||
|
// 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);
|
||||||
}, [webserviceGisLinesStatusUrl, setLineStatusData]);
|
}, [webserviceGisLinesStatusUrl, setLineStatusData]);
|
||||||
|
|
||||||
return { lineColors, tooltipContents };
|
return { lineColors, tooltipContents };
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Funktion zur Gruppierung der Daten
|
||||||
function logGroupedData(statisList) {
|
function logGroupedData(statisList) {
|
||||||
const grouped = statisList.reduce((acc, item) => {
|
const grouped = statisList.reduce((acc, item) => {
|
||||||
const { IdLD, Modul, Level, PrioColor, PrioName, ModulName, ModulTyp, Message, DpName, Value } = item;
|
const { IdLD, Modul, Level, PrioColor, PrioName, ModulName, ModulTyp, Message, DpName, Value } = item;
|
||||||
|
|||||||
Reference in New Issue
Block a user