106 lines
3.2 KiB
TypeScript
106 lines
3.2 KiB
TypeScript
"use client";
|
|
import React, { useEffect, useState } from "react";
|
|
|
|
type Meldung = {
|
|
t: string; // Zeitstempel
|
|
s: number; // Status
|
|
c: string; // Farbe
|
|
m: string; // Meldung
|
|
i: string; // Modul/Quelle
|
|
};
|
|
|
|
const Last20MessagesTable: React.FC<{ className?: string }> = ({
|
|
className,
|
|
}) => {
|
|
const [messages, setMessages] = useState<Meldung[]>([]);
|
|
|
|
useEffect(() => {
|
|
const fetchLast20Messages = async () => {
|
|
const today = new Date();
|
|
const prior30 = new Date();
|
|
prior30.setDate(today.getDate() - 30);
|
|
|
|
const format = (d: Date) =>
|
|
`${d.getFullYear()};${(d.getMonth() + 1)
|
|
.toString()
|
|
.padStart(2, "0")};${d.getDate().toString().padStart(2, "0")}`;
|
|
|
|
const from = format(prior30);
|
|
const to = format(today);
|
|
|
|
const isDev =
|
|
typeof window !== "undefined" &&
|
|
window.location.hostname === "localhost";
|
|
|
|
const url = isDev
|
|
? `/api/cpl/last20MessagesAPIHandler`
|
|
: `/CPL?Service/ae.ACP&MSS1=${from};${to};All`;
|
|
|
|
try {
|
|
const res = await fetch(url);
|
|
const raw = await res.json();
|
|
const data = Array.isArray(raw) ? raw : raw.data;
|
|
if (!Array.isArray(data)) return;
|
|
|
|
const sorted = [...data].sort(
|
|
(a, b) => new Date(b.t).getTime() - new Date(a.t).getTime()
|
|
);
|
|
const last20 = sorted.slice(0, 20); // NEUESTE zuerst
|
|
|
|
setMessages(last20);
|
|
} catch (err) {
|
|
console.error("Fehler beim Laden der Meldungen:", err);
|
|
}
|
|
};
|
|
|
|
fetchLast20Messages();
|
|
}, []);
|
|
|
|
return (
|
|
<div className={`bg-white p-1 rounded-lg overflow-auto ${className}`}>
|
|
<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">Prio</th>
|
|
<th className="p-2 border">Zeit</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.length === 0 ? (
|
|
<tr>
|
|
<td
|
|
colSpan={5}
|
|
className="text-center italic text-gray-500 p-4"
|
|
>
|
|
Keine Meldungen verfügbar.
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
messages.map((msg, index) => (
|
|
<tr key={index} className="hover:bg-gray-50">
|
|
<td className="border p-2">
|
|
<div
|
|
className="w-4 h-4 rounded"
|
|
style={{ backgroundColor: msg.c }}
|
|
></div>
|
|
</td>
|
|
<td className="border p-2 whitespace-nowrap">{msg.t}</td>
|
|
<td className="border p-2">{msg.i}</td>
|
|
<td className="border p-2">{msg.m}</td>
|
|
<td className="border p-2">{msg.s}</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Last20MessagesTable;
|