From e732c581d1e02827d47029516aa6e11aa7500fd7 Mon Sep 17 00:00:00 2001 From: Ismail Ali Date: Tue, 11 Feb 2025 21:46:06 +0100 Subject: [PATCH] feat: JSON-Daten filtern und Debugging verbessert MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Initialwerte für `vonDatum` und `bisDatum` in `LoopTDRChartActionBar.tsx` gesetzt. - `DateRangePicker.tsx` überarbeitet, um direkt das ausgewählte Datum zu setzen. - API-Filterung nach Unix-Zeitstempel (`getTime()`) implementiert. - Fehler behoben: Daten aus `json-server` erscheinen jetzt korrekt in der UI. - Verbesserte `console.log()`-Ausgaben für Debugging: - API-URL (`📡 API URL:`) - Rohdaten (`📥 Rohdaten (vor Filterung):`) - Gefilterte Daten (`🔍 Gefilterte Daten:`) --- .env.development | 1 - .../modales/kueModal/DateRangePicker.tsx | 24 +++-- .../kueModal/LoopTDRChartActionBar.tsx | 96 ++++++++++++++----- config/webVersion.ts | 2 +- 4 files changed, 92 insertions(+), 31 deletions(-) diff --git a/.env.development b/.env.development index c712d00..799f570 100644 --- a/.env.development +++ b/.env.development @@ -1,4 +1,3 @@ NEXT_PUBLIC_NODE_ENV=development NEXT_PUBLIC_ENCRYPTION_KEY=1 NEXT_PUBLIC_ENCRYPTION_IV=1 -NEXT_PUBLIC_CPL_API_URL=http://localhost:3000/api/mockCPL diff --git a/components/modales/kueModal/DateRangePicker.tsx b/components/modales/kueModal/DateRangePicker.tsx index 56d7593..e83fcb3 100644 --- a/components/modales/kueModal/DateRangePicker.tsx +++ b/components/modales/kueModal/DateRangePicker.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; @@ -11,8 +11,14 @@ const DateRangePicker: React.FC = ({ setVonDatum, setBisDatum, }) => { - const [startDate, setStartDate] = useState(new Date()); - const [endDate, setEndDate] = useState(new Date()); + // Nutze die Props als Standardwerte für das Datum + const [startDate, setStartDate] = useState(new Date()); + const [endDate, setEndDate] = useState(new Date()); + + useEffect(() => { + setVonDatum(startDate); + setBisDatum(endDate); + }, []); return (
@@ -21,8 +27,10 @@ const DateRangePicker: React.FC = ({ { - setStartDate(date); - if (date) setVonDatum(date); + if (date) { + setStartDate(date); + setVonDatum(date); + } }} selectsStart startDate={startDate} @@ -37,8 +45,10 @@ const DateRangePicker: React.FC = ({ { - setEndDate(date); - if (date) setBisDatum(date); + if (date) { + setEndDate(date); + setBisDatum(date); + } }} selectsEnd startDate={startDate} diff --git a/components/modales/kueModal/LoopTDRChartActionBar.tsx b/components/modales/kueModal/LoopTDRChartActionBar.tsx index 3c8a27c..0ec31a4 100644 --- a/components/modales/kueModal/LoopTDRChartActionBar.tsx +++ b/components/modales/kueModal/LoopTDRChartActionBar.tsx @@ -2,31 +2,55 @@ import React, { useState } from "react"; import DateRangePicker from "./DateRangePicker"; const LoopTDRChartActionBar: React.FC = () => { - // Dynamische Basis-URL const BASE_URL = process.env.NODE_ENV === "development" ? process.env.NEXT_PUBLIC_MOCK_API || - "http://localhost:3001/kabelueberwachung" - : `${window.location.origin}/CPL`; // Automatische Anpassung in Production + "http://localhost:3002/kabelueberwachung" + : `${window.location.origin}/CPL`; - const [vonDatum, setVonDatum] = useState(null); - const [bisDatum, setBisDatum] = useState(null); + const [vonDatum, setVonDatum] = useState(new Date()); // Standard: Heute + const [bisDatum, setBisDatum] = useState(new Date()); // Standard: Heute + + const [filteredData, setFilteredData] = useState([]); // Speichert die gefilterten Daten + const [errorMessage, setErrorMessage] = useState(null); // Fehlernachricht const handleAktualisieren = () => { if (!vonDatum || !bisDatum) { - console.error("❌ Bitte wählen Sie ein gültiges Datum aus."); + console.error("❌ Bitte wählen Sie ein gültiges Startdatum aus."); return; } - // Datum formatieren - const von = vonDatum.toISOString().split("T")[0]; - const bis = bisDatum.toISOString().split("T")[0]; + // Falls `bisDatum` nicht gesetzt ist, verwende `vonDatum` + const bisDatumValid = bisDatum ? bisDatum : vonDatum; - const [vonJahr, vonMonat, vonTag] = von.split("-"); - const [bisJahr, bisMonat, bisTag] = bis.split("-"); + // Setze Fehlermeldung zurück, bevor eine neue Anfrage gestartet wird + setErrorMessage(null); + setFilteredData([]); - // **Dynamische API-URL für Production und Development** - const apiUrl = `${BASE_URL}?seite.ACP&DIA1=${vonJahr};${vonMonat};${vonTag};${bisJahr};${bisMonat};${bisTag};2;4`; + // **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(); + + const bisTimestamp = new Date( + bisDatumValid.getFullYear(), + bisDatumValid.getMonth(), + bisDatumValid.getDate(), + 23, + 59, + 59, + 999 + ).getTime(); + + const apiUrl = `${BASE_URL}?seite.ACP&DIA1=${ + new Date(vonTimestamp).toISOString().split("T")[0] + };${new Date(bisTimestamp).toISOString().split("T")[0]};2;4`; console.log("📡 API URL:", apiUrl); @@ -35,18 +59,44 @@ const LoopTDRChartActionBar: React.FC = () => { if (!res.ok) { throw new Error(`HTTP Fehler! Status: ${res.status}`); } - return res.text(); + return res.json(); }) - .then((text) => { - console.log("⬇️ API Antwort (Rohdaten):", text); - try { - const data = JSON.parse(text); - console.log("✅ API Antwort (JSON):", data); - } catch (error) { - console.error("❌ Fehler: Antwort ist kein JSON!", text); + .then((data) => { + console.log("📡 API URL:", apiUrl); + console.log("📥 Rohdaten (vor Filterung):", data); + + // **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(); + + 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)); + .catch((err) => { + console.error("❌ Fehler beim Abrufen der Daten:", err); + setErrorMessage("❌ Fehler beim Laden der Daten."); + }); }; return ( @@ -59,6 +109,8 @@ const LoopTDRChartActionBar: React.FC = () => { > Aktualisieren + + {errorMessage &&

{errorMessage}

}
); }; diff --git a/config/webVersion.ts b/config/webVersion.ts index 508adf5..9f51b49 100644 --- a/config/webVersion.ts +++ b/config/webVersion.ts @@ -5,5 +5,5 @@ 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen). */ -const webVersion = "1.0.6.6"; +const webVersion = "1.0.6.7"; export default webVersion;