Feat: Analogeingänge (Messwerteingänge) Modal

.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.716
+NEXT_PUBLIC_APP_VERSION=1.6.717
 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.716
+NEXT_PUBLIC_APP_VERSION=1.6.717
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.6.717] – 2025-08-14
+
+- feat: close button and maximize modal
+
+---
 ## [1.6.716] – 2025-08-14
 
 - Messkurve Modal in Messwerteingänge

components/main/analogInputs/AnalogInputsChart.tsx

@@ -3,6 +3,7 @@
 import React, { useEffect, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState, AppDispatch } from "@/redux/store";
+import { Dialog } from "@headlessui/react";
 import { Line } from "react-chartjs-2";
 import {
   Chart as ChartJS,
@@ -106,7 +107,7 @@ export default function AnalogInputsChart({
     setLocalZeitraum(zeitraum);
   }, [vonDatumRedux, bisDatumRedux, zeitraum]);
 
-  // Initiale Default-Werte: 30 Tage zurück
+  // Initiale Default-Werte: 30 Tage zurück (nur wenn Redux-Werte fehlen)
   useEffect(() => {
     if (!vonDatumRedux || !bisDatumRedux) {
       const today = new Date();
@@ -117,7 +118,7 @@ export default function AnalogInputsChart({
       setLocalVonDatum(fromDate);
       setLocalBisDatum(toDate);
     }
-  }, []);
+  }, [vonDatumRedux, bisDatumRedux]);
 
   // ✅ Nur lokale Änderung beim Picker
   const handleDateChange = (from: string, to: string) => {
@@ -276,6 +277,7 @@ export default function AnalogInputsChart({
   const memoizedChartOptions = React.useMemo(() => {
     return {
       responsive: true,
+      maintainAspectRatio: false,
       plugins: {
         legend: { position: "top" as const },
         tooltip: {
@@ -360,7 +362,16 @@ export default function AnalogInputsChart({
   }, []);
 
   return (
-    <div className={`flex flex-col gap-3 ${loading ? "cursor-wait" : ""}`}>
+    <div
+      className={`flex flex-col gap-2 h-full ${loading ? "cursor-wait" : ""}`}
+    >
+      <div className="flex justify-between items-center p-2 bg-gray-100 rounded-lg space-x-2">
+        <div className="flex justify-start">
+          <Dialog.Title className="text-lg font-semibold text-gray-700">
+            Eingang {selectedId ?? "–"}
+          </Dialog.Title>
+        </div>
+        <div className="flex justify-end">
           <div className="flex flex-wrap items-center gap-4 mb-2">
             {/* ✅ Neuer DatePicker mit schönem Styling (lokal, ohne Redux) */}
             <AnalogInputsDatePicker
@@ -408,9 +419,11 @@ export default function AnalogInputsChart({
               Daten laden
             </button>
           </div>
+        </div>
+      </div>
 
       {/* Chart-Anzeige */}
-      <div className="h-[50vh] w-full">
+      <div className="flex-1 min-h-0 w-full">
         {!selectedAnalogInput?.id ? (
           <div className="flex items-center justify-center h-full text-gray-500 text-lg gap-2">
             <i className="bi bi-info-circle text-2xl mr-2" />
@@ -423,6 +436,7 @@ export default function AnalogInputsChart({
             ref={chartRef}
             data={memoizedChartData}
             options={memoizedChartOptions}
+            style={{ height: "100%", width: "100%" }}
           />
         )}
       </div>

components/main/analogInputs/AnalogInputsChartModal.tsx

@@ -91,18 +91,28 @@ export default function AnalogInputsChartModal({
               </button>
             </div>
 
-            {/* Title */}
+            {/* Title row (align like IsoChartView) */}
-            <div className="flex items-center justify-between mb-3 pr-14">
+            <div className="flex justify-between items-center mb-2 pr-24">
               <Dialog.Title className="text-lg font-semibold text-gray-700">
                 Messkurve Messwerteingang {selectedId ?? "–"}
               </Dialog.Title>
             </div>
 
-            {/* Chart */}
+            {/* Chart container (structure similar to IsoChartView) */}
-            <div className="flex-1 min-h-0">
+            <div
+              style={{
+                flex: 1,
+                display: "flex",
+                flexDirection: "column",
+                height: "90%",
+              }}
+            >
+              {/* Optional: place an action bar here if needed */}
+              <div style={{ flex: 1, height: "90%" }}>
                 <AnalogInputsChart loading={loading} setLoading={setLoading} />
               </div>
             </div>
+          </div>
         </Dialog.Panel>
       </div>
     </Dialog>

package-lock.json

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

package.json

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