123 lines
4.3 KiB
TypeScript
123 lines
4.3 KiB
TypeScript
"use client";
|
|
import React, { useEffect, useState } from "react";
|
|
import { useAppSelector } from "@/redux/store";
|
|
|
|
export default function SlotActivityOverlay({
|
|
slotIndex,
|
|
}: {
|
|
slotIndex: number;
|
|
}) {
|
|
const ksx = useAppSelector((s) => s.deviceEvents.ksx);
|
|
const ksy = useAppSelector((s) => s.deviceEvents.ksy);
|
|
const ksz = useAppSelector((s) => s.deviceEvents.ksz);
|
|
const loopStartedAt = useAppSelector((s) => s.deviceEvents.loopStartedAt);
|
|
const tdrStartedAt = useAppSelector((s) => s.deviceEvents.tdrStartedAt);
|
|
const alignmentStartedAt = useAppSelector(
|
|
(s) => s.deviceEvents.alignmentStartedAt
|
|
);
|
|
|
|
const loopActive = Array.isArray(ksx) && ksx[slotIndex] === 1;
|
|
const tdrActive = Array.isArray(ksy) && ksy[slotIndex] === 1;
|
|
const alignActive = Array.isArray(ksz) && ksz[slotIndex] === 1;
|
|
|
|
// Progress ticker
|
|
const [now, setNow] = useState<number>(Date.now());
|
|
useEffect(() => {
|
|
const any = loopActive || tdrActive || alignActive;
|
|
if (!any) return;
|
|
const id = setInterval(() => setNow(Date.now()), 1000);
|
|
return () => clearInterval(id);
|
|
}, [loopActive, tdrActive, alignActive]);
|
|
|
|
const clamp = (v: number, min = 0, max = 1) =>
|
|
Math.max(min, Math.min(max, v));
|
|
const compute = (startedAt: number | null, durationMs: number) => {
|
|
if (!startedAt) return { pct: 0 };
|
|
const elapsed = now - startedAt;
|
|
const pct = clamp(elapsed / durationMs) * 100;
|
|
return { pct };
|
|
};
|
|
|
|
// Durations
|
|
const LOOP_MS = 2 * 60 * 1000; // ~2 min
|
|
const TDR_MS = 30 * 1000; // ~30 s
|
|
const ALIGN_MS = 10 * 60 * 1000; // ~10 min
|
|
|
|
if (!loopActive && !tdrActive && !alignActive) return null;
|
|
|
|
return (
|
|
<div className="absolute inset-0 z-20 flex items-center justify-center bg-white/70 backdrop-blur-sm">
|
|
<div className="p-2 rounded-md shadow bg-white/90 border border-gray-200 w-[min(90%,12rem)]">
|
|
<div className="text-[0.75rem] font-semibold mb-2 text-gray-800">
|
|
Bitte warten…
|
|
</div>
|
|
<div className="space-y-2">
|
|
{loopActive && (
|
|
<div>
|
|
<div className="text-[0.7rem] text-gray-800 mb-1">Schleife</div>
|
|
{(() => {
|
|
const { pct } = compute(loopStartedAt, LOOP_MS);
|
|
return (
|
|
<div>
|
|
<div className="h-2 w-full bg-gray-200 rounded overflow-hidden">
|
|
<div
|
|
className="h-full bg-littwin-blue transition-all"
|
|
style={{ width: `${pct}%` }}
|
|
/>
|
|
</div>
|
|
<div className="text-[0.65rem] text-gray-700 mt-1">
|
|
{Math.round(pct)}%
|
|
</div>
|
|
</div>
|
|
);
|
|
})()}
|
|
</div>
|
|
)}
|
|
{tdrActive && (
|
|
<div>
|
|
<div className="text-[0.7rem] text-gray-800 mb-1">TDR</div>
|
|
{(() => {
|
|
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-littwin-blue transition-all"
|
|
style={{ width: `${pct}%` }}
|
|
/>
|
|
</div>
|
|
<div className="text-[0.65rem] text-gray-700 mt-1">
|
|
{Math.round(pct)}%
|
|
</div>
|
|
</div>
|
|
);
|
|
})()}
|
|
</div>
|
|
)}
|
|
{alignActive && (
|
|
<div>
|
|
<div className="text-[0.7rem] text-gray-800 mb-1">Abgleich</div>
|
|
{(() => {
|
|
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-littwin-blue transition-all"
|
|
style={{ width: `${pct}%` }}
|
|
/>
|
|
</div>
|
|
<div className="text-[0.65rem] text-gray-700 mt-1">
|
|
{Math.round(pct)}%
|
|
</div>
|
|
</div>
|
|
);
|
|
})()}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|