refactor: Seitenkomponenten ausgelagert in View-Komponenten

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

.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.538
+NEXT_PUBLIC_APP_VERSION=1.6.539
 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.538
+NEXT_PUBLIC_APP_VERSION=1.6.539
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,20 @@
+## [1.6.539] – 2025-07-07
+
+- feat: fetch-Services für Spannung und Temperatur für Dev- und Prod-Modus angepasst
+
+- fetchSystemspannung5VplusService: Channel 110 (+5V), prod = /cpl?/dashboard.html
+- fetchSystemspannung15VplusService: Channel 108 (+15V)
+- fetchSystemspannung15VminusService: Channel 114 (-15V)
+- fetchSystemspannung98VminusService: Channel 115 (-98V)
+- fetchTemperaturAdWandlerService: Channel 116 (Temperatur AD-Wandler)
+- fetchTemperaturProzessorService: Channel 117 (Temperatur Prozessor)
+
+→ Dev-Mode verwendet API-Handler (/api/cpl/...)
+→ Production-Mode nutzt CGI-kompatible URLs (/cpl?/dashboard.html&...)
+
+Fehlerbehandlung integriert, Struktur für Wiederverwendung vereinheitlicht
+
+---
 ## [1.6.538] – 2025-07-03
 
 - feat: Detailansicht auf dynamische Redux-Datenquellen umgestellt

components/main/reports/MeldungenTabelle.tsx

@@ -0,0 +1,51 @@
+type Meldung = {
+  t: string;
+  s: number;
+  c: string;
+  m: string;
+  i: string;
+  v: string;
+};
+
+export default function MeldungenTabelle({
+  messages,
+}: {
+  messages: Meldung[];
+}) {
+  return (
+    <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">Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          {messages.map((msg, index) => (
+            <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>
+            </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>
+  );
+}

components/main/reports/MeldungenView.tsx

@@ -0,0 +1,81 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { getMessagesThunk } from "@/redux/thunks/getMessagesThunk";
+import type { AppDispatch } from "@/redux/store";
+import type { RootState } from "@/redux/store";
+import DateRangePickerMeldungen from "./DateRangePickerMeldungen";
+import MeldungenTabelle from "./MeldungenTabelle";
+
+type Meldung = {
+  t: string;
+  s: number;
+  c: string;
+  m: string;
+  i: string;
+  v: string;
+};
+
+export default function MeldungenView() {
+  const dispatch = useDispatch<AppDispatch>();
+  const messages = useSelector((state: RootState) => state.messages.data);
+
+  const [sourceFilter, setSourceFilter] = useState("Alle");
+
+  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)]">
+      <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 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>
+
+      <MeldungenTabelle messages={filteredMessages} />
+    </div>
+  );
+}

components/main/system/SystemOverviewGrid.tsx

