fix: TDR select List mouseover gray 200

.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.548
+NEXT_PUBLIC_APP_VERSION=1.6.550
 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.548
+NEXT_PUBLIC_APP_VERSION=1.6.550
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,13 @@
+## [1.6.550] – 2025-07-07
+
+- fix: List mouseover -> hover:bg-gray-200
+
+---
+## [1.6.549] – 2025-07-07
+
+- fix: List mouseover -> hover:bg-gray-200
+
+---
 ## [1.6.548] – 2025-07-07
 
 - fix: es soll dann nur wenn der Button Anziegen geklickt wird anzeigenund nicht automatisch nach ein Datumauswahl

components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx

@@ -7,6 +7,7 @@ import { RootState } from "@/redux/store";
 import { fetchTDMDataBySlotThunk } from "@/redux/thunks/getTDMListBySlotThunk";
 import { getTDRChartDataByIdThunk } from "@/redux/thunks/getTDRChartDataByIdThunk";
 import { getReferenceCurveBySlotThunk } from "@/redux/thunks/getReferenceCurveBySlotThunk"; // ⬅ import ergänzen
+import { Listbox } from "@headlessui/react";
 
 const TDRChartActionBar: React.FC = () => {
   const dispatch = useAppDispatch();
@@ -121,7 +122,7 @@ const TDRChartActionBar: React.FC = () => {
       {selectedId !== null && (
         <button
           onClick={handleSetReference}
-          className="border border-littwin-blue text-littwin-blue bg-white rounded px-3 py-1 text-sm hover:bg-blue-100"
+          className="border border-littwin-blue text-littwin-blue bg-white rounded px-3 py-1 text-sm hover:bg-gray-200"
         >
           TDR-Kurve als Referenz speichern
         </button>
@@ -129,31 +130,80 @@ const TDRChartActionBar: React.FC = () => {
 
       {/* 🔽 Dropdown für Messungen */}
       <div className="flex items-center space-x-2">
-        <label htmlFor="tdrIdSelect" className="text-sm font-semibold">
+        <Listbox
-          TDR Messung
+          value={selectedId}
-        </label>
+          onChange={(id) => {
-        <select
+            setSelectedId(id);
-          id="tdrIdSelect"
+            if (id !== null) {
-          value={selectedId ?? ""}
+              dispatch(getTDRChartDataByIdThunk(id));
-          onChange={handleSelectChange}
+            }
-          className="border rounded px-2 py-1 text-sm"
+          }}
           disabled={idsForSlot.length === 0}
         >
-          <option value="">-- Wähle Messung --</option>
+          <div className="relative w-72">
-          {idsForSlot.map((entry) => (
+            <Listbox.Button className="w-full border px-2 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
-            <option key={entry.id} value={entry.id}>
+              <span>
-              {new Date(entry.t).toLocaleString("de-DE", {
+                {selectedId
-                day: "2-digit",
+                  ? (() => {
-                month: "2-digit",
+                      const selected = idsForSlot.find(
-                year: "numeric",
+                        (e) => e.id === selectedId
-                hour: "2-digit",
+                      );
-                minute: "2-digit",
+                      return selected
-                second: "2-digit",
+                        ? `${new Date(selected.t).toLocaleString("de-DE", {
-              })}{" "}
+                            day: "2-digit",
-              – Fehlerstelle: {entry.d} m
+                            month: "2-digit",
-            </option>
+                            year: "numeric",
-          ))}
+                            hour: "2-digit",
-        </select>
+                            minute: "2-digit",
+                            second: "2-digit",
+                          })} – Fehlerstelle: ${selected.d} m`
+                        : "Wähle Messung";
+                    })()
+                  : "Wähle Messung"}
+              </span>
+              <svg
+                className="w-5 h-5 text-gray-400"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <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">
+              {idsForSlot.map((entry) => (
+                <Listbox.Option
+                  key={entry.id}
+                  value={entry.id}
+                  className={({ selected, active }) =>
+                    `px-4 py-1 cursor-pointer ${
+                      selected
+                        ? "bg-littwin-blue text-white"
+                        : active
+                        ? "bg-gray-200"
+                        : ""
+                    }`
+                  }
+                >
+                  {new Date(entry.t).toLocaleString("de-DE", {
+                    day: "2-digit",
+                    month: "2-digit",
+                    year: "numeric",
+                    hour: "2-digit",
+                    minute: "2-digit",
+                    second: "2-digit",
+                  })}{" "}
+                  – Fehlerstelle: {entry.d} m
+                </Listbox.Option>
+              ))}
+            </Listbox.Options>
+          </div>
+        </Listbox>
       </div>
     </div>
   );

package-lock.json

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

package.json

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