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:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user