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

feat: Display multiple messages with individual prioColor in line tooltips

Browse Source 
- Added support for displaying multiple messages per module in tooltips
- Each message now correctly displays its respective prioColor
- Enhanced message rendering for better visual clarity, including colored indicators for each message
- Fixed sorting and filtering of messages based on level and status
This commit is contained in:
ISA
2024-09-10 20:46:12 +02:00
parent d132ac000a
commit 6167cbe5b2
2 changed files with 55 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
.env.local
View File

@@ -15,31 +15,31 @@
######################### #########################
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.30/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"
#########################
#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.30/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"
#########################
DB_HOST=192.168.10.168
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.168/talas5/devices/"
#NEXT_PUBLIC_SERVER_URL="http://192.168.10.167" NEXT_PUBLIC_SERVER_URL="http://192.168.10.168"
#NEXT_PUBLIC_PROXY_TARGET="http://192.168.10.167" NEXT_PUBLIC_PROXY_TARGET="http://192.168.10.168"
#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"
######################### online ######################### online
#NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" #NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

78
hooks/useLineData.js
View File

@@ -30,28 +30,12 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
const newTooltipContents = {}; const newTooltipContents = {};
const valueMap = {}; const valueMap = {};
logGroupedData(data1.Statis); // Sortiere Statis nach Level
const sortedStatis = [...data1.Statis].sort((a, b) => a.Level - b.Level); const sortedStatis = [...data1.Statis].sort((a, b) => a.Level - b.Level);
const filteredStatis = [];
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 (!seenKeys.has(key)) {
seenKeys.add(key);
filteredStatis.push(statis);
}
} else {
filteredStatis.push(statis);
}
});
filteredStatis.forEach((statis) => {
const key = `${statis.IdLD}-${statis.Modul}`;
if (!valueMap[key]) { if (!valueMap[key]) {
valueMap[key] = { valueMap[key] = {
messages: [], messages: [],
@@ -60,23 +44,28 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
}; };
} }
// 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;
} }
if (statis.DpName.endsWith("_Schleifenwert") && !valueMap[key].schleifenwert) { if (statis.DpName.endsWith("_Schleifenwert") && !valueMap[key].schleifenwert) {
valueMap[key].schleifenwert = statis.Value; valueMap[key].schleifenwert = statis.Value;
} }
// Füge die Meldung zusammen mit der entsprechenden PrioColor hinzu
if (statis.Message && statis.Message !== "?") { if (statis.Message && statis.Message !== "?") {
valueMap[key].messages.push(statis.Message); valueMap[key].messages.push({
message: statis.Message,
prioColor: statis.PrioColor && statis.PrioColor !== "#ffffff" ? statis.PrioColor : "green",
});
} }
}); });
filteredStatis.forEach((statis) => { sortedStatis.forEach((statis) => {
const key = `${statis.IdLD}-${statis.Modul}`; 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 values = valueMap[key]; const values = valueMap[key];
if (!values) { if (!values) {
@@ -84,31 +73,36 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
return; return;
} }
const messageDisplay = values.messages.map((msg) => (msg ? `<span class="inline-block text-gray-800">${msg}</span><br>` : "")).join(""); // Generiere das HTML für jede Meldung mit der jeweiligen PrioColor
const messageDisplay =
values.messages.length > 0
? 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("")
: "";
const prioNameDisplay = statis.PrioName && statis.PrioName !== "?" ? `(${statis.PrioName})` : ""; const prioNameDisplay = statis.PrioName && statis.PrioName !== "?" ? `(${statis.PrioName})` : "";
colorsByModule[key] = prioColor; // Setze die Hauptfarbe für das Modul basierend auf der PrioColor der ersten Meldung
colorsByModule[key] = values.messages.length > 0 ? values.messages[0].prioColor : "green";
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>
<br> <br>
<span class="text-md font-bold text-gray-800">${statis.ModulTyp || "N/A"}</span> <span class="text-md font-bold text-gray-800">${statis.ModulTyp || "N/A"}</span>
<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> <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> ${messageDisplay} <!-- Alle Meldungen werden hier mit ihrer Farbe angezeigt -->
${messageDisplay} </div>
</div> <span class="text-gray-800">${prioNameDisplay}</span>
<span class="text-gray-800" style="color: ${prioColor || "#000000"};">${prioNameDisplay}</span> <br>
<br> ${values.messwert ? `<span class="inline-block text-gray-800">Messwert: ${values.messwert}</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>` : ""}
${values.schleifenwert ? `<span class="inline-block text-gray-800">Schleifenwert: ${values.schleifenwert}</span>` : ""} </div>
</div> `;
`;
} }
}); });
@@ -206,7 +200,7 @@ function logGroupedData(statisList) {
} }
}); });
//console.log("Aggregierte und gruppierte Daten (gefiltert):", formattedData); console.log("Aggregierte und gruppierte Daten (gefiltert):", formattedData);
} }
export default useLineData; export default useLineData;