140 lines
3.8 KiB
TypeScript
140 lines
3.8 KiB
TypeScript
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; |