refactor: Decentralize data fetching and add axis initialization
Refactor data fetching architecture from centralized App state to component-local data management for improved maintainability and data freshness guarantees. Changes: - SettingsModal: Fetch config data on modal open - RecipePanel: Fetch recipe list on panel open - IOMonitorPage: Fetch IO list on page mount with real-time updates - Remove unnecessary props drilling through component hierarchy - Simplify App.tsx by removing centralized config/recipes state New feature: - Add InitializeModal for sequential axis initialization (X, Y, Z) - Each axis initializes with 3-second staggered start - Progress bar animation for each axis - Auto-close on completion 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
181
frontend/components/InitializeModal.tsx
Normal file
181
frontend/components/InitializeModal.tsx
Normal file
@@ -0,0 +1,181 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Target, CheckCircle2, Loader2 } from 'lucide-react';
|
||||
import { TechButton } from './common/TechButton';
|
||||
|
||||
interface InitializeModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
type AxisStatus = 'pending' | 'initializing' | 'completed';
|
||||
|
||||
interface AxisState {
|
||||
name: string;
|
||||
status: AxisStatus;
|
||||
progress: number;
|
||||
}
|
||||
|
||||
export const InitializeModal: React.FC<InitializeModalProps> = ({ isOpen, onClose }) => {
|
||||
const [axes, setAxes] = useState<AxisState[]>([
|
||||
{ name: 'X-Axis', status: 'pending', progress: 0 },
|
||||
{ name: 'Y-Axis', status: 'pending', progress: 0 },
|
||||
{ name: 'Z-Axis', status: 'pending', progress: 0 },
|
||||
]);
|
||||
const [isInitializing, setIsInitializing] = useState(false);
|
||||
|
||||
// Reset state when modal closes
|
||||
useEffect(() => {
|
||||
if (!isOpen) {
|
||||
setAxes([
|
||||
{ name: 'X-Axis', status: 'pending', progress: 0 },
|
||||
{ name: 'Y-Axis', status: 'pending', progress: 0 },
|
||||
{ name: 'Z-Axis', status: 'pending', progress: 0 },
|
||||
]);
|
||||
setIsInitializing(false);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const startInitialization = () => {
|
||||
setIsInitializing(true);
|
||||
|
||||
// Initialize each axis with 3 second delay between them
|
||||
axes.forEach((axis, index) => {
|
||||
const delay = index * 3000; // 0s, 3s, 6s
|
||||
|
||||
// Start initialization after delay
|
||||
setTimeout(() => {
|
||||
setAxes(prev => {
|
||||
const next = [...prev];
|
||||
next[index] = { ...next[index], status: 'initializing', progress: 0 };
|
||||
return next;
|
||||
});
|
||||
|
||||
// Progress animation (3 seconds)
|
||||
const startTime = Date.now();
|
||||
const duration = 3000;
|
||||
const interval = setInterval(() => {
|
||||
const elapsed = Date.now() - startTime;
|
||||
const progress = Math.min((elapsed / duration) * 100, 100);
|
||||
|
||||
setAxes(prev => {
|
||||
const next = [...prev];
|
||||
next[index] = { ...next[index], progress };
|
||||
return next;
|
||||
});
|
||||
|
||||
if (progress >= 100) {
|
||||
clearInterval(interval);
|
||||
setAxes(prev => {
|
||||
const next = [...prev];
|
||||
next[index] = { ...next[index], status: 'completed', progress: 100 };
|
||||
return next;
|
||||
});
|
||||
|
||||
// Check if all axes are completed
|
||||
setAxes(prev => {
|
||||
if (prev.every(a => a.status === 'completed')) {
|
||||
// Auto close after 500ms
|
||||
setTimeout(() => {
|
||||
onClose();
|
||||
}, 500);
|
||||
}
|
||||
return prev;
|
||||
});
|
||||
}
|
||||
}, 50);
|
||||
}, delay);
|
||||
});
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const allCompleted = axes.every(a => a.status === 'completed');
|
||||
|
||||
return (
|
||||
<div className="absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
|
||||
<div className="w-[600px] glass-holo p-8 border border-neon-blue shadow-glow-blue relative flex flex-col">
|
||||
<button
|
||||
onClick={onClose}
|
||||
disabled={isInitializing}
|
||||
className="absolute top-4 right-4 text-slate-400 hover:text-white disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
|
||||
<h2 className="text-2xl font-tech font-bold text-neon-blue mb-8 border-b border-white/10 pb-4 flex items-center gap-3">
|
||||
<Target className="animate-pulse" /> AXIS INITIALIZATION
|
||||
</h2>
|
||||
|
||||
<div className="space-y-6 mb-8">
|
||||
{axes.map((axis, index) => (
|
||||
<div key={axis.name} className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
{axis.status === 'completed' ? (
|
||||
<CheckCircle2 className="w-5 h-5 text-neon-green" />
|
||||
) : axis.status === 'initializing' ? (
|
||||
<Loader2 className="w-5 h-5 text-neon-blue animate-spin" />
|
||||
) : (
|
||||
<div className="w-5 h-5 border-2 border-slate-600 rounded-full" />
|
||||
)}
|
||||
<span className="font-tech font-bold text-lg text-white tracking-wider">
|
||||
{axis.name}
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
className={`font-mono text-sm font-bold ${
|
||||
axis.status === 'completed'
|
||||
? 'text-neon-green'
|
||||
: axis.status === 'initializing'
|
||||
? 'text-neon-blue'
|
||||
: 'text-slate-500'
|
||||
}`}
|
||||
>
|
||||
{axis.status === 'completed'
|
||||
? 'COMPLETED'
|
||||
: axis.status === 'initializing'
|
||||
? `${Math.round(axis.progress)}%`
|
||||
: 'WAITING'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="h-3 bg-black/50 border border-slate-700 overflow-hidden">
|
||||
<div
|
||||
className={`h-full transition-all duration-100 ${
|
||||
axis.status === 'completed'
|
||||
? 'bg-neon-green shadow-[0_0_10px_rgba(10,255,0,0.5)]'
|
||||
: 'bg-neon-blue shadow-[0_0_10px_rgba(0,243,255,0.5)]'
|
||||
}`}
|
||||
style={{ width: `${axis.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{allCompleted && (
|
||||
<div className="mb-6 p-4 bg-neon-green/10 border border-neon-green rounded text-center">
|
||||
<span className="font-tech font-bold text-neon-green tracking-wider">
|
||||
✓ ALL AXES INITIALIZED SUCCESSFULLY
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-4">
|
||||
<TechButton onClick={onClose} disabled={isInitializing}>
|
||||
CANCEL
|
||||
</TechButton>
|
||||
<TechButton
|
||||
variant="blue"
|
||||
active
|
||||
onClick={startInitialization}
|
||||
disabled={isInitializing || allCompleted}
|
||||
>
|
||||
{isInitializing ? 'INITIALIZING...' : 'START INITIALIZATION'}
|
||||
</TechButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user