feat: Separate Darstellung für Loop- und TDR-Charts implementiert

- `LoopMeasurementChart.tsx` und `TDRChart.tsx` mit Mock-Daten für Tests ergänzt.
- `LoopChartActionBar.tsx` und `TDRChartActionBar.tsx` korrekt in `ChartSwitcher.tsx` integriert.
- `ChartModal.tsx` umbenannt zu `ChartSwitcher.tsx` für klarere Struktur.
- Redux `activeMode` sorgt jetzt für den richtigen Wechsel zwischen Loop- und TDR-Charts.
- Verbesserte Verzeichnisstruktur für bessere Wartbarkeit und Skalierbarkeit.

components/modules/kue705FO/Kue705FO.tsx

@@ -1,9 +1,9 @@
-"use client"; // components/modules/Kue705FO.tsx
+"use client"; // components/modules/kue705FO/Kue705FO.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 "../../modales/kueModal/KueModal";
+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";
@@ -12,7 +12,6 @@ import {
   setSelectedChartData,
   setSelectedFileName,
 } from "../../../redux/slices/variablesSlice";
-import TDRPopup from "../../modales/kueModal/LoopTDRChartActionBar";
 import { createLoopChart, createTDRChart } from "../../../utils/chartUtils";
 import { getAlarmDisplayText } from "../../../utils/alarmUtils";
 import { goLoop } from "../../../utils/goLoop";
@@ -20,8 +19,10 @@ import { goTDR } from "../../../utils/goTDR";
 import { loadTDRChartData } from "../../../utils/loadTDRChartData";
 import { loadLoopChartData } from "../../../utils/loadLoopChartData";
 import { Kue705FOProps } from "../../../types/components/Kue705FOProps";
-import ChartModal from "./charts/ChartModal";
+import ChartSwitcher from "./charts/ChartSwitcher";
 import { setActiveMode } from "../../../redux/slices/chartDataSlice";
