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
}) {
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 [connection, setConnection] = useState<'usb' | 'network' | 'com'>(initial?.connection ?? 'network')
const [networkHost, setNetworkHost] = useState(initial?.networkHost ?? '')
@@ -230,12 +234,12 @@ function DeviceForm({
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="grid grid-cols-2 gap-3">
<div className={cn('grid gap-3', type === 'netup' ? 'grid-cols-1' : 'grid-cols-2')}>
<div>
<label className="block text-xs font-medium text-slate-500 mb-1">Тип устройства</label>
<select
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"
>
<option value="kkt">ККТ (касса)</option>
@@ -243,18 +247,20 @@ function DeviceForm({
<option value="netup">NetUp IPTV</option>
</select>
</div>
<div>
<label className="block text-xs font-medium text-slate-500 mb-1">Назначение</label>
<select
value={purpose}
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>
))}
</select>
</div>
{type !== 'netup' && (
<div>
<label className="block text-xs font-medium text-slate-500 mb-1">Назначение</label>
<select
value={purpose}
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>
))}
</select>
</div>
)}
</div>
{/* KKT-specific: fiscal mode + DTO port */}
@@ -305,33 +311,35 @@ function DeviceForm({
value={name}
onChange={e => setName(e.target.value)}
className="w-full input text-sm"
placeholder="Касса №1 / Принтер кухни"
placeholder={type === 'netup' ? 'NetUp сервер' : type === 'kkt' ? 'Касса №1' : 'Принтер кухни'}
/>
</div>
<div>
<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: 'com', icon: <Cable size={14} />, label: 'COM-порт' },
] as const).map(c => (
<button
key={c.id}
onClick={() => setConnection(c.id)}
className={cn(
'flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium border transition-colors',
connection === c.id
? '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>
))}
{type !== 'netup' && (
<div>
<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: 'com', icon: <Cable size={14} />, label: 'COM-порт' },
] as const).map(c => (
<button
key={c.id}
onClick={() => setConnection(c.id)}
className={cn(
'flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium border transition-colors',
connection === c.id
? '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>
))}
</div>
</div>
</div>
)}
{connection === 'network' && (
<div className="grid grid-cols-3 gap-3">
@@ -341,7 +349,7 @@ function DeviceForm({
value={networkHost}
onChange={e => setNetworkHost(e.target.value)}
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>
@@ -350,7 +358,7 @@ function DeviceForm({
value={networkPort}
onChange={e => setNetworkPort(e.target.value)}
className="w-full input text-sm font-mono"
placeholder="9100"
placeholder={type === 'netup' ? '8880' : '9100'}
/>
</div>
</div>