OPCUA Info Lesen in dashboard

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";

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);

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[];

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<Kue705FOProps> = ({

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 { setVariables } from "../redux/slices/variablesSlice";
-import store from "../redux/store/store";
+import store from "../redux/store";
 import { AppProps } from "next/app";
 
 function MyApp({ Component, pageProps }: AppProps) {

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() {
           </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>

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%>";

redux/slices/authSlice.ts

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

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<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;

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<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+
+export default store;

redux/store/rootReducer.ts

@@ -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;

redux/store/store.ts

@@ -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