feat(analogeEingaenge): Einzelanzeige pro Eingang + Titel & Zeitachse im deutschen Format

CHANGELOG.md

@@ -4,6 +4,16 @@ Alle Änderungen und Versionen des CPLv4.0 Frontends chronologisch dokumentiert.
 
 ---
 
+## [1.6.329] – 2025-05-02
+
+### Hinzugefügt
+
+- Auf der Seite **/analogeEingaenge** wird nun nur der ausgewählte Eingang im Chart angezeigt
+- Der Titel des Charts enthält die Angabe „letzte 24 Stunden“
+- Die Zeitachse (X-Achse) ist im deutschen Format (`HH:mm Uhr DD.MM.`)
+
+---
+
 ## [1.6.328] – 2025-05-02
 
 ### Hinzugefügt

README.md

@@ -110,9 +110,9 @@ Beispielaufruf im DEV-Modus (über UI gesteuert, nicht manuell notwendig):
   - Faktor und Offset anzeigen
   - Gewichtung und Loggerintervall anzeigen
 - Neue Chart.js Visualisierung:
-  - Verlauf aller 8 analogen Eingänge gleichzeitig anzeigen
-  - Nutzer kann Eingänge einzeln über Legende ein-/ausblenden
-  - Historische Messwerte der letzten 24 Stunden dargestellt (Zeitskala auf der X-Achse)
+- Beim Klick auf einen Eingang in der Tabelle wird nur dessen Verlaufskurve angezeigt
+- Der Verlauf bezieht sich auf die letzten 24 Stunden, dargestellt mit deutscher Zeitachse
+
 - Entwicklung mit Mock-Daten:
   - In der Entwicklungsumgebung werden Mock-Daten über den API-Handler `/api/cpl/fetchAnalogInputsHistory` geladen
   - In der Produktion wird direkt auf die Live-Daten der CPL-Webschnittstelle (DIA0) zugegriffen

components/main/analogeEingaenge/AnalogInputsChart.tsx

