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

10
pages/_app.tsx
View File

@@ -3,6 +3,8 @@
import { useEffect, useState } from "react";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { persistor } from "@/redux/store";
import store, { useAppDispatch } from "@/redux/store";
import { AppProps } from "next/app";
@@ -36,9 +38,11 @@ import "@/styles/globals.css";
function MyApp({ Component, pageProps }: AppProps) {
return (
<Provider store={store}>
<AppContent Component={Component} pageProps={pageProps} />
</Provider>
<PersistGate loading={null} persistor={persistor}>
<Provider store={store}>
<AppContent Component={Component} pageProps={pageProps} />
</Provider>
</PersistGate>
);
}

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 />;
}

79
pages/system.tsx
View File

@@ -1,78 +1,7 @@
// pages/system.tsx
"use client";
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "../redux/store";
import { getSystemVoltTempThunk } from "../redux/thunks/getSystemVoltTempThunk";
import { SystemOverviewGrid } from "@/components/main/system/SystemOverviewGrid";
import { SystemCharts } from "@/components/main/system/SystemCharts";
import { DetailModal } from "@/components/main/system/DetailModal";
import type { HistoryEntry } from "@/components/main/system/SystemCharts";
import { getSystemspannung5VplusThunk } from "@/redux/thunks/getSystemspannung5VplusThunk";
import { getSystemspannung15VplusThunk } from "@/redux/thunks/getSystemspannung15VplusThunk";
import { getSystemspannung15VminusThunk } from "@/redux/thunks/getSystemspannung15VminusThunk";
import { getSystemspannung98VminusThunk } from "@/redux/thunks/getSystemspannung98VminusThunk";
import { getTemperaturAdWandlerThunk } from "@/redux/thunks/getTemperaturAdWandlerThunk";
import { getTemperaturProzessorThunk } from "@/redux/thunks/getTemperaturProzessorThunk";
import SystemView from "@/components/main/system/SystemView";
const SystemPage = () => {
const dispatch = useDispatch<AppDispatch>();
const voltages = useSelector(
(state: RootState) => state.systemVoltTemp.voltages
);
const history = useSelector(
(state: RootState) => state.systemVoltTemp.history
) as HistoryEntry[];
const [selectedKey, setSelectedKey] = useState<string | null>(null);
const [isModalOpen, setIsModalOpen] = useState(false);
const [zeitraum, setZeitraum] = useState<"DIA0" | "DIA1" | "DIA2">("DIA1");
useEffect(() => {
dispatch(getSystemVoltTempThunk());
const interval = setInterval(() => {
dispatch(getSystemVoltTempThunk());
}, 5000);
return () => clearInterval(interval);
}, [dispatch]);
useEffect(() => {
dispatch(getSystemspannung5VplusThunk(zeitraum));
dispatch(getSystemspannung15VplusThunk(zeitraum));
dispatch(getSystemspannung15VminusThunk(zeitraum));
dispatch(getSystemspannung98VminusThunk(zeitraum));
dispatch(getTemperaturAdWandlerThunk(zeitraum));
dispatch(getTemperaturProzessorThunk(zeitraum));
}, [dispatch, zeitraum]);
const handleOpenDetail = (key: string) => {
setSelectedKey(key);
setIsModalOpen(true);
};
const handleCloseDetail = () => {
setSelectedKey(null);
setIsModalOpen(false);
};
return (
<div className="p-4">
<h1 className="text-xl font-bold mb-4">
System Spannungen & Temperaturen
</h1>
<SystemOverviewGrid voltages={voltages} onOpenDetail={handleOpenDetail} />
<SystemCharts history={history} zeitraum={zeitraum} />
<DetailModal
isOpen={isModalOpen}
selectedKey={selectedKey}
onClose={handleCloseDetail}
zeitraum={zeitraum}
setZeitraum={setZeitraum}
/>
</div>
);
};
export default SystemPage;
export default function SystemPage() {
return <SystemView />;
}