127 lines
3.3 KiB
TypeScript
127 lines
3.3 KiB
TypeScript
import { useState } from 'react';
|
|
import { DSP, DSP_TYPES } from '../../types/types';
|
|
import Button from '../../components/Button/Button';
|
|
import Card from '../../components/Card/Card';
|
|
|
|
import './AddDspPage.css';
|
|
|
|
function AddDSPForm({
|
|
onCancel,
|
|
onAdd,
|
|
}: {
|
|
onCancel: () => void;
|
|
onAdd: (d: Omit<DSP, 'status' | 'id' | 'state' | 'meters'>) => void;
|
|
}) {
|
|
const [form, setForm] = useState({
|
|
name: '',
|
|
type: DSP_TYPES[0].name,
|
|
ip: '192.168.1.100',
|
|
port: DSP_TYPES[0].defaultPort,
|
|
deviceId: '1',
|
|
});
|
|
|
|
const canSubmit =
|
|
form.name.trim().length > 0 && form.ip.trim().length > 0 && form.deviceId.length > 0;
|
|
|
|
function submit() {
|
|
if (!canSubmit) return;
|
|
onAdd({
|
|
...form,
|
|
});
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<div className="add-dsp-form__header">
|
|
<h1 className="add-dsp-form__title">Add DSP</h1>
|
|
<p className="add-dsp-form__hint">Register a new device to control from this app.</p>
|
|
</div>
|
|
|
|
<div className="add-dsp-form__field">
|
|
<label htmlFor="f-name">Name</label>
|
|
<input
|
|
id="f-name"
|
|
placeholder="Main Room DSP"
|
|
value={form.name}
|
|
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
|
/>
|
|
</div>
|
|
|
|
<div className="add-dsp-form__row">
|
|
<div className="add-dsp-form__field">
|
|
<label htmlFor="f-type">Model</label>
|
|
<select
|
|
id="f-type"
|
|
value={form.type}
|
|
onChange={(e) => {
|
|
const selected = DSP_TYPES.find((d) => d.name === e.target.value);
|
|
|
|
setForm({
|
|
...form,
|
|
type: e.target.value,
|
|
port: selected?.defaultPort ?? form.port,
|
|
});
|
|
}}
|
|
>
|
|
{DSP_TYPES.map((dsp) => (
|
|
<option key={dsp.name} value={dsp.name}>
|
|
{dsp.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div className="add-dsp-form__field">
|
|
<label htmlFor="f-deviceid">Device ID</label>
|
|
<input
|
|
id="f-deviceid"
|
|
className="mono"
|
|
type="number"
|
|
min={1}
|
|
max={255}
|
|
step={1}
|
|
placeholder="1"
|
|
value={form.deviceId}
|
|
onChange={(e) => setForm({ ...form, deviceId: e.target.value })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="add-dsp-form__row">
|
|
<div className="add-dsp-form__field">
|
|
<label htmlFor="f-ip">IP address</label>
|
|
<input
|
|
id="f-ip"
|
|
className="mono"
|
|
value={form.ip}
|
|
onChange={(e) => setForm({ ...form, ip: e.target.value })}
|
|
/>
|
|
</div>
|
|
|
|
<div className="add-dsp-form__field">
|
|
<label htmlFor="f-port">Port</label>
|
|
<input
|
|
id="f-port"
|
|
className="mono"
|
|
type="number"
|
|
value={form.port}
|
|
onChange={(e) => setForm({ ...form, port: Number(e.target.value) })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="add-dsp-form__actions">
|
|
<Button variant="ghost" onClick={onCancel}>
|
|
Cancel
|
|
</Button>
|
|
|
|
<Button variant="primary" onClick={submit} disabled={!canSubmit}>
|
|
Add DSP
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default AddDSPForm;
|