refactor: last20Messages in dashboardSlice ausgelagert und Redux-Handling optimiert

- last20Messages aus variablesSlice entfernt und in dashboardSlice verschoben
- Redux wird nun mit window.win_last20Messages aktualisiert
- setInterval hinzugefügt, um späte Ladezeiten von window-Daten abzufangen
- API-Aufruf entfernt, da keine /api/last20Messages existiert
- Redux DevTools überprüft, Daten werden jetzt korrekt geladen und angezeigt

components/main/uebersicht/Last20MessagesTable.tsx

@@ -1,13 +1,34 @@
-"use client";
-import React from "react";
-import { useSelector } from "react-redux";
+"use client"; // /components/main/uebersicht/Last20MessagesTable.tsx
+import React, { useEffect } from "react";
+import { useSelector, useDispatch } from "react-redux";
 import { RootState } from "../../../redux/store";
+import { setLast20Messages } from "../../../redux/slices/dashboardSlice";
 
 const Last20MessagesTable: React.FC = () => {
+  const dispatch = useDispatch();
+
+  // Holt last20Messages aus Redux
   const rawLast20Messages = useSelector(
-    (state: RootState) => state.variables.last20Messages
+    (state: RootState) => state.dashboard.last20Messages
   );
 
+  // Holt Daten aus `window.win_last20Messages` und speichert sie in Redux
+  useEffect(() => {
+    const loadWindowMessages = () => {
+      if (typeof window !== "undefined" && (window as any).win_last20Messages) {
+        dispatch(setLast20Messages((window as any).win_last20Messages));
+      }
+    };
+
+    // Initialen Wert setzen
+    loadWindowMessages();
+
+    // Falls die Daten erst später geladen werden, überprüfe jede Sekunde
+    const interval = setInterval(loadWindowMessages, 1000);
+
+    return () => clearInterval(interval);
+  }, [dispatch]);
+
   // Hilfsfunktion zum Parsen der Nachrichten
   const parseMessages = (messages: string | null) => {
     if (typeof messages === "string") {

redux/slices/dashboardSlice.ts

@@ -0,0 +1,23 @@
+// /redux/slices/dashboardSlice.ts
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+interface DashboardState {
+  last20Messages: string | null;
+}
+
+const initialState: DashboardState = {
+  last20Messages: null,
+};
+
+export const dashboardSlice = createSlice({
+  name: "dashboard",
+  initialState,
+  reducers: {
+    setLast20Messages: (state, action: PayloadAction<string | null>) => {
+      state.last20Messages = action.payload;
+    },
+  },
+});
+
+export const { setLast20Messages } = dashboardSlice.actions;
+export default dashboardSlice.reducer;

redux/slices/variablesSlice.ts

@@ -14,7 +14,7 @@ export interface VariablesState {
   obereSchleifenGrenzwerte: number[];
   schleifenintervall: number[];
   //---------------
-  last20Messages: string | null;
+
   deviceName: string | null;
   mac1: string | null;
   ip: string | null;
@@ -78,7 +78,7 @@ const initialState: VariablesState = {
   obereSchleifenGrenzwerte: [],
   schleifenintervall: [],
   //---------------
-  last20Messages: null,
+
   deviceName: null,
   mac1: null,
   ip: null,

redux/store.ts

@@ -6,6 +6,7 @@ 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";
 
 const store = configureStore({
   reducer: {
@@ -15,6 +16,7 @@ const store = configureStore({
     webVersion: webVersionReducer,
     digitalInputs: digitalInputsReducer,
     kabelueberwachungChart: kabelueberwachungChartReducer,
+    dashboard: dashboardReducer,
   },
 });