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

@@ -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)
 

.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

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

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<number | null>(null);
   const [selectedInput, setSelectedInput] = useState<AnalogInput2 | null>(null);
   const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
@@ -68,4 +69,4 @@ function AnalogInputs() {
   );
 }
 
-export default AnalogInputs;
+export default AnalogInputsView;

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 (
+    <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>
+
+      {/* 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 DashboardView;

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";

components/navigation/Navigation.tsx

@@ -26,7 +26,7 @@ const Navigation: React.FC<NavigationProps> = ({ 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" },

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",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.561",
+  "version": "1.6.562",
   "private": true,
   "scripts": {
     "dev": "next dev",

pages/analogInputs.tsx

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

pages/dashboard.tsx

@@ -1,61 +1,14 @@
-"use client"; //pages/dashboard.tsx
+// 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";
 
-const Dashboard: React.FC = () => {
+import React from "react";
-  //-------------------------------------
+import dynamic from "next/dynamic";
-  const dispatch = useAppDispatch();
-  useEffect(() => {
-    dispatch(getLast20MessagesThunk());
-    const interval = setInterval(() => {
-      dispatch(getLast20MessagesThunk());
-    }, 10000); // oder 5000
 
-    return () => clearInterval(interval);
+// Dynamisches Importieren der eigentlichen UI-Komponente
-  }, [dispatch]);
+const DashboardView = dynamic(
-  //-------------------------------------
+  () => import("@/components/main/dashboard/DashboardView"),
-  return (
+  { ssr: false }
-    <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>
 
-      {/* Hauptbereich mit Meldungstabelle und Baugruppenträger */}
+export default function DashboardPage() {
-      <div className="flex flex-col lg:flex-row gap-4 flex-grow overflow-hidden pt-4">
+  return <DashboardView />;
-        <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;