diff --git a/components/main/uebersicht/Baugruppentraeger.tsx b/components/main/uebersicht/Baugruppentraeger.tsx new file mode 100644 index 0000000..7c78be1 --- /dev/null +++ b/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 = ({ + 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( +
+
+ {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 ( +
handleModuleClick(rackNumber)} + > + +
+ ); + })} +
+
+ ); + } + return <>{baugruppen}; +}; + +export default Baugruppentraeger; diff --git a/config/webVersion.ts b/config/webVersion.ts index 3703dc7..88dd2b1 100644 --- a/config/webVersion.ts +++ b/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; diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx index 95ae685..c8d6277 100644 --- a/pages/dashboard.tsx +++ b/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( - (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( + const kueOnlineRaw = 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(//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( -
-
- {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 ( -
handleModuleClick(rackNumber)} // Klick-Handler mit Rack-Nummer - > - -
- ); - })} -
-
- ); - } - return baugruppen; - }; - return ( -
+
-
+
-
+
-
-
+
+
- {renderBaugruppentraeger()} +