WIP: von bis Zeitraum in ISO und TDR, aber TDR ist WIP

This commit is contained in:
ISA
2025-09-09 14:48:03 +02:00
parent 4c6fe0db03
commit 18c9c886ec
9 changed files with 262 additions and 239 deletions

View File

@@ -271,7 +271,7 @@ const IsoChartActionBar = forwardRef((_props, ref) => {
useImperativeHandle(ref, () => ({ handleFetchData }));
const hiddenWhenMeldungen = chartTitle !== "Messkurve";
const isMeldungen = chartTitle === "Meldungen";
return (
<div className="toolbar w-full justify-between flex-wrap">
@@ -283,80 +283,76 @@ const IsoChartActionBar = forwardRef((_props, ref) => {
{slotNumber !== null ? slotNumber + 1 : "-"}
</span>
</div>
<div className="flex items-center gap-2 flex-1 justify-end">
<div
className={
hiddenWhenMeldungen
? "opacity-0 pointer-events-none"
: "opacity-100"
}
>
<DateRangePicker />
</div>
<div
className={`transition-opacity ${
hiddenWhenMeldungen
? "opacity-0 pointer-events-none"
: "opacity-100"
}`}
>
<Listbox
value={selectedMode}
onChange={(value) => {
dispatch(setSelectedMode(value));
dispatch(setBrushRange({ startIndex: 0, endIndex: 0 }));
}}
>
<div className="relative w-48">
<Listbox.Button className="dropdown-surface w-full flex items-center justify-between">
<span className="dropdown-text-fix">
{
{
DIA0: "Alle Messwerte",
DIA1: "Stündlich",
DIA2: "Täglich",
}[selectedMode]
}
</span>
<i className="bi bi-chevron-down opacity-70" />
</Listbox.Button>
<Listbox.Options className="dropdown-options absolute z-50 mt-1 w-full max-h-60 overflow-auto ">
{["DIA0", "DIA1", "DIA2"].map((mode) => (
<Listbox.Option
key={mode}
value={mode}
className={({ selected, active }) =>
`px-3 py-1.5 cursor-pointer rounded-sm m-0.5 ${
selected
? "dropdown-option-active"
: active
? "dropdown-option-hover"
: ""
}`
}
>
<div className="flex items-center gap-3 flex-1 justify-end">
{/* Always show date range; requirement: in Meldungen only Von/Bis + Anzeigen */}
<DateRangePicker />
{!isMeldungen && (
<>
<Listbox
value={selectedMode}
onChange={(value) => {
dispatch(setSelectedMode(value));
dispatch(setBrushRange({ startIndex: 0, endIndex: 0 }));
}}
>
<div className="relative w-48">
<Listbox.Button className="dropdown-surface w-full flex items-center justify-between">
<span className="dropdown-text-fix">
{
{
DIA0: "Alle Messwerte",
DIA1: "Stündlich",
DIA2: "Täglich",
}[mode as "DIA0" | "DIA1" | "DIA2"]
}[selectedMode]
}
</Listbox.Option>
))}
</Listbox.Options>
</div>
</Listbox>
</div>
<button
onClick={handleFetchData}
className={`btn-primary h-8 font-medium px-3 ${
hiddenWhenMeldungen ? "invisible" : "visible"
}`}
type="button"
>
Daten laden
</button>
</span>
<i className="bi bi-chevron-down opacity-70" />
</Listbox.Button>
<Listbox.Options className="dropdown-options absolute z-50 mt-1 w-full max-h-60 overflow-auto">
{["DIA0", "DIA1", "DIA2"].map((mode) => (
<Listbox.Option
key={mode}
value={mode}
className={({ selected, active }) =>
`px-3 py-1.5 cursor-pointer rounded-sm m-0.5 ${
selected
? "dropdown-option-active"
: active
? "dropdown-option-hover"
: ""
}`
}
>
{
{
DIA0: "Alle Messwerte",
DIA1: "Stündlich",
DIA2: "Täglich",
}[mode as "DIA0" | "DIA1" | "DIA2"]
}
</Listbox.Option>
))}
</Listbox.Options>
</div>
</Listbox>
<button
onClick={handleFetchData}
className="btn-primary h-8 font-medium px-3"
type="button"
>
Daten laden
</button>
</>
)}
{isMeldungen && (
<button
onClick={handleFetchData}
className="btn-primary h-8 font-medium px-4"
type="button"
>
Anzeigen
</button>
)}
</div>
</div>
);