62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
type Meldung = {
|
|
t: string;
|
|
s: number;
|
|
c: string;
|
|
m: string;
|
|
i: string;
|
|
v: string;
|
|
};
|
|
|
|
export default function MeldungenTabelle({
|
|
messages,
|
|
}: {
|
|
messages: Meldung[];
|
|
}) {
|
|
return (
|
|
<div className="overflow-auto max-h-[80vh]">
|
|
<table className="min-w-full border">
|
|
<thead className="bg-gray-100 text-left sticky top-0 z-10">
|
|
<tr>
|
|
<th className="p-2 border">Prio</th>
|
|
<th className="p-2 border">Zeitstempel</th>
|
|
<th className="p-2 border">Quelle</th>
|
|
<th className="p-2 border">Meldung</th>
|
|
<th className="p-2 border">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{messages.map((msg, index) => (
|
|
<tr key={index} className="hover:bg-gray-200">
|
|
<td className="border p-2">
|
|
<div
|
|
className="w-4 h-4 rounded"
|
|
style={{ backgroundColor: msg.c }}
|
|
></div>
|
|
</td>
|
|
<td className="border p-2">
|
|
{new Date(msg.t).toLocaleString("de-DE", {
|
|
day: "2-digit",
|
|
month: "2-digit",
|
|
year: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
second: "2-digit",
|
|
})}
|
|
</td>
|
|
|
|
<td className="border p-2">{msg.i}</td>
|
|
<td className="border p-2">{msg.m}</td>
|
|
<td className="border p-2">{msg.v}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
{messages.length === 0 && (
|
|
<div className="mt-4 text-center text-gray-500 italic">
|
|
Keine Meldungen im gewählten Zeitraum vorhanden.
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|