feat: JSON-Daten filtern und Debugging verbessert

- 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,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

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<DateRangePickerProps> = ({
   setVonDatum,
   setBisDatum,
 }) => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  // Nutze die Props als Standardwerte für das Datum
-  const [endDate, setEndDate] = useState<Date | null>(new Date());
+  const [startDate, setStartDate] = useState<Date>(new Date());
+  const [endDate, setEndDate] = useState<Date>(new Date());
+
+  useEffect(() => {
+    setVonDatum(startDate);
+    setBisDatum(endDate);
+  }, []);
 
   return (
     <div className="flex space-x-4">
@@ -21,8 +27,10 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({
         <DatePicker
           selected={startDate}
           onChange={(date) => {
-            setStartDate(date);
+            if (date) {
-            if (date) setVonDatum(date);
+              setStartDate(date);
+              setVonDatum(date);
+            }
           }}
           selectsStart
           startDate={startDate}
@@ -37,8 +45,10 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({
         <DatePicker
           selected={endDate}
           onChange={(date) => {
-            setEndDate(date);
+            if (date) {
-            if (date) setBisDatum(date);
+              setEndDate(date);
+              setBisDatum(date);
+            }
           }}
           selectsEnd
           startDate={startDate}

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"
+        "http://localhost:3002/kabelueberwachung"
-      : `${window.location.origin}/CPL`; // Automatische Anpassung in Production
+      : `${window.location.origin}/CPL`;
 
-  const [vonDatum, setVonDatum] = useState<Date | null>(null);
+  const [vonDatum, setVonDatum] = useState<Date>(new Date()); // Standard: Heute
-  const [bisDatum, setBisDatum] = useState<Date | null>(null);
+  const [bisDatum, setBisDatum] = useState<Date>(new Date()); // Standard: Heute
+
+  const [filteredData, setFilteredData] = useState<any[]>([]); // Speichert die gefilterten Daten
+  const [errorMessage, setErrorMessage] = useState<string | null>(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
+    // Falls `bisDatum` nicht gesetzt ist, verwende `vonDatum`
-    const von = vonDatum.toISOString().split("T")[0];
+    const bisDatumValid = bisDatum ? bisDatum : vonDatum;
-    const bis = bisDatum.toISOString().split("T")[0];
 
-    const [vonJahr, vonMonat, vonTag] = von.split("-");
+    // Setze Fehlermeldung zurück, bevor eine neue Anfrage gestartet wird
-    const [bisJahr, bisMonat, bisTag] = bis.split("-");
+    setErrorMessage(null);
+    setFilteredData([]);
 
-    // **Dynamische API-URL für Production und Development**
+    // **Von- und Bis-Datum in Unix-Timestamp (nur Datum, ohne Uhrzeit)**
-    const apiUrl = `${BASE_URL}?seite.ACP&DIA1=${vonJahr};${vonMonat};${vonTag};${bisJahr};${bisMonat};${bisTag};2;4`;
+    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) => {
+      .then((data) => {
-        console.log("⬇️ API Antwort (Rohdaten):", text);
+        console.log("📡 API URL:", apiUrl);
-        try {
+        console.log("📥 Rohdaten (vor Filterung):", data);
-          const data = JSON.parse(text);
+
-          console.log("✅ API Antwort (JSON):", data);
+        // **Filtere die Daten basierend auf Unix-Zeit**
-        } catch (error) {
+        const filtered = data.filter((item: any) => {
-          console.error("❌ Fehler: Antwort ist kein JSON!", text);
+          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
       </button>
+
+      {errorMessage && <p className="text-red-500 mt-2">{errorMessage}</p>}
     </div>
   );
 };

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;