feat: add set gain

2026-07-22 18:17:36 +02:00
parent c2b67d8bb2
commit 9e3f3803a6
41 changed files with 3863 additions and 869 deletions
--- a/src/components/app/AddDspPage.tsx
+++ b/src/components/app/AddDspPage.tsx
@ -0,0 +1,121 @@
+import { useState } from 'react';
+import { DSP, DSP_TYPES } from '../../types/types';
+
+function AddDSPForm({
+  onCancel,
+  onAdd,
+}: {
+  onCancel: () => void;
+  onAdd: (d: Omit<DSP, 'status' | 'id'>) => 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 (
+    <div className="card form-card">
+      <div className="form-header">
+        <h1 className="panel-title">Add DSP</h1>
+        <p className="form-hint">Register a new device to control from this app.</p>
+      </div>
+
+      <div className="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="field-row">
+        <div className="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="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="field-row">
+        <div className="field field--grow">
+          <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="field field--narrow">
+          <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="form-actions">
+        <button className="btn btn-ghost" onClick={onCancel}>
+          Cancel
+        </button>
+        <button className="btn btn-primary" onClick={submit} disabled={!canSubmit}>
+          Add DSP
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default AddDSPForm;