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

refactor: move analog inputs logic to AnalogInputsView component

Browse Source 
- Verschiebt die gesamte UI-Logik aus pages/analogInputs.tsx in eine eigene Komponente AnalogInputsView.tsx
- pages/analogInputs.tsx dient jetzt nur noch als Router-Einstiegspunkt
- Vereinheitlicht die Struktur wie bei MeldungenView und DashboardView
This commit is contained in:
ISA
2025-07-08 11:42:08 +02:00
parent 48898fcd09
commit 454b8bfb8d
11 changed files with 97 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
pages/analogInputs.tsx Normal file
View File

@@ -0,0 +1,8 @@
// pages/analogInputs.tsx
"use client";
import AnalogInputsView from "@/components/main/analogInputs/AnalogInputsView";
export default function AnalogInputsPage() {
return <AnalogInputsView />;
}

71
pages/analogeEingaenge.tsx
View File

@@ -1,71 +0,0 @@
"use client"; ///pages/analogeEingaenge.tsx
import React, { useState, useEffect } from "react";
import AnalogInputsTable from "@/components/main/analogInputs/AnalogInputsTable";
import AnalogInputsChart from "@/components/main/analogInputs/AnalogInputsChart";
import AnalogInputsSettingsModal from "@/components/main/analogInputs/AnalogInputsSettingsModal";
import { getAnalogInputsThunk } from "@/redux/thunks/getAnalogInputsThunk";
import { useAppDispatch } from "@/redux/store";
export interface AnalogInput2 {
id: number;
label?: string;
offset?: number | string;
factor?: number | string;
loggerInterval: string;
unit?: string;
}
function AnalogInputs() {
const [selectedId, setSelectedId] = useState<number | null>(null);
const [selectedInput, setSelectedInput] = useState<AnalogInput2 | null>(null);
const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
const dispatch = useAppDispatch();
useEffect(() => {
if (typeof window !== "undefined") {
dispatch(getAnalogInputsThunk());
const interval = setInterval(() => {
dispatch(getAnalogInputsThunk());
}, 10000);
return () => clearInterval(interval);
}
}, [dispatch]);
return (
<div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)]">
<div className="container mx-auto">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="bg-white rounded-lg p-4">
<h2 className="text-xl font-semibold mb-4 text-gray-700">
Messwerteingänge
</h2>
<AnalogInputsTable
setSelectedId={setSelectedId}
setSelectedInput={(input) =>
setSelectedInput(input as unknown as AnalogInput2)
}
setIsSettingsModalOpen={setIsSettingsModalOpen}
/>
</div>
<div className="bg-white shadow-lg rounded-lg p-4 border border-gray-200">
<h2 className="text-xl font-semibold mb-4 text-gray-700">
Messkurve Messwerteingang {selectedId ?? "–"}
</h2>
<AnalogInputsChart selectedId={selectedId} />
</div>
</div>
</div>
{selectedInput !== null && (
<AnalogInputsSettingsModal
selectedInput={selectedInput}
isOpen={isSettingsModalOpen}
onClose={() => setIsSettingsModalOpen(false)}
/>
)}
</div>
);
}
export default AnalogInputs;

69
pages/dashboard.tsx
View File

@@ -1,61 +1,14 @@
"use client"; //pages/dashboard.tsx
import React, { useEffect } from "react";
import "tailwindcss/tailwind.css";
import "@fontsource/roboto";
import "bootstrap-icons/font/bootstrap-icons.css";
import { Icon } from "@iconify/react";
import Last20MessagesTable from "../components/main/dashboard/Last20MessagesTable";
import NetworkInfo from "../components/main/dashboard/NetworkInfo";
import VersionInfo from "../components/main/dashboard/VersionInfo";
import Baugruppentraeger from "../components/main/dashboard/Baugruppentraeger";
import { getLast20MessagesThunk } from "../redux/thunks/getLast20MessagesThunk";
import { useAppDispatch } from "../redux/store";
// pages/dashboard.tsx
const Dashboard: React.FC = () => {
//-------------------------------------
const dispatch = useAppDispatch();
useEffect(() => {
dispatch(getLast20MessagesThunk());
const interval = setInterval(() => {
dispatch(getLast20MessagesThunk());
}, 10000); // oder 5000
import React from "react";
import dynamic from "next/dynamic";
return () => clearInterval(interval);
}, [dispatch]);
//-------------------------------------
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">
{/* Header */}
<div className="flex justify-between items-center w-full lg:w-2/3">
<div className="flex justify-between gap-1">
<Icon
icon="ri:calendar-schedule-line"
className="text-littwin-blue text-4xl xl:text-2xl"
/>
<h1 className="text-xl font-bold text-gray-700 xl:text-base">
Letzten 20 Meldungen
</h1>
</div>
</div>
// Dynamisches Importieren der eigentlichen UI-Komponente
const DashboardView = dynamic(
() => import("@/components/main/dashboard/DashboardView"),
{ ssr: false }
);
{/* Hauptbereich mit Meldungstabelle und Baugruppenträger */}
<div className="flex flex-col lg:flex-row gap-4 flex-grow overflow-hidden pt-4">
<Last20MessagesTable className="w-full lg:w-2/3 h-full" />
<div className="shadow-md rounded-lg w-full lg:w-1/3 flex flex-col gap-2">
<VersionInfo className="w-full p-3 text-sm" />
{/* Baugruppenträger jetzt mit voller Breite */}
<div className="overflow-auto max-h-[50vh]">
<Baugruppentraeger />
</div>
</div>
</div>
{/* NetworkInfo in einem div ,nimmt die gesamte Breite */}
<NetworkInfo />
</div>
);
};
export default Dashboard;
export default function DashboardPage() {
return <DashboardView />;
}