Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

erste Test ohne Fehler

Browse Source
This commit is contained in:
ISA
2024-09-23 13:46:44 +02:00
parent 067d2e0200
commit 6844c3cfab
10 changed files with 538 additions and 550 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
app/meldungen/page.jsx
View File

@@ -1,6 +1,5 @@
// pages/Meldungen.jsx
"use client";
import React, { useState } from "react";
import Layout from "../components/Layout";
function Meldungen() {
const [rowsPerPage, setRowsPerPage] = useState(25);
@@ -28,110 +27,108 @@ function Meldungen() {
});
return (
<Layout>
<div className="flex flex-col h-full">
{/* Filterleiste */}
<div className="flex justify-between items-center bg-blue-500 p-4 text-white rounded-t">
<div className="flex items-center space-x-4">
<span>Interner Meldungsspeicher</span>
<select
value={selectedMonth}
onChange={(e) => setSelectedMonth(e.target.value)}
className="bg-white text-black p-1 rounded"
>
<option value="01">Januar</option>
<option value="02">Februar</option>
<option value="03">März</option>
<option value="04">April</option>
<option value="05">Mai</option>
<option value="06">Juni</option>
<option value="07">Juli</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">Oktober</option>
<option value="11">November</option>
<option value="12">Dezember</option>
</select>
<select
value={selectedYear}
onChange={(e) => setSelectedYear(e.target.value)}
className="bg-white text-black p-1 rounded"
>
<option value="22">2022</option>
<option value="23">2023</option>
<option value="24">2024</option>
<option value="25">2025</option>
<option value="26">2026</option>
</select>
<input
type="number"
value={selectedDay}
onChange={(e) => setSelectedDay(e.target.value)}
min="1"
max="31"
placeholder="Tag"
className="bg-white text-black p-1 rounded"
/>
</div>
<div className="flex items-center space-x-4">
<input
type="text"
value={filter}
onChange={(e) => setFilter(e.target.value)}
placeholder="Filter"
className="bg-white text-black p-1 rounded"
/>
<select
value={rowsPerPage}
onChange={(e) => setRowsPerPage(e.target.value)}
className="bg-white text-black p-1 rounded"
>
<option value="5">5</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
</div>
<div className="flex flex-col h-full">
{/* Filterleiste */}
<div className="flex justify-between items-center bg-blue-500 p-4 text-white rounded-t">
<div className="flex items-center space-x-4">
<span>Interner Meldungsspeicher</span>
<select
value={selectedMonth}
onChange={(e) => setSelectedMonth(e.target.value)}
className="bg-white text-black p-1 rounded"
>
<option value="01">Januar</option>
<option value="02">Februar</option>
<option value="03">März</option>
<option value="04">April</option>
<option value="05">Mai</option>
<option value="06">Juni</option>
<option value="07">Juli</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">Oktober</option>
<option value="11">November</option>
<option value="12">Dezember</option>
</select>
<select
value={selectedYear}
onChange={(e) => setSelectedYear(e.target.value)}
className="bg-white text-black p-1 rounded"
>
<option value="22">2022</option>
<option value="23">2023</option>
<option value="24">2024</option>
<option value="25">2025</option>
<option value="26">2026</option>
</select>
<input
type="number"
value={selectedDay}
onChange={(e) => setSelectedDay(e.target.value)}
min="1"
max="31"
placeholder="Tag"
className="bg-white text-black p-1 rounded"
/>
</div>
{/* Meldungen Tabelle */}
<div className="flex-grow overflow-auto mt-4">
<table className="min-w-full bg-white border border-gray-300">
<thead>
<tr className="bg-gray-200 text-gray-600 text-sm leading-normal">
<th className="py-3 px-4 text-left">Datum</th>
<th className="py-3 px-4 text-left">Meldung</th>
</tr>
</thead>
<tbody className="text-gray-600 text-sm">
{filteredMessages.slice(0, rowsPerPage).map((msg, index) => (
<tr key={index} className="border-b border-gray-200">
<td className="py-3 px-4">{msg.date}</td>
<td className="py-3 px-4">{msg.message}</td>
</tr>
))}
</tbody>
</table>
</div>
{/* Pagination */}
<div className="flex justify-center mt-4">
<ul className="flex space-x-2">
{Array.from(
{ length: Math.ceil(filteredMessages.length / rowsPerPage) },
(_, i) => (
<li
key={i}
className="cursor-pointer bg-blue-500 text-white p-2 rounded"
>
{i + 1}
</li>
)
)}
</ul>
<div className="flex items-center space-x-4">
<input
type="text"
value={filter}
onChange={(e) => setFilter(e.target.value)}
placeholder="Filter"
className="bg-white text-black p-1 rounded"
/>
<select
value={rowsPerPage}
onChange={(e) => setRowsPerPage(e.target.value)}
className="bg-white text-black p-1 rounded"
>
<option value="5">5</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
</div>
</div>
</Layout>
{/* Meldungen Tabelle */}
<div className="flex-grow overflow-auto mt-4">
<table className="min-w-full bg-white border border-gray-300">
<thead>
<tr className="bg-gray-200 text-gray-600 text-sm leading-normal">
<th className="py-3 px-4 text-left">Datum</th>
<th className="py-3 px-4 text-left">Meldung</th>
</tr>
</thead>
<tbody className="text-gray-600 text-sm">
{filteredMessages.slice(0, rowsPerPage).map((msg, index) => (
<tr key={index} className="border-b border-gray-200">
<td className="py-3 px-4">{msg.date}</td>
<td className="py-3 px-4">{msg.message}</td>
</tr>
))}
</tbody>
</table>
</div>
{/* Pagination */}
<div className="flex justify-center mt-4">
<ul className="flex space-x-2">
{Array.from(
{ length: Math.ceil(filteredMessages.length / rowsPerPage) },
(_, i) => (
<li
key={i}
className="cursor-pointer bg-blue-500 text-white p-2 rounded"
>
{i + 1}
</li>
)
)}
</ul>
</div>
</div>
);
}