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

refactor: Tooltip-HTML-Generierung aus useLineData ausgelagert

Browse Source 
- Funktion `generateLineTooltipContent` aus `useLineData.js` extrahiert
- Neue Datei: `components/gisPolylines/tooltip/generateLineTooltipContent.js`
- Trennung von Logik (Hook) und Darstellung (Tooltip-HTML)
- Verbesserte Lesbarkeit und Wiederverwendbarkeit der Tooltip-Generierung
This commit is contained in:
ISA
2025-06-25 07:49:52 +02:00
parent 7c4fbc3988
commit 89403164c6
7 changed files with 43 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
components/gisPolylines/tooltip/useLineData.js
View File

@@ -1,9 +1,10 @@
// hooks/useLineData.js //fix v1.0.8.1
// /components/gisPolylines/tooltip/useLineData.js
import { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { selectGisLinesStatusFromWebservice } from "@/redux/slices/webservice/gisLinesStatusSlice";
import { fetchGisLinesThunk } from "@/redux/thunks/database/polylines/fetchGisLinesThunk";
import { fetchGisLinesStatusThunk } from "@/../redux/thunks/webservice/fetchGisLinesStatusThunk";
import { generateLineTooltipContent } from "./generateLineTooltipContent";
const useLineData = () => {
const dispatch = useDispatch();
@@ -66,45 +67,10 @@ const useLineData = () => {
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>
`;
newTooltipContents[key] = generateLineTooltipContent(statis, matchingLine, values);
}
});