feat: add MiscellaneousPanel - need to implement UI

2026-09-13 19:09:47 +02:00
parent 4f2bce1f5f
commit 00b6721c42
5 changed files with 366 additions and 58 deletions
@@ -0,0 +1,140 @@
+import { useState } from 'react';
+
+import { DSP } from '../../../../types';
+import { Channel, InputSource } from '../../types';
+import Button from '../../../../components/Button/Button';
+import Card from '../../../../components/Card/Card';
+import Led from '../../../../components/Led/Led';
+
+import './MiscellaneousSection.css';
+
+function MiscellaneousPanel({
+  dsp,
+  onConnect,
+  onDisconnect,
+  factoryReset,
+  copyChannel,
+  setInputSource,
+  linkChannels,
+  unlockDevice,
+  lockDevice,
+}: {
+  dsp: DSP;
+  onConnect: () => void;
+  onDisconnect: () => void;
+  factoryReset: (force: boolean) => Promise<boolean>;
+  copyChannel: (channel1: Channel, channel2: Channel) => Promise<boolean>;
+  setInputSource: (inputSource: InputSource) => Promise<boolean>;
+  linkChannels: (source: Channel, destinations: Channel[]) => Promise<boolean>;
+  unlockDevice: (password: string) => Promise<boolean>;
+  lockDevice: (password: string) => Promise<boolean>;
+}) {
+  const [isFactoryResetting, setIsFactoryResetting] = useState(false);
+
+  const statusLabel =
+    dsp.status === 'connected'
+      ? 'Connected'
+      : dsp.status === 'connecting'
+        ? 'Connecting…'
+        : 'Disconnected';
+
+  const handleFactoryReset = async () => {
+    const confirmed = window.confirm(
+      'Are you sure you want to factory reset this DSP? This cannot be undone.',
+    );
+
+    if (!confirmed) {
+      return;
+    }
+
+    setIsFactoryResetting(true);
+
+    try {
+      await factoryReset(true);
+    } finally {
+      setIsFactoryResetting(false);
+    }
+  };
+
+  return (
+    <div className="connection-section">
+      <Card className="connection-panel">
+        <div className="connection-panel__header">
+          <div className="connection-panel__header-text">
+            <h1 className="connection-panel__title" title={dsp.name}>
+              {dsp.name}
+            </h1>
+
+            <div className="connection-panel__type">{dsp.type}</div>
+          </div>
+
+          <div className="connection-panel__status">
+            <span className="connection-panel__led">
+              <Led status={dsp.status} />
+            </span>
+
+            <span
+              className={`status-label status-label--${dsp.status}`}
+            >
+              {statusLabel}
+            </span>
+          </div>
+        </div>
+
+        <dl className="connection-panel__specs">
+          <div className="connection-panel__spec">
+            <dt>IP address</dt>
+            <dd className="connection-panel__mono" title={dsp.ip}>
+              {dsp.ip}
+            </dd>
+          </div>
+
+          <div className="connection-panel__spec">
+            <dt>Port</dt>
+            <dd className="connection-panel__mono">{dsp.port}</dd>
+          </div>
+
+          <div className="connection-panel__spec">
+            <dt>Device ID</dt>
+            <dd
+              className="connection-panel__mono"
+              title={String(dsp.deviceId) || undefined}
+            >
+              {dsp.deviceId || '—'}
+            </dd>
+          </div>
+        </dl>
+
+        <div className="connection-panel__actions">
+          {dsp.status === 'connected' ? (
+            <Button variant="outline" onClick={onDisconnect}>
+              Disconnect
+            </Button>
+          ) : (
+            <Button
+              variant="primary"
+              onClick={onConnect}
+              disabled={dsp.status === 'connecting'}
+            >
+              {dsp.status === 'connecting' ? 'Connecting…' : 'Connect'}
+            </Button>
+          )}
+        </div>
+
+        <div className="miscellaneous-panel__actions">
+          <Button
+            variant="outline"
+            onClick={handleFactoryReset}
+            disabled={
+              dsp.status !== 'connected' || isFactoryResetting
+            }
+          >
+            {isFactoryResetting ? 'Resetting…' : 'Factory Reset'}
+          </Button>
+        </div>
+      </Card>
+    </div>
+  );
+}
+
+export default MiscellaneousPanel;