100 lines
2.9 KiB
TypeScript
100 lines
2.9 KiB
TypeScript
// /pages/meldungen.tsx
|
|
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
|
|
type Meldung = {
|
|
t: string;
|
|
s: number;
|
|
c: string;
|
|
m: string;
|
|
i: string;
|
|
};
|
|
|
|
const ITEMS_PER_PAGE = 10;
|
|
|
|
export default function Messages() {
|
|
const [messages, setMessages] = useState<Meldung[]>([]);
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
|
|
useEffect(() => {
|
|
const fetchMessages = async () => {
|
|
// https://10.10.0.222/CPL?Service/ae.ACP&MSS1=2025;01;01;2025;2;28;All
|
|
try {
|
|
const res = await fetch("/CPLmockData/meldungen/messages.json");
|
|
const data = await res.json();
|
|
setMessages(data);
|
|
} catch (err) {
|
|
console.error("Fehler beim Laden der Meldungen:", err);
|
|
}
|
|
};
|
|
|
|
fetchMessages();
|
|
}, []);
|
|
|
|
const totalPages = Math.ceil(messages.length / ITEMS_PER_PAGE);
|
|
const currentMessages = messages.slice(
|
|
(currentPage - 1) * ITEMS_PER_PAGE,
|
|
currentPage * ITEMS_PER_PAGE
|
|
);
|
|
|
|
return (
|
|
<div className="p-4">
|
|
<h1 className="text-xl font-bold mb-4">Meldungen</h1>
|
|
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full border">
|
|
<thead className="bg-gray-100 text-left">
|
|
<tr>
|
|
<th className="p-2 border">Status</th>
|
|
<th className="p-2 border">Zeitstempel</th>
|
|
<th className="p-2 border">Gewicht</th>
|
|
<th className="p-2 border">Text</th>
|
|
<th className="p-2 border">Quelle</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{currentMessages.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">{msg.t}</td>
|
|
<td className="border p-2">{msg.s}</td>
|
|
<td className="border p-2">{msg.m}</td>
|
|
<td className="border p-2">{msg.i}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Pagination */}
|
|
<div className="flex justify-between items-center mt-4">
|
|
<button
|
|
onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
|
|
disabled={currentPage === 1}
|
|
className="bg-blue-500 text-white px-4 py-2 rounded disabled:opacity-50"
|
|
>
|
|
Zurück
|
|
</button>
|
|
<span>
|
|
Seite {currentPage} von {totalPages}
|
|
</span>
|
|
<button
|
|
onClick={() =>
|
|
setCurrentPage((prev) => Math.min(prev + 1, totalPages))
|
|
}
|
|
disabled={currentPage === totalPages}
|
|
className="bg-blue-500 text-white px-4 py-2 rounded disabled:opacity-50"
|
|
>
|
|
Weiter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|