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:
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user