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

LoopChartActionBar verhält sich jetzt wie im ISO-Modal: Bei Auswahl „Meldungen“

Browse Source
This commit is contained in:
ISA
2025-08-11 13:08:34 +02:00
parent 806eaaeff7
commit 8d1b5ceddc
7 changed files with 137 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
View File

@@ -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>
);