Feat: Analogeingänge (Messwerteingänge) Modal

2025-08-14 10:20:33 +02:00
parent 2db9da2394
commit bb68327604
7 changed files with 87 additions and 58 deletions
--- a/.env.development
+++ b/.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)

--- a/.env.production
+++ b/.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
--- a/CHANGELOG.md
+++ b/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
--- a/components/main/analogInputs/AnalogInputsChart.tsx
+++ b/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,57 +362,68 @@ export default function AnalogInputsChart({
  }, []);

  return (
-    <div className={`flex flex-col gap-3 ${loading ? "cursor-wait" : ""}`}>
-      <div className="flex flex-wrap items-center gap-4 mb-2">
-        {/* ✅ Neuer DatePicker mit schönem Styling (lokal, ohne Redux) */}
-        <AnalogInputsDatePicker
-          from={localVonDatum}
-          to={localBisDatum}
-          onChange={handleDateChange}
-        />
+    <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
+              from={localVonDatum}
+              to={localBisDatum}
+              onChange={handleDateChange}
+            />

-        {/* ✅ Zeitraum-Auswahl (Listbox nur lokal) */}
-        <Listbox value={localZeitraum} onChange={setLocalZeitraum}>
-          <div className="relative w-48">
-            <Listbox.Button className="w-full border px-3 py-1 rounded bg-white flex justify-between items-center text-sm">
-              <span>
-                {localZeitraum === "DIA0"
-                  ? "Alle Messwerte"
-                  : localZeitraum === "DIA1"
-                  ? "Stündlich"
-                  : "Täglich"}
-              </span>
-              <i className="bi bi-chevron-down text-gray-400" />
-            </Listbox.Button>
-            <Listbox.Options className="absolute z-10 mt-1 w-full border bg-white shadow rounded text-sm">
-              {["DIA0", "DIA1", "DIA2"].map((option) => (
-                <Listbox.Option
-                  key={option}
-                  value={option}
-                  className="px-4 py-1 cursor-pointer hover:bg-gray-200"
-                >
-                  {option === "DIA0"
-                    ? "Alle Messwerte"
-                    : option === "DIA1"
-                    ? "Stündlich"
-                    : "Täglich"}
-                </Listbox.Option>
-              ))}
-            </Listbox.Options>
+            {/* ✅ Zeitraum-Auswahl (Listbox nur lokal) */}
+            <Listbox value={localZeitraum} onChange={setLocalZeitraum}>
+              <div className="relative w-48">
+                <Listbox.Button className="w-full border px-3 py-1 rounded bg-white flex justify-between items-center text-sm">
+                  <span>
+                    {localZeitraum === "DIA0"
+                      ? "Alle Messwerte"
+                      : localZeitraum === "DIA1"
+                      ? "Stündlich"
+                      : "Täglich"}
+                  </span>
+                  <i className="bi bi-chevron-down text-gray-400" />
+                </Listbox.Button>
+                <Listbox.Options className="absolute z-10 mt-1 w-full border bg-white shadow rounded text-sm">
+                  {["DIA0", "DIA1", "DIA2"].map((option) => (
+                    <Listbox.Option
+                      key={option}
+                      value={option}
+                      className="px-4 py-1 cursor-pointer hover:bg-gray-200"
+                    >
+                      {option === "DIA0"
+                        ? "Alle Messwerte"
+                        : option === "DIA1"
+                        ? "Stündlich"
+                        : "Täglich"}
+                    </Listbox.Option>
+                  ))}
+                </Listbox.Options>
+              </div>
+            </Listbox>
+
+            {/* ✅ Button: lädt die Daten & aktualisiert Redux */}
+            <button
+              onClick={handleFetchData}
+              className="px-4 py-1 bg-littwin-blue text-white rounded text-sm"
+            >
+              Daten laden
+            </button>
          </div>
-        </Listbox>
-
-        {/* ✅ Button: lädt die Daten & aktualisiert Redux */}
-        <button
-          onClick={handleFetchData}
-          className="px-4 py-1 bg-littwin-blue text-white rounded text-sm"
-        >
-          Daten laden
-        </button>
+        </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>
--- a/components/main/analogInputs/AnalogInputsChartModal.tsx
+++ b/components/main/analogInputs/AnalogInputsChartModal.tsx
@@ -91,16 +91,26 @@ export default function AnalogInputsChartModal({
              </button>
            </div>

-            {/* Title */}
-            <div className="flex items-center justify-between mb-3 pr-14">
+            {/* Title row (align like IsoChartView) */}
+            <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 */}
-            <div className="flex-1 min-h-0">
-              <AnalogInputsChart loading={loading} setLoading={setLoading} />
+            {/* Chart container (structure similar to IsoChartView) */}
+            <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>
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "cpl-v4",
-  "version": "1.6.716",
+  "version": "1.6.717",
  "private": true,
  "scripts": {
    "dev": "next dev",