- 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
36 lines
1.3 KiB
JavaScript
36 lines
1.3 KiB
JavaScript
export function generateLineTooltipContent(statis, matchingLine, values) {
|
|
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("");
|
|
|
|
return `
|
|
<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>
|
|
`;
|
|
}
|