From deef4235cbe51e539099f83a6f67fd28467558d3 Mon Sep 17 00:00:00 2001
From: ISA <ismail.ali@littwin-systemtechnik.de>
Date: Sun, 29 Sep 2024 12:00:27 +0200
Subject: [PATCH] =?UTF-8?q?baugruppentr=C3=A4gger?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/dashboard/page.jsx | 137 ++++++++++++++++++++++-------------------
 1 file changed, 75 insertions(+), 62 deletions(-)

diff --git a/app/dashboard/page.jsx b/app/dashboard/page.jsx
index 6ff0ee0..9a7d1a5 100644
--- a/app/dashboard/page.jsx
+++ b/app/dashboard/page.jsx
@@ -13,6 +13,7 @@ import { Icon } from "@iconify/react";
 function Dashboard() {
   const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
   const [last20Messages, setLast20Messages] = useState([]);
+  const [kueVersion, setKueVersion] = useState([]);
   const [ip, setIp] = useState("");
   const [subnet, setSubnet] = useState("");
   const [gateway, setGateway] = useState("");
@@ -32,6 +33,14 @@ function Dashboard() {
           console.error("Konnte last20Messages nicht finden.");
           setError("Konnte last20Messages nicht finden.");
         }
+
+        // Hier holen wir die kueVersion und konvertieren sie in ein Array
+        if (window.kueVersion) {
+          const versionArray = window.kueVersion.split(",").map(Number); // Wandelt die String-Array in ein Array um
+          setKueVersion(versionArray);
+        } else {
+          console.error("Konnte kueVersion nicht finden.");
+        }
         setLoading(false);
       })
       .catch((error) => {
@@ -40,6 +49,55 @@ function Dashboard() {
         setLoading(false);
       });
   }, [apiUrl]);
+  useEffect(() => {
+    loadWindowVariables(apiUrl)
+      .then(() => {
+        if (window.kueVersion) {
+          const versionArray = window.kueVersion.split(",").map(Number);
+          setKueVersion(versionArray);
+        } else {
+          console.error("Konnte kueVersion nicht finden.");
+          setError("Konnte kueVersion nicht finden.");
+        }
+        setLoading(false);
+      })
+      .catch((error) => {
+        console.error("Fehler beim Laden des Skripts:", error);
+        setError(error);
+        setLoading(false);
+      });
+  }, [apiUrl]);
+  const renderBaugruppentraeger = () => {
+    const baugruppen = [];
+
+    // Es gibt 4 Baugruppenträger, jeder mit 8 Slots
+    for (let i = 0; i < 4; i++) {
+      const slots = kueVersion.slice(i * 8, (i + 1) * 8);
+
+      baugruppen.push(
+        <div key={i} className="flex bg-white shadow-md rounded-lg p-4 mb-4">
+          <h2 className="text-lg font-bold mr-4">Baugruppenträger {i + 1}</h2>
+          <div className="flex gap-2">
+            {slots.map((version, index) => {
+              const slotNumber = i * 8 + index + 1;
+              return version !== 0 ? (
+                <Kue705_FO key={slotNumber} slot={slotNumber} />
+              ) : (
+                <div
+                  key={slotNumber}
+                  className="w-12 h-24 flex items-center justify-center border border-gray-300"
+                >
+                  <span className="text-xs text-gray-500">Leer</span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      );
+    }
+
+    return baugruppen;
+  };
 
   const parseMessages = (messages) => {
     messages = messages
@@ -131,70 +189,25 @@ function Dashboard() {
         </div>
 
         {/* Sidebar mit Informationen */}
-        <div className="bg-white shadow-md rounded-lg p-4 w-full lg:w-1/3 flex flex-col gap-4">
-          {/* Versionsinformationen */}
-          <div className="bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200">
-            <h2 className="text-lg font-semibold text-gray-700 mb-2">
-              Versionsinformationen
-            </h2>
-            <p className="text-sm text-gray-600">
-              <span className="font-bold">Applikationsversion: </span> 5.1.1.8
-              C-24-KA
-            </p>
-            <p className="text-sm text-gray-600">
-              <span className="font-bold">Webserverversion: </span> 5.3.4.1
-            </p>
+        <div className="bg-gray-100 flex flex-col min-h-screen p-4">
+          <div className="flex justify-between items-center pb-2 w-full lg:w-2/3 mt-8">
+            <Icon
+              icon="ri:calendar-schedule-line"
+              className="text-blue-500 text-4xl"
+            />
+            <h1 className="text-xl font-bold text-gray-700">
+              Baugruppenträger Übersicht
+            </h1>
           </div>
 
-          {/* Beispiel für Geräteanzeige */}
-          <div className="bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200 justify-between space-y-1">
-            <div className="flex flex-row item-center justify-between ">
-              <CPLStatus />
-              <Access1Status />
-              <Access2Status />
-            </div>
-            <div className="flex flex-col item-center justify-between gap-1">
-              <div className="flex flex-row item-center justify-between space-y-0">
-                <Kue705_FO slot="1" />
-                <Kue705_FO slot="2" />
-                <Kue705_FO slot="3" />
-                <Kue705_FO slot="4" />
-                <Kue705_FO slot="5" />
-                <Kue705_FO slot="6" />
-                <Kue705_FO slot="7" />
-                <Kue705_FO slot="8" />
-              </div>
-              <div className="flex flex-row item-center justify-between space-y-0">
-                <Kue705_FO slot="9" />
-                <Kue705_FO slot="10" />
-                <Kue705_FO slot="11" />
-                <Kue705_FO slot="12" />
-                <Kue705_FO slot="13" />
-                <Kue705_FO slot="14" />
-                <Kue705_FO slot="15" />
-                <Kue705_FO slot="16" />
-              </div>
-              <div className="flex flex-row item-center justify-between space-y-0">
-                <Kue705_FO slot="17" />
-                <Kue705_FO slot="18" />
-                <Kue705_FO slot="19" />
-                <Kue705_FO slot="20" />
-                <Kue705_FO slot="21" />
-                <Kue705_FO slot="22" />
-                <Kue705_FO slot="23" />
-                <Kue705_FO slot="24" />
-              </div>
-              <div className="flex flex-row item-center justify-between space-y-0">
-                <Kue705_FO slot="25" />
-                <Kue705_FO slot="26" />
-                <Kue705_FO slot="27" />
-                <Kue705_FO slot="28" />
-                <Kue705_FO slot="29" />
-                <Kue705_FO slot="30" />
-                <Kue705_FO slot="31" />
-                <Kue705_FO slot="32" />
-              </div>
-            </div>
+          <div className="flex flex-col gap-8 mt-4">
+            {loading ? (
+              <p>Lädt...</p>
+            ) : error ? (
+              <p className="text-red-500">{error}</p>
+            ) : (
+              renderBaugruppentraeger()
+            )}
           </div>
         </div>
       </div>