+import LoopMeasurementChart from "./charts/LoopMeasurementChart/LoopMeasurementChart";
+import TDRChart from "./charts/TDRChart/TDRChart";
 
 const Kue705FO: React.FC<Kue705FOProps> = ({
   isolationswert,
@@ -91,10 +92,11 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
 
   const handleOpenChartModal = () => {
     setShowChartModal(true);
+
     if (activeButton === "TDR") {
-      loadTDRChartData(selectedFileName, setChartData);
+      dispatch(setActiveMode("TDR"));
     } else {
-      loadLoopChartData(slotIndex, setChartData);
+      dispatch(setActiveMode("Schleife"));
     }
   };
 
@@ -430,11 +432,16 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
 
           {/* Modal für Messkurve */}
           {showChartModal && (
-            <ChartModal
+            <ChartSwitcher
               isOpen={showChartModal}
               onClose={handleCloseChartModal}
-              chartRef={chartRef}
-            />
+            >
+              {activeButton === "Schleife" ? (
+                <LoopMeasurementChart />
+              ) : (
+                <TDRChart />
+              )}
+            </ChartSwitcher>
           )}
         </>
       ) : (

components/modules/kue705FO/KueModal.tsx

@@ -0,0 +1,290 @@
+"use client"; // components/modales/KueModal.jsx
+import ReactModal from "react-modal";
+import { useState, useEffect } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { setVariables } from "../../../redux/slices/variablesSlice";
+import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
+import handleSave, {
+  OriginalValues,
+} from "../../modules/kue705FO/handlers/handleSave";
+import handleDisplayEinschalten from "../../modules/kue705FO/handlers/handleDisplayEinschalten";
+import handleChange from "../../modules/kue705FO/handlers/handleChange";
+import firmwareUpdate from "../../modules/kue705FO/handlers/firmwareUpdate";
+import decodeToken from "../../../utils/decodeToken";
+// Props-Typen definieren
+interface KueModalProps {
+  showModal: boolean;
+  onClose: () => void;
+  slot: number;
+  onModulNameChange: (id: string) => void;
+}
+
+function KueModal({
+  showModal,
+  onClose,
+  slot,
+  onModulNameChange,
+}: KueModalProps): JSX.Element {
+  const isAdminLoggedIn = useSelector(
+    (state: any) => state.auth.isAdminLoggedIn
+  );
+  const [isAdmin, setIsAdmin] = useState(false);
+  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<OriginalValues>({
+    kueID: Array(32).fill(""),
+    kueBezeichnungen: Array(32).fill(""),
+    isolationsgrenzwerte: Array(32).fill(10.0),
+    verzoegerung: Array(32).fill(1.0),
+    untereSchleifenGrenzwerte: Array(32).fill(0.1),
+    obereSchleifenGrenzwerte: Array(32).fill(1.0),
+    schleifenintervall: Array(32).fill(24),
+  });
+
+  // Werte aus dem Redux-Store abrufen
+  const {
+    kueID,
+    kueLimit1,
+    kueDelay1,
+    kueLimit2Low,
+    kueLimit2High,
+    kueLoopInterval,
+  } = useSelector((state: any) => state.variables);
+
+  const handleSaveWrapper = () => {
+    handleSave({
+      ids,
+      bezeichnungen,
+      isolationsgrenzwerte,
+      verzoegerung,
+      untereSchleifenGrenzwerte,
+      obereSchleifenGrenzwerte,
+      schleifenintervall,
+      originalValues,
+      slot,
+      dispatch,
+      onModulNameChange,
+      onClose,
+    });
+  };
+
+  const handleDisplayEinschaltenWrapper = () => {
+    handleDisplayEinschalten(slot); // Übergebe den Slot als Parameter
+  };
+  //------------------------------------------------------------------------------------------------------------
+  // Initiale Werte festlegen, nur einmal beim Öffnen des Modals
+  useEffect(() => {
+    if (showModal) {
+      setIds(kueID ? kueID.map((id: string) => id.trim() || "---") : ids);
+      setBezeichnungen(
+        kueID
+          ? kueID.map((name: string) => name.trim() || "---")
+          : bezeichnungen
+      );
+      setIsolationsgrenzwerte(kueLimit1 || isolationsgrenzwerte);
+      setVerzoegerung(kueDelay1 || verzoegerung);
+      setUntereSchleifenGrenzwerte(kueLimit2Low || untereSchleifenGrenzwerte);
+      setObereSchleifenGrenzwerte(kueLimit2High || obereSchleifenGrenzwerte);
+      setSchleifenintervall(kueLoopInterval || schleifenintervall);
+
+      setOriginalValues({
+        kueID: [...ids],
+        kueBezeichnungen: [...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
+  //------------------------------------------------------------------------------------------------------------
+  useEffect(() => {
+    const token = sessionStorage.getItem("token");
+    if (token) {
+      const decoded = decodeToken(token);
+      if (decoded && decoded.role.toLowerCase() === "admin") {
+        setIsAdmin(true);
+      } else {
+        setIsAdmin(false);
+      }
+    }
+  }, [showModal]);
+
+  //------------------------------------------------------------------------------------------------------------
+  return (
+    <ReactModal
+      isOpen={showModal}
+      onRequestClose={onClose}
+      ariaHideApp={false}
+      style={{
+        overlay: {
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          zIndex: 100,
+        },
+        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">
+        {/* Bedingte Anzeige der Firmware-Update-Schaltfläche */}
+        {isAdminLoggedIn && (
+          <button
+            onClick={() => firmwareUpdate(slot)}
+            className="bg-littwin-blue text-white p-2 rounded flex items-center mr-2"
+          >
+            Firmware Update
+          </button>
+        )}
+        <button
+          onClick={handleDisplayEinschaltenWrapper}
+          className="bg-littwin-blue text-white p-2 rounded flex items-center mr-2"
+        >
+          <span className="mr-2">📺</span> Display einschalten
+        </button>
+        <button
+          onClick={handleSaveWrapper}
+          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/modules/kue705FO/charts/ChartModal.tsx

@@ -1,171 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import ReactModal from "react-modal";
-import { useSelector } from "react-redux";
-import { RootState } from "../../../../redux/store";
-import Chart from "chart.js/auto";
-import "chartjs-adapter-date-fns";
-import { parseISO } from "date-fns";
-import LoopTDRPopup from "../../../modales/kueModal/LoopTDRChartActionBar";
-
-interface ChartModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-const ChartModal: React.FC<ChartModalProps> = ({ isOpen, onClose }) => {
-  const chartRef = useRef<HTMLCanvasElement>(null);
-  const chartInstance = useRef<Chart | null>(null);
-
-  // Redux State abrufen
-  const chartData = useSelector((state: RootState) => state.chartData.data);
-  const activeMode = useSelector(
-    (state: RootState) => state.chartData.activeMode
-  );
-
-  useEffect(() => {
-    if (chartRef.current && chartData.length > 0) {
-      if (chartInstance.current) {
-        chartInstance.current.destroy();
-      }
-
-      const ctx = chartRef.current.getContext("2d");
-      if (ctx) {
-        const labels = chartData.map((entry) =>
-          entry.timestamp ? parseISO(entry.timestamp) : new Date()
-        );
-
-        chartInstance.current = new Chart(ctx, {
-          type: "line",
-          data: {
-            labels,
-            datasets: [
-              {
-                label: "Isolationswiderstand (MOhm)",
-                data: chartData.map((entry) => entry.isolation ?? 0),
-                borderColor: "rgba(0, 123, 255, 1)",
-                backgroundColor: "rgba(0, 123, 255, 0.2)",
-                tension: 0.1,
-                yAxisID: "y-left",
-              },
-              {
-                label: "Schleifenwiderstand (kOhm)",
-                data: chartData.map((entry) => entry.loop ?? 0),
-                borderColor: "rgba(108, 117, 125, 1)",
-                backgroundColor: "rgba(108, 117, 125, 0.2)",
-                tension: 0.1,
-                yAxisID: "y-right",
-              },
-            ],
-          },
-          options: {
-            responsive: true,
-            maintainAspectRatio: false,
-            scales: {
-              x: {
-                type: "time",
-                time: {
-                  unit: "hour",
-                  tooltipFormat: "dd.MM.yyyy HH:mm",
-                },
-                title: {
-                  display: true,
-                  text: "Zeit",
-                },
-                grid: {
-                  drawBorder: true, // 🔥 Stellt sicher, dass die X-Achse sichtbar ist
-                },
-              },
-              y: {
-                id: "y-left",
-                position: "left",
-                title: {
-                  display: true,
-                  text: "MOhm",
-                },
-                min: 0,
-                max:
-                  Math.max(...chartData.map((entry) => entry.isolation ?? 1)) +
-                  10,
-                grid: {
-                  drawOnChartArea: true, // 🔥 Korrektur, damit es sich nicht überlagert
-                },
-              },
-              "y-right": {
-                id: "y-right",
-                position: "right",
-                title: {
-                  display: true,
-                  text: "kOhm",
-                },
-                min: 0,
-                max: Math.max(...chartData.map((entry) => entry.loop ?? 1)) + 1,
-                grid: {
-                  drawOnChartArea: false, // 🔥 Verhindert doppelte Linien
-                },
-              },
-            },
-          },
-        });
-      }
-    }
-
-    return () => {
-      if (chartInstance.current) {
-        chartInstance.current.destroy();
-        chartInstance.current = null;
-      }
-    };
-  }, [chartData, activeMode]);
-
-  return (
-    <ReactModal
-      isOpen={isOpen}
-      onRequestClose={onClose}
-      ariaHideApp={false}
-      style={{
-        overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
-        content: {
-          top: "50%",
-          left: "50%",
-          right: "auto",
-          bottom: "auto",
-          marginRight: "-50%",
-          transform: "translate(-50%, -50%)",
-          width: "80%",
-          maxWidth: "50rem",
-          height: "30rem",
-          padding: "1rem",
-          overflow: "hidden",
-        },
-      }}
-    >
-      <button
-        onClick={onClose}
-        style={{
-          position: "absolute",
-          top: "0.625rem",
-          right: "0.625rem",
-          background: "transparent",
-          border: "none",
-          fontSize: "1.5rem",
-          cursor: "pointer",
-        }}
-      >
-        <i className="bi bi-x-circle-fill"></i>
-      </button>
-
-      {/* Beibehaltung der UI mit Kalender und Buttons */}
-      <div style={{ maxHeight: "100%", overflow: "auto" }}>
-        <LoopTDRPopup />
-      </div>
-
-      {/* Canvas für das Chart */}
-      <canvas
-        ref={chartRef}
-        style={{ width: "100%", height: "20rem", marginTop: "1rem" }}
-      ></canvas>
-    </ReactModal>
-  );
-};
-
-export default ChartModal;

components/modules/kue705FO/charts/ChartSwitcher.tsx

@@ -0,0 +1,76 @@
+// /components/modules/kue705FO/charts/ChartSwitcher.tsx
+import React from "react";
+import ReactModal from "react-modal";
+import LoopChartActionBar from "./LoopMeasurementChart/LoopChartActionBar";
+import TDRChartActionBar from "./TDRChart/TDRChartActionBar";
+import LoopMeasurementChart from "./LoopMeasurementChart/LoopMeasurementChart";
+import TDRChart from "./TDRChart/TDRChart";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../../redux/store";
+
+interface ChartSwitcherProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
+  const activeMode = useSelector(
+    (state: RootState) => state.chartData.activeMode
+  );
+
+  return (
+    <ReactModal
+      isOpen={isOpen}
+      onRequestClose={onClose}
+      ariaHideApp={false}
+      style={{
+        overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
+        content: {
+          top: "50%",
+          left: "50%",
+          right: "auto",
+          bottom: "auto",
+          marginRight: "-50%",
+          transform: "translate(-50%, -50%)",
+          width: "80%",
+          maxWidth: "50rem",
+          height: "35rem",
+          padding: "1rem",
+          overflow: "hidden",
+        },
+      }}
+    >
+      <button
+        onClick={onClose}
+        style={{
+          position: "absolute",
+          top: "0.625rem",
+          right: "0.625rem",
+          background: "transparent",
+          border: "none",
+          fontSize: "1.5rem",
+          cursor: "pointer",
+        }}
+      >
+        <i className="bi bi-x-circle-fill"></i>
+      </button>
+
+      {/* Nur die richtige ActionBar und das richtige Chart basierend auf dem Modus anzeigen */}
+      {activeMode === "Schleife" ? (
+        <>
+          <h3 className="text-lg font-semibold">Schleifenmessung</h3>
+          <LoopChartActionBar />
+          <LoopMeasurementChart /> {/* 🎯 Hier wird das Chart gerendert */}
+        </>
+      ) : (
+        <>
+          <h3 className="text-lg font-semibold">TDR-Messung</h3>
+          <TDRChartActionBar />
+          <TDRChart /> {/* 🎯 Hier wird das Chart gerendert */}
+        </>
+      )}
+    </ReactModal>
+  );
+};
+
+export default ChartSwitcher;

components/modules/kue705FO/charts/DateRangePicker.tsx

@@ -0,0 +1,66 @@
+// /components/modules/kue705FO/charts/DateRangePicker.tsx
+import React, { useState, useEffect } from "react";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+
+interface DateRangePickerProps {
+  setVonDatum: (date: Date) => void;
+  setBisDatum: (date: Date) => void;
+}
+
+const DateRangePicker: React.FC<DateRangePickerProps> = ({
+  setVonDatum,
+  setBisDatum,
+}) => {
+  // Nutze die Props als Standardwerte für das Datum
+  const [startDate, setStartDate] = useState<Date>(new Date());
+  const [endDate, setEndDate] = useState<Date>(new Date());
+
+  useEffect(() => {
+    setVonDatum(startDate);
+    setBisDatum(endDate);
+  }, []);
+
+  return (
+    <div className="flex space-x-4">
+      <div>
+        <label className="block text-sm font-semibold">Von</label>
+        <DatePicker
+          selected={startDate}
+          onChange={(date) => {
+            if (date) {
+              setStartDate(date);
+              setVonDatum(date);
+            }
+          }}
+          selectsStart
+          startDate={startDate}
+          endDate={endDate}
+          dateFormat="dd.MM.yyyy"
+          className="border px-2 py-1 rounded"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-semibold">Bis</label>
+        <DatePicker
+          selected={endDate}
+          onChange={(date) => {
+            if (date) {
+              setEndDate(date);
+              setBisDatum(date);
+            }
+          }}
+          selectsEnd
+          startDate={startDate}
+          endDate={endDate}
+          minDate={startDate || undefined}
+          dateFormat="dd.MM.yyyy"
+          className="border px-2 py-1 rounded"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default DateRangePicker;

components/modules/kue705FO/charts/LoopMeasurementChart.tsx

@@ -1,110 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import { useSelector } from "react-redux";
-import { RootState } from "../../../redux/store";
-import Chart from "chart.js/auto";
-import "chartjs-adapter-date-fns";
-import { parseISO } from "date-fns";
-
-const LoopMeasurementChart: React.FC = () => {
-  const chartRef = useRef<HTMLCanvasElement>(null);
-  const chartInstance = useRef<Chart | null>(null);
-
-  // Redux-Daten abrufen
-  const chartData = useSelector((state: RootState) => state.chartData.data);
-
-  useEffect(() => {
-    if (chartRef.current && chartData.length > 0) {
-      if (chartInstance.current) {
-        chartInstance.current.destroy(); // Bestehendes Chart zerstören
-      }
-
-      const ctx = chartRef.current.getContext("2d");
-      if (ctx) {
-        const labels = chartData.map((entry) =>
-          entry.timestamp ? parseISO(entry.timestamp) : new Date()
-        );
-
-        chartInstance.current = new Chart(ctx, {
-          type: "line",
-          data: {
-            labels,
-            datasets: [
-              {
-                label: "Schleifenwiderstand (kOhm)",
-                data: chartData.map((entry) => entry.loop ?? 0),
-                borderColor: "rgba(75, 192, 192, 1)", // Türkis
-                backgroundColor: "rgba(75, 192, 192, 0.2)",
-                tension: 0.1,
-                yAxisID: "y-left",
-              },
-              {
-                label: "Zusätzliche Schleifenmesswerte",
-                data: chartData.map((entry) => entry.additional ?? 0),
-                borderColor: "rgba(255, 159, 64, 1)", // Orange
-                backgroundColor: "rgba(255, 159, 64, 0.2)",
-                tension: 0.1,
-                yAxisID: "y-right",
-              },
-            ],
-          },
-          options: {
-            responsive: true,
-            maintainAspectRatio: false,
-            scales: {
-              x: {
-                type: "time",
-                time: {
-                  unit: "hour",
-                  tooltipFormat: "dd.MM.yyyy HH:mm",
-                },
-                title: {
-                  display: true,
-                  text: "Zeit",
-                },
-                grid: {
-                  drawBorder: true,
-                },
-              },
-              y: {
-                id: "y-left",
-                position: "left",
-                title: {
-                  display: true,
-                  text: "kOhm",
-                },
-                min: 0,
-                max: Math.max(...chartData.map((entry) => entry.loop ?? 1)) + 1,
-              },
-              "y-right": {
-                id: "y-right",
-                position: "right",
-                title: {
-                  display: true,
-                  text: "Zusätzliche Werte",
-                },
-                min: 0,
-                max:
-                  Math.max(...chartData.map((entry) => entry.additional ?? 1)) +
-                  1,
-                grid: {
-                  drawOnChartArea: false,
-                },
-              },
-            },
-          },
-        });
-      }
-    }
-
-    return () => {
-      if (chartInstance.current) {
-        chartInstance.current.destroy();
-        chartInstance.current = null;
-      }
-    };
-  }, [chartData]);
-
-  return <canvas ref={chartRef} style={{ width: "100%", height: "20rem" }} />;
-};
-
-export default LoopMeasurementChart;

components/modules/kue705FO/charts/LoopMeasurementChart/LoopChartActionBar.tsx

@@ -0,0 +1,41 @@
+// /components/modules/kue705FO/charts/LoopMeasurementChart/LoopChartActionBar.tsx
+import React, { useState } from "react";
+import DateRangePicker from "../DateRangePicker";
+import LoopMeasurementChart from "./LoopMeasurementChart";
+import { useDispatch } from "react-redux";
+import { setChartData } from "../../../../../redux/slices/chartDataSlice";
+
+const LoopChartActionBar: React.FC = () => {
+  const dispatch = useDispatch();
+  const BASE_URL = "http://localhost:3002";
+
+  const [showChart, setShowChart] = useState(false);
+
+  const handleFetchData = async () => {
+    try {
+      const response = await fetch(`${BASE_URL}/loop`);
+      if (!response.ok) throw new Error("Fehler beim Abrufen der Daten");
+
+      const data = await response.json();
+      dispatch(setChartData(data));
+      setShowChart(true);
+    } catch (error) {
+      console.error("Fehler beim Laden der Daten:", error);
+    }
+  };
+
+  return (
+    <div className="flex justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2">
+      <DateRangePicker setVonDatum={() => {}} setBisDatum={() => {}} />
+      <button
+        onClick={handleFetchData}
+        className="px-3 py-1 bg-green-500 text-white rounded text-sm"
+      >
+        Aktualisieren
+      </button>
+      {showChart && <LoopMeasurementChart />}
+    </div>
+  );
+};
+
+export default LoopChartActionBar;

components/modules/kue705FO/charts/LoopMeasurementChart/LoopMeasurementChart.tsx

@@ -1,17 +1,23 @@
 import React, { useEffect, useRef } from "react";
 import { useSelector } from "react-redux";
-import { RootState } from "../../../redux/store";
+import { RootState } from "../../../../redux/store";
 import Chart from "chart.js/auto";
 import "chartjs-adapter-date-fns";
 import { parseISO } from "date-fns";
 
-const TDRChart: React.FC = () => {
+const LoopMeasurementChart: React.FC = () => {
   const chartRef = useRef<HTMLCanvasElement>(null);
   const chartInstance = useRef<Chart | null>(null);
-  const chartData = useSelector((state: RootState) => state.chartData.data);
+
+  // Nutze entweder Redux-Daten oder Mock-Daten
+  const chartData = useSelector((state: RootState) => state.chartData.data) || [
+    { timestamp: "2025-02-13T12:00:00", loop: 0.8 },
+    { timestamp: "2025-02-13T12:10:00", loop: 1.2 },
+    { timestamp: "2025-02-13T12:20:00", loop: 1.5 },
+  ];
 
   useEffect(() => {
-    if (chartRef.current && chartData.length > 0) {
+    if (chartRef.current) {
       if (chartInstance.current) {
         chartInstance.current.destroy();
       }
@@ -24,8 +30,8 @@ const TDRChart: React.FC = () => {
             labels: chartData.map((entry) => parseISO(entry.timestamp)),
             datasets: [
               {
-                label: "Isolationswiderstand (MOhm)",
-                data: chartData.map((entry) => entry.isolation ?? 0),
+                label: "Schleifenwiderstand (kOhm)",
+                data: chartData.map((entry) => entry.loop ?? 0),
                 borderColor: "rgba(0, 123, 255, 1)",
                 backgroundColor: "rgba(0, 123, 255, 0.2)",
                 tension: 0.1,
@@ -38,18 +44,13 @@ const TDRChart: React.FC = () => {
             scales: {
               x: {
                 type: "time",
-                time: {
-                  unit: "hour",
-                  tooltipFormat: "dd.MM.yyyy HH:mm",
-                },
+                time: { unit: "minute", tooltipFormat: "dd.MM.yyyy HH:mm" },
                 title: { display: true, text: "Zeit" },
               },
               y: {
-                title: { display: true, text: "MOhm" },
+                title: { display: true, text: "kOhm" },
                 min: 0,
-                max:
-                  Math.max(...chartData.map((entry) => entry.isolation ?? 1)) +
-                  10,
+                max: 2,
               },
             },
           },
@@ -68,4 +69,4 @@ const TDRChart: React.FC = () => {
   return <canvas ref={chartRef} style={{ width: "100%", height: "20rem" }} />;
 };
 
-export default TDRChart;
+export default LoopMeasurementChart;

components/modules/kue705FO/charts/TDRChart/TDRChart.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useRef } from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../../redux/store";
+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);
+
+  // Nutze entweder Redux-Daten oder Mock-Daten
+  const chartData = useSelector((state: RootState) => state.chartData.data) || [
+    { timestamp: "2025-02-13T12:00:00", tdr: 2.1 },
+    { timestamp: "2025-02-13T12:10:00", tdr: 2.3 },
+    { timestamp: "2025-02-13T12:20:00", tdr: 2.6 },
+  ];
+
+  useEffect(() => {
+    if (chartRef.current) {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+      }
+
+      const ctx = chartRef.current.getContext("2d");
+      if (ctx) {
+        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),
+                borderColor: "rgba(255, 99, 132, 1)",
+                backgroundColor: "rgba(255, 99, 132, 0.2)",
+                tension: 0.1,
+              },
+            ],
+          },
+          options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+              x: {
+                type: "time",
+                time: { unit: "minute", tooltipFormat: "dd.MM.yyyy HH:mm" },
+                title: { display: true, text: "Zeit" },
+              },
+              y: {
+                title: { display: true, text: "km" },
+                min: 0,
+                max: 3,
+              },
+            },
+          },
+        });
+      }
+    }
+
+    return () => {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+        chartInstance.current = null;
+      }
+    };
+  }, [chartData]);
+
+  return <canvas ref={chartRef} style={{ width: "100%", height: "20rem" }} />;
+};
+
+export default TDRChart;

components/modules/kue705FO/charts/TDRChart/TDRChartActionBar.tsx

@@ -0,0 +1,41 @@
+// /components/modules/kue705FO/charts/TDRChart/TDRChartActionBar.tsx
+import React, { useState } from "react";
+import DateRangePicker from "../DateRangePicker";
+import TDRChart from "./TDRChart";
+import { useDispatch } from "react-redux";
+import { setChartData } from "../../../../../redux/slices/chartDataSlice";
+
+const TDRChartActionBar: React.FC = () => {
+  const dispatch = useDispatch();
+  const BASE_URL = "http://localhost:3002";
+
+  const [showChart, setShowChart] = useState(false);
+
+  const handleFetchData = async () => {
+    try {
+      const response = await fetch(`${BASE_URL}/tdr`);
+      if (!response.ok) throw new Error("Fehler beim Abrufen der Daten");
+
+      const data = await response.json();
+      dispatch(setChartData(data));
+      setShowChart(true);
+    } catch (error) {
+      console.error("Fehler beim Laden der Daten:", error);
+    }
+  };
+
+  return (
+    <div className="flex justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2">
+      <DateRangePicker setVonDatum={() => {}} setBisDatum={() => {}} />
+      <button
+        onClick={handleFetchData}
+        className="px-3 py-1 bg-green-500 text-white rounded text-sm"
+      >
+        Aktualisieren
+      </button>
+      {showChart && <TDRChart />}
+    </div>
+  );
+};
+
+export default TDRChartActionBar;