95 lines
3.3 KiB
TypeScript
95 lines
3.3 KiB
TypeScript
"use client";
|
||
// components/main/system/SystemChartActionBar.tsx
|
||
import React from "react";
|
||
import DateRangePicker from "@/components/common/DateRangePicker";
|
||
import { Listbox } from "@headlessui/react";
|
||
|
||
type Props = {
|
||
zeitraum: "DIA0" | "DIA1" | "DIA2";
|
||
setZeitraum: (typ: "DIA0" | "DIA1" | "DIA2") => void;
|
||
onFetchData: () => void;
|
||
isLoading?: boolean;
|
||
className?: string;
|
||
};
|
||
|
||
const SystemChartActionBar: React.FC<Props> = ({
|
||
zeitraum,
|
||
setZeitraum,
|
||
onFetchData,
|
||
isLoading = false,
|
||
className = "",
|
||
}) => {
|
||
return (
|
||
<div
|
||
className={`flex items-center justify-start gap-3 mb-4 flex-wrap ${className}`}
|
||
>
|
||
{/* DateRangePicker – nutzt globalen Redux-Slice */}
|
||
<DateRangePicker compact />
|
||
|
||
{/* Zeitraum (DIA0/DIA1/DIA2) */}
|
||
<label className="font-medium text-sm">Zeitraum:</label>
|
||
<Listbox value={zeitraum} onChange={setZeitraum}>
|
||
<div className="relative w-48">
|
||
<Listbox.Button className="w-full border border-base px-3 py-1 rounded text-left bg-[var(--color-surface-alt)] text-fg flex justify-between items-center text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-accent)]/40 transition">
|
||
<span>
|
||
{
|
||
{ DIA0: "Alle Messwerte", DIA1: "Stündlich", DIA2: "Täglich" }[
|
||
zeitraum
|
||
]
|
||
}
|
||
</span>
|
||
<svg
|
||
className="w-5 h-5 text-[var(--color-fg-muted)]"
|
||
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 border-base rounded bg-[var(--color-surface)] text-fg shadow-lg max-h-60 overflow-auto text-sm focus:outline-none">
|
||
{["DIA0", "DIA1", "DIA2"].map((option) => (
|
||
<Listbox.Option
|
||
key={option}
|
||
value={option}
|
||
className={({ selected, active }) => {
|
||
const base = "px-4 py-1 cursor-pointer text-sm";
|
||
if (selected) return `${base} bg-littwin-blue text-white`; // selected highlight
|
||
if (active)
|
||
return `${base} bg-[var(--color-surface-alt)] text-fg`;
|
||
return `${base} text-fg`;
|
||
}}
|
||
>
|
||
{
|
||
{
|
||
DIA0: "Alle Messwerte",
|
||
DIA1: "Stündlich",
|
||
DIA2: "Täglich",
|
||
}[option as "DIA0" | "DIA1" | "DIA2"]
|
||
}
|
||
</Listbox.Option>
|
||
))}
|
||
</Listbox.Options>
|
||
</div>
|
||
</Listbox>
|
||
|
||
{/* Daten laden */}
|
||
<button
|
||
onClick={onFetchData}
|
||
className={`px-4 py-1 bg-littwin-blue text-white rounded text-sm ${
|
||
isLoading ? "cursor-wait opacity-70" : ""
|
||
}`}
|
||
disabled={isLoading}
|
||
aria-busy={isLoading}
|
||
>
|
||
{isLoading ? "Laden..." : "Daten laden"}
|
||
</button>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default SystemChartActionBar;
|