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

.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)
 

.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

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

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) => {
+          onChange={(value) => {
-            dispatch(
+            dispatch(setSelectedMode(value));
-              setSelectedMode(e.target.value as "DIA0" | "DIA1" | "DIA2")
-            );
             dispatch(setBrushRange({ startIndex: 0, endIndex: 0 }));
           }}
-          className="px-3 py-1 bg-white border rounded text-sm"
         >
-          <option value="DIA0">Alle Messwerte</option>
+          <div className="relative w-48">
-          <option value="DIA1">Stündliche Werte</option>
+            <Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
-          <option value="DIA2">Tägliche Werte</option>
+              <span>
-        </select>
+                {
+                  {
+                    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) => {
+          onChange={(value) => {
-            const value = e.target.value as
-              | "isolationswiderstand"
-              | "schleifenwiderstand";
             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>
+          <div className="relative w-56">
-          <option value="schleifenwiderstand">Schleifenwiderstand</option>
+            <Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
-        </select>
+              <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}

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",

package.json

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

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]);