Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
ISA
2025-07-11 09:33:06 +02:00
parent bb8b345647
commit 93ae79ac7e
8 changed files with 43 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/DateRangePicker.tsx
View File

@@ -1,91 +0,0 @@
// /components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/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;

2
components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
View File

@@ -1,7 +1,7 @@
"use client";
// /components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
import React from "react";
import DateRangePicker from "./DateRangePicker";
import DateRangePicker from "@/components/common/DateRangePicker";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/redux/store";
import {

35
components/main/system/DetailModal.tsx
View File

@@ -6,6 +6,7 @@ import { useSelector, useDispatch } from "react-redux";
import { RootState } from "@/redux/store";
import { Listbox } from "@headlessui/react";
import { setFullScreen } from "@/redux/slices/kabelueberwachungChartSlice";
import DateRangePicker from "@/components/common/DateRangePicker";
import {
Chart as ChartJS,
@@ -121,6 +122,14 @@ export const DetailModal = ({
const [chartData, setChartData] = useState<any>({
datasets: [],
});
const vonDatum = useSelector(
(state: RootState) => state.kabelueberwachungChartSlice.vonDatum
);
const bisDatum = useSelector(
(state: RootState) => state.kabelueberwachungChartSlice.bisDatum
);
const [filteredData, setFilteredData] = useState<ReduxDataEntry[]>([]);
const reduxData = useSelector((state: RootState) => {
switch (selectedKey) {
@@ -170,8 +179,19 @@ export const DetailModal = ({
loadZoomPlugin();
}, []);
useEffect(() => {
const sortedData = [...reduxData].reverse();
const handleFetchData = () => {
let sortedData = [...reduxData].reverse();
if (vonDatum && bisDatum) {
const vonDate = new Date(vonDatum);
const bisDate = new Date(bisDatum);
sortedData = sortedData.filter((entry) => {
const entryDate = new Date(entry.t);
return entryDate >= vonDate && entryDate <= bisDate;
});
}
setFilteredData(sortedData);
setChartData({
datasets: [
@@ -207,7 +227,7 @@ export const DetailModal = ({
},
],
});
}, [reduxData]);
};
useEffect(() => {
if (chartRef.current && selectedKey) {
@@ -259,7 +279,8 @@ export const DetailModal = ({
</div>
</div>
<div className="flex items-center space-x-2 mb-4">
<div className="flex items-center justify-start gap-4 mb-4 flex-wrap">
<DateRangePicker />
<label className="font-medium">Zeitraum:</label>
<Listbox value={zeitraum} onChange={setZeitraum}>
<div className="relative w-48">
@@ -312,6 +333,12 @@ export const DetailModal = ({
</Listbox.Options>
</div>
</Listbox>
<button
onClick={handleFetchData}
className="px-4 py-1 bg-littwin-blue text-white rounded text-sm"
>
Daten laden
</button>
</div>
<div className="h-[85%]">