Aderbruch in dashboard anzeigen bei Status

.env.local

@@ -1,4 +1,4 @@
 #Next.js Webserver
-#NEXT_PUBLIC_API_BASE_URL=http://localhost:3000
+NEXT_PUBLIC_API_BASE_URL=http://localhost:3000
 #CPL Webserver
-NEXT_PUBLIC_API_BASE_URL=https://10.10.0.118:443
+#NEXT_PUBLIC_API_BASE_URL=https://10.10.0.118:443

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()
                   )}

components/modulesStatus/Kue705_FO.jsx

@@ -1,19 +1,31 @@
 // components/Kue705_FO.jsx
 import React from "react";
 
-const Kue705_FO = ({ slot }) => {
+const Kue705_FO = ({ slot, kueCableBreak, isOnline }) => {
+  if (!isOnline) {
+    return (
+      <div className="border border-gray-400 w-10 h-20 flex items-center justify-center bg-gray-200">
+        <div className="text-xs text-gray-500">Leer</div>
+      </div>
+    );
+  }
+
+  const isCableBreak = kueCableBreak[slot - 1] === 1;
+
   return (
     <div className="border border-gray-400 w-10 h-20 flex flex-col">
       {/* Erstes Kind, nimmt den restlichen Platz ein */}
       <div className="bg-blue-500 flex-grow flex flex-col items-center justify-center text-white text-[10px]">
-        <div className="flex w-full  mb-1 items-start justify-start">
-          {slot}
-        </div>
+        <div className="flex w-full mb-1 items-start justify-start">{slot}</div>
         <div className="text-[10px]">KÜ705</div>
         <div className="text-[10px]">FO</div>
       </div>
       {/* Die unteren Abschnitte behalten ihre festen Höhen */}
-      <div className="bg-green-500 w-full h-2/6"></div>
+      <div
+        className={`w-full h-2/6 ${
+          isCableBreak ? "bg-red-500" : "bg-green-500"
+        }`}
+      ></div>
       <div className="bg-blue-500 w-full h-1/6"></div>
     </div>
   );