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

2
components/modales/kueModal/KueModal.tsx
View File

@@ -2,7 +2,7 @@
import ReactModal from "react-modal";
import { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { setVariables } from "../../../redux/store/variablesSlice";
import { setVariables } from "../../../redux/slices/variablesSlice";
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
import handleSave, { OriginalValues } from "./handlers/handleSave";
import handleDisplayEinschalten from "./handlers/handleDisplayEinschalten";

4
components/modales/kueModal/TDRPopup.tsx
View File

@@ -5,13 +5,13 @@ import Chart from "chart.js/auto";
import { useSelector } from "react-redux";
import KueModal from "../../modales/kueModal/KueModal";
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
import { RootState } from "../../../redux/store/store";
import { RootState } from "../../../redux/store";
import { DataTDR } from "../../../redux/types/chartDataTypesTDR";
import { useDispatch } from "react-redux";
import {
setSelectedChartData,
setSelectedFileName,
} from "../../../redux/store/variablesSlice";
} from "../../../redux/slices/variablesSlice";
const TDRChartActionBar: React.FC = () => {
const [jahr, setJahr] = useState(new Date().getFullYear());
const [monat, setMonat] = useState(new Date().getMonth() + 1);

2
components/modales/kueModal/handlers/handleSave.ts
View File

@@ -1,5 +1,5 @@
// components/modales/kueModal/handlers/handleSave.ts
import { setVariables } from "../../../../redux/store/variablesSlice";
import { setVariables } from "../../../../redux/slices/variablesSlice";
export interface OriginalValues {
kueID: string[];

4
components/modules/Kue705FO.tsx
View File

@@ -5,13 +5,13 @@ import Chart from "chart.js/auto";
import { useSelector } from "react-redux";
import KueModal from "../modales/kueModal/KueModal";
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
import { RootState } from "../../redux/store/store";
import { RootState } from "../../redux/store";
import { DataTDR } from "../../redux/types/chartDataTypesTDR";
import { useDispatch } from "react-redux";
import {
setSelectedChartData,
setSelectedFileName,
} from "../../redux/store/variablesSlice";
} from "../../redux/slices/variablesSlice";
import TDRPopup from "../modales/kueModal/TDRPopup";
const Kue705FO: React.FC<Kue705FOProps> = ({

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>

5
public/CPL/SERVICE/opcua.js Normal file
View File

@@ -0,0 +1,5 @@
// public/CPL/SERVICE/opcua.js
//-------OPCUA Information Lesen----------------
var win_opcUaZustand = "<%=SOS01%>";
var win_opcUaActiveClientCount = "<%=SOC01%>";
var win_opcUaNodesetName = "<%=SON01%>";

2
redux/store/authSlice.ts → redux/slices/authSlice.ts
View File

@@ -1,4 +1,4 @@
// redux/store/authSlice.ts
// redux/slices/authSlice.ts
import { createSlice } from "@reduxjs/toolkit";
const authSlice = createSlice({

20
redux/store/variablesSlice.ts → redux/slices/variablesSlice.ts
View File

@@ -1,4 +1,4 @@
// redux/store/variablesSlice.ts
// redux/slices/variablesSlice.ts
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { DataTDR } from "../types/chartDataTypesTDR";
@@ -61,6 +61,9 @@ export interface VariablesState {
win_analogeEingaenge6: string | null;
win_analogeEingaenge7: string | null;
win_analogeEingaenge8: string | null;
opcUaZustand: string | null;
opcUaActiveClientCount: number | null;
opcUaNodesetName: string | null;
}
// Initialer Zustand
@@ -122,6 +125,9 @@ const initialState: VariablesState = {
win_analogeEingaenge6: null,
win_analogeEingaenge7: null,
win_analogeEingaenge8: null,
opcUaZustand: null,
opcUaActiveClientCount: null,
opcUaNodesetName: null,
};
// Slice erstellen
@@ -152,6 +158,15 @@ const variablesSlice = createSlice({
setSelectedFileName(state, action: PayloadAction<string | null>) {
state.selectedFileName = action.payload;
},
setOpcUaZustand(state, action: PayloadAction<string | null>) {
state.opcUaZustand = action.payload;
},
setOpcUaActiveClientCount(state, action: PayloadAction<number | null>) {
state.opcUaActiveClientCount = action.payload;
},
setOpcUaNodesetName(state, action: PayloadAction<string | null>) {
state.opcUaNodesetName = action.payload;
},
},
});
@@ -160,5 +175,8 @@ export const {
setVariables,
setSelectedChartData,
setSelectedFileName,
setOpcUaZustand,
setOpcUaActiveClientCount,
setOpcUaNodesetName,
} = variablesSlice.actions;
export default variablesSlice.reducer;

16
redux/store.ts Normal file
View File

@@ -0,0 +1,16 @@
// redux/store.ts
import { configureStore } from "@reduxjs/toolkit";
import authReducer from "./slices/authSlice";
import variablesReducer from "./slices/variablesSlice";
const store = configureStore({
reducer: {
auth: authReducer,
variables: variablesReducer,
},
});
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export default store;

11
redux/store/rootReducer.ts
View File

@@ -1,11 +0,0 @@
// redux/store/rootReducer.ts
import { combineReducers } from "redux";
import variablesReducer from "./variablesSlice";
import authReducer from "./authSlice";
const rootReducer = combineReducers({
variables: variablesReducer,
auth: authReducer,
});
export default rootReducer;

16
redux/store/store.ts
View File

@@ -1,16 +0,0 @@
// redux/store/store.ts
import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "./rootReducer";
const store = configureStore({
reducer: rootReducer,
//devTools: process.env.NODE_ENV !== "production",
});
// Exportiere den Typ RootState für den gesamten State
export type RootState = ReturnType<typeof rootReducer>;
export type AppDispatch = typeof store.dispatch;
export default store;
//devTools: process.env.NODE_ENV !== "production", // Aktiviert DevTools nur in der Entwicklung