91 lines
2.8 KiB
TypeScript
91 lines
2.8 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/last20MessagesSlice";
|
|
|
|
type Props = {
|
|
className?: string;
|
|
};
|
|
|
|
const Last20MessagesTable: React.FC<Props> = ({ className }) => {
|
|
const dispatch = useDispatch();
|
|
|
|
const rawLast20Messages = useSelector(
|
|
(state: RootState) => state.last20MessagesSlice.last20Messages
|
|
);
|
|
|
|
useEffect(() => {
|
|
const loadWindowMessages = () => {
|
|
if (typeof window !== "undefined" && (window as any).win_last20Messages) {
|
|
dispatch(setLast20Messages((window as any).win_last20Messages));
|
|
}
|
|
};
|
|
|
|
loadWindowMessages();
|
|
const interval = setInterval(loadWindowMessages, 1000);
|
|
return () => clearInterval(interval);
|
|
}, [dispatch]);
|
|
|
|
const parseMessages = (messages: string | null) => {
|
|
if (!messages) return [];
|
|
|
|
return messages
|
|
.split("<tr>")
|
|
.slice(1)
|
|
.map((row) =>
|
|
row
|
|
.replace(/<\/tr>/, "")
|
|
.split("</td><td>")
|
|
.map((col) => col.replace(/<[^>]+>/g, ""))
|
|
);
|
|
};
|
|
|
|
const allMessages = parseMessages(rawLast20Messages);
|
|
|
|
return (
|
|
<div className={`bg-white p-1 rounded-lg overflow-auto ${className}`}>
|
|
{/* <h1 className="text-xl font-bold mb-4">Letzte 20 Meldungen</h1> */}
|
|
|
|
<div className="overflow-x-auto overflow-y-auto border rounded shadow-sm h-[95%] pt-1">
|
|
<table className="min-w-full border">
|
|
<thead className="bg-gray-100 text-left sticky top-0 z-10">
|
|
<tr>
|
|
<th className="p-2 border">ID</th>
|
|
<th className="p-2 border">Modul</th>
|
|
<th className="p-2 border">Zeitstempel</th>
|
|
<th className="p-2 border">Meldung</th>
|
|
<th className="p-2 border">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{allMessages.length === 0 ? (
|
|
<tr>
|
|
<td
|
|
colSpan={5}
|
|
className="text-center italic text-gray-500 p-4"
|
|
>
|
|
Keine Meldungen verfügbar.
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
allMessages.map((msg, index) => (
|
|
<tr key={index} className="hover:bg-gray-50">
|
|
<td className="border p-2">{msg[0]}</td>
|
|
<td className="border p-2">{msg[1]}</td>
|
|
<td className="border p-2 whitespace-nowrap">{msg[2]}</td>
|
|
|
|
<td className="border p-2">{msg[3]}</td>
|
|
<td className="border p-2">{msg[4]}</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Last20MessagesTable;
|