Struktur in components verbessert

components/main/kabelueberwachung/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;