feat: ersetzt Einheit-Select durch Listbox mit littwin-blue Design in AnalogInputsSettingsModal

.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.556
+NEXT_PUBLIC_APP_VERSION=1.6.557
 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.556
+NEXT_PUBLIC_APP_VERSION=1.6.557
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,12 @@
+## [1.6.557] – 2025-07-08
+
+- refactor: Zeitraum-Dropdown in DetailModal auf Listbox mit Littwin-Design umgestellt
+
+- <select> durch Headless UI Listbox ersetzt
+- Optionen DIA0, DIA1, DIA2 mit deutschem Label dargestellt
+- Einheitliches Styling mit littwin-blue wie in anderen Komponenten
+
+---
 ## [1.6.556] – 2025-07-08
 
 - refactor: LoopChartActionBar Dropdowns auf Listbox mit Littwin-Design umgestellt

components/main/analogInputs/AnalogInputsSettingsModal.tsx

@@ -1,6 +1,6 @@
 "use client"; // /components/main/analogeEingaenge/AnalogInputsSettingsModal.tsx
 import React, { useEffect, useState } from "react";
-
+import { Listbox } from "@headlessui/react";
 interface AnalogInput {
   id: number;
   label?: string;
@@ -27,6 +27,7 @@ export default function AnalogInputSettingsModal({
   const [loggerInterval, setLoggerInterval] = useState("9");
   const [unit, setUnit] = useState("V");
   const [isSaving, setIsSaving] = useState(false);
+  const unitOptions = ["V", "mA", "°C", "bar", "%"];
 
   useEffect(() => {
     if (selectedInput && isOpen) {
@@ -175,17 +176,45 @@ export default function AnalogInputSettingsModal({
             <span className="font-normal">Einheit:</span>
           </div>
           <div>
-            <select
+            <Listbox value={unit} onChange={setUnit}>
-              className="w-full border rounded px-3 py-1 mb-4"
+              <div className="relative w-full">
-              value={unit}
+                <Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm text-gray-900 font-sans">
-              onChange={(e) => setUnit(e.target.value)}
+                  <span>{unit}</span>
-            >
+                  <svg
-              <option value="V">V</option>
+                    className="w-5 h-5 text-gray-400"
-              <option value="mA">mA</option>
+                    xmlns="http://www.w3.org/2000/svg"
-              <option value="°C">°C</option>
+                    viewBox="0 0 20 20"
-              <option value="bar">bar</option>
+                    fill="currentColor"
-              <option value="%">%</option>
+                    aria-hidden="true"
-            </select>
+                  >
+                    <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 text-gray-900 font-sans">
+                  {unitOptions.map((opt) => (
+                    <Listbox.Option
+                      key={opt}
+                      value={opt}
+                      className={({ selected, active }) =>
+                        `px-4 py-1 cursor-pointer ${
+                          selected
+                            ? "bg-littwin-blue text-white font-medium"
+                            : active
+                            ? "bg-gray-200"
+                            : "text-gray-900"
+                        }`
+                      }
+                    >
+                      {opt}
+                    </Listbox.Option>
+                  ))}
+                </Listbox.Options>
+              </div>
+            </Listbox>
           </div>
         </div>
         {/* Loggerintervall/Speicherintervall */}

components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx

@@ -241,7 +241,7 @@ const LoopChartActionBar: React.FC = () => {
                       selected
                         ? "bg-littwin-blue text-white"
                         : active
-                        ? "bg-blue-100"
+                        ? "bg-gray-200"
                         : ""
                     }`
                   }
@@ -304,7 +304,7 @@ const LoopChartActionBar: React.FC = () => {
                       selected
                         ? "bg-littwin-blue text-white"
                         : active
-                        ? "bg-blue-100"
+                        ? "bg-gray-200"
                         : ""
                     }`
                   }

components/main/kabelueberwachung/kue705FO/modals/KueEinstellung.tsx

@@ -14,6 +14,7 @@ import {
   closeConfirmModal,
 } from "@/redux/slices/confirmModalSlice";
 import { startFirmwareUpdateThunk } from "@/redux/thunks/startFirmwareUpdateThunk";
+import { Listbox } from "@headlessui/react";
 
 interface Props {
   slot: number;
@@ -175,18 +176,52 @@ export default function KueEinstellung({
       {/* Speicherintervall */}
       <div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
         <label className="">Speicherintervall:</label>
-        <select
+        <Listbox
-          className="w-full border rounded p-1"
           value={formData.memoryInterval}
-          onChange={(e) => handleChange("memoryInterval", e.target.value)}
+          onChange={(value) => handleChange("memoryInterval", value)}
         >
-          {memoryIntervalOptions.map((opt) => (
+          <div className="relative w-full">
-            <option key={opt.value} value={opt.value}>
+            <Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
-              {opt.label}
+              <span>
-            </option>
+                {memoryIntervalOptions.find(
-          ))}
+                  (opt) => String(opt.value) === formData.memoryInterval
-        </select>
+                )?.label ?? "Speicherintervall wählen"}
+              </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">
+              {memoryIntervalOptions.map((opt) => (
+                <Listbox.Option
+                  key={opt.value}
+                  value={String(opt.value)}
+                  className={({ selected, active }) =>
+                    `px-4 py-1 cursor-pointer ${
+                      selected
+                        ? "bg-littwin-blue text-white font-medium"
+                        : active
+                        ? "bg-gray-200"
+                        : "text-gray-900"
+                    }`
+                  }
+                >
+                  {opt.label}
+                </Listbox.Option>
+              ))}
+            </Listbox.Options>
+          </div>
+        </Listbox>
       </div>
+
       {/* Isolationsmessung */}
       <div className="mb-4  w-full">
         <h3 className="font-bold mb-2">Isolationsmessung</h3>

components/main/system/DetailModal.tsx

@@ -115,7 +115,7 @@ export const DetailModal = ({
                         selected
                           ? "bg-littwin-blue text-white"
                           : active
-                          ? "bg-blue-100"
+                          ? "bg-gray-200"
                           : ""
                       }`
                     }

package-lock.json

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

package.json

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

styles/globals.css

@@ -60,3 +60,13 @@ body {
 .custom-datepicker-popper {
   z-index: 9999 !important; /* Maximale Priorität */
 }
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.dropdown-text-fix {
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  transform: translateZ(0); /* For some Chromium bugs */
+}