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;

config/webVersion.ts

@@ -5,5 +5,5 @@
 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
 
 */
-const webVersion = "1.6.22";
+const webVersion = "1.6.23";
 export default webVersion;

pages/dashboard.tsx

@@ -4,25 +4,23 @@ import { useRouter } from "next/navigation";
 import "tailwindcss/tailwind.css";
 import "@fontsource/roboto";
 import "bootstrap-icons/font/bootstrap-icons.css";
-import CPLStatus from "../components/main/uebersicht/modulesStatus/CPLStatus";
-import KabelModulStatus from "../components/main/uebersicht/modulesStatus/KabelModulStatus";
 import { Icon } from "@iconify/react";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import { RootState } from "../redux/store";
-import { useDispatch } from "react-redux";
 import {
   setOpcUaZustand,
   setOpcUaActiveClientCount,
   setOpcUaNodesetName,
 } from "../redux/slices/variablesSlice";
-import webVersion from "../config/webVersion";
 import Last20MessagesTable from "../components/main/uebersicht/Last20MessagesTable";
 import NetworkInfo from "../components/main/uebersicht/NetworkInfo";
 import VersionInfo from "../components/main/uebersicht/VersionInfo";
+import Baugruppentraeger from "../components/main/uebersicht/Baugruppentraeger";
 
 function Dashboard() {
   const router = useRouter();
   const dispatch = useDispatch();
+
   useEffect(() => {
     if (typeof window !== "undefined") {
       dispatch(setOpcUaZustand(window.win_opcUaZustand || "Unbekannt"));
@@ -36,33 +34,20 @@ function Dashboard() {
   }, []);
 
   // Redux-Variablen abrufen
-  const opcUaZustand = useSelector(
+  const kueOnlineRaw = useSelector(
-    (state: RootState) => state.variables.opcUaZustand
-  );
-  const opcUaActiveClientCount = useSelector(
-    (state: RootState) => state.variables.opcUaActiveClientCount
-  );
-  const opcUaNodesetName = useSelector(
-    (state: RootState) => state.variables.opcUaNodesetName
-  );
-  const rawLast20Messages = useSelector(
-    (state: RootState) => state.variables.last20Messages
-  );
-  const ip = useSelector((state: RootState) => state.variables.ip);
-  const subnet = useSelector((state: RootState) => state.variables.subnet);
-  const gateway = useSelector((state: RootState) => state.variables.gateway);
-  const appVersion = useSelector(
-    (state: RootState) => state.variables.appVersion
-  );
-  const kueCableBreak = useSelector(
-    (state: RootState) => state.variables.kueCableBreak
-  );
-  const kueOnline = useSelector(
     (state: RootState) => state.variables.kueOnline
   );
+
+  // Sicherstellen, dass kueOnline nur Zahlen enthält
+  const kueOnline = kueOnlineRaw.map((value) =>
+    typeof value === "string" ? parseFloat(value) || 0 : value
+  );
   const kueVersion = useSelector(
     (state: RootState) => state.variables.kueVersion
   );
+  const kueCableBreak = useSelector(
+    (state: RootState) => state.variables.kueCableBreak
+  );
   const kueAlarm1 = useSelector(
     (state: RootState) => state.variables.kueAlarm1
   );
@@ -73,82 +58,14 @@ function Dashboard() {
     (state: RootState) => state.variables.kueGroundFault
   );
 
-  // Hilfsfunktion zum Parsen der Nachrichten
-  const parseMessages = (messages) => {
-    if (typeof messages === "string") {
-      messages = messages
-        .replace(/<tr>/g, "\n")
-        .replace(/<\/?td>/g, "")
-        .replace(/<\/tr>/g, "")
-        .trim();
-      const rows = messages.split("\n");
-      return rows.map((row) => [
-        row.substring(0, 5),
-        row.substring(5, 10),
-        row.substring(10, 29),
-        row.substring(33, row.length - 1),
-        row.substring(row.length - 1),
-      ]);
-    }
-    return [];
-  };
-
-  const last20Messages = parseMessages(rawLast20Messages);
-
   const handleModuleClick = (rackNumber) => {
     router.push(`/kabelueberwachung?rack=${rackNumber}`);
   };
 
-  const renderBaugruppentraeger = () => {
-    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 moduleVersion = kueVersion[slotNumber - 1] || version;
-
-              // Berechnung der Rack-Nummer basierend auf dem slotNumber
-              const rackNumber = Math.ceil(slotNumber / 8); // 1–8 -> Rack 1, 9–16 -> Rack 2 usw.
-
-              return (
-                <div
-                  key={slotNumber}
-                  className="cursor-pointer"
-                  onClick={() => handleModuleClick(rackNumber)} // Klick-Handler mit Rack-Nummer
-                >
-                  <KabelModulStatus
-                    slot={slotNumber}
-                    isOnline={isSlotOnline}
-                    moduleVersion={moduleVersion}
-                    kueCableBreak={kueCableBreak}
-                    kueAlarm1={kueAlarm1}
-                    kueAlarm2={kueAlarm2}
-                    kueGroundFault={kueGroundFault}
-                  />
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      );
-    }
-    return baugruppen;
-  };
-
   return (
-    <div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0 ">
+    <div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0">
       <div className="flex justify-between items-center w-full lg:w-2/3">
-        <div className="flex justify-between gap-1  ">
+        <div className="flex justify-between gap-1">
           <Icon
             icon="ri:calendar-schedule-line"
             className="text-littwin-blue text-4xl xl:text-2xl"
@@ -159,20 +76,23 @@ function Dashboard() {
         </div>
       </div>
 
-      <div className="flex flex-col lg:flex-row gap-0 overflow-hidden  flex-grow">
+      <div className="flex flex-col lg:flex-row gap-0 overflow-hidden flex-grow">
         <Last20MessagesTable />
 
-        <div
+        <div className="shadow-md rounded-lg w-full sm:w-3/4 md:w-2/3 lg:w-1/2 xl:w-1/3 flex flex-col gap-2">
-          className="shadow-md rounded-lg 
+          <div className="bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200 w-full">
-             w-full sm:w-3/4 md:w-2/3 lg:w-1/2 xl:w-1/3 
-       
-             flex flex-col gap-2"
-        >
-          <div className="bg-gray-50 p-4 sm:p-3 md:p-4 lg:p-2 xl:p-2 rounded-lg shadow-sm border border-gray-200 w-full ">
             <VersionInfo />
           </div>
 
-          {renderBaugruppentraeger()}
+          <Baugruppentraeger
+            kueOnline={kueOnline}
+            kueVersion={kueVersion}
+            kueCableBreak={kueCableBreak}
+            kueAlarm1={kueAlarm1}
+            kueAlarm2={kueAlarm2}
+            kueGroundFault={kueGroundFault}
+            handleModuleClick={handleModuleClick}
+          />
         </div>
       </div>