digitale Eingänge Redux Slice erstellt für mehr Übersicht

components/WindowVariablesInitializer.tsx

@@ -0,0 +1,58 @@
+// components/WindowVariables/Initializer.tsx
+"use client";
+
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+import { setInputs } from "../redux/slices/digitalInputsSlice";
+
+const WindowVariablesInitializer = () => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const loadScriptsAndInitialize = async () => {
+      try {
+        // Beispielhafter Ladevorgang eines Skripts
+        await loadScript("/CPLmockData/SERVICE/de.js");
+
+        // Zugriff auf window-Variablen nach dem Laden der Skripte
+        const winDeState = window.win_de_state || [];
+        const winDeLabel = window.win_de_label || [];
+
+        const initialInputs = winDeState.map(
+          (status: number, index: number) => ({
+            id: index + 1,
+            label: winDeLabel[index] || `Eingang ${index + 1}`,
+            status: status === 1,
+          })
+        );
+
+        // Dispatch der Aktion zum Setzen der Inputs
+        dispatch(setInputs(initialInputs));
+      } catch (error) {
+        console.error(
+          "Fehler beim Laden der Skripte oder Initialisieren der Inputs:",
+          error
+        );
+      }
+    };
+
+    loadScriptsAndInitialize();
+  }, [dispatch]);
+
+  return null;
+};
+
+export default WindowVariablesInitializer;
+
+// Hilfsfunktion zum Laden eines Skripts
+const loadScript = (src: string): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = src;
+    script.async = true;
+    script.onload = () => resolve();
+    script.onerror = () =>
+      reject(new Error(`Fehler beim Laden des Skripts: ${src}`));
+    document.head.appendChild(script);
+  });
+};

components/main/einausgaenge/DigitalInputs.tsx

@@ -1,4 +1,5 @@
-// components/main/einausgaenge/DigitalInputs.tsx
+"use client"; // components/main/einausgaenge/DigitalInputs.tsx
+
 import React from "react";
 import { Icon } from "@iconify/react";
 

components/main/einausgaenge/DigitalOutputs.tsx

@@ -1,4 +1,5 @@
-// components/main/einausgaenge/DigitalOutputs.tsx
+"use client"; // components/main/einausgaenge/DigitalOutputs.tsx
+
 import React from "react";
 import { Icon } from "@iconify/react";
 

config/webVersion.ts

@@ -6,5 +6,5 @@
 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
 
 */
-const webVersion = "1.6.58";
+const webVersion = "1.6.59";
 export default webVersion;

hooks/einausgaenge/useDigitalInputsData.ts

@@ -1,4 +1,4 @@
-// hooks/useDigitalInputData.ts
+"use client"; // hooks/einausgaenge/useDigitalInputsData.ts
 import { useEffect, useState } from "react";
 
 export function useDigitalInputData() {

hooks/einausgaenge/useDigitalOutputsData.ts

@@ -1,4 +1,4 @@
-// /hooks/einausgaenge/useDigitalOutputs.ts
+"use client"; // /hooks/einausgaenge/useDigitalOutputsData.ts
 import { useState, useEffect } from "react";
 
 // Definition des Typs für digitale Ausgänge

hooks/windowVariables/useLoadWindowVariables.ts

@@ -0,0 +1,77 @@
+// hooks/windowvariables/useLoadWindowVariables.ts
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+import { setInputs } from "../../redux/slices/digitalInputsSlice";
+
+const requiredVars: string[] = [
+  // Liste der benötigten Variablennamen
+  "win_de_state",
+  "win_de_label",
+  // weitere Variablen...
+];
+
+const scripts: string[] = [
+  "da.js",
+  "de.js",
+  "ae.js",
+  "kueData.js",
+  "Start.js",
+  "System.js",
+  "opcua.js",
+];
+
+const loadScript = (src: string): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    const environment = process.env.NEXT_PUBLIC_NODE_ENV || "production";
+    script.src =
+      environment === "production"
+        ? `/CPL?/CPL/SERVICE/${src}`
+        : `/CPLmockData/SERVICE/${src}`;
+    script.async = true;
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error(`Script load error: ${src}`));
+    document.head.appendChild(script);
+  });
+};
+
+export const useLoadWindowVariables = () => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const loadVariables = async () => {
+      try {
+        for (const script of scripts) {
+          await loadScript(script);
+        }
+
+        const variablesObj: { [key: string]: any } = requiredVars.reduce(
+          (acc, variable) => {
+            const winVar = (window as any)[variable];
+            if (winVar !== undefined) {
+              acc[variable.replace("win_", "")] = winVar;
+            }
+            return acc;
+          },
+          {}
+        );
+
+        // Beispiel: Aktualisieren des Redux-Stores mit geladenen Variablen
+        if (variablesObj.de_state && variablesObj.de_label) {
+          const initialInputs = variablesObj.de_state.map(
+            (status: number, index: number) => ({
+              id: index + 1,
+              label: variablesObj.de_label[index] || `Eingang ${index + 1}`,
+              status: status === 1,
+            })
+          );
+          dispatch(setInputs(initialInputs));
+        }
+      } catch (error) {
+        console.error("Fehler beim Laden der Skripte oder Variablen:", error);
+      }
+    };
+
+    loadVariables();
+  }, [dispatch]);
+};

pages/_app.tsx

