0b0a6bd073
- Live cards freeze the worked timer at paused_at and show an amber "Gepauzeerd" badge plus a "Pauze H:MM:SS" total when paused. - AuthContext.signOut resets the path to / so the next admin login lands on Live rather than the tab it logged out from.
75 lines
2.5 KiB
TypeScript
75 lines
2.5 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import type { WorkSession } from '@solelog/shared';
|
|
import { useActiveSessions } from '../api/admin-sessions';
|
|
import { formatTime } from '../lib/elapsed';
|
|
|
|
export default function Live() {
|
|
const { data, isLoading, isError } = useActiveSessions();
|
|
|
|
// Client-side 1s tick so the elapsed timer on each card keeps counting up
|
|
// between the 5s server refreshes.
|
|
const [now, setNow] = useState(() => Date.now());
|
|
useEffect(() => {
|
|
const id = setInterval(() => setNow(Date.now()), 1000);
|
|
return () => clearInterval(id);
|
|
}, []);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="screen">
|
|
<p className="muted">Laden…</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (isError) {
|
|
return (
|
|
<div className="screen">
|
|
<p className="muted">Kon gegevens niet laden.</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const sessions = Array.isArray(data) ? data : [];
|
|
|
|
return (
|
|
<div className="screen">
|
|
<h1 className="screen-title">Actief nu ({sessions.length})</h1>
|
|
{sessions.length === 0 ? (
|
|
<p className="muted">Niemand is nu aan het werk.</p>
|
|
) : (
|
|
<div className="live-grid">
|
|
{sessions.map((session) => (
|
|
<LiveCard key={session.id} session={session} now={now} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function LiveCard({ session, now }: { session: WorkSession; now: number }) {
|
|
// While paused the worked timer freezes at the pause moment; otherwise it counts to now.
|
|
// Worked = (base - start) - paused_seconds, where base is the pause moment when paused.
|
|
const base = session.paused_at ? Date.parse(session.paused_at) : now;
|
|
const worked = Math.max(
|
|
0,
|
|
Math.floor((base - Date.parse(session.start_time)) / 1000) - session.paused_seconds
|
|
);
|
|
return (
|
|
<article className="live-card">
|
|
<div className="live-card-head">
|
|
<span className="live-name">{session.user_name ?? 'Onbekend'}</span>
|
|
{session.insole_type && <span className="live-pill">{session.insole_type}</span>}
|
|
</div>
|
|
<div className="live-activity">{session.activity_name ?? 'Onbekende handeling'}</div>
|
|
<div className="live-meta">{session.pair_count} zolen</div>
|
|
<div className="live-timer">{formatTime(worked)}</div>
|
|
{session.paused_at && <span className="live-badge-paused">Gepauzeerd</span>}
|
|
{session.paused_seconds > 0 && (
|
|
<span className="live-paused-total">Pauze {formatTime(session.paused_seconds)}</span>
|
|
)}
|
|
</article>
|
|
);
|
|
}
|