mirror of
https://github.com/jhbruhn/respira.git
synced 2026-01-27 10:23:41 +00:00
refactor: Extract WorkflowStepper sub-components and utilities
- Move WorkflowStepper into dedicated folder with sub-components - Extract StepCircle, StepLabel, and StepPopover components - Create workflowSteps constant for step definitions - Extract getCurrentStep logic to workflowStepCalculation utility - Extract getGuideContent logic to workflowGuideContent utility - Reduce WorkflowStepper.tsx from 487 to 140 lines (71% reduction) Part of #33: Extract sub-components from large components 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Jan-Henrik Bruhn
parent
ec19426dd1
commit
2de8cd12ff
9 changed files with 623 additions and 487 deletions
|
|
@ -1,487 +0,0 @@
|
||||||
import { useState, useRef } from "react";
|
|
||||||
import { useClickOutside } from "@/hooks";
|
|
||||||
import { useShallow } from "zustand/react/shallow";
|
|
||||||
import { useMachineStore, usePatternUploaded } from "../stores/useMachineStore";
|
|
||||||
import { usePatternStore } from "../stores/usePatternStore";
|
|
||||||
import {
|
|
||||||
CheckCircleIcon,
|
|
||||||
InformationCircleIcon,
|
|
||||||
ExclamationTriangleIcon,
|
|
||||||
} from "@heroicons/react/24/solid";
|
|
||||||
import { MachineStatus } from "../types/machine";
|
|
||||||
|
|
||||||
interface Step {
|
|
||||||
id: number;
|
|
||||||
label: string;
|
|
||||||
description: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const steps: Step[] = [
|
|
||||||
{ id: 1, label: "Connect", description: "Connect to machine" },
|
|
||||||
{ id: 2, label: "Home Machine", description: "Initialize hoop position" },
|
|
||||||
{ id: 3, label: "Load Pattern", description: "Choose PES file" },
|
|
||||||
{ id: 4, label: "Upload", description: "Upload to machine" },
|
|
||||||
{ id: 5, label: "Mask Trace", description: "Trace pattern area" },
|
|
||||||
{ id: 6, label: "Start Sewing", description: "Begin embroidery" },
|
|
||||||
{ id: 7, label: "Monitor", description: "Watch progress" },
|
|
||||||
{ id: 8, label: "Complete", description: "Finish and remove" },
|
|
||||||
];
|
|
||||||
|
|
||||||
// Helper function to get guide content for a step
|
|
||||||
function getGuideContent(stepId: number, machineStatus: MachineStatus) {
|
|
||||||
// Return content based on step
|
|
||||||
switch (stepId) {
|
|
||||||
case 1:
|
|
||||||
return {
|
|
||||||
type: "info" as const,
|
|
||||||
title: "Step 1: Connect to Machine",
|
|
||||||
description:
|
|
||||||
"To get started, connect to your Brother embroidery machine via Bluetooth.",
|
|
||||||
items: [
|
|
||||||
"Make sure your machine is powered on",
|
|
||||||
"Enable Bluetooth on your machine",
|
|
||||||
'Click the "Connect to Machine" button below',
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
case 2:
|
|
||||||
return {
|
|
||||||
type: "info" as const,
|
|
||||||
title: "Step 2: Home Machine",
|
|
||||||
description:
|
|
||||||
"The hoop needs to be removed and an initial homing procedure must be performed.",
|
|
||||||
items: [
|
|
||||||
"Remove the embroidery hoop from the machine completely",
|
|
||||||
"Press the Accept button on the machine",
|
|
||||||
"Wait for the machine to complete its initialization (homing)",
|
|
||||||
"Once initialization is complete, reattach the hoop",
|
|
||||||
"The machine should now recognize the hoop correctly",
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
case 3:
|
|
||||||
return {
|
|
||||||
type: "info" as const,
|
|
||||||
title: "Step 3: Load Your Pattern",
|
|
||||||
description:
|
|
||||||
"Choose a PES embroidery file from your computer to preview and upload.",
|
|
||||||
items: [
|
|
||||||
'Click "Choose PES File" in the Pattern File section',
|
|
||||||
"Select your embroidery design (.pes file)",
|
|
||||||
"Review the pattern preview on the right",
|
|
||||||
"You can drag the pattern to adjust its position",
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
case 4:
|
|
||||||
return {
|
|
||||||
type: "info" as const,
|
|
||||||
title: "Step 4: Upload Pattern to Machine",
|
|
||||||
description:
|
|
||||||
"Send your pattern to the embroidery machine to prepare for sewing.",
|
|
||||||
items: [
|
|
||||||
"Review the pattern preview to ensure it's positioned correctly",
|
|
||||||
"Check the pattern size matches your hoop",
|
|
||||||
'Click "Upload to Machine" when ready',
|
|
||||||
"Wait for the upload to complete (this may take a minute)",
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
case 5:
|
|
||||||
// Check machine status for substates
|
|
||||||
if (machineStatus === MachineStatus.MASK_TRACE_LOCK_WAIT) {
|
|
||||||
return {
|
|
||||||
type: "warning" as const,
|
|
||||||
title: "Machine Action Required",
|
|
||||||
description: "The machine is ready to trace the pattern outline.",
|
|
||||||
items: [
|
|
||||||
"Press the button on your machine to confirm and start the mask trace",
|
|
||||||
"Ensure the hoop is properly attached",
|
|
||||||
"Make sure the needle area is clear",
|
|
||||||
],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (machineStatus === MachineStatus.MASK_TRACING) {
|
|
||||||
return {
|
|
||||||
type: "progress" as const,
|
|
||||||
title: "Mask Trace In Progress",
|
|
||||||
description:
|
|
||||||
"The machine is tracing the pattern boundary. Please wait...",
|
|
||||||
items: [
|
|
||||||
"Watch the machine trace the outline",
|
|
||||||
"Verify the pattern fits within your hoop",
|
|
||||||
"Do not interrupt the machine",
|
|
||||||
],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
type: "info" as const,
|
|
||||||
title: "Step 5: Start Mask Trace",
|
|
||||||
description:
|
|
||||||
"The mask trace helps the machine understand the pattern boundaries.",
|
|
||||||
items: [
|
|
||||||
'Click "Start Mask Trace" button in the Sewing Progress section',
|
|
||||||
"The machine will trace the pattern outline",
|
|
||||||
"This ensures the hoop is positioned correctly",
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
case 6:
|
|
||||||
return {
|
|
||||||
type: "success" as const,
|
|
||||||
title: "Step 6: Ready to Sew!",
|
|
||||||
description: "The machine is ready to begin embroidering your pattern.",
|
|
||||||
items: [
|
|
||||||
"Verify your thread colors are correct",
|
|
||||||
"Ensure the fabric is properly hooped",
|
|
||||||
'Click "Start Sewing" when ready',
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
case 7:
|
|
||||||
// Check for substates
|
|
||||||
if (machineStatus === MachineStatus.COLOR_CHANGE_WAIT) {
|
|
||||||
return {
|
|
||||||
type: "warning" as const,
|
|
||||||
title: "Thread Change Required",
|
|
||||||
description:
|
|
||||||
"The machine needs a different thread color to continue.",
|
|
||||||
items: [
|
|
||||||
"Check the color blocks section to see which thread is needed",
|
|
||||||
"Change to the correct thread color",
|
|
||||||
"Press the button on your machine to resume sewing",
|
|
||||||
],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
machineStatus === MachineStatus.PAUSE ||
|
|
||||||
machineStatus === MachineStatus.STOP ||
|
|
||||||
machineStatus === MachineStatus.SEWING_INTERRUPTION
|
|
||||||
) {
|
|
||||||
return {
|
|
||||||
type: "warning" as const,
|
|
||||||
title: "Sewing Paused",
|
|
||||||
description: "The embroidery has been paused or interrupted.",
|
|
||||||
items: [
|
|
||||||
"Check if everything is okay with the machine",
|
|
||||||
'Click "Resume Sewing" when ready to continue',
|
|
||||||
"The machine will pick up where it left off",
|
|
||||||
],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
type: "progress" as const,
|
|
||||||
title: "Step 7: Sewing In Progress",
|
|
||||||
description:
|
|
||||||
"Your embroidery is being stitched. Monitor the progress below.",
|
|
||||||
items: [
|
|
||||||
"Watch the progress bar and current stitch count",
|
|
||||||
"The machine will pause when a color change is needed",
|
|
||||||
"Do not leave the machine unattended",
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
case 8:
|
|
||||||
return {
|
|
||||||
type: "success" as const,
|
|
||||||
title: "Step 8: Embroidery Complete!",
|
|
||||||
description: "Your embroidery is finished. Great work!",
|
|
||||||
items: [
|
|
||||||
"Remove the hoop from the machine",
|
|
||||||
"Press the Accept button on the machine",
|
|
||||||
"Carefully remove your finished embroidery",
|
|
||||||
"Trim any jump stitches or loose threads",
|
|
||||||
'Click "Delete Pattern" to start a new project',
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
default:
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getCurrentStep(
|
|
||||||
machineStatus: MachineStatus,
|
|
||||||
isConnected: boolean,
|
|
||||||
hasPattern: boolean,
|
|
||||||
patternUploaded: boolean,
|
|
||||||
): number {
|
|
||||||
if (!isConnected) return 1;
|
|
||||||
|
|
||||||
// Check if machine needs homing (Initial state)
|
|
||||||
if (machineStatus === MachineStatus.Initial) return 2;
|
|
||||||
|
|
||||||
if (!hasPattern) return 3;
|
|
||||||
if (!patternUploaded) return 4;
|
|
||||||
|
|
||||||
// After upload, determine step based on machine status
|
|
||||||
switch (machineStatus) {
|
|
||||||
case MachineStatus.IDLE:
|
|
||||||
case MachineStatus.MASK_TRACE_LOCK_WAIT:
|
|
||||||
case MachineStatus.MASK_TRACING:
|
|
||||||
return 5;
|
|
||||||
|
|
||||||
case MachineStatus.MASK_TRACE_COMPLETE:
|
|
||||||
case MachineStatus.SEWING_WAIT:
|
|
||||||
return 6;
|
|
||||||
|
|
||||||
case MachineStatus.SEWING:
|
|
||||||
case MachineStatus.COLOR_CHANGE_WAIT:
|
|
||||||
case MachineStatus.PAUSE:
|
|
||||||
case MachineStatus.STOP:
|
|
||||||
case MachineStatus.SEWING_INTERRUPTION:
|
|
||||||
return 7;
|
|
||||||
|
|
||||||
case MachineStatus.SEWING_COMPLETE:
|
|
||||||
return 8;
|
|
||||||
|
|
||||||
default:
|
|
||||||
return 5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function WorkflowStepper() {
|
|
||||||
// Machine store
|
|
||||||
const { machineStatus, isConnected } = useMachineStore(
|
|
||||||
useShallow((state) => ({
|
|
||||||
machineStatus: state.machineStatus,
|
|
||||||
isConnected: state.isConnected,
|
|
||||||
})),
|
|
||||||
);
|
|
||||||
|
|
||||||
// Pattern store
|
|
||||||
const { pesData } = usePatternStore(
|
|
||||||
useShallow((state) => ({
|
|
||||||
pesData: state.pesData,
|
|
||||||
})),
|
|
||||||
);
|
|
||||||
|
|
||||||
// Derived state: pattern is uploaded if machine has pattern info
|
|
||||||
const patternUploaded = usePatternUploaded();
|
|
||||||
const hasPattern = pesData !== null;
|
|
||||||
const currentStep = getCurrentStep(
|
|
||||||
machineStatus,
|
|
||||||
isConnected,
|
|
||||||
hasPattern,
|
|
||||||
patternUploaded,
|
|
||||||
);
|
|
||||||
const [showPopover, setShowPopover] = useState(false);
|
|
||||||
const [popoverStep, setPopoverStep] = useState<number | null>(null);
|
|
||||||
const popoverRef = useRef<HTMLDivElement>(null);
|
|
||||||
const stepRefs = useRef<{ [key: number]: HTMLDivElement | null }>({});
|
|
||||||
|
|
||||||
// Close popover when clicking outside (exclude step circles)
|
|
||||||
useClickOutside<HTMLDivElement>(popoverRef, () => setShowPopover(false), {
|
|
||||||
enabled: showPopover,
|
|
||||||
excludeRefs: [stepRefs],
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleStepClick = (stepId: number) => {
|
|
||||||
// Only allow clicking on current step or earlier completed steps
|
|
||||||
if (stepId <= currentStep) {
|
|
||||||
if (showPopover && popoverStep === stepId) {
|
|
||||||
setShowPopover(false);
|
|
||||||
setPopoverStep(null);
|
|
||||||
} else {
|
|
||||||
setPopoverStep(stepId);
|
|
||||||
setShowPopover(true);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="relative max-w-5xl mx-auto mt-2 lg:mt-4"
|
|
||||||
role="navigation"
|
|
||||||
aria-label="Workflow progress"
|
|
||||||
>
|
|
||||||
{/* Progress bar background */}
|
|
||||||
<div
|
|
||||||
className="absolute top-4 lg:top-5 left-0 right-0 h-0.5 lg:h-1 bg-primary-400/20 dark:bg-primary-600/20 rounded-full"
|
|
||||||
style={{ left: "16px", right: "16px" }}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Progress bar fill */}
|
|
||||||
<div
|
|
||||||
className="absolute top-4 lg:top-5 left-0 h-0.5 lg:h-1 bg-gradient-to-r from-success-500 to-primary-500 dark:from-success-600 dark:to-primary-600 transition-all duration-500 rounded-full"
|
|
||||||
style={{
|
|
||||||
left: "16px",
|
|
||||||
width: `calc(${((currentStep - 1) / (steps.length - 1)) * 100}% - 16px)`,
|
|
||||||
}}
|
|
||||||
role="progressbar"
|
|
||||||
aria-valuenow={currentStep}
|
|
||||||
aria-valuemin={1}
|
|
||||||
aria-valuemax={steps.length}
|
|
||||||
aria-label={`Step ${currentStep} of ${steps.length}`}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Steps */}
|
|
||||||
<div className="flex justify-between relative">
|
|
||||||
{steps.map((step) => {
|
|
||||||
const isComplete = step.id < currentStep;
|
|
||||||
const isCurrent = step.id === currentStep;
|
|
||||||
const isUpcoming = step.id > currentStep;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={step.id}
|
|
||||||
className="flex flex-col items-center"
|
|
||||||
style={{ flex: 1 }}
|
|
||||||
role="listitem"
|
|
||||||
aria-current={isCurrent ? "step" : undefined}
|
|
||||||
>
|
|
||||||
{/* Step circle */}
|
|
||||||
<div
|
|
||||||
ref={(el) => {
|
|
||||||
stepRefs.current[step.id] = el;
|
|
||||||
}}
|
|
||||||
onClick={() => handleStepClick(step.id)}
|
|
||||||
className={`
|
|
||||||
w-8 h-8 lg:w-10 lg:h-10 rounded-full flex items-center justify-center font-bold text-xs transition-all duration-300 border-2 shadow-md
|
|
||||||
${step.id <= currentStep ? "cursor-pointer hover:scale-110" : "cursor-not-allowed"}
|
|
||||||
${isComplete ? "bg-success-500 dark:bg-success-600 border-success-400 dark:border-success-500 text-white shadow-success-500/30 dark:shadow-success-600/30" : ""}
|
|
||||||
${isCurrent ? "bg-primary-600 dark:bg-primary-700 border-primary-500 dark:border-primary-600 text-white scale-105 lg:scale-110 shadow-primary-600/40 dark:shadow-primary-700/40 ring-2 ring-primary-300 dark:ring-primary-500 ring-offset-2 dark:ring-offset-gray-900" : ""}
|
|
||||||
${isUpcoming ? "bg-primary-700 dark:bg-primary-800 border-primary-500/30 dark:border-primary-600/30 text-primary-200/70 dark:text-primary-300/70" : ""}
|
|
||||||
${showPopover && popoverStep === step.id ? "ring-4 ring-white dark:ring-gray-800" : ""}
|
|
||||||
`}
|
|
||||||
aria-label={`${step.label}: ${isComplete ? "completed" : isCurrent ? "current" : "upcoming"}. Click for details.`}
|
|
||||||
role="button"
|
|
||||||
tabIndex={step.id <= currentStep ? 0 : -1}
|
|
||||||
>
|
|
||||||
{isComplete ? (
|
|
||||||
<CheckCircleIcon
|
|
||||||
className="w-5 h-5 lg:w-6 lg:h-6"
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
step.id
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Step label */}
|
|
||||||
<div className="mt-1 lg:mt-2 text-center">
|
|
||||||
<div
|
|
||||||
className={`text-xs font-semibold leading-tight ${
|
|
||||||
isCurrent
|
|
||||||
? "text-white"
|
|
||||||
: isComplete
|
|
||||||
? "text-success-200 dark:text-success-300"
|
|
||||||
: "text-primary-300/70 dark:text-primary-400/70"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{step.label}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Popover */}
|
|
||||||
{showPopover && popoverStep !== null && (
|
|
||||||
<div
|
|
||||||
ref={popoverRef}
|
|
||||||
className="absolute top-full mt-4 left-1/2 transform -translate-x-1/2 w-full max-w-xl z-50 animate-fadeIn"
|
|
||||||
role="dialog"
|
|
||||||
aria-label="Step guidance"
|
|
||||||
>
|
|
||||||
{(() => {
|
|
||||||
const content = getGuideContent(popoverStep, machineStatus);
|
|
||||||
if (!content) return null;
|
|
||||||
|
|
||||||
const colorClasses = {
|
|
||||||
info: "bg-info-50 dark:bg-info-900/95 border-info-600 dark:border-info-500",
|
|
||||||
success:
|
|
||||||
"bg-success-50 dark:bg-success-900/95 border-success-600 dark:border-success-500",
|
|
||||||
warning:
|
|
||||||
"bg-warning-50 dark:bg-warning-900/95 border-warning-600 dark:border-warning-500",
|
|
||||||
error:
|
|
||||||
"bg-danger-50 dark:bg-danger-900/95 border-danger-600 dark:border-danger-500",
|
|
||||||
progress:
|
|
||||||
"bg-info-50 dark:bg-info-900/95 border-info-600 dark:border-info-500",
|
|
||||||
};
|
|
||||||
|
|
||||||
const iconColorClasses = {
|
|
||||||
info: "text-info-600 dark:text-info-400",
|
|
||||||
success: "text-success-600 dark:text-success-400",
|
|
||||||
warning: "text-warning-600 dark:text-warning-400",
|
|
||||||
error: "text-danger-600 dark:text-danger-400",
|
|
||||||
progress: "text-info-600 dark:text-info-400",
|
|
||||||
};
|
|
||||||
|
|
||||||
const textColorClasses = {
|
|
||||||
info: "text-info-900 dark:text-info-200",
|
|
||||||
success: "text-success-900 dark:text-success-200",
|
|
||||||
warning: "text-warning-900 dark:text-warning-200",
|
|
||||||
error: "text-danger-900 dark:text-danger-200",
|
|
||||||
progress: "text-info-900 dark:text-info-200",
|
|
||||||
};
|
|
||||||
|
|
||||||
const descColorClasses = {
|
|
||||||
info: "text-info-800 dark:text-info-300",
|
|
||||||
success: "text-success-800 dark:text-success-300",
|
|
||||||
warning: "text-warning-800 dark:text-warning-300",
|
|
||||||
error: "text-danger-800 dark:text-danger-300",
|
|
||||||
progress: "text-info-800 dark:text-info-300",
|
|
||||||
};
|
|
||||||
|
|
||||||
const listColorClasses = {
|
|
||||||
info: "text-blue-700 dark:text-blue-300",
|
|
||||||
success: "text-green-700 dark:text-green-300",
|
|
||||||
warning: "text-yellow-700 dark:text-yellow-300",
|
|
||||||
error: "text-red-700 dark:text-red-300",
|
|
||||||
progress: "text-cyan-700 dark:text-cyan-300",
|
|
||||||
};
|
|
||||||
|
|
||||||
const Icon =
|
|
||||||
content.type === "warning"
|
|
||||||
? ExclamationTriangleIcon
|
|
||||||
: InformationCircleIcon;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={`${colorClasses[content.type]} border-l-4 p-4 rounded-lg shadow-xl backdrop-blur-sm`}
|
|
||||||
>
|
|
||||||
<div className="flex items-start gap-3">
|
|
||||||
<Icon
|
|
||||||
className={`w-6 h-6 ${iconColorClasses[content.type]} flex-shrink-0 mt-0.5`}
|
|
||||||
/>
|
|
||||||
<div className="flex-1">
|
|
||||||
<h3
|
|
||||||
className={`text-base font-semibold ${textColorClasses[content.type]} mb-2`}
|
|
||||||
>
|
|
||||||
{content.title}
|
|
||||||
</h3>
|
|
||||||
<p
|
|
||||||
className={`text-sm ${descColorClasses[content.type]} mb-3`}
|
|
||||||
>
|
|
||||||
{content.description}
|
|
||||||
</p>
|
|
||||||
{content.items && content.items.length > 0 && (
|
|
||||||
<ul
|
|
||||||
className={`list-disc list-inside text-sm ${listColorClasses[content.type]} space-y-1`}
|
|
||||||
>
|
|
||||||
{content.items.map((item, index) => (
|
|
||||||
<li
|
|
||||||
key={index}
|
|
||||||
className="pl-2"
|
|
||||||
dangerouslySetInnerHTML={{
|
|
||||||
__html: item.replace(
|
|
||||||
/\*\*(.*?)\*\*/g,
|
|
||||||
"<strong>$1</strong>",
|
|
||||||
),
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})()}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
54
src/components/WorkflowStepper/StepCircle.tsx
Normal file
54
src/components/WorkflowStepper/StepCircle.tsx
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
/**
|
||||||
|
* StepCircle Component
|
||||||
|
*
|
||||||
|
* Renders a circular step indicator with number or checkmark icon
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { forwardRef } from "react";
|
||||||
|
import { CheckCircleIcon } from "@heroicons/react/24/solid";
|
||||||
|
|
||||||
|
export interface StepCircleProps {
|
||||||
|
stepId: number;
|
||||||
|
label: string;
|
||||||
|
isComplete: boolean;
|
||||||
|
isCurrent: boolean;
|
||||||
|
isUpcoming: boolean;
|
||||||
|
showPopover: boolean;
|
||||||
|
onClick: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const StepCircle = forwardRef<HTMLDivElement, StepCircleProps>(
|
||||||
|
(
|
||||||
|
{ stepId, label, isComplete, isCurrent, isUpcoming, showPopover, onClick },
|
||||||
|
ref,
|
||||||
|
) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
onClick={onClick}
|
||||||
|
className={`
|
||||||
|
w-8 h-8 lg:w-10 lg:h-10 rounded-full flex items-center justify-center font-bold text-xs transition-all duration-300 border-2 shadow-md
|
||||||
|
${stepId <= (isCurrent ? stepId : isComplete ? stepId : stepId - 1) ? "cursor-pointer hover:scale-110" : "cursor-not-allowed"}
|
||||||
|
${isComplete ? "bg-success-500 dark:bg-success-600 border-success-400 dark:border-success-500 text-white shadow-success-500/30 dark:shadow-success-600/30" : ""}
|
||||||
|
${isCurrent ? "bg-primary-600 dark:bg-primary-700 border-primary-500 dark:border-primary-600 text-white scale-105 lg:scale-110 shadow-primary-600/40 dark:shadow-primary-700/40 ring-2 ring-primary-300 dark:ring-primary-500 ring-offset-2 dark:ring-offset-gray-900" : ""}
|
||||||
|
${isUpcoming ? "bg-primary-700 dark:bg-primary-800 border-primary-500/30 dark:border-primary-600/30 text-primary-200/70 dark:text-primary-300/70" : ""}
|
||||||
|
${showPopover ? "ring-4 ring-white dark:ring-gray-800" : ""}
|
||||||
|
`}
|
||||||
|
aria-label={`${label}: ${isComplete ? "completed" : isCurrent ? "current" : "upcoming"}. Click for details.`}
|
||||||
|
role="button"
|
||||||
|
tabIndex={isComplete || isCurrent ? 0 : -1}
|
||||||
|
>
|
||||||
|
{isComplete ? (
|
||||||
|
<CheckCircleIcon
|
||||||
|
className="w-5 h-5 lg:w-6 lg:h-6"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
stepId
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
StepCircle.displayName = "StepCircle";
|
||||||
29
src/components/WorkflowStepper/StepLabel.tsx
Normal file
29
src/components/WorkflowStepper/StepLabel.tsx
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
/**
|
||||||
|
* StepLabel Component
|
||||||
|
*
|
||||||
|
* Renders the text label below each step circle
|
||||||
|
*/
|
||||||
|
|
||||||
|
export interface StepLabelProps {
|
||||||
|
label: string;
|
||||||
|
isCurrent: boolean;
|
||||||
|
isComplete: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function StepLabel({ label, isCurrent, isComplete }: StepLabelProps) {
|
||||||
|
return (
|
||||||
|
<div className="mt-1 lg:mt-2 text-center">
|
||||||
|
<div
|
||||||
|
className={`text-xs font-semibold leading-tight ${
|
||||||
|
isCurrent
|
||||||
|
? "text-white"
|
||||||
|
: isComplete
|
||||||
|
? "text-success-200 dark:text-success-300"
|
||||||
|
: "text-primary-300/70 dark:text-primary-400/70"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
123
src/components/WorkflowStepper/StepPopover.tsx
Normal file
123
src/components/WorkflowStepper/StepPopover.tsx
Normal file
|
|
@ -0,0 +1,123 @@
|
||||||
|
/**
|
||||||
|
* StepPopover Component
|
||||||
|
*
|
||||||
|
* Renders the guidance popover with dynamic content based on step and machine status
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { forwardRef } from "react";
|
||||||
|
import {
|
||||||
|
InformationCircleIcon,
|
||||||
|
ExclamationTriangleIcon,
|
||||||
|
} from "@heroicons/react/24/solid";
|
||||||
|
import { MachineStatus } from "../../types/machine";
|
||||||
|
import { getGuideContent } from "../../utils/workflowGuideContent";
|
||||||
|
|
||||||
|
export interface StepPopoverProps {
|
||||||
|
stepId: number;
|
||||||
|
machineStatus: MachineStatus;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const StepPopover = forwardRef<HTMLDivElement, StepPopoverProps>(
|
||||||
|
({ stepId, machineStatus }, ref) => {
|
||||||
|
const content = getGuideContent(stepId, machineStatus);
|
||||||
|
if (!content) return null;
|
||||||
|
|
||||||
|
const colorClasses = {
|
||||||
|
info: "bg-info-50 dark:bg-info-900/95 border-info-600 dark:border-info-500",
|
||||||
|
success:
|
||||||
|
"bg-success-50 dark:bg-success-900/95 border-success-600 dark:border-success-500",
|
||||||
|
warning:
|
||||||
|
"bg-warning-50 dark:bg-warning-900/95 border-warning-600 dark:border-warning-500",
|
||||||
|
error:
|
||||||
|
"bg-danger-50 dark:bg-danger-900/95 border-danger-600 dark:border-danger-500",
|
||||||
|
progress:
|
||||||
|
"bg-info-50 dark:bg-info-900/95 border-info-600 dark:border-info-500",
|
||||||
|
};
|
||||||
|
|
||||||
|
const iconColorClasses = {
|
||||||
|
info: "text-info-600 dark:text-info-400",
|
||||||
|
success: "text-success-600 dark:text-success-400",
|
||||||
|
warning: "text-warning-600 dark:text-warning-400",
|
||||||
|
error: "text-danger-600 dark:text-danger-400",
|
||||||
|
progress: "text-info-600 dark:text-info-400",
|
||||||
|
};
|
||||||
|
|
||||||
|
const textColorClasses = {
|
||||||
|
info: "text-info-900 dark:text-info-200",
|
||||||
|
success: "text-success-900 dark:text-success-200",
|
||||||
|
warning: "text-warning-900 dark:text-warning-200",
|
||||||
|
error: "text-danger-900 dark:text-danger-200",
|
||||||
|
progress: "text-info-900 dark:text-info-200",
|
||||||
|
};
|
||||||
|
|
||||||
|
const descColorClasses = {
|
||||||
|
info: "text-info-800 dark:text-info-300",
|
||||||
|
success: "text-success-800 dark:text-success-300",
|
||||||
|
warning: "text-warning-800 dark:text-warning-300",
|
||||||
|
error: "text-danger-800 dark:text-danger-300",
|
||||||
|
progress: "text-info-800 dark:text-info-300",
|
||||||
|
};
|
||||||
|
|
||||||
|
const listColorClasses = {
|
||||||
|
info: "text-blue-700 dark:text-blue-300",
|
||||||
|
success: "text-green-700 dark:text-green-300",
|
||||||
|
warning: "text-yellow-700 dark:text-yellow-300",
|
||||||
|
error: "text-red-700 dark:text-red-300",
|
||||||
|
progress: "text-cyan-700 dark:text-cyan-300",
|
||||||
|
};
|
||||||
|
|
||||||
|
const Icon =
|
||||||
|
content.type === "warning"
|
||||||
|
? ExclamationTriangleIcon
|
||||||
|
: InformationCircleIcon;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className="absolute top-full mt-4 left-1/2 transform -translate-x-1/2 w-full max-w-xl z-50 animate-fadeIn"
|
||||||
|
role="dialog"
|
||||||
|
aria-label="Step guidance"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`${colorClasses[content.type]} border-l-4 p-4 rounded-lg shadow-xl backdrop-blur-sm`}
|
||||||
|
>
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<Icon
|
||||||
|
className={`w-6 h-6 ${iconColorClasses[content.type]} flex-shrink-0 mt-0.5`}
|
||||||
|
/>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3
|
||||||
|
className={`text-base font-semibold ${textColorClasses[content.type]} mb-2`}
|
||||||
|
>
|
||||||
|
{content.title}
|
||||||
|
</h3>
|
||||||
|
<p className={`text-sm ${descColorClasses[content.type]} mb-3`}>
|
||||||
|
{content.description}
|
||||||
|
</p>
|
||||||
|
{content.items && content.items.length > 0 && (
|
||||||
|
<ul
|
||||||
|
className={`list-disc list-inside text-sm ${listColorClasses[content.type]} space-y-1`}
|
||||||
|
>
|
||||||
|
{content.items.map((item, index) => (
|
||||||
|
<li
|
||||||
|
key={index}
|
||||||
|
className="pl-2"
|
||||||
|
dangerouslySetInnerHTML={{
|
||||||
|
__html: item.replace(
|
||||||
|
/\*\*(.*?)\*\*/g,
|
||||||
|
"<strong>$1</strong>",
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
StepPopover.displayName = "StepPopover";
|
||||||
141
src/components/WorkflowStepper/WorkflowStepper.tsx
Normal file
141
src/components/WorkflowStepper/WorkflowStepper.tsx
Normal file
|
|
@ -0,0 +1,141 @@
|
||||||
|
/**
|
||||||
|
* WorkflowStepper Component
|
||||||
|
*
|
||||||
|
* Displays the 8-step embroidery workflow with progress tracking and contextual guidance
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useState, useRef } from "react";
|
||||||
|
import { useClickOutside } from "@/hooks";
|
||||||
|
import { useShallow } from "zustand/react/shallow";
|
||||||
|
import { useMachineStore, usePatternUploaded } from "../../stores/useMachineStore";
|
||||||
|
import { usePatternStore } from "../../stores/usePatternStore";
|
||||||
|
import { WORKFLOW_STEPS } from "../../constants/workflowSteps";
|
||||||
|
import { getCurrentStep } from "../../utils/workflowStepCalculation";
|
||||||
|
import { StepCircle } from "./StepCircle";
|
||||||
|
import { StepLabel } from "./StepLabel";
|
||||||
|
import { StepPopover } from "./StepPopover";
|
||||||
|
|
||||||
|
export function WorkflowStepper() {
|
||||||
|
// Machine store
|
||||||
|
const { machineStatus, isConnected } = useMachineStore(
|
||||||
|
useShallow((state) => ({
|
||||||
|
machineStatus: state.machineStatus,
|
||||||
|
isConnected: state.isConnected,
|
||||||
|
})),
|
||||||
|
);
|
||||||
|
|
||||||
|
// Pattern store
|
||||||
|
const { pesData } = usePatternStore(
|
||||||
|
useShallow((state) => ({
|
||||||
|
pesData: state.pesData,
|
||||||
|
})),
|
||||||
|
);
|
||||||
|
|
||||||
|
// Derived state: pattern is uploaded if machine has pattern info
|
||||||
|
const patternUploaded = usePatternUploaded();
|
||||||
|
const hasPattern = pesData !== null;
|
||||||
|
const currentStep = getCurrentStep(
|
||||||
|
machineStatus,
|
||||||
|
isConnected,
|
||||||
|
hasPattern,
|
||||||
|
patternUploaded,
|
||||||
|
);
|
||||||
|
const [showPopover, setShowPopover] = useState(false);
|
||||||
|
const [popoverStep, setPopoverStep] = useState<number | null>(null);
|
||||||
|
const popoverRef = useRef<HTMLDivElement>(null);
|
||||||
|
const stepRefs = useRef<{ [key: number]: HTMLDivElement | null }>({});
|
||||||
|
|
||||||
|
// Close popover when clicking outside (exclude step circles)
|
||||||
|
useClickOutside<HTMLDivElement>(popoverRef, () => setShowPopover(false), {
|
||||||
|
enabled: showPopover,
|
||||||
|
excludeRefs: [stepRefs],
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleStepClick = (stepId: number) => {
|
||||||
|
// Only allow clicking on current step or earlier completed steps
|
||||||
|
if (stepId <= currentStep) {
|
||||||
|
if (showPopover && popoverStep === stepId) {
|
||||||
|
setShowPopover(false);
|
||||||
|
setPopoverStep(null);
|
||||||
|
} else {
|
||||||
|
setPopoverStep(stepId);
|
||||||
|
setShowPopover(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="relative max-w-5xl mx-auto mt-2 lg:mt-4"
|
||||||
|
role="navigation"
|
||||||
|
aria-label="Workflow progress"
|
||||||
|
>
|
||||||
|
{/* Progress bar background */}
|
||||||
|
<div
|
||||||
|
className="absolute top-4 lg:top-5 left-0 right-0 h-0.5 lg:h-1 bg-primary-400/20 dark:bg-primary-600/20 rounded-full"
|
||||||
|
style={{ left: "16px", right: "16px" }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Progress bar fill */}
|
||||||
|
<div
|
||||||
|
className="absolute top-4 lg:top-5 left-0 h-0.5 lg:h-1 bg-gradient-to-r from-success-500 to-primary-500 dark:from-success-600 dark:to-primary-600 transition-all duration-500 rounded-full"
|
||||||
|
style={{
|
||||||
|
left: "16px",
|
||||||
|
width: `calc(${((currentStep - 1) / (WORKFLOW_STEPS.length - 1)) * 100}% - 16px)`,
|
||||||
|
}}
|
||||||
|
role="progressbar"
|
||||||
|
aria-valuenow={currentStep}
|
||||||
|
aria-valuemin={1}
|
||||||
|
aria-valuemax={WORKFLOW_STEPS.length}
|
||||||
|
aria-label={`Step ${currentStep} of ${WORKFLOW_STEPS.length}`}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Steps */}
|
||||||
|
<div className="flex justify-between relative">
|
||||||
|
{WORKFLOW_STEPS.map((step) => {
|
||||||
|
const isComplete = step.id < currentStep;
|
||||||
|
const isCurrent = step.id === currentStep;
|
||||||
|
const isUpcoming = step.id > currentStep;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={step.id}
|
||||||
|
className="flex flex-col items-center"
|
||||||
|
style={{ flex: 1 }}
|
||||||
|
role="listitem"
|
||||||
|
aria-current={isCurrent ? "step" : undefined}
|
||||||
|
>
|
||||||
|
<StepCircle
|
||||||
|
ref={(el: HTMLDivElement | null) => {
|
||||||
|
stepRefs.current[step.id] = el;
|
||||||
|
}}
|
||||||
|
stepId={step.id}
|
||||||
|
label={step.label}
|
||||||
|
isComplete={isComplete}
|
||||||
|
isCurrent={isCurrent}
|
||||||
|
isUpcoming={isUpcoming}
|
||||||
|
showPopover={showPopover && popoverStep === step.id}
|
||||||
|
onClick={() => handleStepClick(step.id)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<StepLabel
|
||||||
|
label={step.label}
|
||||||
|
isCurrent={isCurrent}
|
||||||
|
isComplete={isComplete}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Popover */}
|
||||||
|
{showPopover && popoverStep !== null && (
|
||||||
|
<StepPopover
|
||||||
|
ref={popoverRef}
|
||||||
|
stepId={popoverStep}
|
||||||
|
machineStatus={machineStatus}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
5
src/components/WorkflowStepper/index.ts
Normal file
5
src/components/WorkflowStepper/index.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
/**
|
||||||
|
* WorkflowStepper component barrel export
|
||||||
|
*/
|
||||||
|
|
||||||
|
export { WorkflowStepper } from "./WorkflowStepper";
|
||||||
20
src/constants/workflowSteps.ts
Normal file
20
src/constants/workflowSteps.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
/**
|
||||||
|
* Workflow step definitions for the embroidery process
|
||||||
|
*/
|
||||||
|
|
||||||
|
export interface WorkflowStep {
|
||||||
|
id: number;
|
||||||
|
label: string;
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const WORKFLOW_STEPS: readonly WorkflowStep[] = [
|
||||||
|
{ id: 1, label: "Connect", description: "Connect to machine" },
|
||||||
|
{ id: 2, label: "Home Machine", description: "Initialize hoop position" },
|
||||||
|
{ id: 3, label: "Load Pattern", description: "Choose PES file" },
|
||||||
|
{ id: 4, label: "Upload", description: "Upload to machine" },
|
||||||
|
{ id: 5, label: "Mask Trace", description: "Trace pattern area" },
|
||||||
|
{ id: 6, label: "Start Sewing", description: "Begin embroidery" },
|
||||||
|
{ id: 7, label: "Monitor", description: "Watch progress" },
|
||||||
|
{ id: 8, label: "Complete", description: "Finish and remove" },
|
||||||
|
] as const;
|
||||||
195
src/utils/workflowGuideContent.ts
Normal file
195
src/utils/workflowGuideContent.ts
Normal file
|
|
@ -0,0 +1,195 @@
|
||||||
|
/**
|
||||||
|
* Workflow step guide content
|
||||||
|
*
|
||||||
|
* Provides contextual guidance for each workflow step based on machine state
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { MachineStatus } from "../types/machine";
|
||||||
|
|
||||||
|
export interface GuideContent {
|
||||||
|
type: "info" | "warning" | "success" | "error" | "progress";
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
items: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get guide content for a specific workflow step
|
||||||
|
*
|
||||||
|
* @param stepId - The workflow step ID (1-8)
|
||||||
|
* @param machineStatus - Current machine status for dynamic content
|
||||||
|
* @returns Guide content with type, title, description, and items
|
||||||
|
*/
|
||||||
|
export function getGuideContent(
|
||||||
|
stepId: number,
|
||||||
|
machineStatus: MachineStatus,
|
||||||
|
): GuideContent | null {
|
||||||
|
switch (stepId) {
|
||||||
|
case 1:
|
||||||
|
return {
|
||||||
|
type: "info",
|
||||||
|
title: "Step 1: Connect to Machine",
|
||||||
|
description:
|
||||||
|
"To get started, connect to your Brother embroidery machine via Bluetooth.",
|
||||||
|
items: [
|
||||||
|
"Make sure your machine is powered on",
|
||||||
|
"Enable Bluetooth on your machine",
|
||||||
|
'Click the "Connect to Machine" button below',
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
case 2:
|
||||||
|
return {
|
||||||
|
type: "info",
|
||||||
|
title: "Step 2: Home Machine",
|
||||||
|
description:
|
||||||
|
"The hoop needs to be removed and an initial homing procedure must be performed.",
|
||||||
|
items: [
|
||||||
|
"Remove the embroidery hoop from the machine completely",
|
||||||
|
"Press the Accept button on the machine",
|
||||||
|
"Wait for the machine to complete its initialization (homing)",
|
||||||
|
"Once initialization is complete, reattach the hoop",
|
||||||
|
"The machine should now recognize the hoop correctly",
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
case 3:
|
||||||
|
return {
|
||||||
|
type: "info",
|
||||||
|
title: "Step 3: Load Your Pattern",
|
||||||
|
description:
|
||||||
|
"Choose a PES embroidery file from your computer to preview and upload.",
|
||||||
|
items: [
|
||||||
|
'Click "Choose PES File" in the Pattern File section',
|
||||||
|
"Select your embroidery design (.pes file)",
|
||||||
|
"Review the pattern preview on the right",
|
||||||
|
"You can drag the pattern to adjust its position",
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
case 4:
|
||||||
|
return {
|
||||||
|
type: "info",
|
||||||
|
title: "Step 4: Upload Pattern to Machine",
|
||||||
|
description:
|
||||||
|
"Send your pattern to the embroidery machine to prepare for sewing.",
|
||||||
|
items: [
|
||||||
|
"Review the pattern preview to ensure it's positioned correctly",
|
||||||
|
"Check the pattern size matches your hoop",
|
||||||
|
'Click "Upload to Machine" when ready',
|
||||||
|
"Wait for the upload to complete (this may take a minute)",
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
case 5:
|
||||||
|
// Check machine status for substates
|
||||||
|
if (machineStatus === MachineStatus.MASK_TRACE_LOCK_WAIT) {
|
||||||
|
return {
|
||||||
|
type: "warning",
|
||||||
|
title: "Machine Action Required",
|
||||||
|
description: "The machine is ready to trace the pattern outline.",
|
||||||
|
items: [
|
||||||
|
"Press the button on your machine to confirm and start the mask trace",
|
||||||
|
"Ensure the hoop is properly attached",
|
||||||
|
"Make sure the needle area is clear",
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (machineStatus === MachineStatus.MASK_TRACING) {
|
||||||
|
return {
|
||||||
|
type: "progress",
|
||||||
|
title: "Mask Trace In Progress",
|
||||||
|
description:
|
||||||
|
"The machine is tracing the pattern boundary. Please wait...",
|
||||||
|
items: [
|
||||||
|
"Watch the machine trace the outline",
|
||||||
|
"Verify the pattern fits within your hoop",
|
||||||
|
"Do not interrupt the machine",
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
type: "info",
|
||||||
|
title: "Step 5: Start Mask Trace",
|
||||||
|
description:
|
||||||
|
"The mask trace helps the machine understand the pattern boundaries.",
|
||||||
|
items: [
|
||||||
|
'Click "Start Mask Trace" button in the Sewing Progress section',
|
||||||
|
"The machine will trace the pattern outline",
|
||||||
|
"This ensures the hoop is positioned correctly",
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
case 6:
|
||||||
|
return {
|
||||||
|
type: "success",
|
||||||
|
title: "Step 6: Ready to Sew!",
|
||||||
|
description: "The machine is ready to begin embroidering your pattern.",
|
||||||
|
items: [
|
||||||
|
"Verify your thread colors are correct",
|
||||||
|
"Ensure the fabric is properly hooped",
|
||||||
|
'Click "Start Sewing" when ready',
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
case 7:
|
||||||
|
// Check for substates
|
||||||
|
if (machineStatus === MachineStatus.COLOR_CHANGE_WAIT) {
|
||||||
|
return {
|
||||||
|
type: "warning",
|
||||||
|
title: "Thread Change Required",
|
||||||
|
description:
|
||||||
|
"The machine needs a different thread color to continue.",
|
||||||
|
items: [
|
||||||
|
"Check the color blocks section to see which thread is needed",
|
||||||
|
"Change to the correct thread color",
|
||||||
|
"Press the button on your machine to resume sewing",
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
machineStatus === MachineStatus.PAUSE ||
|
||||||
|
machineStatus === MachineStatus.STOP ||
|
||||||
|
machineStatus === MachineStatus.SEWING_INTERRUPTION
|
||||||
|
) {
|
||||||
|
return {
|
||||||
|
type: "warning",
|
||||||
|
title: "Sewing Paused",
|
||||||
|
description: "The embroidery has been paused or interrupted.",
|
||||||
|
items: [
|
||||||
|
"Check if everything is okay with the machine",
|
||||||
|
'Click "Resume Sewing" when ready to continue',
|
||||||
|
"The machine will pick up where it left off",
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
type: "progress",
|
||||||
|
title: "Step 7: Sewing In Progress",
|
||||||
|
description:
|
||||||
|
"Your embroidery is being stitched. Monitor the progress below.",
|
||||||
|
items: [
|
||||||
|
"Watch the progress bar and current stitch count",
|
||||||
|
"The machine will pause when a color change is needed",
|
||||||
|
"Do not leave the machine unattended",
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
case 8:
|
||||||
|
return {
|
||||||
|
type: "success",
|
||||||
|
title: "Step 8: Embroidery Complete!",
|
||||||
|
description: "Your embroidery is finished. Great work!",
|
||||||
|
items: [
|
||||||
|
"Remove the hoop from the machine",
|
||||||
|
"Press the Accept button on the machine",
|
||||||
|
"Carefully remove your finished embroidery",
|
||||||
|
"Trim any jump stitches or loose threads",
|
||||||
|
'Click "Delete Pattern" to start a new project',
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
56
src/utils/workflowStepCalculation.ts
Normal file
56
src/utils/workflowStepCalculation.ts
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
/**
|
||||||
|
* Workflow step calculation utilities
|
||||||
|
*
|
||||||
|
* Determines the current workflow step based on machine state and pattern status
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { MachineStatus } from "../types/machine";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Calculate the current workflow step based on machine state
|
||||||
|
*
|
||||||
|
* @param machineStatus - Current machine status
|
||||||
|
* @param isConnected - Whether machine is connected
|
||||||
|
* @param hasPattern - Whether a pattern is loaded
|
||||||
|
* @param patternUploaded - Whether pattern has been uploaded to machine
|
||||||
|
* @returns Current step number (1-8)
|
||||||
|
*/
|
||||||
|
export function getCurrentStep(
|
||||||
|
machineStatus: MachineStatus,
|
||||||
|
isConnected: boolean,
|
||||||
|
hasPattern: boolean,
|
||||||
|
patternUploaded: boolean,
|
||||||
|
): number {
|
||||||
|
if (!isConnected) return 1;
|
||||||
|
|
||||||
|
// Check if machine needs homing (Initial state)
|
||||||
|
if (machineStatus === MachineStatus.Initial) return 2;
|
||||||
|
|
||||||
|
if (!hasPattern) return 3;
|
||||||
|
if (!patternUploaded) return 4;
|
||||||
|
|
||||||
|
// After upload, determine step based on machine status
|
||||||
|
switch (machineStatus) {
|
||||||
|
case MachineStatus.IDLE:
|
||||||
|
case MachineStatus.MASK_TRACE_LOCK_WAIT:
|
||||||
|
case MachineStatus.MASK_TRACING:
|
||||||
|
return 5;
|
||||||
|
|
||||||
|
case MachineStatus.MASK_TRACE_COMPLETE:
|
||||||
|
case MachineStatus.SEWING_WAIT:
|
||||||
|
return 6;
|
||||||
|
|
||||||
|
case MachineStatus.SEWING:
|
||||||
|
case MachineStatus.COLOR_CHANGE_WAIT:
|
||||||
|
case MachineStatus.PAUSE:
|
||||||
|
case MachineStatus.STOP:
|
||||||
|
case MachineStatus.SEWING_INTERRUPTION:
|
||||||
|
return 7;
|
||||||
|
|
||||||
|
case MachineStatus.SEWING_COMPLETE:
|
||||||
|
return 8;
|
||||||
|
|
||||||
|
default:
|
||||||
|
return 5;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue