feat: Redux-Thunk für digitale Eingänge integriert & UI mit zwei Tabellen umgesetzt

- `fetchDigitaleEingaengeThunk.ts` erstellt, um digitale Eingänge in Redux zu speichern.
- `fetchDigitaleEingaenge.ts` erstellt, um API-Daten aus `de.js` zu laden.
- `digitalInputsSlice.ts` hinzugefügt, um digitale Eingänge in Redux zu verwalten.
- `DigitalInputs.tsx` überarbeitet: Zwei Tabellen für digitale Eingänge hinzugefügt.
- Sicherstellung, dass Redux-Thunk nur im Client (`useEffect`) ausgeführt wird.
- API-Calls werden nun alle 10 Sekunden aktualisiert.

✅ Jetzt läuft Redux-Thunk stabil & effizient für digitale Eingänge!

components/main/einausgaenge/DigitalInputs.tsx

@@ -1,15 +1,21 @@
 "use client"; // components/main/einausgaenge/DigitalInputs.tsx
-
 import React from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../redux/store";
 import { Icon } from "@iconify/react";
 
-export default function DigitalInputs({
-  inputsGroup1,
-  inputsGroup2,
-  openInputModal,
-}) {
+export default function DigitalInputs({ openInputModal }) {
+  const digitalInputs = useSelector(
+    (state: RootState) => state.digitalInputs.inputs
+  );
+
+  // **Gruppiere Eingänge in zwei Tabellen**
+  const midIndex = Math.ceil(digitalInputs.length / 2);
+  const inputsGroup1 = digitalInputs.slice(0, midIndex);
+  const inputsGroup2 = digitalInputs.slice(midIndex);
+
   return (
-    <div className="bg-white shadow-md rounded-lg border border-gray-200 p-4 w-3/5 flex-grow flex flex-col">
+    <div className="bg-white shadow-md rounded-lg border border-gray-200 p-4 w-full flex-grow flex flex-col">
       <h2 className="text-md font-bold mb-4 flex items-center">
         <Icon icon="mdi:input" className="text-blue-500 mr-2 text-2xl" />
         Digitale Eingänge
@@ -39,15 +45,13 @@ export default function DigitalInputs({
                     <td className="p-2 xl:py-0">
                       <span
                         className={
-                          input.status === "active"
-                            ? "text-green-500"
-                            : "text-red-500"
+                          input.status ? "text-green-500" : "text-red-500"
                         }
                       >
-                        {input.status === "active" ? "●" : "⨉"}
+                        {input.status ? "●" : "⨉"}
                       </span>
                     </td>
-                    <td className="p-2 xl:py-0">{input.description}</td>
+                    <td className="p-2 xl:py-0">{input.label}</td>
                     <td className="p-2 xl:py-0">
                       <Icon
                         icon="mdi:settings"

config/webVersion.ts

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

pages/_app.tsx

@@ -4,7 +4,6 @@
 import { useEffect, useState } from "react";
 import { Provider } from "react-redux";
 import store, { useAppDispatch } from "../redux/store";
-import { fetchAnalogeEingaengeThunk } from "../redux/thunks/fetchAnalogeEingaengeThunk";
 import { loadWindowVariables } from "../utils/loadWindowVariables";
 import Header from "../components/header/Header";
 import Navigation from "../components/navigation/Navigation";
@@ -19,6 +18,8 @@ import {
   setOpcUaActiveClientCount,
   setOpcUaNodesetName,
 } from "../redux/slices/opcuaSettingsSlice";
+import { fetchAnalogeEingaengeThunk } from "../redux/thunks/fetchAnalogeEingaengeThunk";
+import { fetchDigitaleEingaengeThunk } from "../redux/thunks/fetchDigitaleEingaengeThunk";
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
@@ -95,7 +96,7 @@ function AppContent({ Component, pageProps }: AppProps) {
       return () => clearInterval(intervalId);
     }
   }, []);
-
+  //---------------------------------------------------------
   useEffect(() => {
     if (typeof window !== "undefined") {
       dispatch(fetchAnalogeEingaengeThunk());
@@ -105,7 +106,17 @@ function AppContent({ Component, pageProps }: AppProps) {
       return () => clearInterval(interval);
     }
   }, [dispatch]);
-
+  //---------------------------------------------------------
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      dispatch(fetchDigitaleEingaengeThunk());
+      const interval = setInterval(() => {
+        dispatch(fetchDigitaleEingaengeThunk());
+      }, 10000);
+      return () => clearInterval(interval);
+    }
+  }, [dispatch]);
+  //---------------------------------------------------------
   return (
     <div className="flex flex-col h-screen overflow-hidden">
       <WindowVariablesInitializer />

redux/slices/digitalInputsSlice.ts

@@ -5,6 +5,8 @@ interface DigitalInput {
   id: number;
   label: string;
   status: boolean;
+  counter: number;
+  flutter: number;
 }
 
 interface DigitalInputsState {
@@ -12,7 +14,7 @@ interface DigitalInputsState {
 }
 
 const initialState: DigitalInputsState = {
-  inputs: [], // Initial leerer Zustand
+  inputs: [],
 };
 
 const digitalInputsSlice = createSlice({
@@ -32,19 +34,8 @@ const digitalInputsSlice = createSlice({
         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 const { setInputs, updateInputStatus } = digitalInputsSlice.actions;
 export default digitalInputsSlice.reducer;

redux/store.ts

@@ -5,7 +5,6 @@ import authReducer from "./slices/authSlice";
 import variablesReducer from "./slices/variablesSlice";
 import kueChartModeReducer from "./slices/kueChartModeSlice";
 import webVersionReducer from "./slices/webVersionSlice";
-import digitalInputsReducer from "./slices/digitalInputsSlice";
 import kabelueberwachungChartReducer from "./slices/kabelueberwachungChartSlice";
 import dashboardReducer from "./slices/dashboardSlice";
 import systemSettingsReducer from "./slices/systemSettingsSlice";
@@ -14,6 +13,7 @@ import digitalOutputsReducer from "./slices/digitalOutputsSlice";
 import brushReducer from "./slices/brushSlice";
 import tdrChartReducer from "./slices/tdrChartSlice";
 import analogeEingaengeReducer from "./slices/analogeEingaengeSlice";
+import digitalInputsReducer from "./slices/digitalInputsSlice";
 
 const store = configureStore({
   reducer: {

redux/thunks/fetchDigitaleEingaengeThunk.ts

@@ -0,0 +1,22 @@
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import { fetchDigitaleEingaenge } from "../../services/fetchDigitaleEingaenge";
+import { setInputs } from "../slices/digitalInputsSlice";
+
+/**
+ * Holt digitale Eingänge von der API und speichert sie in Redux.
+ */
+export const fetchDigitaleEingaengeThunk = createAsyncThunk(
+  "digitalInputs/fetchDigitaleEingaenge",
+  async (_, { dispatch }) => {
+    if (typeof window === "undefined") return;
+
+    try {
+      const data = await fetchDigitaleEingaenge();
+      if (data) {
+        dispatch(setInputs(data)); // ✅ Redux mit API-Daten füllen
+      }
+    } catch (error) {
+      console.error("❌ Fehler beim Laden der digitalen Eingänge:", error);
+    }
+  }
+);

redux/thunks/fetchLoopChartDataThunk.ts

@@ -1,56 +0,0 @@
-// /redux/thunks/fetchLoopChartDataThunk.ts
-import { createAsyncThunk } from "@reduxjs/toolkit";
-import { fetchLoopChartData } from "../../services/fetchLoopChartData";
-import { setLoopMeasurementCurveChartData } from "../slices/kabelueberwachungChartSlice";
-
-/**
- * Holt die neuesten Daten von der API und speichert sie in Redux.
- */
-export const fetchLoopChartDataThunk = createAsyncThunk(
-  "kabelueberwachungChart/fetchLoopChartData",
-  async (
-    {
-      mode,
-      type,
-      slotNumber,
-      vonDatum,
-      bisDatum,
-    }: {
-      mode: "DIA0" | "DIA1" | "DIA2";
-      type: number;
-      slotNumber: number;
-      vonDatum: string;
-      bisDatum: string;
-    },
-    { dispatch }
-  ) => {
-    const data = await fetchLoopChartData(
-      mode,
-      type,
-      slotNumber,
-      vonDatum,
-      bisDatum
-    );
-    if (data) {
-      dispatch(setLoopMeasurementCurveChartData(data));
-    }
-  }
-);
-
-/**
- * Starte automatisches Polling (alle 10 Sekunden).
- */
-export const startLoopChartDataPolling = () => (dispatch: any) => {
-  setInterval(() => {
-    console.log("🔄 Daten werden aktualisiert...");
-    dispatch(
-      fetchLoopChartDataThunk({
-        mode: "DIA0",
-        type: 4,
-        slotNumber: 6,
-        vonDatum: "2024-02-01",
-        bisDatum: "2024-02-10",
-      })
-    );
-  }, 10000);
-};

services/fetchDigitaleEingaenge.ts

@@ -0,0 +1,52 @@
+/**
+ * Bestimmt die richtige API-URL für digitale Eingänge basierend auf Umgebung.
+ */
+const getApiUrl = () => {
+  if (typeof window === "undefined") {
+    console.error("❌ `window` ist nicht verfügbar (Server-Side Rendering)");
+    return null;
+  }
+
+  return process.env.NODE_ENV === "development"
+    ? `${window.location.origin}/CPLmockData/SERVICE/de.js`
+    : `${window.location.origin}/CPL/SERVICE/de.js`;
+};
+
+/**
+ * Holt die digitalen Eingänge und formatiert die Daten für Redux.
+ */
+export const fetchDigitaleEingaenge = async () => {
+  try {
+    const apiUrl = getApiUrl();
+    if (!apiUrl) return null;
+
+    console.log(`📡 API-Request an: ${apiUrl}`);
+    const response = await fetch(apiUrl);
+    if (!response.ok) {
+      throw new Error(`❌ Fehler: ${response.status} ${response.statusText}`);
+    }
+
+    const rawData = await response.text();
+    console.log("✅ Rohdaten erfolgreich geladen:", rawData);
+
+    // **JavaScript-Variablen als Skript einfügen**
+    const script = document.createElement("script");
+    script.innerHTML = rawData;
+    document.body.appendChild(script);
+
+    // **Daten ins Redux-Format umwandeln**
+    const formattedData = win_de_state.map((status, index) => ({
+      id: index + 1,
+      label: win_de_label[index] || `DE${index + 1}`,
+      status: status === 1,
+      counter: win_counter[index] || 0,
+      flutter: win_flutter[index] || 0,
+    }));
+
+    console.log("✅ Formatierte Daten:", formattedData);
+    return formattedData;
+  } catch (error) {
+    console.error("❌ Fehler beim Laden der digitalen Eingänge:", error);
+    return null;
+  }
+};