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!

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