8d87d4a079
- `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.
42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
// /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;
|