From 454b8bfb8d6181f2fd628d5ca2ce376a6b7336be Mon Sep 17 00:00:00 2001 From: ISA Date: Tue, 8 Jul 2025 11:42:08 +0200 Subject: [PATCH] refactor: move analog inputs logic to AnalogInputsView component - 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 --- .env.development | 2 +- .env.production | 2 +- CHANGELOG.md | 5 ++ .../main/analogInputs/AnalogInputsView.tsx | 7 +- components/main/dashboard/DashboardView.tsx | 62 +++++++++++++++++ components/main/reports/MeldungenView.tsx | 1 + components/navigation/Navigation.tsx | 2 +- package-lock.json | 4 +- package.json | 2 +- pages/analogInputs.tsx | 8 +++ pages/dashboard.tsx | 69 +++---------------- 11 files changed, 97 insertions(+), 67 deletions(-) rename pages/analogeEingaenge.tsx => components/main/analogInputs/AnalogInputsView.tsx (94%) create mode 100644 components/main/dashboard/DashboardView.tsx create mode 100644 pages/analogInputs.tsx diff --git a/.env.development b/.env.development index f89ca60..0731383 100644 --- a/.env.development +++ b/.env.development @@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false NEXT_PUBLIC_EXPORT_STATIC=false NEXT_PUBLIC_USE_CGI=false # App-Versionsnummer -NEXT_PUBLIC_APP_VERSION=1.6.561 +NEXT_PUBLIC_APP_VERSION=1.6.562 NEXT_PUBLIC_CPL_MODE=json # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter) diff --git a/.env.production b/.env.production index 36cb1e9..5400a43 100644 --- a/.env.production +++ b/.env.production @@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL NEXT_PUBLIC_EXPORT_STATIC=true NEXT_PUBLIC_USE_CGI=true # App-Versionsnummer -NEXT_PUBLIC_APP_VERSION=1.6.561 +NEXT_PUBLIC_APP_VERSION=1.6.562 NEXT_PUBLIC_CPL_MODE=production \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 55d447a..ffacd8c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +## [1.6.562] – 2025-07-08 + +- fix: call digitalOutputs from _app.tsx to show immediately without delay + +--- ## [1.6.561] – 2025-07-08 - fix: sofortige visuelle Aktivierung der Navigationsbuttons beim Klick diff --git a/pages/analogeEingaenge.tsx b/components/main/analogInputs/AnalogInputsView.tsx similarity index 94% rename from pages/analogeEingaenge.tsx rename to components/main/analogInputs/AnalogInputsView.tsx index 30ff7f7..0cee74d 100644 --- a/pages/analogeEingaenge.tsx +++ b/components/main/analogInputs/AnalogInputsView.tsx @@ -1,4 +1,5 @@ -"use client"; ///pages/analogeEingaenge.tsx +"use client"; +// components/main/analogInputs/AnalogInputsView.tsx import React, { useState, useEffect } from "react"; import AnalogInputsTable from "@/components/main/analogInputs/AnalogInputsTable"; import AnalogInputsChart from "@/components/main/analogInputs/AnalogInputsChart"; @@ -15,7 +16,7 @@ export interface AnalogInput2 { unit?: string; } -function AnalogInputs() { +function AnalogInputsView() { const [selectedId, setSelectedId] = useState(null); const [selectedInput, setSelectedInput] = useState(null); const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false); @@ -68,4 +69,4 @@ function AnalogInputs() { ); } -export default AnalogInputs; +export default AnalogInputsView; diff --git a/components/main/dashboard/DashboardView.tsx b/components/main/dashboard/DashboardView.tsx new file mode 100644 index 0000000..9bf7768 --- /dev/null +++ b/components/main/dashboard/DashboardView.tsx @@ -0,0 +1,62 @@ +"use client"; +// components/main/dashboard/DashboardView.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"; + +const DashboardView: React.FC = () => { + //------------------------------------- + const dispatch = useAppDispatch(); + useEffect(() => { + dispatch(getLast20MessagesThunk()); + const interval = setInterval(() => { + dispatch(getLast20MessagesThunk()); + }, 10000); // oder 5000 + + return () => clearInterval(interval); + }, [dispatch]); + //------------------------------------- + return ( +
+ {/* Header */} +
+
+ +

