diff --git a/components/main/uebersicht/Last20MessagesTable.tsx b/components/main/uebersicht/Last20MessagesTable.tsx index 7caf8e3..2e1ef85 100644 --- a/components/main/uebersicht/Last20MessagesTable.tsx +++ b/components/main/uebersicht/Last20MessagesTable.tsx @@ -4,15 +4,17 @@ import { useSelector, useDispatch } from "react-redux"; import { RootState } from "../../../redux/store"; import { setLast20Messages } from "../../../redux/slices/last20MessagesSlice"; -const Last20MessagesTable: React.FC = () => { +type Props = { + className?: string; +}; + +const Last20MessagesTable: React.FC = ({ className }) => { const dispatch = useDispatch(); - // Holt last20Messages aus Redux const rawLast20Messages = useSelector( (state: RootState) => state.last20MessagesSlice.last20Messages ); - // Holt Daten aus `window.win_last20Messages` und speichert sie in Redux useEffect(() => { const loadWindowMessages = () => { if (typeof window !== "undefined" && (window as any).win_last20Messages) { @@ -20,83 +22,71 @@ const Last20MessagesTable: React.FC = () => { } }; - // 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 (!messages) return []; - const rows = messages + return messages .split("") - .slice(1) // erstes Element ist leer - .map((row) => { - const cols = row + .slice(1) + .map((row) => + row .replace(/<\/tr>/, "") .split("") - .map((col) => col.replace(/<[^>]+>/g, "")); - return cols; - }); - - return rows; + .map((col) => col.replace(/<[^>]+>/g, "")) + ); }; - const last20Messages = parseMessages(rawLast20Messages); + const allMessages = parseMessages(rawLast20Messages); return ( -
- - - - - - - - - - - - {last20Messages.length > 0 ? ( - last20Messages.map((columns, index) => ( - - - - - - - - )) - ) : ( +
+

Letzte 20 Meldungen

+ +
+
ID - Modul - - Zeitstempel - - Meldung - - Status -
{columns[0]}{columns[1]} -
- {columns[2].split(" ")[0]} - {columns[2].split(" ")[1]} -
-
{columns[3]}{columns[4]}
+ - + + + + + - )} - -
- Keine Meldungen verfügbar. - IDModulZeitstempelMeldungStatus
+ + + {allMessages.length === 0 ? ( + + + Keine Meldungen verfügbar. + + + ) : ( + allMessages.map((msg, index) => ( + + {msg[0]} + {msg[1]} + +
+ {msg[2]?.split(" ")[0]} + {msg[2]?.split(" ")[1]} +
+ + {msg[3]} + {msg[4]} + + )) + )} + + +
); }; diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx index 0ace96b..691c0c9 100644 --- a/pages/dashboard.tsx +++ b/pages/dashboard.tsx @@ -41,7 +41,7 @@ const Dashboard: React.FC = () => { {/* Hauptbereich mit Meldungstabelle und Baugruppenträger */}
- +