LoopChartActionBar verhält sich jetzt wie im ISO-Modal: Bei Auswahl „Meldungen“
This commit is contained in:
ISA
@@ -6,7 +6,15 @@ import { RootState } from "@/redux/store";
|
||||
import { setVonDatum, setBisDatum } from "@/redux/slices/dateRangePickerSlice";
|
||||
import "react-datepicker/dist/react-datepicker.css";
|
||||
|
||||
const DateRangePicker: React.FC = () => {
|
||||
interface DateRangePickerProps {
|
||||
compact?: boolean; // reduziert horizontale Breite
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const DateRangePicker: React.FC<DateRangePickerProps> = ({
|
||||
compact = false,
|
||||
className = "",
|
||||
}) => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const reduxVonDatum = useSelector(
|
||||
@@ -38,10 +46,22 @@ const DateRangePicker: React.FC = () => {
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [dispatch, reduxVonDatum, reduxBisDatum]);
|
||||
|
||||
const gapClass = compact ? "space-x-2" : "space-x-4";
|
||||
const labelWidthClass = compact ? "w-6" : "w-auto";
|
||||
const inputWidthClass = compact ? "w-32" : "w-44"; // ca. 128px vs 176px
|
||||
|
||||
return (
|
||||
<div className="flex space-x-4 items-center">
|
||||
<div className="flex items-center space-x-2">
|
||||
<label className="block text-sm font-semibold">Von</label>
|
||||
<div className={`flex ${gapClass} items-center ${className}`}>
|
||||
<div
|
||||
className={`flex items-center space-x-1 ${compact ? "text-xs" : ""}`}
|
||||
>
|
||||
<label
|
||||
className={`block font-semibold ${
|
||||
compact ? "text-xs" : "text-sm"
|
||||
} ${labelWidthClass}`}
|
||||
>
|
||||
Von
|
||||
</label>
|
||||
<DatePicker
|
||||
selected={reduxVonDatum ? parseISODate(reduxVonDatum) : thirtyDaysAgo}
|
||||
onChange={(date) => {
|
||||
@@ -57,12 +77,21 @@ const DateRangePicker: React.FC = () => {
|
||||
minDate={sixMonthsAgo}
|
||||
maxDate={today}
|
||||
dateFormat="dd.MM.yyyy"
|
||||
className="border px-2 py-1 rounded"
|
||||
className={`border px-2 py-1 rounded ${inputWidthClass} ${
|
||||
compact ? "text-xs" : "text-sm"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<label className="block text-sm font-semibold">Bis</label>
|
||||
<div
|
||||
className={`flex items-center space-x-1 ${compact ? "text-xs" : ""}`}
|
||||
>
|
||||
<label
|
||||
className={`block font-semibold ${
|
||||
compact ? "text-xs" : "text-sm"
|
||||
} ${labelWidthClass}`}
|
||||
>
|
||||
Bis
|
||||
</label>
|
||||
<DatePicker
|
||||
selected={reduxBisDatum ? parseISODate(reduxBisDatum) : today}
|
||||
onChange={(date) => {
|
||||
@@ -78,7 +107,9 @@ const DateRangePicker: React.FC = () => {
|
||||
minDate={sixMonthsAgo}
|
||||
maxDate={today}
|
||||
dateFormat="dd.MM.yyyy"
|
||||
className="border px-2 py-1 rounded"
|
||||
className={`border px-2 py-1 rounded ${inputWidthClass} ${
|
||||
compact ? "text-xs" : "text-sm"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -214,7 +214,7 @@ const LoopChartActionBar: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex justify-between items-center p-2 bg-gray-100 rounded-lg space-x-2">
|
||||
<div className="flex justify-between p-1 bg-gray-100 rounded-lg ">
|
||||
<div className="flex items-center">
|
||||
<label className="text-sm font-semibold">
|
||||
KÜ {slotNumber !== null ? slotNumber + 1 : "-"}
|
||||
@@ -222,65 +222,79 @@ const LoopChartActionBar: React.FC = () => {
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<DateRangePicker />
|
||||
|
||||
<Listbox
|
||||
value={selectedMode}
|
||||
onChange={(value) => {
|
||||
dispatch(setSelectedMode(value));
|
||||
dispatch(setBrushRange({ startIndex: 0, endIndex: 0 }));
|
||||
{/* DateRangePicker – wie bei ISO nur sichtbar bei Messkurve */}
|
||||
<div
|
||||
style={{
|
||||
visibility: chartTitle === "Messkurve" ? "visible" : "hidden",
|
||||
}}
|
||||
>
|
||||
<div className="relative w-48">
|
||||
<Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
|
||||
<span>
|
||||
{
|
||||
{
|
||||
DIA0: "Alle Messwerte",
|
||||
DIA1: "Stündliche Werte",
|
||||
DIA2: "Tägliche Werte",
|
||||
}[selectedMode]
|
||||
}
|
||||
</span>
|
||||
<svg
|
||||
className="w-5 h-5 text-gray-400"
|
||||
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 rounded bg-white shadow max-h-60 overflow-auto text-sm">
|
||||
{["DIA0", "DIA1", "DIA2"].map((mode) => (
|
||||
<Listbox.Option
|
||||
key={mode}
|
||||
value={mode}
|
||||
className={({ selected, active }) =>
|
||||
`px-4 py-1 cursor-pointer ${
|
||||
selected
|
||||
? "bg-littwin-blue text-white"
|
||||
: active
|
||||
? "bg-gray-200"
|
||||
: ""
|
||||
}`
|
||||
}
|
||||
>
|
||||
<DateRangePicker compact />
|
||||
</div>
|
||||
|
||||
{/* DIA0/DIA1/DIA2 Dropdown – nur sichtbar bei Messkurve */}
|
||||
<div
|
||||
style={{
|
||||
visibility: chartTitle === "Messkurve" ? "visible" : "hidden",
|
||||
}}
|
||||
>
|
||||
<Listbox
|
||||
value={selectedMode}
|
||||
onChange={(value) => {
|
||||
dispatch(setSelectedMode(value));
|
||||
dispatch(setBrushRange({ startIndex: 0, endIndex: 0 }));
|
||||
}}
|
||||
>
|
||||
<div className="relative w-48">
|
||||
<Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
|
||||
<span>
|
||||
{
|
||||
{
|
||||
DIA0: "Alle Messwerte",
|
||||
DIA1: "Stündliche Werte",
|
||||
DIA2: "Tägliche Werte",
|
||||
}[mode]
|
||||
}[selectedMode]
|
||||
}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</div>
|
||||
</Listbox>
|
||||
</span>
|
||||
<svg
|
||||
className="w-5 h-5 text-gray-400"
|
||||
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 rounded bg-white shadow max-h-60 overflow-auto text-sm">
|
||||
{["DIA0", "DIA1", "DIA2"].map((mode) => (
|
||||
<Listbox.Option
|
||||
key={mode}
|
||||
value={mode}
|
||||
className={({ selected, active }) =>
|
||||
`px-4 py-1 cursor-pointer ${
|
||||
selected
|
||||
? "bg-littwin-blue text-white"
|
||||
: active
|
||||
? "bg-gray-200"
|
||||
: ""
|
||||
}`
|
||||
}
|
||||
>
|
||||
{
|
||||
{
|
||||
DIA0: "Alle Messwerte",
|
||||
DIA1: "Stündliche Werte",
|
||||
DIA2: "Tägliche Werte",
|
||||
}[mode]
|
||||
}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</div>
|
||||
</Listbox>
|
||||
</div>
|
||||
{/* Dropdown für Messkurve / Meldungen (wie ISO) */}
|
||||
<Listbox
|
||||
value={chartTitle}
|
||||
@@ -325,24 +339,27 @@ const LoopChartActionBar: React.FC = () => {
|
||||
</div>
|
||||
</Listbox>
|
||||
|
||||
{/* Buttons nur bei Messkurve sichtbar */}
|
||||
{chartTitle === "Messkurve" && (
|
||||
<>
|
||||
<button
|
||||
onClick={handleStartRSL}
|
||||
className="px-4 py-1 bg-littwin-blue text-white rounded text-sm whitespace-nowrap"
|
||||
disabled={isLoading}
|
||||
>
|
||||
RSL starten
|
||||
</button>
|
||||
<button
|
||||
onClick={handleFetchData}
|
||||
className="px-4 py-1 bg-littwin-blue text-white rounded text-sm whitespace-nowrap"
|
||||
>
|
||||
Daten laden
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{/* Buttons – nur sichtbar bei Messkurve, Platz bleibt erhalten */}
|
||||
<div
|
||||
style={{
|
||||
visibility: chartTitle === "Messkurve" ? "visible" : "hidden",
|
||||
}}
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<button
|
||||
onClick={handleStartRSL}
|
||||
className="px-4 py-1 bg-littwin-blue text-white rounded text-sm whitespace-nowrap"
|
||||
disabled={isLoading}
|
||||
>
|
||||
RSL starten
|
||||
</button>
|
||||
<button
|
||||
onClick={handleFetchData}
|
||||
className="px-4 py-1 bg-littwin-blue text-white rounded text-sm whitespace-nowrap"
|
||||
>
|
||||
Daten laden
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user