edit: Lines tooltip style with Tailwind css

This commit is contained in:
ISA
2024-06-26 10:35:19 +02:00
parent 8f38fc2c62
commit 431e688fb7
2 changed files with 19 additions and 21 deletions

View File

@@ -2179,25 +2179,21 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
if (matchingLine) {
colorsByModule[matchingLine.idModul] = stat.PrioColor;
newTooltipContents[matchingLine.idModul] = `
<div class="bg-white rounded-lg m-0 p-2 ">
<span class="text-lg font-semibold text-gray-900">${stat.DpName || "Unknown"}</span><br>
<span class="text-md font-bold text-gray-800">
<span class="font-bold">ModulName :</span> ${stat.ModulName || "N/A"}
</span><br>
<span class="text-gray-800">
<span class="font-bold">Message :</span> ${stat.Message || "N/A"}
</span><br>
<!--<span class="text-gray-800">PrioColor : ${stat.PrioColor || "N/A"}</span><br>-->
<span class="text-gray-800">
<span class="font-bold">PrioName :</span> ${stat.PrioName || "N/A"}
</span><br>
<span class="text-gray-800">
<span class="font-bold">IdLD :</span> ${stat.IdLD || "N/A"}
</span><br>
<span class="text-gray-800">
<span class="font-bold">Modul :</span> ${stat.Modul || "N/A"}
</span><br>
</div>
<div class="bg-white rounded-lg m-0 p-2">
<span class="text-lg font-semibold text-gray-900">${stat.ModulName || "Unknown"}</span><br>
<span class="text-md font-bold text-gray-800">
<span class="font-bold">ModulName :</span> ${stat.ModulTyp || "N/A"}
</span><br>
<span class="text-gray-800">
<span class="font-bold">
<span class="inline-block w-2 h-2 rounded-full mr-2" style="background-color: ${stat.PrioColor || "#000000"};"></span>
${stat.Message || "N/A"}
</span>
</span>
<span class="text-gray-800">
<span style="color: ${stat.PrioColor || "#000000"};">(${stat.PrioName || "N/A"})</span>
</span><br>
</div>
`;
}

View File

@@ -13,7 +13,8 @@ export default function handler(req, res) {
Modul: 1,
DpName: "KUE01_Ausfall",
ModulName: "42 Wippershain Sender",
ModulTyp: "nicht vorhanden",
// ModulTyp: "nicht vorhanden",
ModulTyp: "KÜ705-FO",
Message: "KUEG 01: 42 Wippershain Sender Messwerkausfall kommend",
Level: 4,
PrioColor: "#FFFF00",
@@ -25,7 +26,8 @@ export default function handler(req, res) {
Modul: 3,
DpName: "KUE03_Ausfall",
ModulName: "42 Solz Sender",
ModulTyp: "nicht vorhanden",
//ModulTyp: "nicht vorhanden",
ModulTyp: "KÜSS V2",
Message: "KUEG 03: 42 Solz Sender Messwerkausfall kommend",
Level: 4,
PrioColor: "#FF0000",