84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
import { DSP, isConnected } from '../../../../types';
|
|
import Button from '../../../../components/Button/Button';
|
|
import Card from '../../../../components/Card/Card';
|
|
import Led from '../../../../components/Led/Led';
|
|
|
|
import './ConnectionSection.css';
|
|
|
|
function ConnectionPanel({
|
|
dsp,
|
|
onConnect,
|
|
onDisconnect,
|
|
}: {
|
|
dsp: DSP;
|
|
onConnect: () => void;
|
|
onDisconnect: () => void;
|
|
}) {
|
|
|
|
const statusLabel =
|
|
isConnected(dsp)
|
|
? 'Connected'
|
|
: dsp.isConnecting
|
|
? 'Connecting…'
|
|
: 'Disconnected';
|
|
|
|
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.isConnecting ? "connecting" : isConnected(dsp) ? "connected" : "disconnected"} />
|
|
</span>
|
|
|
|
<span>{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">
|
|
{isConnected(dsp) ? (
|
|
<Button variant="outline" onClick={onDisconnect}>
|
|
Disconnect
|
|
</Button>
|
|
) : (
|
|
<Button variant="primary" onClick={onConnect} disabled={dsp.isConnecting}>
|
|
{dsp.isConnecting ? 'Connecting…' : 'Connect'}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ConnectionPanel;
|