refactor: LoopChartActionBar Dropdowns auf Listbox mit Littwin-Design umgestellt

- selectedMode (DIA0/DIA1/DIA2) ersetzt durch Headless UI Listbox - selectedSlotType (Schleifen-/Isolationswiderstand) ebenfalls als Listbox - Einheitliches Dropdown-Design mit MeldungenView und TDRChartActionBar - Littwin-blue Stil für ausgewählte Optionen integriert
2025-07-08 07:02:27 +02:00
parent 3d37388173
commit 3af16b4c29
7 changed files with 121 additions and 26 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.554
+NEXT_PUBLIC_APP_VERSION=1.6.555
 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.554
+NEXT_PUBLIC_APP_VERSION=1.6.555
 NEXT_PUBLIC_CPL_MODE=production
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,13 @@
+## [1.6.555] – 2025-07-08
+
+- refactor: LoopChartActionBar Dropdowns auf Listbox mit Littwin-Design umgestellt
+
+- selectedMode (DIA0/DIA1/DIA2) ersetzt durch Headless UI Listbox
+- selectedSlotType (Schleifen-/Isolationswiderstand) ebenfalls als Listbox
+- Einheitliches Dropdown-Design mit MeldungenView und TDRChartActionBar
+- Littwin-blue Stil für ausgewählte Optionen integriert
+
+---
 ## [1.6.554] – 2025-07-08

 - fix: TDR select List mouseover gray 200
--- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
@@ -13,6 +13,8 @@ import {
 } from "@/redux/slices/kabelueberwachungChartSlice";
 import { setBrushRange } from "@/redux/slices/brushSlice";
 import { setChartTitle } from "@/redux/slices/loopChartTypeSlice";
+import { Listbox } from "@headlessui/react";
+
 //-----------------------------------------------------------------------------------useLoopChartLoader
 export const useLoopChartLoader = () => {
  const dispatch = useDispatch();
@@ -199,27 +201,67 @@ const LoopChartActionBar: React.FC = () => {
      <div className="flex items-center space-x-2">
        <DateRangePicker />

-        <select
+        <Listbox
          value={selectedMode}
-          onChange={(e) => {
-            dispatch(
-              setSelectedMode(e.target.value as "DIA0" | "DIA1" | "DIA2")
-            );
+          onChange={(value) => {
+            dispatch(setSelectedMode(value));
            dispatch(setBrushRange({ startIndex: 0, endIndex: 0 }));
          }}
-          className="px-3 py-1 bg-white border rounded text-sm"
        >
-          <option value="DIA0">Alle Messwerte</option>
-          <option value="DIA1">Stündliche Werte</option>
-          <option value="DIA2">Tägliche Werte</option>
-        </select>
+          <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-blue-100"
+                        : ""
+                    }`
+                  }
+                >
+                  {
+                    {
+                      DIA0: "Alle Messwerte",
+                      DIA1: "Stündliche Werte",
+                      DIA2: "Tägliche Werte",
+                    }[mode]
+                  }
+                </Listbox.Option>
+              ))}
+            </Listbox.Options>
+          </div>
+        </Listbox>

-        <select
+        <Listbox
          value={selectedSlotType}
-          onChange={(e) => {
-            const value = e.target.value as
-              | "isolationswiderstand"
-              | "schleifenwiderstand";
+          onChange={(value) => {
            dispatch(setSelectedSlotType(value));
            dispatch(
              setChartTitle(
@@ -229,11 +271,55 @@ const LoopChartActionBar: React.FC = () => {
              )
            );
          }}
-          className="px-3 py-1 bg-white border rounded text-sm"
        >
-          <option value="isolationswiderstand">Isolationswiderstand</option>
-          <option value="schleifenwiderstand">Schleifenwiderstand</option>
-        </select>
+          <div className="relative w-56">
+            <Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
+              <span>
+                {
+                  {
+                    isolationswiderstand: "Isolationswiderstand",
+                    schleifenwiderstand: "Schleifenwiderstand",
+                  }[selectedSlotType]
+                }
+              </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">
+              {["isolationswiderstand", "schleifenwiderstand"].map((type) => (
+                <Listbox.Option
+                  key={type}
+                  value={type}
+                  className={({ selected, active }) =>
+                    `px-4 py-1 cursor-pointer ${
+                      selected
+                        ? "bg-littwin-blue text-white"
+                        : active
+                        ? "bg-blue-100"
+                        : ""
+                    }`
+                  }
+                >
+                  {
+                    {
+                      isolationswiderstand: "Isolationswiderstand",
+                      schleifenwiderstand: "Schleifenwiderstand",
+                    }[type]
+                  }
+                </Listbox.Option>
+              ))}
+            </Listbox.Options>
+          </div>
+        </Listbox>

        <button
          onClick={handleFetchData}
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "cpl-v4",
-  "version": "1.6.554",
+  "version": "1.6.555",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "cpl-v4",
-      "version": "1.6.554",
+      "version": "1.6.555",
      "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.554",
+  "version": "1.6.555",
  "private": true,
  "scripts": {
    "dev": "next dev",
--- a/pages/digitalOutputs.tsx
+++ b/pages/digitalOutputs.tsx
@@ -7,7 +7,6 @@ import { AppDispatch } from "@/redux/store";
 import DigitalOutputsModal from "../components/main/digitalOutputs/DigitalOutputsModal";
 import DigitalOutputsWidget from "../components/main/digitalOutputs/DigitalOutputsWidget";

-import { getDigitalInputsThunk } from "@/redux/thunks/getDigitalInputsThunk";
 import { getDigitalOutputsThunk } from "@/redux/thunks/getDigitalOutputsThunk";

 import type { DigitalOutput } from "@/types/digitalOutput";
@@ -22,7 +21,7 @@ const DigitalOutputs: React.FC = () => {
  useEffect(() => {
    const interval = setInterval(() => {
      dispatch(getDigitalOutputsThunk());
-    }, 3000); // z. B. alle 3 Sekunden statt 0.5s
+    }, 3000);

    return () => clearInterval(interval);
  }, [dispatch]);