@@ -1,4 +1,4 @@
-"use client"; // components/main/analogeEingaenge/AnalogInputsChart.tsx
+"use client";
 import React, { useEffect } from "react";
 import { Line } from "react-chartjs-2";
 import {
@@ -13,6 +13,7 @@ import {
   TimeScale,
 } from "chart.js";
 import "chartjs-adapter-date-fns";
+import { de } from "date-fns/locale";
 import { useSelector, useDispatch } from "react-redux";
 import type { RootState, AppDispatch } from "../../../redux/store";
 import { fetchAnalogInputsHistoryThunk } from "../../../redux/thunks/fetchAnalogInputsHistoryThunk";
@@ -28,18 +29,11 @@ ChartJS.register(
   TimeScale
 );
 
-const colors = [
-  "#007bff",
-  "#28a745",
-  "#dc3545",
-  "#ffc107",
-  "#17a2b8",
-  "#6f42c1",
-  "#fd7e14",
-  "#20c997",
-];
-
-export default function AnalogInputsChart() {
+export default function AnalogInputsChart({
+  selectedId,
+}: {
+  selectedId: number | null;
+}) {
   const dispatch = useDispatch<AppDispatch>();
   const { data, isLoading, error } = useSelector(
     (state: RootState) => state.analogInputsHistory
@@ -49,34 +43,45 @@ export default function AnalogInputsChart() {
     dispatch(fetchAnalogInputsHistoryThunk());
   }, [dispatch]);
 
-  const datasets = Object.entries(data).map(([key, inputData], index) => ({
-    label: `Eingang ${Number(key) - 99}`,
-    data: inputData.map((point: any) => ({
-      x: point.t,
-      y: point.m,
-    })),
-    fill: false,
-    borderColor: colors[index % colors.length],
-    backgroundColor: colors[index % colors.length],
-    tension: 0.3,
-  }));
+  if (!selectedId) {
+    return <div className="text-gray-500">Bitte einen Eingang auswählen</div>;
+  }
+
+  const key = String(selectedId + 99);
+  const inputData = data[key];
+
+  if (!inputData) {
+    return (
+      <div className="text-red-500">
+        Keine Verlaufsdaten für Eingang {selectedId} gefunden.
+      </div>
+    );
+  }
 
   const chartData = {
-    datasets,
+    datasets: [
+      {
+        label: `Eingang ${selectedId}`,
+        data: inputData.map((point: any) => ({
+          x: point.t,
+          y: point.m,
+        })),
+        fill: false,
+        borderColor: "#007bff",
+        backgroundColor: "#007bff",
+        tension: 0.3,
+      },
+    ],
   };
 
   const chartOptions = {
     responsive: true,
     plugins: {
-      legend: {
-        position: "top" as const,
-        labels: {
-          usePointStyle: true,
-        },
-      },
-      tooltip: {
-        mode: "index" as const,
-        intersect: false,
+      legend: { position: "top" as const },
+      tooltip: { mode: "index" as const, intersect: false },
+      title: {
+        display: true,
+        text: `Verlauf Eingang ${selectedId} – letzte 24 Stunden`,
       },
     },
     scales: {
@@ -84,14 +89,20 @@ export default function AnalogInputsChart() {
         type: "time" as const,
         time: {
           unit: "hour",
-          tooltipFormat: "HH:mm",
+          tooltipFormat: "HH:mm 'Uhr' dd.MM.",
           displayFormats: {
             hour: "HH:mm",
+            day: "dd.MM.",
+          },
+        },
+        adapters: {
+          date: {
+            locale: de,
           },
         },
         title: {
           display: true,
-          text: "Zeit",
+          text: "Zeit ",
         },
       },
       y: {
@@ -104,20 +115,8 @@ export default function AnalogInputsChart() {
   };
 
   return (
-    <div className="w-full bg-white shadow-md rounded-lg p-4 border border-gray-200">
-      <h2 className="text-lg font-bold mb-4">
-        Alle analogen Eingänge – Verlauf der letzten 24 Stunden
-      </h2>
-
-      {isLoading ? (
-        <div className="text-center text-gray-500">Lade Daten...</div>
-      ) : error ? (
-        <div className="text-center text-red-500">Fehler: {error}</div>
-      ) : (
-        <div className="w-full h-[400px]">
-          <Line data={chartData} options={chartOptions} />
-        </div>
-      )}
+    <div className="w-full h-[400px]">
+      <Line data={chartData} options={chartOptions} />
     </div>
   );
 }

components/main/analogeEingaenge/AnalogeEingaengeTable.tsx

@@ -1,11 +1,14 @@
 "use client";
-// components/main/analogeEingaenge/AnalogeEingaengeTable.tsx
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState, AppDispatch } from "../../../redux/store";
 import { fetchAnalogeEingaengeThunk } from "../../../redux/thunks/fetchAnalogeEingaengeThunk";
 
-export default function AnalogeEingaengeTable() {
+export default function AnalogeEingaengeTable({
+  setSelectedId,
+}: {
+  setSelectedId: (id: number) => void;
+}) {
   const dispatch = useDispatch<AppDispatch>();
 
   useEffect(() => {
@@ -16,16 +19,6 @@ export default function AnalogeEingaengeTable() {
     (state: RootState) => state.analogeEingaengeSlice
   );
 
-  const [selectedEingang, setSelectedEingang] = useState<any>(null);
-
-  const openSettingsModal = (eingang: any) => {
-    setSelectedEingang(eingang);
-  };
-
-  const closeSettingsModal = () => {
-    setSelectedEingang(null);
-  };
-
   return (
     <div className="w-full">
       <div className="bg-white shadow-lg rounded-lg p-4 border border-gray-200">
@@ -36,92 +29,26 @@ export default function AnalogeEingaengeTable() {
                 <th className="border p-1 text-left">Eingang</th>
                 <th className="border p-3 text-left">Messwert</th>
                 <th className="border p-3 text-left">Bezeichnung</th>
-                <th className="border p-3 text-center">Einstellung</th>
               </tr>
             </thead>
             <tbody>
               {Object.values(analogeEingaenge)
-                .filter(
-                  (eingang) => eingang?.id !== null && eingang?.id !== undefined
-                )
-                .map((eingang, index) => (
+                .filter((e) => e?.id !== null && e?.id !== undefined)
+                .map((e, index) => (
                   <tr
                     key={index}
-                    className="text-gray-700 hover:bg-gray-50 transition"
+                    className="hover:bg-gray-100 cursor-pointer transition"
+                    onClick={() => setSelectedId(e.id!)}
                   >
-                    <td className="border p-3">{eingang.id ?? "-"}</td>
-                    <td className="border p-3">{eingang.value ?? "-"}</td>
-                    <td className="border p-3">{eingang.name || "----"}</td>
-                    <td className="border p-3 text-center">
-                      <button
-                        onClick={() => openSettingsModal(eingang)}
-                        className="text-white bg-gray-100 hover:bg-gray-200 text-xs px-2 py-1 rounded transition"
-                      >
-                        <span className="text-blue-500 text-2xl laptop:text-sm md:text-lg lg:text-xl xl:text-2xl">
-                          ⚙️
-                        </span>
-                      </button>
-                    </td>
+                    <td className="border p-3">{e.id ?? "-"}</td>
+                    <td className="border p-3">{e.value ?? "-"}</td>
+                    <td className="border p-3">{e.name || "----"}</td>
                   </tr>
                 ))}
             </tbody>
           </table>
         </div>
       </div>
-
-      {/* Modal */}
-      {selectedEingang && (
-        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
-          <div className="bg-white p-6 rounded-lg shadow-lg w-1/2 max-w-xl">
-            <div className="border-b pb-2 mb-4">
-              <h2 className="text-xl font-bold text-littwin-blue">
-                Analoger Eingang {selectedEingang.id}
-              </h2>
-            </div>
-
-            <div className="grid grid-cols-2 gap-x-4 gap-y-2">
-              <div>
-                <strong>Name:</strong>
-              </div>
-              <div>{selectedEingang.name}</div>
-
-              <div>
-                <strong>Einheit:</strong>
-              </div>
-              <div>{selectedEingang.unit}</div>
-
-              <div>
-                <strong>Faktor:</strong>
-              </div>
-              <div>{selectedEingang.factor}</div>
-
-              <div>
-                <strong>Offset:</strong>
-              </div>
-              <div>{selectedEingang.offset}</div>
-
-              <div>
-                <strong>Gewichtung:</strong>
-              </div>
-              <div>{selectedEingang.weighting}</div>
-
-              <div>
-                <strong>Logger-Intervall:</strong>
-              </div>
-              <div>{selectedEingang.loggerInterval} Minuten</div>
-            </div>
-
-            <div className="flex justify-end mt-6">
-              <button
-                onClick={closeSettingsModal}
-                className="px-4 py-2 bg-blue-500 hover:bg-littwin-blue text-white rounded-lg transition"
-              >
-                Schließen
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
     </div>
   );
 }

config/webVersion.ts

@@ -6,5 +6,5 @@
 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
 
 */
-const webVersion = "1.6.328";
+const webVersion = "1.6.329";
 export default webVersion;

pages/analogeEingaenge.tsx

@@ -1,4 +1,5 @@
 "use client"; ///pages/analogeEingaenge.tsx
+
 import React, { useState, useEffect } from "react";
 import AnalogeEingaengeTabelle from "../components/main/analogeEingaenge/AnalogeEingaengeTable";
 import AnalogInputsChart from "../components/main/analogeEingaenge/AnalogInputsChart";
@@ -6,9 +7,9 @@ import { fetchAnalogeEingaengeThunk } from "../redux/thunks/fetchAnalogeEingaeng
 import { useAppDispatch } from "../redux/store";
 
 function AnalogeEingaenge() {
-  const [activeConfig, setActiveConfig] = useState<number | null>(null);
-  //---------------------------------------------------------
+  const [selectedId, setSelectedId] = useState<number | null>(null);
   const dispatch = useAppDispatch();
+
   useEffect(() => {
     if (typeof window !== "undefined") {
       dispatch(fetchAnalogeEingaengeThunk());
@@ -18,27 +19,23 @@ function AnalogeEingaenge() {
       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">
+    <div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)]">
       <div className="container mx-auto">
-        {/* Responsive Grid: 1 Spalte auf mobilen Geräten, 2 Spalten auf größeren Geräten */}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          {/* Tabelle als Card */}
           <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">
               Analoge Eingänge
             </h2>
-            <AnalogeEingaengeTabelle />
+            <AnalogeEingaengeTabelle setSelectedId={setSelectedId} />
           </div>
 
-          {/* Diagramm als Card */}
           <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">
-              Analoge Eingäne Messkurve
+              Messkurve Eingang {selectedId ?? "–"}
             </h2>
-            <AnalogInputsChart />
+            <AnalogInputsChart selectedId={selectedId} />
           </div>
         </div>
       </div>