@@ -20,9 +20,9 @@ export const SystemOverviewGrid = ({ voltages, onOpenDetail }: Props) => {
               {formatValue(value)} {unit}
               <button
                 onClick={() => onOpenDetail(key)}
-                className="ml-2 text-blue-600 hover:underline text-sm"
+                className="ml-2 text-littwin-blue hover:underline text-sm"
               >
-                Details
+                Detailansicht
               </button>
             </p>
           </div>

components/main/system/SystemView.tsx

@@ -0,0 +1,78 @@
+// components/main/system/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";
+
+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;

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.538",
+  "version": "1.6.539",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.538",
+      "version": "1.6.539",
       "dependencies": {
         "@fontsource/roboto": "^5.1.0",
         "@iconify-icons/ri": "^1.2.10",

package.json

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

pages/_app.tsx

@@ -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 (
+    <PersistGate loading={null} persistor={persistor}>
       <Provider store={store}>
         <AppContent Component={Component} pageProps={pageProps} />
       </Provider>
+    </PersistGate>
   );
 }
 

pages/meldungen.tsx

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

pages/system.tsx

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

public/CPL/js/abfrage.js

@@ -1,17 +0,0 @@
-// window-Funktion, damit sie global im Browser verfügbar ist
-window.startAbfrage = function (fromDate, toDate, quelle, typ) {
-  // Datum formatieren: yyyy;MM;dd
-  const format = (dateStr) => {
-    const d = new Date(dateStr);
-    return `${d.getFullYear()};${d.getMonth() + 1};${d.getDate()}`;
-  };
-
-  const von = format(fromDate);
-  const bis = format(toDate);
-
-  // Beispiel-Kanal: 110 = +5V
-  const diaURL = `/cpl?/dashboard.html&DIA1=${von};${bis};${quelle};${typ};`;
-
-  // Neue Seite öffnen
-  window.open(diaURL, "_blank");
-};

redux/store.ts

@@ -1,6 +1,7 @@
 // /redux/store.ts
 import { configureStore } from "@reduxjs/toolkit";
-import { useDispatch } from "react-redux";
+import { persistReducer, persistStore } from "redux-persist";
+import storage from "redux-persist/lib/storage"; // = localStorage
 import authReducer from "./slices/authSlice";
 import kueChartModeReducer from "./slices/kueChartModeSlice";
 import webVersionReducer from "./slices/webVersionSlice";
@@ -35,9 +36,33 @@ import systemspannung15VplusReducer from "./slices/systemspannung15VplusSlice";
 import systemspannung98VminusReducer from "./slices/systemspannung98VminusSlice";
 import temperaturAdWandlerReducer from "./slices/temperaturAdWandlerSlice";
 import temperaturProzessorReducer from "./slices/temperaturProzessorSlice";
+import { combineReducers } from "@reduxjs/toolkit";
+import { useDispatch, useSelector, TypedUseSelectorHook } from "react-redux";
 
-const store = configureStore({
-  reducer: {
+//---------------------------------------
+// 🧠 Nur diese Slices werden persistiert
+const persistConfig = {
+  key: "root",
+  storage,
+  whitelist: [
+    "systemspannung5Vplus",
+    "systemspannung15Vplus",
+    "systemspannung15Vminus",
+    "systemspannung98Vminus",
+    "temperaturAdWandler",
+    "temperaturProzessor",
+  ],
+};
+
+const rootReducer = combineReducers({
+  systemspannung5Vplus: systemspannung5VplusReducer,
+  systemspannung15Vplus: systemspannung15VplusReducer,
+  systemspannung15Vminus: systemspannung15VminusReducer,
+  systemspannung98Vminus: systemspannung98VminusReducer,
+  temperaturAdWandler: temperaturAdWandlerReducer,
+  temperaturProzessor: temperaturProzessorReducer,
+  // Die restlichen Slices werden nicht persistiert, aber können hier auch aufgenommen werden,
+  // falls sie Teil des globalen States sein sollen:
   authSlice: authReducer,
   kueChartModeSlice: kueChartModeReducer,
   webVersionSlice: webVersionReducer,
@@ -66,17 +91,23 @@ const store = configureStore({
   firmwareUpdate: firmwareUpdateReducer,
   confirmModal: confirmModalReducer,
   firmwareProgress: firmwareProgressReducer,
-    systemspannung5Vplus: systemspannung5VplusReducer,
-    systemspannung15Vminus: systemspannung15VminusReducer,
-    systemspannung15Vplus: systemspannung15VplusReducer,
-    systemspannung98Vminus: systemspannung98VminusReducer,
-    temperaturAdWandler: temperaturAdWandlerReducer,
-    temperaturProzessor: temperaturProzessorReducer,
-  },
 });
 
+const persistedReducer = persistReducer(persistConfig, rootReducer);
+
+//-------------------------------------------
+
+export const store = configureStore({
+  reducer: persistedReducer,
+});
+
+export const persistor = persistStore(store);
+
+// Typisierte Hooks
 export type RootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;
-export const useAppDispatch: () => AppDispatch = useDispatch; // ✅ Typisierte Dispatch-Funktion
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
 
 export default store;