feat: implement chart modal with report functionality for cable monitoring

- Add chartTitle state management to kabelueberwachungChartSlice with "Messkurve"/"Meldungen" options - Update IsoChartActionBar dropdown to show current chartTitle value with proper binding - Implement conditional rendering in IsoChartView between IsoMeasurementChart and Report components - Create Report.tsx component using same data structure as MeldungenView (Meldung type) - Add slot-based message filtering for specific cable monitoring units (KÜ) - Integrate getMessagesThunk for consistent data loading across components - Style Report component with consistent table layout, German date formatting, and Littwin branding - Enable seamless switching between measurement chart and filtered messages in modal
2025-07-31 15:25:46 +02:00
parent 638b7bf519
commit cdd26931a1
9 changed files with 255 additions and 18 deletions
--- 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.666
+NEXT_PUBLIC_APP_VERSION=1.6.667
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)

--- 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.666
+NEXT_PUBLIC_APP_VERSION=1.6.667
 NEXT_PUBLIC_CPL_MODE=production
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## [1.6.667] – 2025-07-31
+
+- feat: TDR --> Messkurven TDR anzeigen und dort Schalter Messung aktivieren
+
+---
 ## [1.6.666] – 2025-07-31

 - feat: KVZ JSON Daten für mock auf CPL hochgeladen und getestet
--- a/components/main/kabelueberwachung/kue705FO/Charts/IsoMeasurementChart/IsoChartActionBar.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/IsoMeasurementChart/IsoChartActionBar.tsx
@@ -9,9 +9,9 @@ import {
  setSelectedMode,
  setChartOpen,
  setLoading,
+  setChartTitle,
 } from "@/redux/slices/kabelueberwachungChartSlice";
 import { setBrushRange } from "@/redux/slices/brushSlice";
-import { setChartTitle } from "@/redux/slices/isoChartTypeSlice";
 import { Listbox } from "@headlessui/react";

 //-----------------------------------------------------------------------------------useIsoChartLoader
