style: dark mode ISO, RSL und TDR
This commit is contained in:
ISA
@@ -165,27 +165,32 @@ const TDRChartActionBar: React.FC = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex justify-between items-center p-2 bg-gray-100 rounded-lg space-x-4">
|
||||
{/* 🧩 Slot-Anzeige (1-basiert für Benutzer) */}
|
||||
<div className="text-sm font-semibold">
|
||||
{selectedSlot !== null ? `KÜ ${selectedSlot + 1}` : "Kein KÜ gewählt"}
|
||||
<div className="toolbar w-full flex items-center gap-3 flex-wrap">
|
||||
{/* Slot Badge */}
|
||||
<div className="flex items-center gap-2 pr-4">
|
||||
<span className="font-semibold uppercase tracking-wide text-muted">KÜ</span>
|
||||
<span className="font-medium px-2 py-0.5 rounded bg-surface-alt border border-base min-w-[3rem] text-center">
|
||||
{selectedSlot !== null ? selectedSlot + 1 : "-"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* ✅ Referenz setzen */}
|
||||
{/* Referenz speichern */}
|
||||
{selectedId !== null && (
|
||||
<button
|
||||
onClick={handleSetReference}
|
||||
className="border border-littwin-blue text-littwin-blue bg-white rounded px-3 py-1 text-sm hover:bg-gray-200"
|
||||
type="button"
|
||||
className="btn-primary h-8 px-3 font-medium"
|
||||
>
|
||||
TDR-Kurve als Referenz speichern
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* 🚀 TDR starten */}
|
||||
{/* Start TDR */}
|
||||
<button
|
||||
onClick={handleStartTDR}
|
||||
className="px-4 py-1 bg-littwin-blue text-white rounded text-sm whitespace-nowrap "
|
||||
type="button"
|
||||
disabled={selectedSlot === null || tdrRunning}
|
||||
className={`btn-primary h-8 px-4 whitespace-nowrap ${
|
||||
tdrRunning ? "opacity-90" : ""
|
||||
}`}
|
||||
>
|
||||
{tdrRunning
|
||||
? `TDR läuft... (${Math.min(
|
||||
@@ -194,27 +199,22 @@ const TDRChartActionBar: React.FC = () => {
|
||||
)}%)`
|
||||
: "TDR-Messung starten"}
|
||||
</button>
|
||||
|
||||
{/* 🔽 Dropdown für Messungen */}
|
||||
<div className="flex items-center space-x-2">
|
||||
{/* Messung Dropdown */}
|
||||
<div className="ml-auto flex-1 min-w-[14rem] max-w-[30rem]">
|
||||
<Listbox
|
||||
value={selectedId}
|
||||
onChange={(id) => {
|
||||
setSelectedId(id);
|
||||
if (id !== null) {
|
||||
dispatch(getTDRChartDataByIdThunk(id));
|
||||
}
|
||||
if (id !== null) dispatch(getTDRChartDataByIdThunk(id));
|
||||
}}
|
||||
disabled={idsForSlot.length === 0}
|
||||
>
|
||||
<div className="relative w-96">
|
||||
<Listbox.Button className="w-full border px-2 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
|
||||
<span className="whitespace-nowrap overflow-hidden text-ellipsis">
|
||||
<div className="relative w-full">
|
||||
<Listbox.Button className="dropdown-surface w-full flex items-center justify-between h-8 disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
<span className="dropdown-text-fix whitespace-nowrap overflow-hidden text-ellipsis pr-2">
|
||||
{selectedId
|
||||
? (() => {
|
||||
const selected = idsForSlot.find(
|
||||
(e) => e.id === selectedId
|
||||
);
|
||||
const selected = idsForSlot.find((e) => e.id === selectedId);
|
||||
return selected
|
||||
? `${new Date(selected.t).toLocaleString("de-DE", {
|
||||
day: "2-digit",
|
||||
@@ -228,72 +228,59 @@ const TDRChartActionBar: React.FC = () => {
|
||||
})()
|
||||
: "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>
|
||||
<i className="bi bi-chevron-down text-sm opacity-70" />
|
||||
</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 whitespace-nowrap overflow-hidden text-ellipsis ${
|
||||
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 className="dropdown-options absolute z-50 mt-1 w-full max-h-72 overflow-auto text-sm bg-[var(--color-surface)] border border-base rounded-md shadow-lg p-1">
|
||||
{idsForSlot.map((entry) => {
|
||||
const dateLabel = new Date(entry.t).toLocaleString("de-DE", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
});
|
||||
const fullText = `${dateLabel} – Fehlerstelle: ${entry.d} m`;
|
||||
return (
|
||||
<Listbox.Option
|
||||
key={entry.id}
|
||||
value={entry.id}
|
||||
title={fullText}
|
||||
className={({ selected, active }) => {
|
||||
const base = "px-3 h-8 cursor-pointer rounded-sm m-0.5 flex items-center justify-start transition-colors text-[13px]";
|
||||
if (selected)
|
||||
return `${base} dropdown-option-active font-medium`;
|
||||
if (active)
|
||||
return `${base} dropdown-option-hover`;
|
||||
return `${base}`; // neutral text color comes from parent/theme
|
||||
}}
|
||||
>
|
||||
<span className="truncate w-full">{fullText}</span>
|
||||
</Listbox.Option>
|
||||
);
|
||||
})}
|
||||
</Listbox.Options>
|
||||
</div>
|
||||
</Listbox>
|
||||
</div>
|
||||
</div>
|
||||
{tdrRunning && (
|
||||
<div className="fixed inset-0 z-[1000] flex flex-col items-center justify-center bg-white/80 backdrop-blur-sm">
|
||||
<div className="fixed inset-0 z-[1000] flex flex-col items-center justify-center bg-[rgba(0,0,0,0.55)] backdrop-blur-sm">
|
||||
<div className="mb-4 text-center space-y-1">
|
||||
<p className="text-lg font-semibold">
|
||||
<p className="text-lg font-semibold text-white">
|
||||
TDR Messung läuft... kann bis zu zwei Minuten dauern
|
||||
</p>
|
||||
<p className="text-sm text-gray-700">
|
||||
Bitte warten…{" "}
|
||||
{Math.min(
|
||||
<p className="text-sm text-white/80">
|
||||
Bitte warten… {Math.min(
|
||||
100,
|
||||
Math.round((tdrProgress / TDR_TOTAL_DURATION) * 100)
|
||||
)}
|
||||
%
|
||||
)}%
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-2/3 max-w-xl h-4 bg-gray-200 rounded overflow-hidden shadow-inner">
|
||||
<div className="w-2/3 max-w-xl h-3 bg-white/20 rounded overflow-hidden shadow-inner">
|
||||
<div
|
||||
className="h-full bg-littwin-blue transition-all ease-linear"
|
||||
style={{
|
||||
width: `${(tdrProgress / TDR_TOTAL_DURATION) * 100}%`,
|
||||
}}
|
||||
className="h-full bg-accent transition-all ease-linear"
|
||||
style={{ width: `${(tdrProgress / TDR_TOTAL_DURATION) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user