Baugruppentraeger von dashboard.tsx in components ausgelagert

components/main/uebersicht/Baugruppentraeger.tsx

@@ -0,0 +1,74 @@
+"use client";
+import React from "react";
+import KabelModulStatus from "./modulesStatus/KabelModulStatus";
+
+interface BaugruppentraegerProps {
+  kueOnline: number[];
+  kueVersion: (number | string)[];
+  kueCableBreak: number[];
+  kueAlarm1: number[];
+  kueAlarm2: number[];
+  kueGroundFault: number[];
+  handleModuleClick: (rackNumber: number) => void;
+}
+
+const Baugruppentraeger: React.FC<BaugruppentraegerProps> = ({
+  kueOnline,
+  kueVersion,
+  kueCableBreak,
+  kueAlarm1,
+  kueAlarm2,
+  kueGroundFault,
+  handleModuleClick,
+}) => {
+  const baugruppen: JSX.Element[] = [];
+  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 mb-4 xl:mb-0 lg:mb-0 border border-gray-200 w-full laptop:scale-y-75 xl:scale-y-90"
+      >
+        <div className="flex gap-1">
+          {slots.map((version, index) => {
+            const slotNumber = i * 8 + index + 1;
+            const isSlotOnline = kueOnline[slotNumber - 1] === 1;
+            const rawModuleVersion = kueVersion[slotNumber - 1] || version;
+
+            // Sicherstellen, dass moduleVersion eine Zahl ist
+            const moduleVersion =
+              typeof rawModuleVersion === "number"
+                ? rawModuleVersion
+                : parseFloat(rawModuleVersion) || 0;
+
+            const rackNumber = Math.ceil(slotNumber / 8);
+
+            return (
+              <div
+                key={slotNumber}
+                className="cursor-pointer"
+                onClick={() => handleModuleClick(rackNumber)}
+              >
+                <KabelModulStatus
+                  slot={slotNumber}
+                  isOnline={isSlotOnline}
+                  moduleVersion={moduleVersion}
+                  kueCableBreak={kueCableBreak}
+                  kueAlarm1={kueAlarm1}
+                  kueAlarm2={kueAlarm2}
+                  kueGroundFault={kueGroundFault}
+                />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+  return <>{baugruppen}</>;
+};
+
+export default Baugruppentraeger;