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

Verbesserte Version von dashboard.tsx

Browse Source
This commit is contained in:
Ismail Ali
2025-02-13 21:37:50 +01:00
parent 6769c1f6f8
commit db8dcfe0d7
2 changed files with 28 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
pages/dashboard.tsx
View File

@@ -1,5 +1,5 @@
"use client"; // app/dashboard/page.jsx
import React, { useEffect } from "react";
"use client";
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
const kueOnlineRaw = useSelector(
(state: RootState) => state.variables.kueOnline
// Redux-Variablen abrufen & Werte sicherstellen
const {
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
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
);
const kueAlarm2 = useSelector(
(state: RootState) => state.variables.kueAlarm2
);
const kueGroundFault = useSelector(
(state: RootState) => state.variables.kueGroundFault
);
const handleModuleClick = (rackNumber) => {
// Modul-Klick-Handler
const handleModuleClick = (rackNumber: number) => {
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;