LoopChartActionBar verhält sich jetzt wie im ISO-Modal: Bei Auswahl „Meldungen“

2025-08-11 13:08:34 +02:00
parent 806eaaeff7
commit 8d1b5ceddc
7 changed files with 137 additions and 84 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.684
+NEXT_PUBLIC_APP_VERSION=1.6.685
 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.684
+NEXT_PUBLIC_APP_VERSION=1.6.685
 NEXT_PUBLIC_CPL_MODE=production
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## [1.6.685] – 2025-08-11
+
+- Daten von 118. in mocks  geholt
+
+---
 ## [1.6.684] – 2025-08-11

 - fix: KVZ Button style wie die anderen (ISO, RSL, TDR) und mit eigene Modal
--- a/components/common/DateRangePicker.tsx
+++ b/components/common/DateRangePicker.tsx
@@ -6,7 +6,15 @@ import { RootState } from "@/redux/store";
 import { setVonDatum, setBisDatum } from "@/redux/slices/dateRangePickerSlice";
 import "react-datepicker/dist/react-datepicker.css";

-const DateRangePicker: React.FC = () => {
+interface DateRangePickerProps {
+  compact?: boolean; // reduziert horizontale Breite
+  className?: string;
+}
+
+const DateRangePicker: React.FC<DateRangePickerProps> = ({
+  compact = false,
+  className = "",
+}) => {
  const dispatch = useDispatch();

  const reduxVonDatum = useSelector(
@@ -38,10 +46,22 @@ const DateRangePicker: React.FC = () => {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dispatch, reduxVonDatum, reduxBisDatum]);

+  const gapClass = compact ? "space-x-2" : "space-x-4";
+  const labelWidthClass = compact ? "w-6" : "w-auto";
+  const inputWidthClass = compact ? "w-32" : "w-44"; // ca. 128px vs 176px
+
  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>
+    <div className={`flex ${gapClass} items-center ${className}`}>
+      <div
+        className={`flex items-center space-x-1 ${compact ? "text-xs" : ""}`}
+      >
+        <label
+          className={`block font-semibold ${
+            compact ? "text-xs" : "text-sm"
+          } ${labelWidthClass}`}
+        >
+          Von
+        </label>
        <DatePicker
          selected={reduxVonDatum ? parseISODate(reduxVonDatum) : thirtyDaysAgo}
          onChange={(date) => {
@@ -57,12 +77,21 @@ const DateRangePicker: React.FC = () => {
          minDate={sixMonthsAgo}
          maxDate={today}
          dateFormat="dd.MM.yyyy"
-          className="border px-2 py-1 rounded"
+          className={`border px-2 py-1 rounded ${inputWidthClass} ${
+            compact ? "text-xs" : "text-sm"
+          }`}
        />
      </div>
-
-      <div className="flex items-center space-x-2">
-        <label className="block text-sm font-semibold">Bis</label>
+      <div
+        className={`flex items-center space-x-1 ${compact ? "text-xs" : ""}`}
+      >
+        <label
+          className={`block font-semibold ${
+            compact ? "text-xs" : "text-sm"
+          } ${labelWidthClass}`}
+        >
+          Bis
+        </label>
        <DatePicker
          selected={reduxBisDatum ? parseISODate(reduxBisDatum) : today}
          onChange={(date) => {
@@ -78,7 +107,9 @@ const DateRangePicker: React.FC = () => {
          minDate={sixMonthsAgo}
          maxDate={today}
          dateFormat="dd.MM.yyyy"
-          className="border px-2 py-1 rounded"
+          className={`border px-2 py-1 rounded ${inputWidthClass} ${
+            compact ? "text-xs" : "text-sm"
+          }`}
        />
      </div>
    </div>
--- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
@@ -214,7 +214,7 @@ const LoopChartActionBar: React.FC = () => {
  };

  return (
-    <div className="flex justify-between items-center p-2 bg-gray-100 rounded-lg space-x-2">
+    <div className="flex justify-between  p-1 bg-gray-100 rounded-lg ">
      <div className="flex items-center">
        <label className="text-sm font-semibold">
          KÜ {slotNumber !== null ? slotNumber + 1 : "-"}
@@ -222,65 +222,79 @@ const LoopChartActionBar: React.FC = () => {
      </div>

      <div className="flex items-center space-x-2">
-        <DateRangePicker />
-
-        <Listbox
-          value={selectedMode}
-          onChange={(value) => {
-            dispatch(setSelectedMode(value));
-            dispatch(setBrushRange({ startIndex: 0, endIndex: 0 }));
+        {/* DateRangePicker – wie bei ISO nur sichtbar bei Messkurve */}
+        <div
+          style={{
+            visibility: chartTitle === "Messkurve" ? "visible" : "hidden",
          }}
        >
-          <div className="relative w-48">
-            <Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
-              <span>
-                {
-                  {
-                    DIA0: "Alle Messwerte",
-                    DIA1: "Stündliche Werte",
-                    DIA2: "Tägliche Werte",
-                  }[selectedMode]
-                }
-              </span>
-              <svg
-                className="w-5 h-5 text-gray-400"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M5.23 7.21a.75.75 0 011.06.02L10 10.585l3.71-3.355a.75.75 0 111.02 1.1l-4.25 3.85a.75.75 0 01-1.02 0l-4.25-3.85a.75.75 0 01.02-1.06z"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </Listbox.Button>
-            <Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow max-h-60 overflow-auto text-sm">
-              {["DIA0", "DIA1", "DIA2"].map((mode) => (
-                <Listbox.Option
-                  key={mode}
-                  value={mode}
-                  className={({ selected, active }) =>
-                    `px-4 py-1 cursor-pointer ${
-                      selected
-                        ? "bg-littwin-blue text-white"
-                        : active
-                        ? "bg-gray-200"
-                        : ""
-                    }`
-                  }
-                >
+          <DateRangePicker compact />
+        </div>
+
+        {/* DIA0/DIA1/DIA2 Dropdown – nur sichtbar bei Messkurve */}
+        <div
+          style={{
+            visibility: chartTitle === "Messkurve" ? "visible" : "hidden",
+          }}
+        >
+          <Listbox
+            value={selectedMode}
+            onChange={(value) => {
+              dispatch(setSelectedMode(value));
+              dispatch(setBrushRange({ startIndex: 0, endIndex: 0 }));
+            }}
+          >
+            <div className="relative w-48">
+              <Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
+                <span>
                  {
                    {
                      DIA0: "Alle Messwerte",
                      DIA1: "Stündliche Werte",
                      DIA2: "Tägliche Werte",
-                    }[mode]
+                    }[selectedMode]
                  }
-                </Listbox.Option>
-              ))}
-            </Listbox.Options>
-          </div>
-        </Listbox>
+                </span>
+                <svg
+                  className="w-5 h-5 text-gray-400"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M5.23 7.21a.75.75 0 011.06.02L10 10.585l3.71-3.355a.75.75 0 111.02 1.1l-4.25 3.85a.75.75 0 01-1.02 0l-4.25-3.85a.75.75 0 01.02-1.06z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              </Listbox.Button>
+              <Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow max-h-60 overflow-auto text-sm">
+                {["DIA0", "DIA1", "DIA2"].map((mode) => (
+                  <Listbox.Option
+                    key={mode}
+                    value={mode}
+                    className={({ selected, active }) =>
+                      `px-4 py-1 cursor-pointer ${
+                        selected
+                          ? "bg-littwin-blue text-white"
+                          : active
+                          ? "bg-gray-200"
+                          : ""
+                      }`
+                    }
+                  >
+                    {
+                      {
+                        DIA0: "Alle Messwerte",
+                        DIA1: "Stündliche Werte",
+                        DIA2: "Tägliche Werte",
+                      }[mode]
+                    }
+                  </Listbox.Option>
+                ))}
+              </Listbox.Options>
+            </div>
+          </Listbox>
+        </div>
        {/* Dropdown für Messkurve / Meldungen (wie ISO) */}
        <Listbox
          value={chartTitle}
@@ -325,24 +339,27 @@ const LoopChartActionBar: React.FC = () => {
          </div>
        </Listbox>

-        {/* Buttons nur bei Messkurve sichtbar */}
-        {chartTitle === "Messkurve" && (
-          <>
-            <button
-              onClick={handleStartRSL}
-              className="px-4 py-1 bg-littwin-blue text-white rounded text-sm whitespace-nowrap"
-              disabled={isLoading}
-            >
-              RSL starten
-            </button>
-            <button
-              onClick={handleFetchData}
-              className="px-4 py-1 bg-littwin-blue text-white rounded text-sm whitespace-nowrap"
-            >
-              Daten laden
-            </button>
-          </>
-        )}
+        {/* Buttons – nur sichtbar bei Messkurve, Platz bleibt erhalten */}
+        <div
+          style={{
+            visibility: chartTitle === "Messkurve" ? "visible" : "hidden",
+          }}
+          className="flex items-center space-x-2"
+        >
+          <button
+            onClick={handleStartRSL}
+            className="px-4 py-1 bg-littwin-blue text-white rounded text-sm whitespace-nowrap"
+            disabled={isLoading}
+          >
+            RSL starten
+          </button>
+          <button
+            onClick={handleFetchData}
+            className="px-4 py-1 bg-littwin-blue text-white rounded text-sm whitespace-nowrap"
+          >
+            Daten laden
+          </button>
+        </div>
      </div>
    </div>
  );
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "cpl-v4",
-  "version": "1.6.684",
+  "version": "1.6.685",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "cpl-v4",
-      "version": "1.6.684",
+      "version": "1.6.685",
      "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.684",
+  "version": "1.6.685",
  "private": true,
  "scripts": {
    "dev": "next dev",