Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Baugruppentraeger von dashboard.tsx in components ausgelagert

Browse Source
This commit is contained in:
Ismail Ali
2025-02-13 21:30:59 +01:00
parent fbed871dc5
commit 6769c1f6f8
3 changed files with 101 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
pages/dashboard.tsx
View File

@@ -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(/<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
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"
>
<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 ">
<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">
<div className="bg-gray-50 p-4 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>