Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: TDR select List mouseover gray 200

Browse Source
This commit is contained in:
ISA
2025-07-07 15:17:17 +02:00
parent fdd38c74f0
commit 99d2a3d451
6 changed files with 89 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx
View File

@@ -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">
TDR Messung
</label>
<select
id="tdrIdSelect"
value={selectedId ?? ""}
onChange={handleSelectChange}
className="border rounded px-2 py-1 text-sm"
<Listbox
value={selectedId}
onChange={(id) => {
setSelectedId(id);
if (id !== null) {
dispatch(getTDRChartDataByIdThunk(id));
}
}}
disabled={idsForSlot.length === 0}
>
<option value="">-- Wähle Messung --</option>
{idsForSlot.map((entry) => (
<option key={entry.id} value={entry.id}>
{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
</option>
))}
</select>
<div className="relative w-72">
<Listbox.Button className="w-full border px-2 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
<span>
{selectedId
? (() => {
const selected = idsForSlot.find(
(e) => e.id === selectedId
);
return selected
? `${new Date(selected.t).toLocaleString("de-DE", {
day: "2-digit",
month: "2-digit",
year: "numeric",
hour: "2-digit",
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>
);