Version 1.0.2 mit node_modules Verzeichnis

hooks/layers/useGmaMarkersLayer.js

@@ -1,26 +1,49 @@
-// /hooks/layers/useGmaMarkersLayer.js
 import { useEffect } from "react";
 import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
 
-const useGmaMarkersLayer = (map, gmaMarkers, GisStationsMeasurements, GMA, oms) => {
+const useGmaMarkersLayer = (
+  map,
+  gmaMarkers,
+  GisStationsMeasurements,
+  GMA,
+  oms
+) => {
   useEffect(() => {
     if (map && gmaMarkers.length) {
-      const gmaMeasurements = GisStationsMeasurements.filter((m) => m.Gr === "GMA");
-      let area_name = "";
-      let measurements = {};
-
-      gmaMeasurements.forEach((m) => {
-        area_name = m.Area_Name;
-        measurements[m.Na] = m.Val;
-      });
+      // Filtere die relevanten Messungen für Fahrbahnzustand
+      const gmaMeasurements = GisStationsMeasurements.filter(
+        (m) => m.Gr === "Fahrbahnzustand"
+      );
 
       gmaMarkers.forEach((marker) => {
         marker.addTo(map);
         oms.addMarker(marker);
 
-        // Logging the data to debug
-        //console.log("Marker Data:", { area_name, measurements });
+        // Finde die Messungen, die zu diesem Marker gehören
+        const relevantMeasurements = gmaMeasurements.filter(
+          (m) => m.Area_Name === marker.options.areaName
+        );
 
+        let measurements = {};
+        let area_name = marker.options.areaName;
+
+        relevantMeasurements.forEach((m) => {
+          measurements[m.Na] = m.Val;
+        });
+
+        // Überprüfe, ob die Messwerte vorhanden sind, und setze Standardwerte
+        const lt = measurements["LT"] || "Datenlücke";
+        const fbt = measurements["FBT"] || "nicht verfügbar";
+        const gt = measurements["GT"] || "nicht verfügbar";
+        const rlf = measurements["RLF"] || "nicht verfügbar";
+
+        // Log die aktuellen Messwerte für den Marker
+   /*      
+        console.log(
+          `Marker at ${area_name} - LT: ${lt}, FBT: ${fbt}, GT: ${gt}, RLF: ${rlf}`
+        );
+ */
+        // Tooltip für den Marker binden
         marker.bindTooltip(
           `
             <div class="p-0 rounded-lg bg-white bg-opacity-90">
@@ -28,16 +51,16 @@ const useGmaMarkersLayer = (map, gmaMarkers, GisStationsMeasurements, GMA, oms)
                 <span>${area_name}</span> 
               </div>
               <div class="font-bold text-xxs text-blue-700">
-                <span>LT : ${measurements.LT} °C</span> 
+                <span>LT : ${lt} °C</span> 
               </div>
               <div class="font-bold text-xxs text-red-700">
-                <span>FBT : ${measurements.FBT} °C</span> 
+                <span>FBT : ${fbt} °C</span> 
               </div>
               <div class="font-bold text-xxs text-yellow-500">
-                <span>GT : ${measurements.GT === "nicht ermittelbar" ? measurements.GT : `${measurements.GT} °C`}</span> 
+                <span>GT : ${gt}</span> 
               </div>
               <div class="font-bold text-xxs text-green-700">
-                <span>RLF : ${measurements.RLF} %</span> 
+                <span>RLF : ${rlf} %</span> 
               </div>
             </div>
           `,
@@ -48,6 +71,7 @@ const useGmaMarkersLayer = (map, gmaMarkers, GisStationsMeasurements, GMA, oms)
           }
         );
 
+        // Ereignisse für das Öffnen und Schließen des Tooltips
         marker.on("mouseover", function () {
           this.openPopup();
         });

hooks/layers/useLteModemMarkersLayer.js

@@ -0,0 +1,49 @@
+// hooks/useLteModemMarkersLayer.js
+import { useEffect, useState } from "react";
+import L from "leaflet";
+import { createAndSetDevices } from "../../utils/createAndSetDevices";
+import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
+import { checkOverlappingMarkers } from "../../utils/mapUtils";
+
+const useLteModemMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
+  const [lteModemMarkers, setLteModemMarkers] = useState([]);
+
+  useEffect(() => {
+    if (GisSystemStatic && GisSystemStatic.length && map) {
+      createAndSetDevices(10, setLteModemMarkers, GisSystemStatic, priorityConfig); // LTE Modems
+    }
+  }, [GisSystemStatic, map, priorityConfig]);
+
+  useEffect(() => {
+    if (map && lteModemMarkers.length) {
+      lteModemMarkers.forEach((marker) => {
+        marker.addTo(map);
+        oms.addMarker(marker);
+
+        // Popup on mouseover and mouseout
+        marker.on("mouseover", function () {
+          this.openPopup();
+        });
+        marker.on("mouseout", function () {
+          this.closePopup();
+        });
+
+        addContextMenuToMarker(marker);
+      });
+
+      // Disable map context menu
+      map.options.contextmenu = false;
+      map.options.contextmenuItems = [];
+
+      oms.map.options.contextmenu = false;
+      oms.map.options.contextmenuItems = [];
+
+      // Call the function to check for overlapping markers
+      checkOverlappingMarkers(oms, map);
+    }
+  }, [map, lteModemMarkers]);
+
+  return lteModemMarkers;
+};
+
+export default useLteModemMarkersLayer;

hooks/useLineData-back.js

@@ -0,0 +1,124 @@
+import { useEffect, useState } from "react";
+import { SERVER_URL } from "../config/urls";
+import { useDispatch, useSelector } from "react-redux";
+
+const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
+  const dispatch = useDispatch();
+  const messages = useSelector((state) => state.messages);
+  const [lineColors, setLineColors] = useState({});
+  const [tooltipContents, setTooltipContents] = useState({});
+
+  useEffect(() => {
+    let isCancelled = false;
+
+    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 response3 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/device/getAllStationsNames`);
+        const namesData = await response3.json();
+
+        if (!isCancelled) {
+          const colorsByModule = {};
+          const newTooltipContents = {};
+          const valueMap = {};
+
+          const sortedStatis = [...data1.Statis].sort((a, b) => a.Level - b.Level);
+
+          sortedStatis.forEach((statis) => {
+            const key = `${statis.IdLD}-${statis.Modul}`;
+
+            if (!valueMap[key]) {
+              valueMap[key] = {
+                messages: [],
+                messwert: undefined,
+                schleifenwert: undefined,
+              };
+            }
+
+            if (statis.DpName.endsWith("_Messwert") && statis.Value !== "True" && !valueMap[key].messwert) {
+              valueMap[key].messwert = statis.Value;
+            }
+            if (statis.DpName.endsWith("_Schleifenwert") && !valueMap[key].schleifenwert) {
+              valueMap[key].schleifenwert = statis.Value;
+            }
+
+            if (statis.Message && statis.Message !== "?") {
+              valueMap[key].messages.push({
+                message: statis.Message,
+                prioColor: statis.PrioColor && statis.PrioColor !== "#ffffff" ? statis.PrioColor : "green",
+              });
+            }
+          });
+
+          sortedStatis.forEach((statis) => {
+            const key = `${statis.IdLD}-${statis.Modul}`;
+            const matchingLine = data2.find((item) => item.idLD === statis.IdLD && item.idModul === statis.Modul);
+
+            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("");
+
+              const prioNameDisplay = statis.PrioName && statis.PrioName !== "?" ? `(${statis.PrioName})` : "";
+
+              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: ${namesData[matchingLine.idLD] || "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>
+              `;
+            }
+          });
+
+          setLineColors(colorsByModule);
+          setTooltipContents(newTooltipContents);
+          setLineStatusData(data1.Statis);
+        }
+      } catch (error) {
+        console.error("Fehler beim Abrufen der Daten:", error);
+        try {
+          window.location.reload();
+        } catch (reloadError) {
+          console.error("Fehler beim Neuladen der Seite:", reloadError);
+        }
+      }
+    };
+
+    const scheduleNextFetch = () => {
+      if (!isCancelled) {
+        fetchData();
+        setTimeout(scheduleNextFetch, 30000);
+      }
+    };
+
+    fetchData();
+    scheduleNextFetch();
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [webserviceGisLinesStatusUrl, setLineStatusData]);
+
+  return { lineColors, tooltipContents };
+};
+
+export default useLineData;

