feat: add demo mode

src/pages/AddDspPage/AddDspPage.tsx

@@ -1,10 +1,19 @@
 import { useState } from 'react';
-import { DSP, DSP_TYPES } from '../../types/types';
+import { DSP, DSP_DEFAULT_PARAMETERS, DSPTypes } from '../../types/types';
 import Button from '../../components/Button/Button';
 import Card from '../../components/Card/Card';
 
 import './AddDspPage.css';
 
+type DSPForm = {
+  name: string;
+  type: DSPTypes;
+  ip: string;
+  port: number;
+  deviceId: number;
+  demo: boolean;
+};
+
 function AddDSPForm({
   onCancel,
   onAdd,
@@ -12,17 +21,18 @@ function AddDSPForm({
   onCancel: () => void;
   onAdd: (d: Omit<DSP, 'status' | 'id' | 'state' | 'meters' | 'pollingPaused'>) => void;
 }) {
-  const [form, setForm] = useState({
+  const [form, setForm] = useState<DSPForm>({
     name: '',
-    type: DSP_TYPES[0].name,
-    ip: '192.168.49.30',
-    port: DSP_TYPES[0].defaultPort,
-    deviceId: 1,
+    type: 'DSP408',
+    ip: DSP_DEFAULT_PARAMETERS['DSP408'].ip,
+    port: DSP_DEFAULT_PARAMETERS['DSP408'].defaultPort,
+    deviceId: DSP_DEFAULT_PARAMETERS['DSP408'].device_id,
+    demo: false,
   });
 
   const canSubmit =
     form.name.trim().length > 0 &&
-    form.ip.trim().length > 0 &&
+    (form.demo || form.ip.trim().length > 0) &&
     Number.isInteger(form.deviceId) &&
     form.deviceId >= 1 &&
     form.deviceId <= 255;
@@ -58,18 +68,17 @@ function AddDSPForm({
             id="f-type"
             value={form.type}
             onChange={(e) => {
-              const selected = DSP_TYPES.find((d) => d.name === e.target.value);
+              const type = e.target.value as DSPTypes;
 
               setForm({
                 ...form,
-                type: e.target.value,
-                port: selected?.defaultPort ?? form.port,
+                type,
               });
             }}
           >
-            {DSP_TYPES.map((dsp) => (
-              <option key={dsp.name} value={dsp.name}>
-                {dsp.name}
+            {Object.keys(DSP_DEFAULT_PARAMETERS).map((type) => (
+              <option key={type} value={type}>
+                {type}
               </option>
             ))}
           </select>
@@ -98,6 +107,7 @@ function AddDSPForm({
             id="f-ip"
             className="mono"
             value={form.ip}
+            disabled={form.demo}
             onChange={(e) => setForm({ ...form, ip: e.target.value })}
           />
         </div>
@@ -109,11 +119,24 @@ function AddDSPForm({
             className="mono"
             type="number"
             value={form.port}
+            disabled={form.demo}
             onChange={(e) => setForm({ ...form, port: Number(e.target.value) })}
           />
         </div>
       </div>
 
+      <div className="add-dsp-form__field add-dsp-form__field--checkbox">
+        <label htmlFor="f-demo" className="add-dsp-form__checkbox-label">
+          <input
+            id="f-demo"
+            type="checkbox"
+            checked={form.demo}
+            onChange={(e) => setForm({ ...form, demo: e.target.checked })}
+          />
+          Demo mode (simulate device, no network connection)
+        </label>
+      </div>
+
       <div className="add-dsp-form__actions">
         <Button variant="ghost" onClick={onCancel}>
           Cancel