feat: Alle verfügbaren JSON-Objekte abrufen und filtern

- 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.
This commit is contained in:
Ismail Ali
2025-02-12 22:00:57 +01:00
parent e732c581d1
commit af46187f3a
2 changed files with 72 additions and 85 deletions

View File

@@ -1,102 +1,91 @@
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
import DateRangePicker from "./DateRangePicker";
const LoopTDRChartActionBar: React.FC = () => {
const BASE_URL =
process.env.NODE_ENV === "development"
? process.env.NEXT_PUBLIC_MOCK_API ||
"http://localhost:3002/kabelueberwachung"
: `${window.location.origin}/CPL`;
const BASE_URL = "http://localhost:3002";
const [vonDatum, setVonDatum] = useState<Date>(new Date()); // Standard: Heute
const [bisDatum, setBisDatum] = useState<Date>(new Date()); // Standard: Heute
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);
const [filteredData, setFilteredData] = useState<any[]>([]); // Speichert die gefilterten Daten
const [errorMessage, setErrorMessage] = useState<string | null>(null); // Fehlernachricht
useEffect(() => {
handleAktualisieren();
}, []);
const handleAktualisieren = () => {
if (!vonDatum || !bisDatum) {
console.error("❌ Bitte wählen Sie ein gültiges Startdatum aus.");
return;
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
}
}
// Falls `bisDatum` nicht gesetzt ist, verwende `vonDatum`
const bisDatumValid = bisDatum ? bisDatum : vonDatum;
return allData;
};
// Setze Fehlermeldung zurück, bevor eine neue Anfrage gestartet wird
setErrorMessage(null);
setFilteredData([]);
const handleAktualisieren = async () => {
try {
setErrorMessage(null);
setFilteredData([]);
// **Von- und Bis-Datum in Unix-Timestamp (nur Datum, ohne Uhrzeit)**
const vonTimestamp = new Date(
vonDatum.getFullYear(),
vonDatum.getMonth(),
vonDatum.getDate(),
0,
0,
0,
0
).getTime();
console.log("📡 API Haupt-URL:", BASE_URL);
const bisTimestamp = new Date(
bisDatumValid.getFullYear(),
bisDatumValid.getMonth(),
bisDatumValid.getDate(),
23,
59,
59,
999
).getTime();
// **Alle verfügbaren JSON-Objekte abrufen**
const allData = await fetchAllData();
const apiUrl = `${BASE_URL}?seite.ACP&DIA1=${
new Date(vonTimestamp).toISOString().split("T")[0]
};${new Date(bisTimestamp).toISOString().split("T")[0]};2;4`;
if (allData.length === 0) {
console.error("❌ Keine Daten gefunden!");
setErrorMessage("❌ Keine Daten gefunden.");
return;
}
console.log("📡 API URL:", apiUrl);
console.log("📥 Alle abgerufenen JSON-Daten:");
console.table(allData);
fetch(apiUrl)
.then((res) => {
if (!res.ok) {
throw new Error(`HTTP Fehler! Status: ${res.status}`);
}
return res.json();
})
.then((data) => {
console.log("📡 API URL:", apiUrl);
console.log("📥 Rohdaten (vor Filterung):", data);
// **Daten filtern nach Datum**
const vonTimestamp = new Date(vonDatum).setHours(0, 0, 0, 0);
const bisTimestamp = new Date(bisDatum).setHours(23, 59, 59, 999);
// **Filtere die Daten basierend auf Unix-Zeit**
const filtered = data.filter((item: any) => {
const itemDateParts = item.t.split(" ")[0].split("-"); // Trenne Datum von Uhrzeit
const itemTimestamp = new Date(
Number(itemDateParts[2]), // Jahr
Number(itemDateParts[1]) - 1, // Monat (JS zählt ab 0)
Number(itemDateParts[0]), // Tag
0,
0,
0,
0
).getTime();
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:", filtered);
if (filtered.length > 0) {
// Falls Daten vorhanden sind, zeige sie an und entferne die Fehlermeldung
setFilteredData(filtered);
setErrorMessage(null);
} else {
// Falls gar keine Daten für den Zeitraum existieren
setFilteredData([]);
setErrorMessage("❌ Kein Daten im gewählten Zeitraum gefunden.");
}
})
.catch((err) => {
console.error("❌ Fehler beim Abrufen der Daten:", err);
setErrorMessage("❌ Fehler beim Laden der Daten.");
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 (
@@ -109,8 +98,6 @@ const LoopTDRChartActionBar: React.FC = () => {
>
Aktualisieren
</button>
{errorMessage && <p className="text-red-500 mt-2">{errorMessage}</p>}
</div>
);
};

View File

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