5c7b5555c4
- `LoopMeasurementChart.tsx` und `TDRChart.tsx` erstellt für separate Diagramm-Darstellungen. - Neue Struktur unter `/components/modules/kue705FO/charts/` eingeführt. - `ChartModal.tsx` bleibt für generelle Nutzung erhalten. - Erhöhte Wartbarkeit und Modularität durch Trennung der Chart-Komponenten.
104 lines
3.1 KiB
TypeScript
104 lines
3.1 KiB
TypeScript
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;
|