+ Letzten 20 Meldungen +

+
+
+ + {/* Hauptbereich mit Meldungstabelle und Baugruppenträger */} +
+ + +
+ + + {/* Baugruppenträger jetzt mit voller Breite */} +
+ +
+
+
+ + {/* NetworkInfo in einem div ,nimmt die gesamte Breite */} + +
+ ); +}; + +export default DashboardView; diff --git a/components/main/reports/MeldungenView.tsx b/components/main/reports/MeldungenView.tsx index 5e624eb..a3bc5d7 100644 --- a/components/main/reports/MeldungenView.tsx +++ b/components/main/reports/MeldungenView.tsx @@ -1,4 +1,5 @@ "use client"; +// components/main/reports/MeldungenView.tsx import React, { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { getMessagesThunk } from "@/redux/thunks/getMessagesThunk"; diff --git a/components/navigation/Navigation.tsx b/components/navigation/Navigation.tsx index 97b76c9..138a8f5 100644 --- a/components/navigation/Navigation.tsx +++ b/components/navigation/Navigation.tsx @@ -26,7 +26,7 @@ const Navigation: React.FC = ({ className }) => { { name: "Kabelüberwachung ", path: "/kabelueberwachung" }, { name: "Meldungseingänge ", path: "/digitalInputs" }, //vorher Digitale Ein -und Ausgänge { name: "Schaltausgänge ", path: "/digitalOutputs", disabled: false }, //vorher Digitale Ein -und Ausgänge - { name: "Messwerteingänge ", path: "/analogeEingaenge" }, //vorher Analoge Eingänge + { name: "Messwerteingänge ", path: "/analogInputs" }, //vorher Analoge Eingänge { name: "Berichte ", path: "/meldungen" }, { name: "System ", path: "/system" }, { name: "Einstellungen ", path: "/einstellungen" }, diff --git a/package-lock.json b/package-lock.json index db983a0..5dd029b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "cpl-v4", - "version": "1.6.561", + "version": "1.6.562", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "cpl-v4", - "version": "1.6.561", + "version": "1.6.562", "dependencies": { "@fontsource/roboto": "^5.1.0", "@headlessui/react": "^2.2.4", diff --git a/package.json b/package.json index 0e863d4..c1b1146 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cpl-v4", - "version": "1.6.561", + "version": "1.6.562", "private": true, "scripts": { "dev": "next dev", diff --git a/pages/analogInputs.tsx b/pages/analogInputs.tsx new file mode 100644 index 0000000..a110cd9 --- /dev/null +++ b/pages/analogInputs.tsx @@ -0,0 +1,8 @@ +// pages/analogInputs.tsx +"use client"; + +import AnalogInputsView from "@/components/main/analogInputs/AnalogInputsView"; + +export default function AnalogInputsPage() { + return ; +} diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx index 923a445..74b1b5a 100644 --- a/pages/dashboard.tsx +++ b/pages/dashboard.tsx @@ -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 ( -
- {/* Header */} -
-
- -

- Letzten 20 Meldungen -

-
-
+// Dynamisches Importieren der eigentlichen UI-Komponente +const DashboardView = dynamic( + () => import("@/components/main/dashboard/DashboardView"), + { ssr: false } +); - {/* Hauptbereich mit Meldungstabelle und Baugruppenträger */} -
- - -
- - - {/* Baugruppenträger jetzt mit voller Breite */} -
- -
-
-
- - {/* NetworkInfo in einem div ,nimmt die gesamte Breite */} - -
- ); -}; - -export default Dashboard; +export default function DashboardPage() { + return ; +}