arDTDev
6219c4c60e
- Add VisionMenu component with Camera (QRCode) and Barcode (Keyence) submenus - Remove old CameraPanel component and replace with dropdown menu structure - Add ProcessedDataPanel to display processed data in bottom dock (5 rows visible) - Create SystemStatusPanel component with horizontal button layout (START/STOP/RESET) - Create EventLogPanel component for better code organization - Add device initialization feature with 7-axis progress tracking - Add GetProcessedData and GetInitializeStatus backend methods - Update Header menu layout to vertical (icon on top, text below) for more space - Update HomePage layout with bottom-docked ProcessedDataPanel - Refactor HomePage to use new modular components 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
54 lines
2.1 KiB
TypeScript
54 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { Play, Square, RotateCw } from 'lucide-react';
|
|
import { TechButton } from './common/TechButton';
|
|
import { CyberPanel } from './common/CyberPanel';
|
|
import { SystemState } from '../types';
|
|
|
|
interface SystemStatusPanelProps {
|
|
systemState: SystemState;
|
|
onControl: (action: 'start' | 'stop' | 'reset') => void;
|
|
}
|
|
|
|
export const SystemStatusPanel: React.FC<SystemStatusPanelProps> = ({
|
|
systemState,
|
|
onControl
|
|
}) => {
|
|
return (
|
|
<CyberPanel className="flex-none">
|
|
<div className="mb-3 text-xs text-neon-blue font-bold tracking-widest uppercase">System Status</div>
|
|
<div className={`text-2xl font-tech font-bold mb-4 ${systemState === SystemState.RUNNING ? 'text-neon-green text-shadow-glow-green' : 'text-slate-400'}`}>
|
|
{systemState}
|
|
</div>
|
|
|
|
{/* Horizontal Button Layout */}
|
|
<div className="grid grid-cols-3 gap-2">
|
|
<TechButton
|
|
variant="green"
|
|
className="flex flex-col items-center justify-center gap-1 h-20"
|
|
active={systemState === SystemState.RUNNING}
|
|
onClick={() => onControl('start')}
|
|
>
|
|
<Play className="w-5 h-5" />
|
|
<span className="text-xs">START</span>
|
|
</TechButton>
|
|
<TechButton
|
|
variant="amber"
|
|
className="flex flex-col items-center justify-center gap-1 h-20"
|
|
active={systemState === SystemState.PAUSED}
|
|
onClick={() => onControl('stop')}
|
|
>
|
|
<Square className="w-5 h-5 fill-current" />
|
|
<span className="text-xs">STOP</span>
|
|
</TechButton>
|
|
<TechButton
|
|
className="flex flex-col items-center justify-center gap-1 h-20"
|
|
onClick={() => onControl('reset')}
|
|
>
|
|
<RotateCw className="w-5 h-5" />
|
|
<span className="text-xs">RESET</span>
|
|
</TechButton>
|
|
</div>
|
|
</CyberPanel>
|
|
);
|
|
};
|