feat: Zeitspanne-Funktion mit Von/Bis und Button-Trigger im DetailModal eingebaut

- Chart-Daten werden jetzt erst bei Klick auf „Daten laden“ geladen - Von/Bis-Zeitauswahl über Redux-State korrekt eingebunden - Styling der Eingabefelder und Dropdowns vereinheitlicht (eine Zeile) - Lokalen State für Zeitspanne entfernt und durch Redux ersetzt
2025-07-11 09:33:06 +02:00
parent bb8b345647
commit 93ae79ac7e
8 changed files with 43 additions and 11 deletions
--- a/components/common/DateRangePicker.tsx
+++ b/components/common/DateRangePicker.tsx
@@ -0,0 +1,91 @@
+// /components/common/DateRangePicker.tsx
+import React, { useEffect } from "react";
+import DatePicker from "react-datepicker";
+import { useSelector, useDispatch } from "react-redux";
+import { RootState } from "@/redux/store";
+import {
+  setVonDatum,
+  setBisDatum,
+} from "@/redux/slices/kabelueberwachungChartSlice";
+import "react-datepicker/dist/react-datepicker.css";
+
+const DateRangePicker: React.FC = () => {
+  const dispatch = useDispatch();
+
+  const reduxVonDatum = useSelector(
+    (state: RootState) => state.kabelueberwachungChartSlice.vonDatum
+  );
+  const reduxBisDatum = useSelector(
+    (state: RootState) => state.kabelueberwachungChartSlice.bisDatum
+  );
+
+  const today = new Date();
+
+  const thirtyDaysAgo = new Date();
+  thirtyDaysAgo.setDate(today.getDate() - 30);
+
+  const sixMonthsAgo = new Date();
+  sixMonthsAgo.setMonth(today.getMonth() - 6);
+
+  const parseISODate = (isoDate: string) => {
+    const [year, month, day] = isoDate.split("-").map(Number);
+    return new Date(year, month - 1, day);
+  };
+
+  const formatISO = (date: Date) => date.toLocaleDateString("sv-SE"); // = "YYYY-MM-DD"
+
+  // Nur beim ersten Rendern initiale Werte setzen
+  useEffect(() => {
+    if (!reduxVonDatum) dispatch(setVonDatum(formatISO(thirtyDaysAgo)));
+    if (!reduxBisDatum) dispatch(setBisDatum(formatISO(today)));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dispatch, reduxVonDatum, reduxBisDatum]);
+
+  return (
+    <div className="flex space-x-4 items-center">
+      <div className="flex items-center space-x-2">
+        <label className="block text-sm font-semibold">Von</label>
+        <DatePicker
+          selected={reduxVonDatum ? parseISODate(reduxVonDatum) : thirtyDaysAgo}
+          onChange={(date) => {
+            if (date) {
+              dispatch(setVonDatum(formatISO(date)));
+            }
+          }}
+          selectsStart
+          startDate={
+            reduxVonDatum ? parseISODate(reduxVonDatum) : thirtyDaysAgo
+          }
+          endDate={reduxBisDatum ? parseISODate(reduxBisDatum) : today}
+          minDate={sixMonthsAgo}
+          maxDate={today}
+          dateFormat="dd.MM.yyyy"
+          className="border px-2 py-1 rounded"
+        />
+      </div>
+
+      <div className="flex items-center space-x-2">
+        <label className="block text-sm font-semibold">Bis</label>
+        <DatePicker
+          selected={reduxBisDatum ? parseISODate(reduxBisDatum) : today}
+          onChange={(date) => {
+            if (date) {
+              dispatch(setBisDatum(formatISO(date)));
+            }
+          }}
+          selectsEnd
+          startDate={
+            reduxVonDatum ? parseISODate(reduxVonDatum) : thirtyDaysAgo
+          }
+          endDate={reduxBisDatum ? parseISODate(reduxBisDatum) : today}
+          minDate={sixMonthsAgo}
+          maxDate={today}
+          dateFormat="dd.MM.yyyy"
+          className="border px-2 py-1 rounded"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default DateRangePicker;