Verbesserte Version von dashboard.tsx

config/webVersion.ts

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

pages/dashboard.tsx

@@ -1,5 +1,5 @@
-"use client"; // app/dashboard/page.jsx
+"use client";
-import React, { useEffect } from "react";
+import React, { useEffect, useMemo } from "react";
 import { useRouter } from "next/navigation";
 import "tailwindcss/tailwind.css";
 import "@fontsource/roboto";
@@ -17,10 +17,11 @@ import NetworkInfo from "../components/main/uebersicht/NetworkInfo";
 import VersionInfo from "../components/main/uebersicht/VersionInfo";
 import Baugruppentraeger from "../components/main/uebersicht/Baugruppentraeger";
 
-function Dashboard() {
+const Dashboard: React.FC = () => {
   const router = useRouter();
   const dispatch = useDispatch();
 
+  // Setzt OPC-UA-Werte beim Laden der Seite
   useEffect(() => {
     if (typeof window !== "undefined") {
       dispatch(setOpcUaZustand(window.win_opcUaZustand || "Unbekannt"));
@@ -31,39 +32,35 @@ function Dashboard() {
       );
       dispatch(setOpcUaNodesetName(window.win_opcUaNodesetName || "Unbekannt"));
     }
-  }, []);
+  }, [dispatch]);
 
-  // Redux-Variablen abrufen
+  // Redux-Variablen abrufen & Werte sicherstellen
-  const kueOnlineRaw = useSelector(
+  const {
-    (state: RootState) => state.variables.kueOnline
+    kueOnline: kueOnlineRaw,
+    kueVersion,
+    kueCableBreak,
+    kueAlarm1,
+    kueAlarm2,
+    kueGroundFault,
+  } = useSelector((state: RootState) => state.variables);
+
+  // `kueOnline` sicherstellen, dass es nur Zahlen enthält
+  const kueOnline = useMemo(
+    () =>
+      kueOnlineRaw.map((value) =>
+        typeof value === "string" ? parseFloat(value) || 0 : value
+      ),
+    [kueOnlineRaw]
   );
 
-  // Sicherstellen, dass kueOnline nur Zahlen enthält
+  // Modul-Klick-Handler
-  const kueOnline = kueOnlineRaw.map((value) =>
+  const handleModuleClick = (rackNumber: number) => {
-    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
-  );
-  const kueAlarm2 = useSelector(
-    (state: RootState) => state.variables.kueAlarm2
-  );
-  const kueGroundFault = useSelector(
-    (state: RootState) => state.variables.kueGroundFault
-  );
-
-  const handleModuleClick = (rackNumber) => {
     router.push(`/kabelueberwachung?rack=${rackNumber}`);
   };
 
   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">
+      {/* Header */}
       <div className="flex justify-between items-center w-full lg:w-2/3">
         <div className="flex justify-between gap-1">
           <Icon
@@ -76,6 +73,7 @@ function Dashboard() {
         </div>
       </div>
 
+      {/* Hauptbereich mit Meldungstabelle und Baugruppenträger */}
       <div className="flex flex-col lg:flex-row gap-0 overflow-hidden flex-grow">
         <Last20MessagesTable />
 
@@ -99,6 +97,6 @@ function Dashboard() {
       <NetworkInfo />
     </div>
   );
-}
+};
 
 export default Dashboard;