hooks/useLineData.js

@@ -1,98 +1,76 @@
+// hooks/useLineData.js
 import { useEffect, useState } from "react";
 import { SERVER_URL } from "../config/urls";
+import { useDispatch, useSelector } from "react-redux";
 
 const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
+  const dispatch = useDispatch();
+  const messages = useSelector((state) => state.messages);
   const [lineColors, setLineColors] = useState({});
   const [tooltipContents, setTooltipContents] = useState({});
 
   useEffect(() => {
+    let isCancelled = false;
+
     const fetchData = async () => {
       try {
-        console.log("Daten werden abgerufen...");
         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 response3 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/station/getAllStationsNames`);
+
+        const response3 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/device/getAllStationsNames`);
         const namesData = await response3.json();
 
-        const colorsByModule = {};
-        const newTooltipContents = {};
-        const valueMap = {};
+        if (!isCancelled) {
+          const colorsByModule = {};
+          const newTooltipContents = {};
+          const valueMap = {};
 
-        // Logik zur Gruppierung der Daten
-        logGroupedData(data1.Statis);
+          const sortedStatis = [...data1.Statis].sort((a, b) => a.Level - b.Level);
 
-        // Sortiere die Meldungen nach Level, damit die höchste Priorität (kleinster Level) zuerst kommt
-        const sortedStatis = [...data1.Statis].sort((a, b) => a.Level - b.Level);
-        console.log("Sortierte Daten:", sortedStatis);
+          sortedStatis.forEach((statis) => {
+            const key = `${statis.IdLD}-${statis.Modul}`;
 
-        // Filtere Objekte mit gleichem IdLD und Modul, und Level > 0, und entferne die Objekte mit dem höchsten Level
-        const filteredStatis = [];
-        const seenKeys = new Set();
-
-        sortedStatis.forEach((statis) => {
-          const key = `${statis.IdLD}-${statis.Modul}`;
-
-          if (statis.Level > 0) {
-            if (!seenKeys.has(key)) {
-              seenKeys.add(key);
-              filteredStatis.push(statis); // Behalte das Objekt mit dem niedrigsten Level (höchste Priorität)
-            }
-          } else {
-            // Für Level -1 oder nicht relevante Meldungen einfach hinzufügen
-            filteredStatis.push(statis);
-          }
-        });
-
-        console.log("Gefilterte Daten (Objekte mit höchstem Level entfernt):", filteredStatis);
-
-        filteredStatis.forEach((statis) => {
-          const key = `${statis.IdLD}-${statis.Modul}`;
-          if (!valueMap[key]) {
-            valueMap[key] = {
-              messages: [],
-              messwert: undefined,
-              schleifenwert: undefined,
-            };
-          }
-
-          // Sammle Messwert und Schleifenwert
-          if (statis.DpName.endsWith("_Messwert") && statis.Value !== "True" && !valueMap[key].messwert) {
-            valueMap[key].messwert = statis.Value;
-          }
-          if (statis.DpName.endsWith("_Schleifenwert") && !valueMap[key].schleifenwert) {
-            valueMap[key].schleifenwert = statis.Value;
-          }
-          if (statis.Message && statis.Message !== "?") {
-            valueMap[key].messages.push(statis.Message);
-          }
-        });
-
-        // Jetzt durch alle Prioritätslevel gehen und die Farben sowie Meldungen korrekt setzen
-        filteredStatis.forEach((statis) => {
-          const key = `${statis.IdLD}-${statis.Modul}`;
-          const matchingLine = data2.find((item) => item.idLD === statis.IdLD && item.idModul === statis.Modul);
-
-          if (matchingLine) {
-            const prioColor = statis.PrioColor === "#ffffff" ? "green" : statis.PrioColor;
-            const values = valueMap[key];
-
-            if (!values) {
-              console.error(`Keine Werte gefunden für Key: ${key}`);
-              return;
+            if (!valueMap[key]) {
+              valueMap[key] = {
+                messages: [],
+                messwert: undefined,
+                schleifenwert: undefined,
+              };
             }
 
-            // Nachrichtenanzeige
-            const messageDisplay = values.messages.map((msg) => (msg ? `<span class="inline-block text-gray-800">${msg}</span><br>` : "")).join("");
-            const prioNameDisplay = statis.PrioName && statis.PrioName !== "?" ? `(${statis.PrioName})` : "";
+            if (statis.DpName.endsWith("_Messwert") && statis.Value !== "True" && !valueMap[key].messwert) {
+              valueMap[key].messwert = statis.Value;
+            }
+            if (statis.DpName.endsWith("_Schleifenwert") && !valueMap[key].schleifenwert) {
+              valueMap[key].schleifenwert = statis.Value;
+            }
+
+            if (statis.Message && statis.Message !== "?") {
+              valueMap[key].messages.push({
+                message: statis.Message,
+                prioColor: statis.PrioColor && statis.PrioColor !== "#ffffff" ? statis.PrioColor : "green",
+              });
+            }
+          });
+
+          sortedStatis.forEach((statis) => {
+            const key = `${statis.IdLD}-${statis.Modul}`;
+            const matchingLine = data2.find((item) => item.idLD === statis.IdLD && item.idModul === statis.Modul);
+
+            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("");
+
+              const prioNameDisplay = statis.PrioName && statis.PrioName !== "?" ? `(${statis.PrioName})` : "";
+
+              colorsByModule[key] = values.messages.length > 0 ? values.messages[0].prioColor : "green";
 
-            // Setze die Farbe und Tooltip für jede Linie (für alle Prioritätslevel)
-            colorsByModule[key] = prioColor;
-            // Überprüfe, ob ModulTyp den Text "705-FO" enthält
-            if (statis.ModulTyp && statis.ModulTyp.includes("705-FO")) {
               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>
                   <br>
                   <span class="text-md font-bold text-gray-800">${statis.ModulTyp || "N/A"}</span>
@@ -102,45 +80,34 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
                   <span class="text-md font-bold text-gray-800">Station: ${namesData[matchingLine.idLD] || "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>
-                      ${messageDisplay}
+                    ${messageDisplay}
                   </div>
-                  <span class="text-gray-800" style="color: ${prioColor || "#000000"};">${prioNameDisplay}</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>` : ""}
-              </div>
-            `;
-            } else {
-              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: ${namesData[matchingLine.idLD] || "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>
-                      ${messageDisplay}
-                  </div>
-                  <span class="text-gray-800" style="color: ${prioColor || "#000000"};">${prioNameDisplay}</span>
-                  <br>
-        
-              </div>
-            `;
+                </div>
+              `;
             }
-          }
-        });
+          });
 
-        // Setze die Farben und Tooltip-Inhalte
-        setLineColors(colorsByModule);
-        setTooltipContents(newTooltipContents);
-        setLineStatusData(data1.Statis);
+          setLineColors(colorsByModule);
+          setTooltipContents(newTooltipContents);
+          setLineStatusData(data1.Statis);
+
+          // Setze den Timeout für die Kontextmenü-Überwachung
+          const countdownDuration = 30000; // 30 Sekunden für den Countdown
+          setTimeout(() => {
+            console.log("Setting contextMenuExpired to true");
+            localStorage.setItem("contextMenuExpired", "true");
+          }, countdownDuration);
+        }
       } catch (error) {
         console.error("Fehler beim Abrufen der Daten:", error);
+        try {
+          window.location.reload();
+        } catch (reloadError) {
+          console.error("Fehler beim Neuladen der Seite:", reloadError);
+        }
       }
     };
 
@@ -154,77 +121,13 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
     fetchData();
     scheduleNextFetch();
 
-    // Setze ein Intervall, um die Daten alle 20 Sekunden erneut abzurufen
-    //const intervalId = setInterval(fetchData, 20000);
-
-    // Räumt das Intervall auf, wenn die Komponente entladen wird
-    //return () => clearInterval(intervalId);
+    return () => {
+      isCancelled = true;
+      localStorage.removeItem("contextMenuExpired"); // Flagge entfernen, wenn das Hook unmounted wird
+    };
   }, [webserviceGisLinesStatusUrl, setLineStatusData]);
 
   return { lineColors, tooltipContents };
 };
 
-// Funktion zur Gruppierung der Daten
-function logGroupedData(statisList) {
-  const grouped = statisList.reduce((acc, item) => {
-    const { IdLD, Modul, Level, PrioColor, PrioName, ModulName, ModulTyp, Message, DpName, Value } = item;
-
-    if (!acc[IdLD]) {
-      acc[IdLD] = {};
-    }
-
-    if (!acc[IdLD][Modul]) {
-      acc[IdLD][Modul] = {
-        ModulName: ModulName || "Unknown",
-        ModulTyp: ModulTyp || "N/A",
-        TotalLevel: Level,
-        PrioColors: new Set(),
-        PrioNames: new Set(),
-        Messages: [],
-        Messwert: undefined,
-        Schleifenwert: undefined,
-      };
-    }
-
-    acc[IdLD][Modul].PrioColors.add(PrioColor);
-    acc[IdLD][Modul].PrioNames.add(PrioName);
-    if (Message && Message !== "?") {
-      acc[IdLD][Modul].Messages.push(Message);
-    }
-
-    if (DpName.endsWith("_Messwert") && !acc[IdLD][Modul].Messwert) {
-      acc[IdLD][Modul].Messwert = Value;
-    }
-
-    if (DpName.endsWith("_Schleifenwert") && !acc[IdLD][Modul].Schleifenwert) {
-      acc[IdLD][Modul].Schleifenwert = Value;
-    }
-
-    return acc;
-  }, {});
-
-  const formattedData = {};
-  Object.entries(grouped).forEach(([stationId, modules]) => {
-    const filteredModules = Object.entries(modules)
-      .filter(([modulId, data]) => data.ModulName !== "?")
-      .map(([modulId, data]) => ({
-        Modul: modulId,
-        ModulName: data.ModulName,
-        ModulTyp: data.ModulTyp,
-        TotalLevel: data.TotalLevel,
-        PrioColors: Array.from(data.PrioColors).join(", "),
-        PrioNames: Array.from(data.PrioNames).join(", "),
-        Messages: data.Messages.join(" | "),
-        Messwert: data.Messwert,
-        Schleifenwert: data.Schleifenwert,
-      }));
-
-    if (filteredModules.length > 0) {
-      formattedData[stationId] = filteredModules;
-    }
-  });
-
-  console.log("Aggregierte und gruppierte Daten (gefiltert):", formattedData);
-}
-
 export default useLineData;

hooks/useMapComponentState.js

@@ -1,5 +1,5 @@
 // hooks/useMapComponentState.js
-import { useState, useRef } from "react";
+import { useState, useEffect } from "react";
 import usePoiTypData from "./usePoiTypData";
 import { useRecoilValue } from "recoil";
 import { poiLayerVisibleState } from "../store/atoms/poiLayerVisibleState";
@@ -12,6 +12,26 @@ export const useMapComponentState = () => {
   const [menuItemAdded, setMenuItemAdded] = useState(false);
   const poiLayerVisible = useRecoilValue(poiLayerVisibleState);
 
+  // Fetch devices when the component is mounted
+  useEffect(() => {
+    const fetchDeviceData = async () => {
+      try {
+        const response = await fetch("/api/talas5/location_device"); // API call to get devices
+        const data = await response.json();
+        setLocationDeviceData(data); // Set the device data
+
+        // Optional: set a default deviceName if needed
+        if (data.length > 0) {
+          setDeviceName(data[0].name); // Set the first device's name
+        }
+      } catch (error) {
+        console.error("Error fetching device data:", error);
+      }
+    };
+
+    fetchDeviceData();
+  }, []); // Runs only once when the component is mounted
+
   return {
     poiTypData,
     isPoiTypLoaded,