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/modales/kueModal/LoopTDRChartActionBar.tsx

@@ -1,103 +0,0 @@
-import React, { useState } from "react";
-import DateRangePicker from "./DateRangePicker";
-import ChartModal from "../../modules/kue705FO/charts/ChartModal"; // Importiere das Chart-Modal
-import { useDispatch, useSelector } from "react-redux";
-import { setChartData } from "../../../redux/slices/chartDataSlice";
-import { RootState } from "../../../redux/store";
-
-const LoopTDRChartActionBar: React.FC = () => {
-  const dispatch = useDispatch();
-  const BASE_URL = "http://localhost:3002";
-
-  const [vonDatum, setVonDatum] = useState<Date>(new Date());
-  const [bisDatum, setBisDatum] = useState<Date>(new Date());
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  const [showChartModal, setShowChartModal] = useState(false);
-
-  // Redux-Daten holen (damit sich das ChartModal darauf bezieht)
-  const chartData = useSelector((state: RootState) => state.chartData.data);
-
-  const fetchAllData = async () => {
-    let index = 0;
-    let allData: any[] = [];
-
-    while (true) {
-      const url = `${BASE_URL}/${index}`;
-      try {
-        const response = await fetch(url);
-
-        if (!response.ok) {
-          if (response.status === 404) {
-            console.log(
-              `📡 Kein weiteres Objekt gefunden bei Index ${index}, Stoppe Abruf.`
-            );
-            break;
-          }
-          throw new Error(`Fehler beim Abrufen von ${url}: ${response.status}`);
-        }
-
-        const jsonData = await response.json();
-        allData.push(jsonData);
-        index++;
-      } catch (error) {
-        console.error(`❌ Fehler bei ${url}:`, error);
-        break;
-      }
-    }
-    console.log("📥 Alle abgerufenen JSON-Daten:", allData);
-    dispatch(setChartData(allData)); // 🔥 Daten in Redux speichern
-    return allData;
-  };
-
-  const handleAktualisieren = async () => {
-    try {
-      setErrorMessage(null);
-
-      console.log("📡 API Haupt-URL:", BASE_URL);
-
-      const allData = await fetchAllData();
-
-      if (allData.length === 0) {
-        console.error("❌ Keine Daten gefunden!");
-        setErrorMessage("❌ Keine Daten gefunden.");
-        return;
-      }
-
-      console.log("📥 Alle abgerufenen JSON-Daten:");
-      console.table(allData);
-    } catch (error) {
-      console.error("❌ Fehler beim Abrufen der Daten:", error);
-      setErrorMessage("❌ Fehler beim Laden der Daten.");
-    }
-  };
-
-  return (
-    <div className="flex flex-wrap justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2 mr-4">
-      <DateRangePicker setVonDatum={setVonDatum} setBisDatum={setBisDatum} />
-
-      <button
-        onClick={handleAktualisieren}
-        className="px-3 py-1 bg-green-500 text-white rounded text-sm"
-      >
-        Aktualisieren
-      </button>
-
-      <button
-        onClick={() => setShowChartModal(true)}
-        className="px-3 py-1 bg-blue-500 text-white rounded text-sm"
-      >
-        Diagramm anzeigen
-      </button>
-
-      {showChartModal && (
-        <ChartModal
-          isOpen={showChartModal}
-          onClose={() => setShowChartModal(false)}
-          chartRef={React.createRef<HTMLCanvasElement>()}
-        />
-      )}
-    </div>
-  );
-};
-
-export default LoopTDRChartActionBar;

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

@@ -1,3 +1,4 @@
+// /components/modules/kue705FO/charts/DateRangePicker.tsx
 import React, { useState, useEffect } from "react";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";

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)",
+                label: "Schleifenwiderstand (kOhm)",
-                data: chartData.map((entry) => entry.isolation ?? 0),
+                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: {
+                time: { unit: "minute", tooltipFormat: "dd.MM.yyyy HH:mm" },
-                  unit: "hour",
-                  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:
+                max: 2,
-                  Math.max(...chartData.map((entry) => entry.isolation ?? 1)) +
-                  10,
               },
             },
           },
@@ -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;

config/webVersion.ts

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