Bei Kabelbruch (cableBreak), Erdschluss (groundFault), Isolationsfehler (measure1Alarm) oder Schleifenfehler (measure2Alarm) wird der Status rot angezeigt. Ansonsten grün.

app/dashboard/page.jsx

@@ -13,7 +13,6 @@ import XioPM2Status from "../../components/modulesStatus/XioPM2Status";
 import { Icon } from "@iconify/react";
 
 function Dashboard() {
-  //const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
   const [isClient, setIsClient] = useState(false);
 
   const [last20Messages, setLast20Messages] = useState([]);
@@ -25,21 +24,10 @@ function Dashboard() {
   const [error, setError] = useState(null);
   const [kueCableBreak, setKueCableBreak] = useState([]);
   const [appVersion, setAppVersion] = useState("");
-  const [apiUrl, setApiUrl] = useState("");
-  /*   useEffect(() => {
-    setIsClient(true);
-    if (typeof window !== "undefined") {
-      setApiUrl(`https://${window.ip}:443`);
-    }
-  }, []); */
 
-  /*   if (!isClient) {
-    return null; // or a loading spinner
-  } */
-  //const apiUrl = `https://${ip}:443`;
   useEffect(() => {
     if (typeof window !== "undefined") {
-      loadWindowVariables(apiUrl)
+      loadWindowVariables()
         .then(() => {
           if (window.last20Messages) {
             const parsedMessages = parseMessages(window.last20Messages);
@@ -48,7 +36,6 @@ function Dashboard() {
             setSubnet(window.subnet);
             setGateway(window.gateway);
             setAppVersion(window.appVersion);
-            setApiUrl(`https://${window.ip}:443`);
           } else {
             console.error("Konnte last20Messages nicht finden.");
             setError("Konnte last20Messages nicht finden.");
@@ -61,9 +48,9 @@ function Dashboard() {
           setLoading(false);
         });
     }
-  }, [apiUrl]);
+  }, []);
   useEffect(() => {
-    loadWindowVariables(apiUrl)
+    loadWindowVariables()
       .then(() => {
         if (window.kueCableBreak && Array.isArray(window.kueCableBreak)) {
           // Prüfe, ob window.kueCableBreak ein Array ist
@@ -88,7 +75,7 @@ function Dashboard() {
         setError(error);
         setLoading(false);
       });
-  }, [apiUrl]);
+  }, []);
 
   const parseMessages = (messages) => {
     messages = messages
@@ -110,7 +97,7 @@ function Dashboard() {
     });
   };
   useEffect(() => {
-    loadWindowVariables(apiUrl)
+    loadWindowVariables()
       .then(() => {
         console.log("kueOnline Data: ", window.kueOnline); // Debug: Ausgabe von kueOnline
 
@@ -133,35 +120,74 @@ function Dashboard() {
         setError(error);
         setLoading(false);
       });
-  }, [apiUrl]);
+  }, []);
+  useEffect(() => {
+    loadWindowVariables()
+      .then(() => {
+        // Debug-Ausgaben für kueAlarm1 und kueAlarm2
+        console.log("kueAlarm1 Data: ", window.kueAlarm1);
+        console.log("kueAlarm2 Data: ", window.kueAlarm2);
+
+        if (window.kueAlarm1 && Array.isArray(window.kueAlarm1)) {
+          console.log("kueAlarm1 ist ein Array:", window.kueAlarm1);
+        } else {
+          console.error("kueAlarm1 ist kein Array oder nicht definiert.");
+          setError(
+            "Konnte kueAlarm1 nicht finden oder es ist kein gültiges Array."
+          );
+        }
+
+        if (window.kueAlarm2 && Array.isArray(window.kueAlarm2)) {
+          console.log("kueAlarm2 ist ein Array:", window.kueAlarm2);
+        } else {
+          console.error("kueAlarm2 ist kein Array oder nicht definiert.");
+          setError(
+            "Konnte kueAlarm2 nicht finden oder es ist kein gültiges Array."
+          );
+        }
+      })
+      .catch((error) => {
+        console.error("Fehler beim Laden des Skripts:", error);
+        setError(error);
+      });
+  }, []);
 
-  // Dashboard.jsx (Abschnitt renderBaugruppentraeger)
   const renderBaugruppentraeger = () => {
     const baugruppen = [];
-
     const numBaugruppen = Math.ceil(kueOnline.length / 8);
 
     for (let i = 0; i < numBaugruppen; i++) {
       const slots = kueOnline.slice(i * 8, (i + 1) * 8);
 
       baugruppen.push(
-        <div key={i} className="flex bg-white shadow-md rounded-lg">
+        <div key={i} className="flex bg-white shadow-md rounded-lg mb-4">
           <div className="flex gap-1">
             {slots.map((version, index) => {
               const slotNumber = i * 8 + index + 1;
 
-              // Verwende window.kueVersion[slotNumber - 1] für die Modulversion
               const moduleVersion = window.kueVersion
                 ? window.kueVersion[slotNumber - 1]
                 : version;
 
+              // Überprüfe die Bedingungen für kueAlarm1, kueAlarm2 und kueCableBreak
+              const hasAlarm1 = kueAlarm1.includes(slotNumber);
+              const hasAlarm2 = kueAlarm2.includes(slotNumber);
+              const hasCableBreak = kueCableBreak.includes(slotNumber);
+
+              // Setze die Klasse für rote Färbung, wenn ein Alarm oder Kabelbruch vorhanden ist
+              const alarmClass =
+                hasAlarm1 || hasAlarm2 || hasCableBreak
+                  ? "bg-red-500"
+                  : "bg-white";
+
               return (
                 <KabelModulStatus
                   key={slotNumber}
                   slot={slotNumber}
                   isOnline={version !== 0} // Prüfen, ob ein Modul online ist
-                  moduleVersion={moduleVersion} // Modulversion aus window.kueVersion oder fallback auf version
+                  moduleVersion={moduleVersion}
                   kueCableBreak={kueCableBreak}
+                  className={alarmClass} // Klasse für die Färbung hinzufügen
                 />
               );
             })}
@@ -172,7 +198,6 @@ function Dashboard() {
 
     return baugruppen;
   };
-
   return (
     <div className="flex flex-col p-4">
       {/* Letzte Meldungen - Titel und Icon Bereich */}