Aderbruch in dashboard anzeigen bei Status

app/dashboard/page.jsx

@@ -21,6 +21,7 @@ function Dashboard() {
   const [gateway, setGateway] = useState("");
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [kueCableBreak, setKueCableBreak] = useState([]);
 
   useEffect(() => {
     loadWindowVariables(apiUrl)
@@ -43,6 +44,33 @@ function Dashboard() {
         setLoading(false);
       });
   }, [apiUrl]);
+  useEffect(() => {
+    loadWindowVariables(apiUrl)
+      .then(() => {
+        if (window.kueCableBreak && Array.isArray(window.kueCableBreak)) {
+          // Prüfe, ob window.kueCableBreak ein Array ist
+          const cableBreakArray = window.kueCableBreak.map(Number);
+          setKueCableBreak(cableBreakArray); // Array für kueCableBreak
+        } else if (typeof window.kueCableBreak === "string") {
+          // Falls es ein String ist, splitte den String und mappe ihn in ein Array
+          const cableBreakArray = window.kueCableBreak.split(",").map(Number);
+          setKueCableBreak(cableBreakArray);
+        } else {
+          console.error(
+            "Konnte kueCableBreak nicht finden oder es ist kein gültiges Array/String."
+          );
+          setError(
+            "Konnte kueCableBreak nicht finden oder es ist kein gültiges Array/String."
+          );
+        }
+        setLoading(false);
+      })
+      .catch((error) => {
+        console.error("Fehler beim Laden des Skripts:", error);
+        setError(error);
+        setLoading(false);
+      });
+  }, [apiUrl]);
 
   const parseMessages = (messages) => {
     messages = messages
@@ -93,38 +121,30 @@ function Dashboard() {
   const renderBaugruppentraeger = () => {
     const baugruppen = [];
 
-    // Dynamisch berechnen, wie viele Baugruppenträger benötigt werden, basierend auf der Länge von kueOnline
+    // Adjust based on actual length of kueOnline
     const numBaugruppen = Math.ceil(kueOnline.length / 8);
 
     for (let i = 0; i < numBaugruppen; i++) {
       const slots = kueOnline.slice(i * 8, (i + 1) * 8);
 
-      // Prüfen, ob der Baugruppenträger überhaupt Zahlen oder "0" enthält
-      const containsNumbersOrZero = slots.some(
-        (version) => version !== "" && version !== null && version !== undefined
-      );
+      baugruppen.push(
+        <div key={i} className="flex bg-white shadow-md rounded-lg">
+          <div className="flex gap-1">
+            {slots.map((version, index) => {
+              const slotNumber = i * 8 + index + 1;
 
-      if (containsNumbersOrZero) {
-        baugruppen.push(
-          <div key={i} className="flex bg-white shadow-md rounded-lg  ">
-            <div className="flex gap-1">
-              {slots.map((version, index) => {
-                const slotNumber = i * 8 + index + 1;
-                return version !== 0 ? (
-                  <Kue705_FO key={slotNumber} slot={slotNumber} />
-                ) : (
-                  <div
-                    key={slotNumber}
-                    className="w-10 h-20 flex items-center justify-center border border-gray-300"
-                  >
-                    <span className="text-xs text-gray-500">Leer</span>
-                  </div>
-                );
-              })}
-            </div>
+              return (
+                <Kue705_FO
+                  key={slotNumber}
+                  slot={slotNumber}
+                  isOnline={version === 1} // Only pass isOnline true if the slot is connected
+                  kueCableBreak={kueCableBreak}
+                />
+              );
+            })}
           </div>
-        );
-      }
+        </div>
+      );
     }
 
     return baugruppen;
@@ -237,7 +257,7 @@ function Dashboard() {
                   {loading ? (
                     <p>Lädt...</p>
                   ) : error ? (
-                    <p className="text-red-500">{error}</p>
+                    <p className="text-red-500">{error.toString()}</p>
                   ) : (
                     renderBaugruppentraeger()
                   )}