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

.env.development

@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
 NEXT_PUBLIC_EXPORT_STATIC=false
 NEXT_PUBLIC_USE_CGI=false
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.587
+NEXT_PUBLIC_APP_VERSION=1.6.588
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)
 

.env.production

@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
 NEXT_PUBLIC_EXPORT_STATIC=true
 NEXT_PUBLIC_USE_CGI=true
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.587
+NEXT_PUBLIC_APP_VERSION=1.6.588
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.6.588] – 2025-07-11
+
+- fix: Messwertlinie (m) im DIA0-Modus in DetailModal sichtbar gemacht
+
+---
 ## [1.6.587] – 2025-07-11
 
 - fix: Anzeige der Messwertlinie (m) im DIA0-Modus in DetailModal korrigiert

components/common/DateRangePicker.tsx

@@ -1,4 +1,4 @@
-// /components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/DateRangePicker.tsx
+// /components/common/DateRangePicker.tsx
 import React, { useEffect } from "react";
 import DatePicker from "react-datepicker";
 import { useSelector, useDispatch } from "react-redux";

components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx

@@ -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 {

components/main/system/DetailModal.tsx

@@ -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%]">

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.587",
+  "version": "1.6.588",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.587",
+      "version": "1.6.588",
       "dependencies": {
         "@fontsource/roboto": "^5.1.0",
         "@headlessui/react": "^2.2.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.587",
+  "version": "1.6.588",
   "private": true,
   "scripts": {
     "dev": "next dev",