mirror of
https://github.com/jhbruhn/respira.git
synced 2026-04-27 17:45:45 +00:00
Jan-Henrik Bruhn
4fd8ad284f
- Consolidate progress stats into 3 cards (stitches, time, speed) - Keep rollback info visible after machine clears error while paused - Remove Resume/Start Sewing buttons in STOP state (error must be resolved on machine first) - Use adjustedStitchIndex for progress display to prevent desync - Make step control layout stable (always render all buttons) - Reduce polling interval from 500ms to 1000ms during sewing - Fix machine errors (e.g. HoopError) not showing in error badge when there was no accompanying string error message Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
/**
|
|
* ProgressStats Component
|
|
*
|
|
* Displays three stat cards: stitches (current/total), time (elapsed/total), and speed
|
|
*/
|
|
|
|
interface ProgressStatsProps {
|
|
currentStitch: number;
|
|
totalStitches: number;
|
|
elapsedMinutes: number;
|
|
totalMinutes: number;
|
|
speed: number;
|
|
}
|
|
|
|
export function ProgressStats({
|
|
currentStitch,
|
|
totalStitches,
|
|
elapsedMinutes,
|
|
totalMinutes,
|
|
speed,
|
|
}: ProgressStatsProps) {
|
|
return (
|
|
<div className="grid grid-cols-3 gap-2 text-xs mb-3">
|
|
<div className="bg-gray-200 dark:bg-gray-700/50 p-2 rounded">
|
|
<span className="text-gray-600 dark:text-gray-400 block">Stitches</span>
|
|
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
|
{currentStitch.toLocaleString()} / {totalStitches.toLocaleString()}
|
|
</span>
|
|
</div>
|
|
<div className="bg-gray-200 dark:bg-gray-700/50 p-2 rounded">
|
|
<span className="text-gray-600 dark:text-gray-400 block">Time</span>
|
|
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
|
{elapsedMinutes} / {totalMinutes} min
|
|
</span>
|
|
</div>
|
|
<div className="bg-gray-200 dark:bg-gray-700/50 p-2 rounded">
|
|
<span className="text-gray-600 dark:text-gray-400 block">Speed</span>
|
|
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
|
{speed} spm
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|