TDR Chart bekommt von Redux Daten, aber die Darstellung ist noch zu optimieren

components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx

@@ -1,46 +1,15 @@
 // components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef } from "react";
+import { useSelector } from "react-redux";
 import Chart from "chart.js/auto";
 import "chartjs-adapter-date-fns";
-import { parseISO } from "date-fns";
 
 const TDRChart: React.FC = () => {
   const chartRef = useRef<HTMLCanvasElement>(null);
   const chartInstance = useRef<Chart | null>(null);
 
-  // Zustand für die Chart-Daten
+  // TDR-Daten aus dem Redux Store selektieren
-  const [chartData, setChartData] = useState<
+  const chartData = useSelector((state: any) => state.tdrData.data);
-    { timestamp: string; tdr: number }[]
-  >([]);
-
-  useEffect(() => {
-    // Aktuelles Jahr und Monat ermitteln
-    const currentYear = new Date().getFullYear();
-    const currentMonth = new Date().getMonth() + 1; // Monate sind 0-basiert
-
-    // Pfad zur directory.json-Datei erstellen
-    const yearFolder = `Year_${String(currentYear).slice(-2)}`;
-    const monthFolder = `Month_${String(currentMonth).padStart(2, "0")}`;
-    const path = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`;
-
-    // Daten abrufen
-    fetch(path)
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error(
-            `Fehler beim Laden der Datei: ${response.statusText}`
-          );
-        }
-        return response.json();
-      })
-      .then((data) => {
-        // Annahme: data ist ein Array von Objekten mit den Eigenschaften 'timestamp' und 'tdr'
-        setChartData(data);
-      })
-      .catch((error) => {
-        console.error("Fehler beim Abrufen der Daten:", error);
-      });
-  }, []);
 
   useEffect(() => {
     if (chartRef.current && chartData.length > 0) {
@@ -53,14 +22,17 @@ const TDRChart: React.FC = () => {
         chartInstance.current = new Chart(ctx, {
           type: "line",
           data: {
-            labels: chartData.map((entry) => parseISO(entry.timestamp)),
             datasets: [
               {
                 label: "TDR Entfernung (km)",
-                data: chartData.map((entry) => entry.tdr ?? 0),
+                data: chartData,
                 borderColor: "rgba(255, 99, 132, 1)",
                 backgroundColor: "rgba(255, 99, 132, 0.2)",
                 tension: 0.1,
+                parsing: {
+                  xAxisKey: "t", // Schlüssel für den Zeitstempel
+                  yAxisKey: "m", // Schlüssel für den Messwert
+                },
               },
             ],
           },
@@ -70,11 +42,20 @@ const TDRChart: React.FC = () => {
             scales: {
               x: {
                 type: "time",
-                time: { unit: "minute", tooltipFormat: "dd.MM.yyyy HH:mm" },
+                time: {
-                title: { display: true, text: "Zeit" },
+                  unit: "minute",
+                  tooltipFormat: "dd.MM.yyyy HH:mm",
+                },
+                title: {
+                  display: true,
+                  text: "Zeit",
+                },
               },
               y: {
-                title: { display: true, text: "km" },
+                title: {
+                  display: true,
+                  text: "km",
+                },
                 min: 0,
                 max: 3,
               },

components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx

@@ -2,11 +2,13 @@
 import React, { useState, useEffect, useRef } from "react";
 import DateRangePicker from "../DateRangePicker";
 import TDRChart from "../../../../kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart";
-import { useDispatch } from "react-redux";
 import { setChartData } from "../../../../../../redux/slices/chartDataSlice";
 import { parseISO } from "date-fns";
+import { useDispatch } from "react-redux";
+import { setTDRData } from "../../../../../../redux/slices/tdrDataSlice";
 
 const TDRChartActionBar: React.FC = () => {
+  const dispatch = useDispatch();
   const [jahr, setJahr] = useState(new Date().getFullYear());
   const [monat, setMonat] = useState(new Date().getMonth() + 1);
   const [dateiListe, setDateiListe] = useState<string[]>([]); // Liste der Dateien
@@ -73,6 +75,8 @@ const TDRChartActionBar: React.FC = () => {
         return;
       }
       const data = await response.json();
+      // Daten im Redux Store speichern
+      dispatch(setTDRData(data));
 
       console.log("Daten erfolgreich in Redux gespeichert:", data);
     } catch (error) {
@@ -130,7 +134,6 @@ const TDRChartActionBar: React.FC = () => {
       });
   }, []);
 
-  const dispatch = useDispatch();
   const BASE_URL = "http://localhost:3002";
 
   const [showChart, setShowChart] = useState(false);

components/modales/KueModal.jsx

@@ -1,232 +0,0 @@
-"use client"; // components/modales/KueModal.jsx
-import ReactModal from "react-modal";
-import { useState, useEffect } from "react";
-import { useSelector, useDispatch } from "react-redux";
-import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
-import handleChange from "./handlers/handleChange";
-import handleDisplayEinschalten from "./handlers/handleDisplayEinschalten";
-import handleSave from "./handlers/handleSave";
-
-function KueModal({ showModal, onClose, slot, onModulNameChange }) {
-  const dispatch = useDispatch();
-  const [ids, setIds] = useState(Array(32).fill("---"));
-  const [bezeichnungen, setBezeichnungen] = useState(Array(32).fill("---"));
-  const [isolationsgrenzwerte, setIsolationsgrenzwerte] = useState(
-    Array(32).fill(10.0)
-  );
-  const [verzoegerung, setVerzoegerung] = useState(Array(32).fill(1.0));
-  const [untereSchleifenGrenzwerte, setUntereSchleifenGrenzwerte] = useState(
-    Array(32).fill(0.1)
-  );
-  const [obereSchleifenGrenzwerte, setObereSchleifenGrenzwerte] = useState(
-    Array(32).fill(1.0)
-  );
-  const [schleifenintervall, setSchleifenintervall] = useState(
-    Array(32).fill(24)
-  );
-
-  const [originalValues, setOriginalValues] = useState({});
-
-  // Werte aus dem Redux-Store abrufen
-  const {
-    kueID,
-    kueLimit1,
-    kueDelay1,
-    kueLimit2Low,
-    kueLimit2High,
-    kueLoopInterval,
-  } = useSelector((state) => state.variables);
-
-  // Initiale Werte festlegen, nur einmal beim Öffnen des Modals
-  useEffect(() => {
-    if (showModal) {
-      setIds(kueID ? kueID.map((id) => id.trim() || "---") : ids);
-      setBezeichnungen(
-        kueID ? kueID.map((name) => name.trim() || "---") : bezeichnungen
-      );
-      setIsolationsgrenzwerte(kueLimit1 || isolationsgrenzwerte);
-      setVerzoegerung(kueDelay1 || verzoegerung);
-      setUntereSchleifenGrenzwerte(kueLimit2Low || untereSchleifenGrenzwerte);
-      setObereSchleifenGrenzwerte(kueLimit2High || obereSchleifenGrenzwerte);
-      setSchleifenintervall(kueLoopInterval || schleifenintervall);
-
-      setOriginalValues({
-        ids: [...ids],
-        bezeichnungen: [...bezeichnungen],
-        isolationsgrenzwerte: [...isolationsgrenzwerte],
-        verzoegerung: [...verzoegerung],
-        untereSchleifenGrenzwerte: [...untereSchleifenGrenzwerte],
-        obereSchleifenGrenzwerte: [...obereSchleifenGrenzwerte],
-        schleifenintervall: [...schleifenintervall],
-      });
-    }
-  }, [showModal]); // nur von showModal abhängig ansonsten wird alle 10 Sekunden die Werte zurückgesetzt in Modal
-
-  return (
-    <ReactModal
-      isOpen={showModal}
-      onRequestClose={onClose}
-      ariaHideApp={false}
-      style={{
-        overlay: {
-          backgroundColor: "rgba(0, 0, 0, 0.5)",
-          zIndex: 100,
-          text: "black",
-        },
-        content: {
-          top: "50%",
-          left: "50%",
-          right: "auto",
-          bottom: "auto",
-          marginRight: "-50%",
-          transform: "translate(-50%, -50%)",
-          width: "90%",
-          maxWidth: "800px",
-          padding: "10px",
-          borderRadius: "8px",
-          border: "none",
-        },
-      }}
-    >
-      <div className="flex items-center justify-between bg-littwin-blue text-white p-1 rounded-t-lg">
-        <h2 className="text-sm font-bold">KUE Einstellung - Slot {slot + 1}</h2>
-        <button
-          onClick={onClose}
-          style={{
-            position: "absolute",
-            top: "10px",
-            right: "20px",
-            background: "transparent",
-            border: "none",
-            cursor: "pointer",
-            fontSize: "24px",
-          }}
-        >
-          <i className="bi bi-x-circle-fill"></i>
-        </button>
-      </div>
-
-      <div className="p-2 mb-4 text-black">
-        <div className="mb-2 ">
-          <label className="font-bold ">Kabelbezeichnung:</label>
-          <input
-            type="text"
-            className="border rounded p-1 w-full text-sm"
-            value={ids[slot]}
-            onChange={(e) => handleChange(setIds, e, slot)}
-          />
-        </div>
-      </div>
-
-      <div className="p-2 text-black">
-        <h3 className="font-bold text-center mb-4">Isolationsmessung</h3>
-        <table className="w-full text-left border-collapse mb-4">
-          <thead className="bg-gray-100">
-            <tr>
-              <th className="p-2 border text-sm text-center">
-                Grenzwert (MOhm)
-              </th>
-              <th className="p-2 border text-sm text-center">
-                Verzögerung (sek)
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td className="p-2 border text-center">
-                <input
-                  type="number"
-                  className="w-[6rem] border rounded p-1 text-sm"
-                  value={isolationsgrenzwerte[slot]}
-                  step="0.1"
-                  onChange={(e) =>
-                    handleChange(setIsolationsgrenzwerte, e, slot)
-                  }
-                />
-              </td>
-              <td className="p-2 border text-center">
-                <input
-                  type="number"
-                  className="w-[6rem] border rounded p-1 text-sm"
-                  value={verzoegerung[slot]}
-                  step="0.1"
-                  onChange={(e) => handleChange(setVerzoegerung, e, slot)}
-                />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
-        <h3 className="font-bold text-center mb-4">Schleifenmessung</h3>
-        <table className="w-full text-left border-collapse">
-          <thead className="bg-gray-100">
-            <tr>
-              <th className="p-2 border text-sm text-center">
-                Grenzwert (kOhm)
-              </th>
-              <th className="p-2 border text-sm text-center">
-                Schleifenintervall (h)
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td className="p-2 border text-center">
-                <input
-                  type="number"
-                  className="w-[6rem] border rounded p-1 text-sm"
-                  value={untereSchleifenGrenzwerte[slot]}
-                  step="0.1"
-                  onChange={(e) =>
-                    handleChange(setUntereSchleifenGrenzwerte, e, slot)
-                  }
-                />
-              </td>
-              <td className="p-2 border text-center">
-                <input
-                  type="number"
-                  className="w-[6rem] border rounded p-1 text-sm"
-                  value={schleifenintervall[slot]}
-                  step="1"
-                  onChange={(e) => handleChange(setSchleifenintervall, e, slot)}
-                />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <div className="flex justify-end bg-gray-100 p-4 rounded-b-lg">
-        <button
-          onClick={() => handleDisplayEinschalten(slot)}
-          className="bg-littwin-blue text-white p-2 rounded flex items-center mr-2"
-        >
-          <span className="mr-2">📺</span> Display einschalten
-        </button>
-        <button
-          onClick={() =>
-            handleSave({
-              slot,
-              ids,
-              bezeichnungen,
-              isolationsgrenzwerte,
-              verzoegerung,
-              untereSchleifenGrenzwerte,
-              obereSchleifenGrenzwerte,
-              schleifenintervall,
-              originalValues,
-              onModulNameChange,
-              dispatch,
-              onClose,
-            })
-          }
-          className="bg-littwin-blue text-white p-2 rounded flex items-center"
-        >
-          <span className="mr-2">💾</span> Speichern
-        </button>
-      </div>
-    </ReactModal>
-  );
-}
-
-export default KueModal;

components/modales/kueModal/TDRPopup.tsx

@@ -1,208 +0,0 @@
-"use client"; // components/modules/KueModal/TDRPopup.tsx
-import React, { useState, useEffect, useRef } from "react";
-import ReactModal from "react-modal";
-import Chart from "chart.js/auto";
-import { useSelector } from "react-redux";
-import KueModal from "../KueModal";
-import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
-import { RootState } from "../../../redux/store";
-import { DataTDR } from "../../../redux/types/chartDataTypesTDR";
-import { useDispatch } from "react-redux";
-import {
-  setSelectedChartData,
-  setSelectedFileName,
-} from "../../../redux/slices/variablesSlice";
-const TDRChartActionBar: React.FC = () => {
-  const [jahr, setJahr] = useState(new Date().getFullYear());
-  const [monat, setMonat] = useState(new Date().getMonth() + 1);
-  const [dateiListe, setDateiListe] = useState<string[]>([]); // Liste der Dateien
-  const [ausgewählteDatei, setAusgewählteDatei] = useState<string>(""); // Ausgewählte Datei
-
-  const dispatch = useDispatch(); // Redux-Dispatch
-
-  const getYearFolderName = (year: number): string => {
-    return `Year_${String(year).slice(-2)}`;
-  };
-
-  const [sortAscending, setSortAscending] = useState(true);
-
-  // Fetch directory.json basierend auf Jahr und Monat
-  useEffect(() => {
-    const loadDirectory = async () => {
-      const yearFolder = getYearFolderName(jahr);
-      const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
-      const path = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`;
-
-      console.log("Verwendeter Pfad:", path);
-
-      try {
-        const response = await fetch(path);
-        if (!response.ok) {
-          console.error(
-            `Fehler beim Laden der Datei directory.json. HTTP-Status: ${response.status}`
-          );
-          setDateiListe([]); // Setze eine leere Liste
-          return;
-        }
-
-        const data = await response.json();
-        const files = data.files.map(
-          (file: { filename: string }) => file.filename
-        );
-        setDateiListe(files);
-      } catch (error) {
-        console.error("Fehler beim Laden der Datei directory.json:", error);
-      }
-    };
-
-    loadDirectory();
-  }, [jahr, monat]);
-
-  const handleSortToggle = () => {
-    setSortAscending(!sortAscending);
-    setDateiListe((prevListe) =>
-      [...prevListe].sort((a, b) =>
-        sortAscending ? a.localeCompare(b) : b.localeCompare(a)
-      )
-    );
-  };
-
-  const handleAktualisieren = () => {
-    console.log("Daten werden aktualisiert für:", jahr, monat);
-  };
-  //----------------------------------
-  const loadAndStoreChartData = async (url: string) => {
-    try {
-      const response = await fetch(url);
-      if (!response.ok) {
-        console.error(
-          `Fehler beim Laden der Daten. HTTP-Status: ${response.status}`
-        );
-        return;
-      }
-      const data = await response.json();
-      dispatch(setSelectedChartData(data));
-      console.log("Daten erfolgreich in Redux gespeichert:", data);
-    } catch (error) {
-      console.error("Fehler beim Laden der JSON-Daten:", error);
-    }
-  };
-  const handleLoadData = (filename: string) => {
-    const yearFolder = `Year_${jahr.toString().slice(-2)}`;
-    const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
-    const filePath = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${filename}`;
-    loadAndStoreChartData(filePath);
-  };
-  const handleDateiAuswahl = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const selectedFile = event.target.value;
-    setAusgewählteDatei(selectedFile);
-    console.log("Ausgewählte Datei:", selectedFile);
-
-    // Datei in Redux speichern
-    dispatch(setSelectedFileName(selectedFile));
-
-    // Lade die Datei und speichere sie in Redux
-    handleLoadData(selectedFile);
-  };
-
-  const loadSelectedFileData = async (filename: string) => {
-    const yearFolder = getYearFolderName(jahr);
-    const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
-
-    try {
-      const response = await fetch(
-        `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${filename}`
-      );
-
-      if (response.ok) {
-        const data: DataTDR[] = await response.json();
-        console.log("Geladene Daten:", data);
-
-        // Redux-Action zum Speichern der Daten aufrufen
-        dispatch(setSelectedChartData(data));
-      } else {
-        console.error("Fehler beim Laden der Datei:", filename);
-      }
-    } catch (error) {
-      console.error("Fehler beim Laden der Datei:", error);
-    }
-  };
-
-  return (
-    <div className="flex flex-wrap justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2 mr-4">
-      <div className="flex items-center space-x-2">
-        <label htmlFor="jahrSelect" className="text-sm font-semibold">
-          Jahr
-        </label>
-        <select
-          id="jahrSelect"
-          className="border rounded px-2 py-1"
-          value={jahr}
-          onChange={(e) => setJahr(Number(e.target.value))}
-        >
-          {Array.from({ length: 11 }, (_, i) => 2020 + i).map((year) => (
-            <option key={year} value={year}>
-              {year}
-            </option>
-          ))}
-        </select>
-      </div>
-
-      <div className="flex items-center space-x-2">
-        <label htmlFor="monatSelect" className="text-sm font-semibold">
-          Monat
-        </label>
-        <select
-          id="monatSelect"
-          className="border rounded px-2 py-1"
-          value={monat}
-          onChange={(e) => setMonat(Number(e.target.value))}
-        >
-          {Array.from({ length: 12 }, (_, i) => i + 1).map((month) => (
-            <option key={month} value={month}>
-              {month.toString().padStart(2, "0")}
-            </option>
-          ))}
-        </select>
-      </div>
-
-      <div className="flex items-center space-x-2">
-        <label htmlFor="dateiSelect" className="text-sm font-semibold">
-          Auswahl
-        </label>
-        <select
-          id="dateiSelect"
-          className="border rounded px-2 py-1"
-          value={ausgewählteDatei}
-          onChange={handleDateiAuswahl}
-        >
-          <option value="" disabled>
-            Bitte wählen...
-          </option>
-          {dateiListe.map((file, index) => (
-            <option key={index} value={file}>
-              {file}
-            </option>
-          ))}
-        </select>
-      </div>
-
-      <button
-        onClick={handleSortToggle}
-        className="flex items-center justify-center px-3 py-1 bg-blue-500 text-white rounded text-sm"
-      >
-        <i className={`bi bi-arrow-${sortAscending ? "down" : "up"}-short`} />
-        <span className="ml-1">Sortieren</span>
-      </button>
-
-      <button
-        onClick={handleAktualisieren}
-        className="px-3 py-1 bg-green-500 text-white rounded text-sm"
-      >
-        Aktualisieren
-      </button>
-    </div>
-  );
-};
-
-export default TDRChartActionBar;

components/modals/InputModal.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-
-export default function InputModal({ isOpen, input, closeModal }) {
-  if (!isOpen || !input) return null;
-
-  return (
-    <div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
-      <div className="bg-white rounded-lg shadow-lg p-6 w-1/3">
-        <h2 className="text-lg font-bold mb-4">
-          Details für Eingang {input.id}
-        </h2>
-        <p>
-          <strong>Status:</strong>{" "}
-          {input.status === "active" ? "Aktiv" : "Inaktiv"}
-        </p>
-        <p>
-          <strong>Beschreibung:</strong> {input.description}
-        </p>
-        <button
-          onClick={closeModal}
-          className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg"
-        >
-          Schließen
-        </button>
-      </div>
-    </div>
-  );
-}

components/modals/OutputModal.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-
-export default function OutputModal({ isOpen, output, closeModal }) {
-  if (!isOpen || !output) return null;
-
-  return (
-    <div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
-      <div className="bg-white rounded-lg shadow-lg p-6 w-1/3">
-        <h2 className="text-lg font-bold mb-4">
-          Details für Ausgang {output.id}
-        </h2>
-        <p>
-          <strong>Bezeichnung:</strong> {output.description}
-        </p>
-        <p>
-          <strong>Status:</strong>{" "}
-          {output.toggle ? "Eingeschaltet" : "Ausgeschaltet"}
-        </p>
-        <button
-          onClick={closeModal}
-          className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg"
-        >
-          Schließen
-        </button>
-      </div>
-    </div>
-  );
-}

config/webVersion.ts

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

redux/slices/tdrDataSlice.ts

@@ -0,0 +1,26 @@
+// redux/slices/tdrDataSlice.ts
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+interface TDRDataState {
+  data: { timestamp: string; tdr: number }[];
+}
+
+const initialState: TDRDataState = {
+  data: [],
+};
+
+const tdrDataSlice = createSlice({
+  name: "tdrData",
+  initialState,
+  reducers: {
+    setTDRData(
+      state,
+      action: PayloadAction<{ timestamp: string; tdr: number }[]>
+    ) {
+      state.data = action.payload;
+    },
+  },
+});
+
+export const { setTDRData } = tdrDataSlice.actions;
+export default tdrDataSlice.reducer;

redux/store.ts

@@ -6,6 +6,7 @@ import chartDataReducer from "./slices/chartDataSlice";
 import webVersionReducer from "./slices/webVersionSlice";
 import digitalInputsReducer from "./slices/digitalInputsSlice";
 import kabelueberwachungChartReducer from "./slices/kabelueberwachungChartSlice";
+import tdrDataReducer from "./slices/tdrDataSlice";
 
 const store = configureStore({
   reducer: {
@@ -15,6 +16,7 @@ const store = configureStore({
     webVersion: webVersionReducer,
     digitalInputs: digitalInputsReducer,
     kabelueberwachungChart: kabelueberwachungChartReducer,
+    tdrData: tdrDataReducer,
   },
 });