@@ -92,8 +92,14 @@ export const useIsoChartLoader = () => {
 const IsoChartActionBar: React.FC = () => {
  const dispatch = useDispatch();

-  const { vonDatum, bisDatum, selectedMode, slotNumber, isLoading } =
-    useSelector((state: RootState) => state.kabelueberwachungChartSlice);
+  const {
+    vonDatum,
+    bisDatum,
+    selectedMode,
+    slotNumber,
+    isLoading,
+    chartTitle,
+  } = useSelector((state: RootState) => state.kabelueberwachungChartSlice);

  const formatDate = (dateString: string) => {
    const [year, month, day] = dateString.split("-");
@@ -237,13 +243,47 @@ const IsoChartActionBar: React.FC = () => {
          </div>
        </Listbox>

-        {/* Platzhalter für "ISO starten" Button, nimmt weiterhin Platz ein, aber ist unsichtbar */}
-        <span
-          style={{ visibility: "hidden" }}
-          className="px-10 py-1 bg-littwin-blue text-white rounded text-sm"
+        {/* Dropdown für Auswahl zwischen "Messkurve" und "Meldungen" */}
+        <Listbox
+          value={chartTitle}
+          onChange={(value) => dispatch(setChartTitle(value))}
        >
-          ISO starten
-        </span>
+          <div className="relative w-40">
+            <Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
+              <span>{chartTitle}</span>
+              <svg
+                className="w-5 h-5 text-gray-400"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M5.23 7.21a.75.75 0 011.06.02L10 10.585l3.71-3.355a.75.75 0 111.02 1.1l-4.25 3.85a.75.75 0 01-1.02 0l-4.25-3.85a.75.75 0 01.02-1.06z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </Listbox.Button>
+            <Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow max-h-60 overflow-auto text-sm">
+              {["Messkurve", "Meldungen"].map((option) => (
+                <Listbox.Option
+                  key={option}
+                  value={option}
+                  className={({ selected, active }) =>
+                    `px-4 py-1 cursor-pointer ${
+                      selected
+                        ? "bg-littwin-blue text-white"
+                        : active
+                        ? "bg-gray-200"
+                        : ""
+                    }`
+                  }
+                >
+                  {option}
+                </Listbox.Option>
+              ))}
+            </Listbox.Options>
+          </div>
+        </Listbox>

        <button
          onClick={handleFetchData}
--- a/components/main/kabelueberwachung/kue705FO/Charts/IsoMeasurementChart/IsoChartView.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/IsoMeasurementChart/IsoChartView.tsx
@@ -4,6 +4,7 @@ import React, { useEffect } from "react";
 import ReactModal from "react-modal";
 import IsoMeasurementChart from "./IsoMeasurementChart";
 import IsoChartActionBar from "./IsoChartActionBar";
+import Report from "./Report";
 import { useSelector, useDispatch } from "react-redux";
 import { AppDispatch } from "@/redux/store";
 import { RootState } from "@/redux/store";
@@ -11,6 +12,7 @@ import {
  setChartOpen,
  setFullScreen,
  setSlotNumber,
+  setChartTitle,
 } from "@/redux/slices/kabelueberwachungChartSlice";

 import { resetBrushRange } from "@/redux/slices/brushSlice";
@@ -35,8 +37,8 @@ const IsoChartView: React.FC<IsoChartViewProps> = ({
 }) => {
  const dispatch = useDispatch<AppDispatch>();

-  const isFullScreen = useSelector(
-    (state: RootState) => state.kabelueberwachungChartSlice.isFullScreen
+  const { isFullScreen, chartTitle } = useSelector(
+    (state: RootState) => state.kabelueberwachungChartSlice
  );

  // **Modal schließen + Redux-Status zurücksetzen**
@@ -54,6 +56,7 @@ const IsoChartView: React.FC<IsoChartViewProps> = ({
    // Reset Dropdowns
    dispatch(setSelectedMode("DIA1"));
    dispatch(setSelectedSlotType("isolationswiderstand"));
+    dispatch(setChartTitle("Messkurve")); // Reset zu Messkurve

    // Sonstiges Reset
    dispatch(setChartOpen(false));
@@ -86,6 +89,9 @@ const IsoChartView: React.FC<IsoChartViewProps> = ({

      // Set ISO specific settings
      dispatch(setSelectedSlotType("isolationswiderstand"));
+
+      // Set default to Messkurve
+      dispatch(setChartTitle("Messkurve"));
    }
  }, [isOpen, slotIndex, dispatch]);

@@ -161,10 +167,12 @@ const IsoChartView: React.FC<IsoChartViewProps> = ({
          height: "100%",
        }}
      >
-        <h3 className="text-lg font-semibold">Isolationswiderstand</h3>
+        <h3 className="text-lg font-semibold">
+          {chartTitle === "Messkurve" ? "Isolationswiderstand" : "Meldungen"}
+        </h3>
        <IsoChartActionBar />
        <div style={{ flex: 1, height: "90%" }}>
-          <IsoMeasurementChart />
+          {chartTitle === "Messkurve" ? <IsoMeasurementChart /> : <Report />}
        </div>
      </div>
    </ReactModal>
--- a/components/main/kabelueberwachung/kue705FO/Charts/IsoMeasurementChart/Report.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/IsoMeasurementChart/Report.tsx
@@ -0,0 +1,175 @@
+"use client"; // Report.tsx
+
+import React, { useState, useEffect, useCallback } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { RootState, AppDispatch } from "@/redux/store";
+import { getMessagesThunk } from "@/redux/thunks/getMessagesThunk";
+
+// Gleiche Datenstruktur wie MeldungenView
+type Meldung = {
+  t: string; // timestamp
+  s: number; // status/priority
+  c: string; // color
+  m: string; // message
+  i: string; // source/info
+  v: string; // value/status text
+};
+
+const Report: React.FC = () => {
+  const dispatch = useDispatch<AppDispatch>();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [filteredMessages, setFilteredMessages] = useState<Meldung[]>([]);
+
+  const { vonDatum, bisDatum, slotNumber } = useSelector(
+    (state: RootState) => state.kabelueberwachungChartSlice
+  );
+
+  // Nachrichten aus dem globalen Store
+  const messages = useSelector((state: RootState) => state.messages.data);
+
+  // Nachrichten für den aktuellen Slot filtern
+  const filterMessagesForSlot = useCallback(
+    (allMessages: Meldung[], slot: number) => {
+      if (slot === null) return [];
+
+      // Filter basierend auf der Quelle (i-Feld)
+      return allMessages.filter((msg: Meldung) => {
+        // Verschiedene mögliche Slot-Identifikationen
+        const slotIdentifiers = [
+          `CableLine${slot + 1}`,
+          `Slot${slot + 1}`,
+          `KÜ${slot + 1}`,
+          `Kue${slot + 1}`,
+          `Cable${slot + 1}`,
+          `Line${slot + 1}`,
+        ];
+
+        return slotIdentifiers.some((identifier) => msg.i.includes(identifier));
+      });
+    },
+    []
+  );
+
+  // Daten laden
+  const loadMessages = useCallback(async () => {
+    if (slotNumber === null) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      // Redux Thunk verwenden (wie in MeldungenView)
+      await dispatch(
+        getMessagesThunk({
+          fromDate: vonDatum,
+          toDate: bisDatum,
+        })
+      ).unwrap();
+    } catch (err) {
+      console.error("Fehler beim Laden der Berichte:", err);
+      setError("Fehler beim Laden der Meldungen.");
+    } finally {
+      setLoading(false);
+    }
+  }, [dispatch, vonDatum, bisDatum, slotNumber]);
+
+  // Filter anwenden wenn sich Nachrichten oder Slot ändern
+  useEffect(() => {
+    if (slotNumber !== null && messages.length > 0) {
+      const filtered = filterMessagesForSlot(messages, slotNumber);
+      setFilteredMessages(filtered);
+    } else {
+      setFilteredMessages([]);
+    }
+  }, [messages, slotNumber, filterMessagesForSlot]);
+
+  // Automatisches Laden beim Mount und bei Änderungen
+  useEffect(() => {
+    if (slotNumber !== null) {
+      loadMessages();
+    }
+  }, [loadMessages, slotNumber]);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="flex items-center space-x-2">
+          <div className="w-4 h-4 border-2 border-t-2 border-blue-500 rounded-full animate-spin" />
+          <span>Lade Meldungen...</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return <div className="text-center text-red-500 p-4">{error}</div>;
+  }
+
+  return (
+    <div className="w-full h-full flex flex-col">
+      <div className="flex justify-between items-center mb-4">
+        <h4 className="text-lg font-semibold">
+          Meldungen für KÜ {slotNumber !== null ? slotNumber + 1 : "-"}
+        </h4>
+        <button
+          onClick={loadMessages}
+          className="px-3 py-1 bg-littwin-blue text-white rounded text-sm hover:bg-blue-600"
+        >
+          Aktualisieren
+        </button>
+      </div>
+
+      {filteredMessages.length === 0 ? (
+        <div className="text-center text-gray-500 py-8">
+          Keine Meldungen im gewählten Zeitraum gefunden.
+        </div>
+      ) : (
+        <div className="flex-1 overflow-auto max-h-[80vh]">
+          <table className="min-w-full border text-sm">
+            <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>
+              {filteredMessages.map((msg, index) => (
+                <tr key={index} className="hover:bg-gray-200">
+                  <td className="border p-2">
+                    <div
+                      className="w-4 h-4 rounded"
+                      style={{ backgroundColor: msg.c }}
+                    ></div>
+                  </td>
+                  <td className="border p-2">
+                    {new Date(msg.t).toLocaleString("de-DE", {
+                      day: "2-digit",
+                      month: "2-digit",
+                      year: "numeric",
+                      hour: "2-digit",
+                      minute: "2-digit",
+                      second: "2-digit",
+                    })}
+                  </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>
+        </div>
+      )}
+
+      <div className="mt-4 text-sm text-gray-500 text-center">
+        {filteredMessages.length} Meldung(en) gefunden
+      </div>
+    </div>
+  );
+};
+
+export default Report;
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "cpl-v4",
-  "version": "1.6.666",
+  "version": "1.6.667",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "cpl-v4",
-      "version": "1.6.666",
+      "version": "1.6.667",
      "dependencies": {
        "@fontsource/roboto": "^5.1.0",
        "@headlessui/react": "^2.2.4",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "cpl-v4",
-  "version": "1.6.666",
+  "version": "1.6.667",
  "private": true,
  "scripts": {
    "dev": "next dev",
--- a/redux/slices/kabelueberwachungChartSlice.ts
+++ b/redux/slices/kabelueberwachungChartSlice.ts
@@ -22,6 +22,7 @@ interface KabelueberwachungChartState {
  isFullScreen: boolean;
  unit: "kOhm" | "MOhm";
  isLoading: boolean;
+  chartTitle: "Messkurve" | "Meldungen";
 }

 // Dynamische Initialisierung der Datumswerte
@@ -43,6 +44,7 @@ const initialState: KabelueberwachungChartState = {
  tdrChartData: [],
  isFullScreen: false,
  unit: "MOhm",
+  chartTitle: "Messkurve", // Standard: Messkurve ausgewählt
 };

 // Erstellung des Slices
@@ -93,6 +95,12 @@ const kabelueberwachungChartSlice = createSlice({
    setLoading: (state, action: PayloadAction<boolean>) => {
      state.isLoading = action.payload;
    },
+    setChartTitle: (
+      state,
+      action: PayloadAction<"Messkurve" | "Meldungen">
+    ) => {
+      state.chartTitle = action.payload;
+    },
  },
 });

@@ -109,6 +117,7 @@ export const {
  setTDRChartData,
  setFullScreen,
  setLoading,
+  setChartTitle,
 } = kabelueberwachungChartSlice.actions;

 // Export des Reducers