diff --git a/components/modales/kueModal/KueModal.tsx b/components/modales/kueModal/KueModal.tsx index 5a414a8..1802fb2 100644 --- a/components/modales/kueModal/KueModal.tsx +++ b/components/modales/kueModal/KueModal.tsx @@ -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"; diff --git a/components/modales/kueModal/TDRPopup.tsx b/components/modales/kueModal/TDRPopup.tsx index 33de1c6..261c404 100644 --- a/components/modales/kueModal/TDRPopup.tsx +++ b/components/modales/kueModal/TDRPopup.tsx @@ -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); diff --git a/components/modales/kueModal/handlers/handleSave.ts b/components/modales/kueModal/handlers/handleSave.ts index 1f5ea40..d50b14a 100644 --- a/components/modales/kueModal/handlers/handleSave.ts +++ b/components/modales/kueModal/handlers/handleSave.ts @@ -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[]; diff --git a/components/modules/Kue705FO.tsx b/components/modules/Kue705FO.tsx index e665805..aa0e475 100644 --- a/components/modules/Kue705FO.tsx +++ b/components/modules/Kue705FO.tsx @@ -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 = ({ diff --git a/pages/_app.tsx b/pages/_app.tsx index 6115281..af4808a 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -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) { diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx index be19028..41e5957 100644 --- a/pages/dashboard.tsx +++ b/pages/dashboard.tsx @@ -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() {
- IP Address + OPC UA Status

OPCUA Status

-

{ip}

+

{opcUaZustand}

+
+
+ +
+ OPC UA Clients +
+

Verbundene Clients

+

+ {opcUaActiveClientCount} +

+
+
+ +
+ Nodeset Name +
+

Nodeset Name

+

+ {opcUaNodesetName} +

diff --git a/public/CPL/SERVICE/opcua.js b/public/CPL/SERVICE/opcua.js new file mode 100644 index 0000000..d66d276 --- /dev/null +++ b/public/CPL/SERVICE/opcua.js @@ -0,0 +1,5 @@ +// public/CPL/SERVICE/opcua.js +//-------OPCUA Information Lesen---------------- +var win_opcUaZustand = "<%=SOS01%>"; +var win_opcUaActiveClientCount = "<%=SOC01%>"; +var win_opcUaNodesetName = "<%=SON01%>"; diff --git a/redux/store/authSlice.ts b/redux/slices/authSlice.ts similarity index 96% rename from redux/store/authSlice.ts rename to redux/slices/authSlice.ts index 6192182..24fb896 100644 --- a/redux/store/authSlice.ts +++ b/redux/slices/authSlice.ts @@ -1,4 +1,4 @@ -// redux/store/authSlice.ts +// redux/slices/authSlice.ts import { createSlice } from "@reduxjs/toolkit"; const authSlice = createSlice({ diff --git a/redux/store/variablesSlice.ts b/redux/slices/variablesSlice.ts similarity index 86% rename from redux/store/variablesSlice.ts rename to redux/slices/variablesSlice.ts index 2b7c299..cb56e42 100644 --- a/redux/store/variablesSlice.ts +++ b/redux/slices/variablesSlice.ts @@ -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) { state.selectedFileName = action.payload; }, + setOpcUaZustand(state, action: PayloadAction) { + state.opcUaZustand = action.payload; + }, + setOpcUaActiveClientCount(state, action: PayloadAction) { + state.opcUaActiveClientCount = action.payload; + }, + setOpcUaNodesetName(state, action: PayloadAction) { + state.opcUaNodesetName = action.payload; + }, }, }); @@ -160,5 +175,8 @@ export const { setVariables, setSelectedChartData, setSelectedFileName, + setOpcUaZustand, + setOpcUaActiveClientCount, + setOpcUaNodesetName, } = variablesSlice.actions; export default variablesSlice.reducer; diff --git a/redux/store.ts b/redux/store.ts new file mode 100644 index 0000000..34a476d --- /dev/null +++ b/redux/store.ts @@ -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; +export type AppDispatch = typeof store.dispatch; + +export default store; diff --git a/redux/store/rootReducer.ts b/redux/store/rootReducer.ts deleted file mode 100644 index a9d4fad..0000000 --- a/redux/store/rootReducer.ts +++ /dev/null @@ -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; diff --git a/redux/store/store.ts b/redux/store/store.ts deleted file mode 100644 index aa7b61f..0000000 --- a/redux/store/store.ts +++ /dev/null @@ -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; -export type AppDispatch = typeof store.dispatch; - -export default store; - -//devTools: process.env.NODE_ENV !== "production", // Aktiviert DevTools nur in der Entwicklung