211 lines
13 KiB
TypeScript
211 lines
13 KiB
TypeScript
|
|
import React from 'react';
|
|
import { X } from 'lucide-react';
|
|
|
|
import { AxisData, ADDR_AXIS_BASE, ADDR_AXIS_STRIDE, OFF_AXIS_CURRENT_POS, OFF_AXIS_TARGET_POS, OFF_AXIS_SPEED } from '../types';
|
|
|
|
interface SystemSetupDialogProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
inputNames: string[];
|
|
outputNames: string[];
|
|
axes: AxisData[];
|
|
onUpdatePortName: (type: 'input' | 'output', index: number, name: string) => void;
|
|
onUpdateAxis: (index: number, updates: Partial<AxisData>) => void;
|
|
}
|
|
|
|
export const SystemSetupDialog: React.FC<SystemSetupDialogProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
inputNames,
|
|
outputNames,
|
|
onUpdatePortName,
|
|
axes,
|
|
onUpdateAxis
|
|
}) => {
|
|
const [activeTab, setActiveTab] = React.useState<'io' | 'axes'>('io');
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
|
|
<div className="bg-gray-900 border border-gray-700 rounded-2xl w-full max-w-4xl h-[85vh] flex flex-col shadow-2xl animate-in zoom-in-95 duration-200 cursor-default">
|
|
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between p-6 border-b border-gray-800 bg-gray-950/50 rounded-t-2xl">
|
|
<div className="flex items-center gap-8">
|
|
<div>
|
|
<h2 className="text-xl font-bold text-white tracking-tight">System Setup</h2>
|
|
<p className="text-gray-400 text-sm mt-1">Configure Hardware & Drives</p>
|
|
</div>
|
|
|
|
<div className="flex bg-gray-800 p-1 rounded-lg">
|
|
<button
|
|
onClick={() => setActiveTab('io')}
|
|
className={`px-4 py-1.5 rounded-md text-xs font-black uppercase tracking-wider transition-all ${activeTab === 'io' ? 'bg-blue-600 text-white shadow' : 'text-gray-400 hover:text-white'}`}
|
|
>
|
|
I/O Mapping
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('axes')}
|
|
className={`px-4 py-1.5 rounded-md text-xs font-black uppercase tracking-wider transition-all ${activeTab === 'axes' ? 'bg-blue-600 text-white shadow' : 'text-gray-400 hover:text-white'}`}
|
|
>
|
|
Axis Drives
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onClick={onClose}
|
|
className="p-2 text-gray-400 hover:text-white hover:bg-gray-800 rounded-lg transition-colors"
|
|
>
|
|
<X size={24} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 overflow-y-auto p-8 custom-scrollbar">
|
|
|
|
{activeTab === 'io' && (
|
|
<div className="grid grid-cols-2 gap-12">
|
|
|
|
{/* Input Configuration */}
|
|
<div>
|
|
<h3 className="flex items-center gap-3 text-sm font-bold text-green-400 uppercase tracking-widest mb-6 border-b border-green-500/20 pb-3">
|
|
<div className="w-2 h-2 rounded-full bg-green-500 shadow-[0_0_10px_#22c55e]" />
|
|
Input Mapping (X00 - X31)
|
|
</h3>
|
|
|
|
<div className="grid grid-cols-1 gap-2">
|
|
{inputNames.map((name, i) => (
|
|
<div key={i} className="flex items-center gap-3 group">
|
|
<span className="w-8 text-xs font-mono text-gray-500 group-hover:text-green-400 transition-colors">
|
|
X{i.toString().padStart(2, '0')}
|
|
</span>
|
|
<input
|
|
className="flex-1 bg-gray-950 border border-gray-800 rounded px-3 py-2 text-sm text-gray-300 focus:text-white focus:border-green-500 focus:ring-1 focus:ring-green-500/50 outline-none transition-all placeholder:text-gray-700"
|
|
placeholder={`Input ${i} Tag Name...`}
|
|
value={name}
|
|
onChange={(e) => onUpdatePortName('input', i, e.target.value)}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Output Configuration */}
|
|
<div>
|
|
<h3 className="flex items-center gap-3 text-sm font-bold text-red-500 uppercase tracking-widest mb-6 border-b border-red-500/20 pb-3">
|
|
<div className="w-2 h-2 rounded-full bg-red-500 shadow-[0_0_10px_#ef4444]" />
|
|
Output Mapping (Y00 - Y31)
|
|
</h3>
|
|
|
|
<div className="grid grid-cols-1 gap-2">
|
|
{outputNames.map((name, i) => (
|
|
<div key={i} className="flex items-center gap-3 group">
|
|
<span className="w-8 text-xs font-mono text-gray-500 group-hover:text-red-400 transition-colors">
|
|
Y{i.toString().padStart(2, '0')}
|
|
</span>
|
|
<input
|
|
className="flex-1 bg-gray-950 border border-gray-800 rounded px-3 py-2 text-sm text-gray-300 focus:text-white focus:border-red-500 focus:ring-1 focus:ring-red-500/50 outline-none transition-all placeholder:text-gray-700"
|
|
placeholder={`Output ${i} Tag Name...`}
|
|
value={name}
|
|
onChange={(e) => onUpdatePortName('output', i, e.target.value)}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'axes' && (
|
|
<div className="space-y-6">
|
|
<h3 className="flex items-center gap-3 text-sm font-bold text-blue-400 uppercase tracking-widest mb-2 border-b border-blue-500/20 pb-3">
|
|
<div className="w-2 h-2 rounded-full bg-blue-500 shadow-[0_0_10px_#3b82f6]" />
|
|
Global Axis Configuration (8 Channels)
|
|
</h3>
|
|
|
|
<div className="grid gap-4">
|
|
{axes.map((axis, i) => (
|
|
<div key={i} className="bg-gray-950/50 border border-gray-800 rounded-xl p-4 flex items-center gap-6 hover:border-gray-700 transition-colors">
|
|
<div className="flex flex-col gap-1 w-48 shrink-0">
|
|
<label className="text-[10px] items-center text-gray-500 font-black uppercase tracking-widest flex gap-2">
|
|
<span className="w-4 h-4 rounded bg-gray-800 flex items-center justify-center text-white">{i}</span> Axis Name
|
|
</label>
|
|
<input
|
|
value={axis.name}
|
|
onChange={(e) => onUpdateAxis(i, { name: e.target.value })}
|
|
className="bg-gray-900 border border-gray-800 rounded px-2 py-1 text-sm text-white focus:border-blue-500 outline-none"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex-1 flex flex-col gap-2">
|
|
<div className="flex justify-between items-end">
|
|
<label className="text-[10px] text-gray-500 font-bold uppercase tracking-wider">Jog Control</label>
|
|
<span className="text-xs font-mono text-blue-400">
|
|
{axis.value.toFixed(1)} <span className="text-gray-600">{axis.type === 'rotary' ? 'deg' : 'mm'}</span>
|
|
</span>
|
|
</div>
|
|
<input
|
|
type="range"
|
|
min={0}
|
|
max={axis.type === 'rotary' ? 360 : 100}
|
|
step={0.1}
|
|
value={axis.value}
|
|
onChange={(e) => {
|
|
const val = parseFloat(e.target.value);
|
|
onUpdateAxis(i, { value: val, target: val });
|
|
}}
|
|
className="w-full h-2 bg-gray-800 rounded-lg appearance-none cursor-pointer accent-blue-600 hover:accent-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
{/* Memory Map Info */}
|
|
<div className="w-48 bg-gray-900 rounded p-3 text-[10px] font-mono text-gray-500 border border-gray-800">
|
|
<div className="flex justify-between border-b border-gray-800 pb-1 mb-1">
|
|
<span className="font-bold text-gray-400">MEMORY MAP</span>
|
|
<span className="text-blue-500">Base: {ADDR_AXIS_BASE + (axis.id * ADDR_AXIS_STRIDE)}</span>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-x-2 gap-y-1">
|
|
<span>Status:</span> <span className="text-right text-gray-300">+{0}</span>
|
|
<span>Cur Pos:</span> <span className="text-right text-gray-300">+{OFF_AXIS_CURRENT_POS}</span>
|
|
<span>Cmd Pos:</span> <span className="text-right text-purple-400">+{OFF_AXIS_TARGET_POS}</span>
|
|
<span>Speed:</span> <span className="text-right text-gray-300">+{OFF_AXIS_SPEED}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-32 flex flex-col gap-1">
|
|
<label className="text-[10px] text-gray-500 font-bold uppercase tracking-wider">Type</label>
|
|
<select
|
|
value={axis.type}
|
|
onChange={(e) => onUpdateAxis(i, { type: e.target.value as any })}
|
|
className="bg-gray-900 border border-gray-800 rounded px-2 py-1 text-xs text-gray-300 outline-none focus:border-blue-500"
|
|
>
|
|
<option value="linear">Linear (mm)</option>
|
|
<option value="rotary">Rotary (deg)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="p-4 border-t border-gray-800 bg-gray-950/30 rounded-b-2xl flex justify-end">
|
|
<button
|
|
onClick={onClose}
|
|
className="px-6 py-2 bg-gray-800 hover:bg-gray-700 text-white text-sm font-bold rounded-lg transition-colors"
|
|
>
|
|
Done
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|