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

refactor: Seitenkomponenten ausgelagert in View-Komponenten

Browse Source 
- meldungen.tsx → MeldungenView.tsx erstellt
  → beinhaltet Filterleiste, Tabellenansicht und Datenabruf
- system.tsx → SystemView.tsx ausgelagert
  → verbessert Lesbarkeit und Trennung von Routing und Inhalt
- View-Suffix verwendet für klare Struktur (Page = Entry, View = Inhalt)
This commit is contained in:
ISA
2025-07-07 08:27:19 +02:00
parent 859a8f1d64
commit ebe72c3ab0
14 changed files with 318 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
pages/meldungen.tsx
View File

@@ -1,119 +1,7 @@
"use client";
// /pages/meldungen.tsx
import React, { useState, useEffect } from "react";
import DateRangePickerMeldungen from "@/components/main/reports/DateRangePickerMeldungen";
import { useSelector, useDispatch } from "react-redux";
import { getMessagesThunk } from "@/redux/thunks/getMessagesThunk";
import type { AppDispatch } from "@/redux/store";
"use client";
import MeldungenView from "@/components/main/reports/MeldungenView";
type Meldung = {
t: string;
s: number;
c: string;
m: string;
i: string;
v: string;
};
export default function Messages() {
const dispatch = useDispatch<AppDispatch>();
type RootState = {
messages: {
data: Meldung[];
};
// add other slices if needed
};
const { data: messages } = useSelector((state: RootState) => state.messages);
const [sourceFilter, setSourceFilter] = useState<string>("Alle");
// Datum initialisieren: von = heute - 30 Tage, bis = heute
const today = new Date();
const prior30 = new Date();
prior30.setDate(today.getDate() - 30);
const formatDate = (d: Date) => d.toISOString().split("T")[0];
const [fromDate, setFromDate] = useState<string>(formatDate(prior30));
const [toDate, setToDate] = useState<string>(formatDate(today));
useEffect(() => {
dispatch(getMessagesThunk({ fromDate, toDate }));
}, [dispatch, fromDate, toDate]);
const filteredMessages =
sourceFilter === "Alle"
? messages
: messages.filter((m: Meldung) => m.i === sourceFilter);
const allSources = Array.from(
new Set(messages.map((m: Meldung) => m.i))
).sort();
return (
<div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0">
<h1 className="text-xl font-bold mb-4">Berichte</h1>
<div className="flex flex-wrap gap-6 mb-6 items-end">
<DateRangePickerMeldungen
fromDate={fromDate}
toDate={toDate}
setFromDate={setFromDate}
setToDate={setToDate}
/>
<button
onClick={() => dispatch(getMessagesThunk({ fromDate, toDate }))}
className="bg-littwin-blue text-white px-4 py-2 rounded h-fit"
>
Anzeigen
</button>
<select
value={sourceFilter}
onChange={(e) => setSourceFilter(e.target.value)}
className="border border-solid border-spacing-1 px-4 py-3 rounded h-fit ml-6"
>
<option value="Alle">Alle Quellen</option>
{allSources.map((src) => (
<option key={String(src)} value={String(src)}>
{String(src)}
</option>
))}
</select>
</div>
<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">Wert</th> {/* statt Status */}
</tr>
</thead>
<tbody>
{filteredMessages.map((msg: Meldung, index: number) => (
<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.i}</td>
<td className="border p-2">{msg.m}</td>
<td className="border p-2">{msg.v}</td> {/* NEU */}
</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>
</div>
);
return <MeldungenView />;
}