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

OPCUA Info Lesen in dashboard

Browse Source
This commit is contained in:
ISA
2025-02-10 07:38:09 +01:00
parent 34ff252d80
commit 89c36fc071
12 changed files with 108 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
pages/_app.tsx
View File

@@ -6,8 +6,8 @@ import Navigation from "../components/Navigation";
import Footer from "../components/Footer";
import "../styles/globals.css";
import { Provider } from "react-redux";
import { setVariables } from "../redux/store/variablesSlice";
import store from "../redux/store/store";
import { setVariables } from "../redux/slices/variablesSlice";
import store from "../redux/store";
import { AppProps } from "next/app";
function MyApp({ Component, pageProps }: AppProps) {

63
pages/dashboard.tsx
View File

@@ -1,5 +1,5 @@
"use client"; // app/dashboard/page.jsx
import React from "react";
import React, { useEffect } from "react";
import { useRouter } from "next/navigation";
import "tailwindcss/tailwind.css";
import "@fontsource/roboto";
@@ -8,12 +8,39 @@ import CPLStatus from "../components/modulesStatus/CPLStatus";
import KabelModulStatus from "../components/modulesStatus/KabelModulStatus";
import { Icon } from "@iconify/react";
import { useSelector } from "react-redux";
import { RootState } from "../redux/store/store";
import { RootState } from "../redux/store";
import { useDispatch } from "react-redux";
import {
setOpcUaZustand,
setOpcUaActiveClientCount,
setOpcUaNodesetName,
} from "../redux/slices/variablesSlice";
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 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
);
@@ -246,10 +273,38 @@ function Dashboard() {
</div>
</div>
<div className="flex items-center space-x-4">
<img src="/images/IP-icon.svg" alt="IP Address" className="w-6 " />
<img src="/images/IP-icon.svg" alt="OPC UA Status" className="w-6 " />
<div>
<p className="text-xs text-gray-500">OPCUA Status</p>
<p className="text-sm font-medium text-gray-700">{ip}</p>
<p className="text-sm font-medium text-gray-700">{opcUaZustand}</p>
</div>
</div>
<div className="flex items-center space-x-4">
<img
src="/images/client-icon.svg"
alt="OPC UA Clients"
className="w-6 "
/>
<div>
<p className="text-xs text-gray-500">Verbundene Clients</p>
<p className="text-sm font-medium text-gray-700">
{opcUaActiveClientCount}
</p>
</div>
</div>
<div className="flex items-center space-x-4">
<img
src="/images/nodeset-icon.svg"
alt="Nodeset Name"
className="w-6 "
/>
<div>
<p className="text-xs text-gray-500">Nodeset Name</p>
<p className="text-sm font-medium text-gray-700">
{opcUaNodesetName}
</p>
</div>
</div>
</div>