@@ -1,3 +1,4 @@
+"use client";
 // pages/_app.tsx
 import { useEffect, useState } from "react";
 import { loadWindowVariables } from "../utils/loadWindowVariables";
@@ -9,6 +10,7 @@ import { Provider } from "react-redux";
 import { setVariables } from "../redux/slices/variablesSlice";
 import store from "../redux/store";
 import { AppProps } from "next/app";
+import WindowVariablesInitializer from "../components/WindowVariablesInitializer";
 
 function MyApp({ Component, pageProps }: AppProps) {
   const [sessionExpired, setSessionExpired] = useState(false);
@@ -39,6 +41,7 @@ function MyApp({ Component, pageProps }: AppProps) {
 
   return (
     <Provider store={store}>
+      <WindowVariablesInitializer />
       <div className="flex flex-col h-screen overflow-hidden">
         <Header />
         <div className="flex flex-grow w-full">

pages/einausgaenge.tsx

@@ -1,12 +1,12 @@
-// pages/einausgaenge.tsx
+"use client"; // pages/einausgaenge.tsx
-"use client";
+
 import React, { useState } from "react";
 import DigitalOutputs from "../components/main/einausgaenge/DigitalOutputs";
 import DigitalInputs from "../components/main/einausgaenge/DigitalInputs";
 import InputModal from "../components/main/einausgaenge/modals/InputModal";
 import OutputModal from "../components/main/einausgaenge/modals/OutputModal";
-import { useDigitalInputData } from "../hooks/einausgaenge/useDigitalInputData";
+import { useDigitalInputData } from "../hooks/einausgaenge/useDigitalInputsData";
-import { useDigitalOutputs } from "../hooks/einausgaenge/useDigitalOutputs";
+import { useDigitalOutputs } from "../hooks/einausgaenge/useDigitalOutputsData";
 
 function EinAusgaenge() {
   // Verwendung des benutzerdefinierten Hooks für digitale Ausgänge

pages/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect } from "react";
 import { useRouter } from "next/router";
 

public/CPLmockData/SERVICE/de.js

@@ -1,7 +1,42 @@
-var win_de = [
+// public/CPLmockData/SERVICE/de.js
+var win_de_state = [
   1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
   0, 0, 0, 0, 0, 0,
 ];
+var win_de_label = [
+  "DE1",
+  "DE2",
+  "DE3",
+  "DE4",
+  "DE5",
+  "DE6",
+  "DE7",
+  "DE8",
+  "DE9",
+  "DE10",
+  "DE11",
+  "DE12",
+  "DE13",
+  "DE14",
+  "DE15",
+  "DE16",
+  "DE17",
+  "DE18",
+  "DE19",
+  "DE20",
+  "DE21",
+  "DE22",
+  "DE23",
+  "DE24",
+  "DE25",
+  "DE26",
+  "DE27",
+  "DE28",
+  "DE29",
+  "DE30",
+  "DE31",
+  "DE32",
+];
 var win_counter = [
   0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
   0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,

redux/slices/digitalInputsSlice.ts

@@ -0,0 +1,50 @@
+// slices/digitalInputsSlice.ts
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+interface DigitalInput {
+  id: number;
+  label: string;
+  status: boolean;
+}
+
+interface DigitalInputsState {
+  inputs: DigitalInput[];
+}
+
+const initialState: DigitalInputsState = {
+  inputs: [], // Initial leerer Zustand
+};
+
+const digitalInputsSlice = createSlice({
+  name: "digitalInputs",
+  initialState,
+  reducers: {
+    setInputs: (state, action: PayloadAction<DigitalInput[]>) => {
+      state.inputs = action.payload;
+    },
+    updateInputStatus: (
+      state,
+      action: PayloadAction<{ id: number; status: boolean }>
+    ) => {
+      const { id, status } = action.payload;
+      const input = state.inputs.find((input) => input.id === id);
+      if (input) {
+        input.status = status;
+      }
+    },
+    updateInputLabel: (
+      state,
+      action: PayloadAction<{ id: number; label: string }>
+    ) => {
+      const { id, label } = action.payload;
+      const input = state.inputs.find((input) => input.id === id);
+      if (input) {
+        input.label = label;
+      }
+    },
+  },
+});
+
+export const { setInputs, updateInputStatus, updateInputLabel } =
+  digitalInputsSlice.actions;
+export default digitalInputsSlice.reducer;

redux/store.ts

@@ -4,6 +4,7 @@ import authReducer from "./slices/authSlice";
 import variablesReducer from "./slices/variablesSlice";
 import chartDataReducer from "./slices/chartDataSlice";
 import webVersionReducer from "./slices/webVersionSlice";
+import digitalInputsReducer from "./slices/digitalInputsSlice";
 
 const store = configureStore({
   reducer: {
@@ -11,6 +12,7 @@ const store = configureStore({
     variables: variablesReducer,
     chartData: chartDataReducer,
     webVersion: webVersionReducer,
+    digitalInputs: digitalInputsReducer,
   },
 });
 

utils/loadWindowVariables.ts

@@ -19,7 +19,7 @@ export async function loadWindowVariables(): Promise<WindowVariables> {
       "win_systemZeit",
       "win_ntpTimezone",
       "win_ntpActive",
-      "win_de",
+      "win_de_state",
       "win_counter",
       "win_flutter",
       "win_kueOnline",