108 lines
3.7 KiB
TypeScript
108 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import { getMessagesThunk } from "@/redux/thunks/getMessagesThunk";
|
|
import type { AppDispatch } from "@/redux/store";
|
|
|
|
type Meldung = {
|
|
t: string;
|
|
s: number;
|
|
c: string;
|
|
m: string;
|
|
i: string;
|
|
v: string;
|
|
};
|
|
|
|
type Props = {
|
|
className?: string;
|
|
};
|
|
|
|
export default function Last20MessagesTable({ className }: Props) {
|
|
const dispatch = useDispatch<AppDispatch>();
|
|
type RootState = {
|
|
messages: {
|
|
data: Meldung[];
|
|
};
|
|
};
|
|
const { data: messages } = useSelector((state: RootState) => state.messages);
|
|
|
|
const [sourceFilter] = useState<string>("Alle");
|
|
|
|
const today = new Date();
|
|
const prior30 = new Date();
|
|
prior30.setDate(today.getDate() - 30);
|
|
const formatDate = (d: Date) => d.toISOString().split("T")[0];
|
|
const [fromDate] = useState<string>(formatDate(prior30));
|
|
const [toDate] = useState<string>(formatDate(today));
|
|
|
|
useEffect(() => {
|
|
dispatch(getMessagesThunk({ fromDate, toDate }));
|
|
}, [dispatch, fromDate, toDate]);
|
|
|
|
const filteredMessages =
|
|
sourceFilter === "Alle"
|
|
? messages
|
|
: messages.filter((m: Meldung) => m.i === sourceFilter);
|
|
|
|
return (
|
|
<div className={`flex flex-col gap-3 p-4 ${className}`}>
|
|
<div className="overflow-auto max-h-[80vh]">
|
|
<table className="min-w-full border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
|
|
<thead className="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100 text-left sticky top-0 z-10">
|
|
<tr>
|
|
<th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
|
|
Prio
|
|
</th>
|
|
<th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
|
|
Zeitstempel
|
|
</th>
|
|
<th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
|
|
Quelle
|
|
</th>
|
|
<th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
|
|
Meldung
|
|
</th>
|
|
<th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
|
|
Status
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{filteredMessages.slice(0, 20).map((msg, index) => (
|
|
<tr
|
|
key={index}
|
|
className="hover:bg-gray-100 dark:hover:bg-gray-800"
|
|
>
|
|
<td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
|
|
<div
|
|
className="w-4 h-4 rounded"
|
|
style={{ backgroundColor: msg.c }}
|
|
></div>
|
|
</td>
|
|
<td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
|
|
{msg.t}
|
|
</td>
|
|
<td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
|
|
{msg.i}
|
|
</td>
|
|
<td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
|
|
{msg.m}
|
|
</td>
|
|
<td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
|
|
{msg.v}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
{messages.length === 0 && (
|
|
<div className="mt-4 text-center text-gray-500 italic dark:text-gray-400">
|
|
Keine Meldungen im gewählten Zeitraum vorhanden.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|