Events Prograssbar in Prozent

This commit is contained in:
ISA
2025-08-13 14:15:51 +02:00
parent 8fcbf6cfcd
commit 5496254acb
7 changed files with 20 additions and 25 deletions

View File

@@ -35,13 +35,6 @@ export default function GlobalActivityOverlay() {
const clamp = (v: number, min = 0, max = 1) =>
Math.max(min, Math.min(max, v));
const formatEta = (ms: number) => {
if (ms <= 0) return "gleich fertig";
const totalSec = Math.ceil(ms / 1000);
const m = Math.floor(totalSec / 60);
const s = totalSec % 60;
return m > 0 ? `${m}:${s.toString().padStart(2, "0")} min` : `${s} s`;
};
const compute = (startedAt: number | null, durationMs: number) => {
if (!startedAt) return { pct: 0, remaining: durationMs };
@@ -67,7 +60,7 @@ export default function GlobalActivityOverlay() {
Schleifenmessung läuft (: {fmt(ksx)})
</div>
{(() => {
const { pct, remaining } = compute(loopStartedAt, LOOP_MS);
const { pct } = compute(loopStartedAt, LOOP_MS);
return (
<div>
<div className="h-2 w-full bg-gray-200 rounded overflow-hidden">
@@ -77,7 +70,7 @@ export default function GlobalActivityOverlay() {
/>
</div>
<div className="text-xs text-gray-600 mt-1">
{Math.round(pct)}% · ~{formatEta(remaining)}
{Math.round(pct)}%
</div>
</div>
);
@@ -91,17 +84,17 @@ export default function GlobalActivityOverlay() {
TDR-Messung läuft (: {fmt(ksy)})
</div>
{(() => {
const { pct, remaining } = compute(tdrStartedAt, TDR_MS);
const { pct } = compute(tdrStartedAt, TDR_MS);
return (
<div>
<div className="h-2 w-full bg-gray-200 rounded overflow-hidden">
<div
className="h-full bg-yellow-500 transition-all"
className="h-full bg-littwin-blue transition-all"
style={{ width: `${pct}%` }}
/>
</div>
<div className="text-xs text-gray-600 mt-1">
{Math.round(pct)}% · ~{formatEta(remaining)}
{Math.round(pct)}%
</div>
</div>
);
@@ -115,20 +108,17 @@ export default function GlobalActivityOverlay() {
Abgleich läuft (: {fmt(ksz)})
</div>
{(() => {
const { pct, remaining } = compute(
alignmentStartedAt,
ALIGN_MS
);
const { pct } = compute(alignmentStartedAt, ALIGN_MS);
return (
<div>
<div className="h-2 w-full bg-gray-200 rounded overflow-hidden">
<div
className="h-full bg-emerald-500 transition-all"
className="h-full bg-littwin-blue transition-all"
style={{ width: `${pct}%` }}
/>
</div>
<div className="text-xs text-gray-600 mt-1">
{Math.round(pct)}% · ~{formatEta(remaining)}
{Math.round(pct)}%
</div>
</div>
);