polylines tooltip content

2024-08-10 10:32:37 +02:00
parent b1f7b700ca
commit b7116a1e6f
142 changed files with 14451 additions and 4281 deletions
--- a/hooks/useLineData
+++ b/hooks/useLineData
@@ -0,0 +1,93 @@
+// /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({});
+  const [locationDevices, setLocationDevices] = useState([]);
+
+  // Funktion zum Abrufen der Stationsnamen
+  useEffect(() => {
+    const fetchLocationDevices = async () => {
+      try {
+        const response = await fetch(`${process.env.NEXT_PUBLIC_SERVER_URL}:3000/api/talas_v5_DB/station/getStationNameByIdLD`);
+        const data = await response.json();
+        setLocationDevices(data);
+        console.log("Stationen namen:", data);
+      } catch (error) {
+        console.error("Fehler beim Abrufen der Stationen:", error);
+      }
+    };
+
+    fetchLocationDevices();
+  }, []);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response1 = await fetch(webserviceGisLinesStatusUrl);
+        const data1 = await response1.json();
+        const response2 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/gisLines/readGisLines`);
+        const data2 = await response2.json();
+
+        const colorsByModule = {};
+        const newTooltipContents = {};
+        const reversedData = data1.Statis ? data1.Statis.reverse() : [];
+
+        reversedData.forEach((stat) => {
+          // Finden der passenden Linie
+          const matchingLine = data2.find((item) => item.idLD === stat.IdLD && item.idModul === stat.Modul);
+
+          if (matchingLine) {
+            // Ermitteln der Farbe basierend auf PrioColor
+            const prioColor = stat.PrioColor === "#ffffff" ? "green" : stat.PrioColor;
+            colorsByModule[matchingLine.idModul] = prioColor;
+
+            // Finden des passenden Stationsnamens
+            const locationDevice = locationDevices.find((device) => device.idLD === stat.IdLD);
+
+            newTooltipContents[matchingLine.idModul] = `
+              <div class="bg-white rounded-lg m-0 p-2 w-[210px]">
+                  <span class="text-lg font-semibold text-gray-900">${stat.ModulName || "Unknown"}</span>
+                  <br>
+                  <span class="text-md font-bold text-gray-800">Station: ${locationDevice ? locationDevice.name : "Unbekannt"}</span>
+                  <br>
+                  <span class="text-md font-bold text-gray-800">${stat.ModulTyp || "N/A"}</span>
+                  <br>
+                  <span class="text-md font-bold text-gray-800">Slot: ${stat.Modul || "N/A"}</span>
+                  <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>
+                      <span class="inline-block text-gray-800">${stat.Message || "N/A"}</span>
+                  </div>
+                  <span class="text-gray-800" style="color: ${prioColor || "#000000"};">(${stat.PrioName || "N/A"})</span>
+                  <br>
+                  <div style="max-width: 100%; overflow-wrap: break-word; word-break: break-word; white-space: normal;">
+                      <span class="inline-block text-gray-800">${stat.DpName || "N/A"}</span>
+                      : <span class="inline-block text-gray-800">${stat.Value || "N/A"}</span>
+                  </div>
+              </div>
+            `;
+          }
+        });
+
+        setLineColors(colorsByModule);
+        setTooltipContents(newTooltipContents);
+        setLineStatusData(reversedData);
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+    };
+
+    fetchData();
+
+    const interval = setInterval(fetchData, 300000); // 300000 ms = 5 Minuten
+
+    return () => clearInterval(interval);
+  }, [webserviceGisLinesStatusUrl, setLineStatusData, locationDevices]);
+
+  return { lineColors, tooltipContents };
+};
+
+export default useLineData;