fix: NetUp device form — hide purpose/USB/COM, auto-select network

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-27 15:03:09 +03:00
parent be311a2b30
commit 8eb83a5189

View File

@@ -189,6 +189,10 @@ function DeviceForm({
wsOnline: boolean wsOnline: boolean
}) { }) {
const [type, setType] = useState<'kkt' | 'printer' | 'netup'>(initial?.type ?? 'printer') const [type, setType] = useState<'kkt' | 'printer' | 'netup'>(initial?.type ?? 'printer')
const handleTypeChange = (t: 'kkt' | 'printer' | 'netup') => {
setType(t)
if (t === 'netup') setConnection('network')
}
const [name, setName] = useState(initial?.name ?? '') const [name, setName] = useState(initial?.name ?? '')
const [connection, setConnection] = useState<'usb' | 'network' | 'com'>(initial?.connection ?? 'network') const [connection, setConnection] = useState<'usb' | 'network' | 'com'>(initial?.connection ?? 'network')
const [networkHost, setNetworkHost] = useState(initial?.networkHost ?? '') const [networkHost, setNetworkHost] = useState(initial?.networkHost ?? '')
@@ -230,12 +234,12 @@ function DeviceForm({
return ( return (
<div className="border border-brand-200 dark:border-brand-800 rounded-xl p-4 bg-brand-50/30 dark:bg-brand-900/10 space-y-3"> <div className="border border-brand-200 dark:border-brand-800 rounded-xl p-4 bg-brand-50/30 dark:bg-brand-900/10 space-y-3">
<div className="grid grid-cols-2 gap-3"> <div className={cn('grid gap-3', type === 'netup' ? 'grid-cols-1' : 'grid-cols-2')}>
<div> <div>
<label className="block text-xs font-medium text-slate-500 mb-1">Тип устройства</label> <label className="block text-xs font-medium text-slate-500 mb-1">Тип устройства</label>
<select <select
value={type} value={type}
onChange={e => setType(e.target.value as 'kkt' | 'printer' | 'netup')} onChange={e => handleTypeChange(e.target.value as 'kkt' | 'printer' | 'netup')}
className="w-full input text-sm" className="w-full input text-sm"
> >
<option value="kkt">ККТ (касса)</option> <option value="kkt">ККТ (касса)</option>
@@ -243,18 +247,20 @@ function DeviceForm({
<option value="netup">NetUp IPTV</option> <option value="netup">NetUp IPTV</option>
</select> </select>
</div> </div>
<div> {type !== 'netup' && (
<label className="block text-xs font-medium text-slate-500 mb-1">Назначение</label> <div>
<select <label className="block text-xs font-medium text-slate-500 mb-1">Назначение</label>
value={purpose} <select
onChange={e => setPurpose(e.target.value as 'fiscal' | 'kitchen' | 'bar' | 'receipt' | 'other')} value={purpose}
className="w-full input text-sm" onChange={e => setPurpose(e.target.value as 'fiscal' | 'kitchen' | 'bar' | 'receipt' | 'other')}
> className="w-full input text-sm"
{Object.entries(PURPOSE_LABELS).map(([k, v]) => ( >
<option key={k} value={k}>{v}</option> {Object.entries(PURPOSE_LABELS).map(([k, v]) => (
))} <option key={k} value={k}>{v}</option>
</select> ))}
</div> </select>
</div>
)}
</div> </div>
{/* KKT-specific: fiscal mode + DTO port */} {/* KKT-specific: fiscal mode + DTO port */}
@@ -305,33 +311,35 @@ function DeviceForm({
value={name} value={name}
onChange={e => setName(e.target.value)} onChange={e => setName(e.target.value)}
className="w-full input text-sm" className="w-full input text-sm"
placeholder="Касса №1 / Принтер кухни" placeholder={type === 'netup' ? 'NetUp сервер' : type === 'kkt' ? 'Касса №1' : 'Принтер кухни'}
/> />
</div> </div>
<div> {type !== 'netup' && (
<label className="block text-xs font-medium text-slate-500 mb-1">Подключение</label> <div>
<div className="flex gap-2"> <label className="block text-xs font-medium text-slate-500 mb-1">Подключение</label>
{([ <div className="flex gap-2">
{ id: 'usb', icon: <Usb size={14} />, label: 'USB' }, {([
{ id: 'network', icon: <Network size={14} />, label: 'Сеть (TCP)' }, { id: 'usb', icon: <Usb size={14} />, label: 'USB' },
{ id: 'com', icon: <Cable size={14} />, label: 'COM-порт' }, { id: 'network', icon: <Network size={14} />, label: 'Сеть (TCP)' },
] as const).map(c => ( { id: 'com', icon: <Cable size={14} />, label: 'COM-порт' },
<button ] as const).map(c => (
key={c.id} <button
onClick={() => setConnection(c.id)} key={c.id}
className={cn( onClick={() => setConnection(c.id)}
'flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium border transition-colors', className={cn(
connection === c.id 'flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium border transition-colors',
? 'bg-brand-600 border-brand-600 text-white' connection === c.id
: 'border-slate-300 dark:border-slate-600 text-slate-600 dark:text-slate-300 hover:border-brand-400', ? 'bg-brand-600 border-brand-600 text-white'
)} : 'border-slate-300 dark:border-slate-600 text-slate-600 dark:text-slate-300 hover:border-brand-400',
> )}
{c.icon}{c.label} >
</button> {c.icon}{c.label}
))} </button>
))}
</div>
</div> </div>
</div> )}
{connection === 'network' && ( {connection === 'network' && (
<div className="grid grid-cols-3 gap-3"> <div className="grid grid-cols-3 gap-3">
@@ -341,7 +349,7 @@ function DeviceForm({
value={networkHost} value={networkHost}
onChange={e => setNetworkHost(e.target.value)} onChange={e => setNetworkHost(e.target.value)}
className="w-full input text-sm font-mono" className="w-full input text-sm font-mono"
placeholder="192.168.1.50" placeholder={type === 'netup' ? '172.16.0.12' : '192.168.1.50'}
/> />
</div> </div>
<div> <div>
@@ -350,7 +358,7 @@ function DeviceForm({
value={networkPort} value={networkPort}
onChange={e => setNetworkPort(e.target.value)} onChange={e => setNetworkPort(e.target.value)}
className="w-full input text-sm font-mono" className="w-full input text-sm font-mono"
placeholder="9100" placeholder={type === 'netup' ? '8880' : '9100'}
/> />
</div> </div>
</div> </div>