80c9d12c6b
- 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
107 lines
3.6 KiB
TypeScript
107 lines
3.6 KiB
TypeScript
"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.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") {
|
|
messages = messages
|
|
.replace(/<tr>/g, "\n")
|
|
.replace(/<\/?td>/g, "")
|
|
.replace(/<\/tr>/g, "")
|
|
.trim();
|
|
const rows = messages.split("\n");
|
|
return rows.map((row) => [
|
|
row.substring(0, 5),
|
|
row.substring(5, 10),
|
|
row.substring(10, 29),
|
|
row.substring(33, row.length - 1),
|
|
row.substring(row.length - 1),
|
|
]);
|
|
}
|
|
return [];
|
|
};
|
|
|
|
const last20Messages = parseMessages(rawLast20Messages);
|
|
|
|
return (
|
|
<div className="bg-white shadow-md rounded-lg w-full lg:w-2/3 overflow-auto flex ">
|
|
<table className="min-w-full border border-gray-200 text-left table-fixed ">
|
|
<thead className="bg-gray-100 border-b border-gray-300">
|
|
<tr>
|
|
<th className="py-1 px-4 text-gray-700 text-sm font-medium">ID</th>
|
|
<th className="py-1 px-4 text-gray-700 text-sm font-medium">
|
|
Modul
|
|
</th>
|
|
<th className="py-1 px-4 text-gray-700 text-sm font-medium">
|
|
Zeitstempel
|
|
</th>
|
|
<th className="py-1 px-4 text-gray-700 text-sm font-medium w-2/3">
|
|
Meldung
|
|
</th>
|
|
<th className="py-1 px-4 text-gray-700 text-sm font-medium">
|
|
Status
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="text-xs text-gray-600 laptop:text-xs flex-shrink-0">
|
|
{last20Messages.length > 0 ? (
|
|
last20Messages.map((columns, index) => (
|
|
<tr
|
|
key={index}
|
|
className="border-b border-gray-200 hover:bg-gray-50"
|
|
>
|
|
<td className="px-4 w-1/7">{columns[0]}</td>
|
|
<td className="px-4 w-1/7">{columns[1]}</td>
|
|
<td className="px-4 w-3/7 whitespace-nowrap">
|
|
<div className="flex flex-row space-x-2">
|
|
<span>{columns[2].split(" ")[0]}</span>
|
|
<span>{columns[2].split(" ")[1]}</span>
|
|
</div>
|
|
</td>
|
|
<td className="px-4 w-2/7">{columns[3]}</td>
|
|
<td className="px-4 w-1/7">{columns[4]}</td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td className="px-4 text-center" colSpan={5}>
|
|
Keine Meldungen verfügbar.
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Last20MessagesTable;
|