feat: Implement manual print dialog with full label printing functionality

Added complete manual print dialog to Web UI based on fManualPrint.cs:
- Created ManualPrintDialog component with all input fields (SID, Vendor Lot, Qty, MFG Date, Reel ID, Supplier, Part No)
- Added printer selection (Left/Right), print count, delete after print checkbox, and barcode input
- Implemented ExecuteManualPrint backend method with ZPL label generation and printer integration
- Added WebSocketServer handler for EXECUTE_MANUAL_PRINT command with full parameter support
- Integrated dialog into Header component with proper error handling via AlertContext

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-25 23:48:18 +09:00
parent 8bbd76e670
commit bb67d04d90
5 changed files with 334 additions and 13 deletions

View File

@@ -3,6 +3,7 @@ import { useNavigate, useLocation } from 'react-router-dom';
import { Activity, Settings, Move, Camera, Layers, Cpu, Target, Lightbulb, Printer, XCircle, Package, BookOpen } from 'lucide-react';
import { VisionMenu } from '../VisionMenu';
import { FunctionMenu } from '../FunctionMenu';
import { ManualPrintDialog, PrintData } from '../ManualPrintDialog';
import { comms } from '../../communication';
import { useAlert } from '../../contexts/AlertContext';
@@ -18,6 +19,7 @@ export const Header: React.FC<HeaderProps> = ({ currentTime, onTabChange, active
const location = useLocation();
const [showVisionMenu, setShowVisionMenu] = useState(false);
const [showFunctionMenu, setShowFunctionMenu] = useState(false);
const [showManualPrintDialog, setShowManualPrintDialog] = useState(false);
const { showAlert } = useAlert();
const isWebView = typeof window !== 'undefined' && !!window.chrome?.webview;
@@ -47,10 +49,23 @@ export const Header: React.FC<HeaderProps> = ({ currentTime, onTabChange, active
}
};
const handleManualPrint = async (printData: PrintData): Promise<{ success: boolean; message: string }> => {
try {
const result = await comms.executeManualPrint(printData);
return result;
} catch (error: any) {
return {
success: false,
message: error.message || 'Unknown error'
};
}
};
return (
<>
<VisionMenu isOpen={showVisionMenu} onClose={() => setShowVisionMenu(false)} />
<FunctionMenu isOpen={showFunctionMenu} onClose={() => setShowFunctionMenu(false)} />
<ManualPrintDialog isOpen={showManualPrintDialog} onClose={() => setShowManualPrintDialog(false)} onPrint={handleManualPrint} />
<header className="absolute top-0 left-0 right-0 h-20 px-6 flex items-center justify-between z-40 bg-gradient-to-b from-black/80 to-transparent pointer-events-none">
<div
className="flex items-center gap-4 pointer-events-auto cursor-pointer group"
@@ -97,7 +112,7 @@ export const Header: React.FC<HeaderProps> = ({ currentTime, onTabChange, active
<span className="leading-tight">LIGHT</span>
</button>
<button
onClick={() => handleCommand(() => comms.openManualPrint(), 'Manual Print')}
onClick={() => setShowManualPrintDialog(true)}
className="flex flex-col items-center justify-center gap-1 px-3 py-2 rounded-xl font-tech font-bold text-[10px] transition-all border border-transparent min-w-[70px] text-slate-400 hover:text-cyan-400 hover:bg-white/5"
title="Open Manual Print"
>