af46187f3a
- Implementierung einer Funktion zum Abrufen aller JSON-Objekte von `/0` bis kein 404-Fehler auftritt. - Parsing der Daten in ein einheitliches JSON-Format. - Filterung der Daten nach dem ausgewählten Datumsbereich. - Ausgabe der Daten in der Konsole zur besseren Debugging-Kontrolle. - Behebung von Fehlern bei der API-Kommunikation.
106 lines
3.1 KiB
TypeScript
106 lines
3.1 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import DateRangePicker from "./DateRangePicker";
|
|
|
|
const LoopTDRChartActionBar: React.FC = () => {
|
|
const BASE_URL = "http://localhost:3002";
|
|
|
|
const [vonDatum, setVonDatum] = useState<Date>(new Date());
|
|
const [bisDatum, setBisDatum] = useState<Date>(new Date());
|
|
const [filteredData, setFilteredData] = useState<any[]>([]);
|
|
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
handleAktualisieren();
|
|
}, []);
|
|
|
|
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++; // Nächste URL abrufen
|
|
} catch (error) {
|
|
console.error(`❌ Fehler bei ${url}:`, error);
|
|
break; // Falls ein Fehler auftritt, Abbruch der Schleife
|
|
}
|
|
}
|
|
|
|
return allData;
|
|
};
|
|
|
|
const handleAktualisieren = async () => {
|
|
try {
|
|
setErrorMessage(null);
|
|
setFilteredData([]);
|
|
|
|
console.log("📡 API Haupt-URL:", BASE_URL);
|
|
|
|
// **Alle verfügbaren JSON-Objekte abrufen**
|
|
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);
|
|
|
|
// **Daten filtern nach Datum**
|
|
const vonTimestamp = new Date(vonDatum).setHours(0, 0, 0, 0);
|
|
const bisTimestamp = new Date(bisDatum).setHours(23, 59, 59, 999);
|
|
|
|
const filtered = allData.filter((item: any) => {
|
|
const itemDateParts = item.t.split(" ")[0].split("-");
|
|
const itemTimestamp = new Date(
|
|
Number(itemDateParts[2]), // Jahr
|
|
Number(itemDateParts[1]) - 1, // Monat (JS zählt ab 0)
|
|
Number(itemDateParts[0]) // Tag
|
|
).setHours(0, 0, 0, 0);
|
|
|
|
return itemTimestamp >= vonTimestamp && itemTimestamp <= bisTimestamp;
|
|
});
|
|
|
|
console.log("🔍 Gefilterte Daten:");
|
|
console.table(filtered);
|
|
|
|
setFilteredData(filtered);
|
|
} 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>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LoopTDRChartActionBar;
|