105 lines
3.4 KiB
TypeScript
105 lines
3.4 KiB
TypeScript
"use client"; // app/dashboard/page.jsx
|
|
import React, { useEffect } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import "tailwindcss/tailwind.css";
|
|
import "@fontsource/roboto";
|
|
import "bootstrap-icons/font/bootstrap-icons.css";
|
|
import { Icon } from "@iconify/react";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import { RootState } from "../redux/store";
|
|
import {
|
|
setOpcUaZustand,
|
|
setOpcUaActiveClientCount,
|
|
setOpcUaNodesetName,
|
|
} from "../redux/slices/variablesSlice";
|
|
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"));
|
|
dispatch(
|
|
setOpcUaActiveClientCount(
|
|
Number(window.win_opcUaActiveClientCount) || 0
|
|
)
|
|
);
|
|
dispatch(setOpcUaNodesetName(window.win_opcUaNodesetName || "Unbekannt"));
|
|
}
|
|
}, []);
|
|
|
|
// Redux-Variablen abrufen
|
|
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
|
|
);
|
|
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">
|
|
<div className="flex justify-between items-center w-full lg:w-2/3">
|
|
<div className="flex justify-between gap-1">
|
|
<Icon
|
|
icon="ri:calendar-schedule-line"
|
|
className="text-littwin-blue text-4xl xl:text-2xl"
|
|
/>
|
|
<h1 className="text-xl font-bold text-gray-700 xl:text-base">
|
|
Letzten 20 Meldungen
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<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 rounded-lg shadow-sm border border-gray-200 w-full">
|
|
<VersionInfo />
|
|
</div>
|
|
|
|
<Baugruppentraeger
|
|
kueOnline={kueOnline}
|
|
kueVersion={kueVersion}
|
|
kueCableBreak={kueCableBreak}
|
|
kueAlarm1={kueAlarm1}
|
|
kueAlarm2={kueAlarm2}
|
|
kueGroundFault={kueGroundFault}
|
|
handleModuleClick={handleModuleClick}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<NetworkInfo />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Dashboard;
|