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

style: dark mode ISO, RSL und TDR

Browse Source
This commit is contained in:
ISA
2025-09-09 10:35:34 +02:00
parent 8580032ff9
commit f7d1a36e0f
9 changed files with 247 additions and 413 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -281,26 +281,23 @@ const LoopChartActionBar = forwardRef((_props, ref) => {
handleFetchData,
}));
// Sichtbarkeits-Flags
const isMesskurve = chartTitle === "Messkurve";
return (
<div className="flex justify-between p-1 bg-gray-100 rounded-lg ">
<div className="flex items-center">
<label className="text-sm font-semibold">
<div className="toolbar w-full flex flex-wrap items-center gap-2">
<div className="flex items-center mr-2 min-w-[4rem]">
<span className="text-xs font-semibold opacity-80 select-none">
KÜ {slotNumber !== null ? slotNumber + 1 : "-"}
</label>
</span>
</div>
<div className="flex items-center space-x-2">
{/* DateRangePicker – für beide Ansichten sichtbar */}
<div>
<DateRangePicker compact />
</div>
<div className="flex items-center gap-2 flex-wrap">
{/* DateRangePicker immer sichtbar */}
<DateRangePicker />
{/* DIA0/DIA1/DIA2 Dropdown – nur sichtbar bei Messkurve */}
<div
style={{
visibility: chartTitle === "Messkurve" ? "visible" : "hidden",
}}
>
{/* Modus-Dropdown nur für Messkurve */}
<div className={isMesskurve ? "" : "hidden"}>
<Listbox
value={selectedMode}
onChange={(value) => {
@@ -309,39 +306,29 @@ const LoopChartActionBar = forwardRef((_props, ref) => {
}}
>
<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>
<Listbox.Button className="dropdown-surface w-full flex items-center justify-between">
<span className="dropdown-text-fix">
{
{
DIA0: "Alle Messwerte",
DIA1: "Stündliche Werte",
DIA2: "Tägliche Werte",
DIA1: "Stündlich",
DIA2: "Täglich",
}[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>
<i className="bi bi-chevron-down 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">
<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-4 py-1 cursor-pointer ${
`px-3 py-1.5 cursor-pointer rounded-sm m-0.5 ${
selected
? "bg-littwin-blue text-white"
? "dropdown-option-active"
: active
? "bg-gray-200"
? "dropdown-option-hover"
: ""
}`
}
@@ -349,8 +336,8 @@ const LoopChartActionBar = forwardRef((_props, ref) => {
{
{
DIA0: "Alle Messwerte",
DIA1: "Stündliche Werte",
DIA2: "Tägliche Werte",
DIA1: "Stündlich",
DIA2: "Täglich",
}[mode]
}
</Listbox.Option>
@@ -359,41 +346,38 @@ const LoopChartActionBar = forwardRef((_props, ref) => {
</div>
</Listbox>
</div>
{/* Dropdown für Messkurve / Meldungen in View-Header umgezogen */}
{/* Buttons – nur sichtbar bei Messkurve, Platz bleibt erhalten */}
<div
style={{
visibility: chartTitle === "Messkurve" ? "visible" : "hidden",
}}
className="flex items-center space-x-2"
>
{/* Buttons nur für Messkurve */}
<div className={isMesskurve ? "flex items-center gap-2" : "hidden"}>
<button
onClick={handleStartRSL}
className="px-4 py-1 bg-littwin-blue text-white rounded text-sm whitespace-nowrap"
className="btn-primary h-8 font-medium px-3"
disabled={isLoading || rslRunning}
type="button"
>
{rslRunning ? "RSL läuft..." : "RSL Messung starten"}
{rslRunning ? "RSL läuft…" : "RSL Messung starten"}
</button>
<button
onClick={handleFetchData}
className="px-4 py-1 bg-littwin-blue text-white rounded text-sm whitespace-nowrap"
className="btn-primary h-8 font-medium px-3"
disabled={rslRunning}
type="button"
>
Daten laden
</button>
</div>
</div>
{rslRunning && (
<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-black/60 backdrop-blur-sm">
<div className="mb-4 text-center space-y-1">
<p className="text-lg font-semibold">RSL Messung läuft</p>
<p className="text-sm text-gray-700">
<p className="text-sm font-semibold">RSL Messung läuft</p>
<p className="text-xs opacity-80">
Bitte warten…{" "}
{Math.min(100, Math.round((rslProgress / 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-[var(--color-border)] rounded overflow-hidden shadow-inner">
<div
className="h-full bg-littwin-blue transition-all ease-linear"
style={{ width: `${(rslProgress / TOTAL_DURATION) * 100}%` }}