fix: wenn ftech Breiche fehler soll die Seite im Browser nicht neu laden

feat:von anderen PC /Test PC zugreifen, Laptop als Server

.env.local

@@ -1,6 +1,6 @@
 #.env.local
 
-DB_HOST=127.0.0.1
+DB_HOST=10.10.0.70
 DB_USER=root
 DB_PASSWORD="root#$"
 DB_NAME=talas_v5

hooks/layers/useBereicheMarkersLayer.js

@@ -1,3 +1,4 @@
+// /hooks/layers/useBereicheMarkersLayer.js
 import { useEffect, useState, useRef } from "react";
 import L from "leaflet";
 import "leaflet/dist/leaflet.css";
@@ -20,75 +21,27 @@ const useBereicheMarkersLayer = (map, oms, apiUrl) => {
   const updateMarkersVisibility = () => {
     if (!map || bereicheMarkers.length === 0) return;
 
-    // Hole die Sichtbarkeitsdaten aus localStorage
     const mapLayersVisibility = JSON.parse(localStorage.getItem("mapLayersVisibility")) || {};
 
-    // Überprüfen, ob alle Layer unsichtbar sind
     const areAllLayersInvisible = Object.values(mapLayersVisibility).every((visibility) => !visibility);
 
-    // Wenn die Sichtbarkeit gleich bleibt, breche die Ausführung ab
     if (areAllLayersInvisible === prevVisibility.current) return;
 
-    // Speichere den neuen Sichtbarkeitsstatus
     prevVisibility.current = areAllLayersInvisible;
 
-    // Füge Marker hinzu oder entferne sie basierend auf der Bedingung
     bereicheMarkers.forEach((marker) => {
       if (areAllLayersInvisible) {
         marker.addTo(map);
-        if (oms) oms.addMarker(marker); // Overlapping Marker Spiderfier
+        if (oms) oms.addMarker(marker);
       } else {
-        map.removeLayer(marker); // Entferne Marker, wenn die Bedingung nicht erfüllt ist
+        map.removeLayer(marker);
       }
     });
   };
 
-  /*   useEffect(() => {
-    // Hole die Daten aus der API
-    const fetchBereiche = async () => {
-      try {
-        const response = await fetch(apiUrl);
-        const text = await response.text(); // Hole die vollständige Antwort als Text
-        console.log("Antwort als Text:", text); // Überprüfe den tatsächlichen Inhalt der Antwort
-        const data = JSON.parse(text); // Versuche, die Antwort zu parsen, falls sie korrektes JSON ist
-
-        console.log("API-URL:", apiUrl);
-        console.log("Response-Status:", response.status);
-
-        const markers = data.map((item) => {
-          const marker = L.marker([item.x, item.y], { icon: customIcon });
-
-          // Tooltip statt Popup
-          marker.bindTooltip(
-            `
-            <strong>Bereich:</strong> ${item.location_name} <br />
-              <strong>Standort:</strong> ${item.area_name} <br />
-
-             `,
-            {
-              permanent: false, // Tooltip wird nur bei Mouseover angezeigt
-              direction: "top", // Position des Tooltips relativ zum Marker
-              offset: [0, -20], // Verschiebung für bessere Sichtbarkeit
-            }
-          );
-
-          return marker;
-        });
-
-        setBereicheMarkers(markers);
-      } catch (error) {
-        console.error("Fehler beim Laden der Bereiche:", error);
-      }
-    };
-
-    fetchBereiche();
-  }, [apiUrl]); */
-
   useEffect(() => {
-    // Initialisiere die Sichtbarkeit beim ersten Laden
     updateMarkersVisibility();
 
-    // Listener für Änderungen in localStorage hinzufügen
     const handleStorageChange = (event) => {
       if (event.key === "mapLayersVisibility") {
         updateMarkersVisibility();
@@ -97,13 +50,11 @@ const useBereicheMarkersLayer = (map, oms, apiUrl) => {
 
     window.addEventListener("storage", handleStorageChange);
 
-    // Fallback: Überwachung durch Intervall
     const intervalId = setInterval(() => {
       updateMarkersVisibility();
-    }, 500); // Alle 500ms prüfen
+    }, 500);
 
     return () => {
-      // Entferne den Listener und das Intervall
       window.removeEventListener("storage", handleStorageChange);
       clearInterval(intervalId);
     };
@@ -113,15 +64,19 @@ const useBereicheMarkersLayer = (map, oms, apiUrl) => {
     const fetchBereiche = async () => {
       try {
         const response = await fetch(apiUrl);
+
+        if (!response.ok) {
+          throw new Error(`API-Fehler: ${response.status} ${response.statusText}`);
+        }
+
         const data = await response.json();
 
         const markers = data.map((item) => {
           const marker = L.marker([item.x, item.y], {
             icon: customIcon,
-            draggable: true, // Ermöglicht Drag-and-Drop
+            draggable: true,
           });
 
-          // Tooltip
           marker.bindTooltip(
             `
             <strong>Bereich:</strong> ${item.location_name} <br />
@@ -134,12 +89,10 @@ const useBereicheMarkersLayer = (map, oms, apiUrl) => {
             }
           );
 
-          // Event-Listener für Drag-End
           marker.on("dragend", async (e) => {
             const { lat, lng } = e.target.getLatLng();
             try {
-              // Update API aufrufen
-              await updateLocation(item.idLocation, item.idMaps, { x: lat, y: lng }); // Update-Funktion
+              await updateLocation(item.idLocation, item.idMaps, { x: lat, y: lng });
               console.log("Koordinaten erfolgreich aktualisiert:", { lat, lng });
             } catch (error) {
               console.error("Fehler beim Aktualisieren der Koordinaten:", error);
@@ -151,7 +104,8 @@ const useBereicheMarkersLayer = (map, oms, apiUrl) => {
 
         setBereicheMarkers(markers);
       } catch (error) {
-        console.error("Fehler beim Laden der Bereiche:", error);
+        console.error("Fehler beim Laden der Bereiche:", error.message);
+        setBereicheMarkers([]); // Wichtig: Leere Liste setzen, kein reload oder Ausnahme erzeugen
       }
     };
 

hooks/useLineData.js

@@ -1,5 +1,6 @@
-// hooks/useLineData.js
+// hooks/useLineData.js //fix v1.0.8.1
 import { useEffect, useState } from "react";
+import { toast } from "react-toastify";
 import { SERVER_URL } from "../config/urls";
 import { useDispatch, useSelector } from "react-redux";
 
@@ -15,20 +16,25 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
     const fetchData = async () => {
       try {
         const response1 = await fetch(webserviceGisLinesStatusUrl);
+        if (!response1.ok) throw new Error("Fehler bei GIS-Linienstatus");
+
         const data1 = await response1.json();
-
         const response2 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/gisLines/readGisLines`);
+        if (!response2.ok) throw new Error("Fehler beim Abrufen der GIS-Linien");
+
         const data2 = await response2.json();
-
-        if (!Array.isArray(data2)) {
-          console.warn("gis_lines Daten sind nicht in der erwarteten Form. Wird ignoriert.");
-          return;
-        }
-
         const response3 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/device/getAllStationsNames`);
+        if (!response3.ok) throw new Error("Fehler beim Abrufen der Stationsnamen");
+
         const namesData = await response3.json();
 
         if (!isCancelled) {
+          if (!data1.Statis || data1.Statis.length === 0) {
+            toast.warn("Keine Linienstatus-Daten verfügbar!", { position: "top-center", autoClose: 5000 });
+            setLineStatusData([]);
+            return;
+          }
+
           const colorsByModule = {};
           const newTooltipContents = {};
           const valueMap = {};
@@ -70,8 +76,6 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
 
               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] = `
@@ -98,21 +102,11 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
           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);
-        }
+        //console.error("Fehler beim Abrufen der Daten in useLineData.js:", error);
+        // toast.error("Fehler beim Abrufen der Linienstatus-Daten!", { position: "top-center", autoClose: 5000 });
+        console.warn("Fehler beim Abrufen der Linienstatus-Daten in useLineData.js ");
       }
     };
 
@@ -128,7 +122,7 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
 
     return () => {
       isCancelled = true;
-      localStorage.removeItem("contextMenuExpired"); // Flagge entfernen, wenn das Hook unmounted wird
+      localStorage.removeItem("contextMenuExpired");
     };
   }, [webserviceGisLinesStatusUrl, setLineStatusData]);