Juergen Kunz
f3e1c96872
Full-featured SIP router with multi-provider trunking, browser softphone via WebRTC, real-time Opus/G.722/PCM transcoding in Rust, RNNoise ML noise suppression, Kokoro neural TTS announcements, and a Lit-based web dashboard with live call monitoring and REST API.
57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
import { DeesElement, customElement, html, css, cssManager, property, type TemplateResult } from '../plugins.js';
|
|
import type { IDeviceStatus } from '../state/appstate.js';
|
|
|
|
@customElement('sipproxy-devices')
|
|
export class SipproxyDevices extends DeesElement {
|
|
@property({ type: Array }) accessor devices: IDeviceStatus[] = [];
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host { display: block; margin-bottom: 1.5rem; }
|
|
`,
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
<dees-table
|
|
heading1="Devices"
|
|
heading2="${this.devices.length} registered"
|
|
dataName="devices"
|
|
.data=${this.devices}
|
|
.rowKey=${'id'}
|
|
highlight-updates="flash"
|
|
.searchable=${false}
|
|
.columns=${[
|
|
{
|
|
key: 'displayName',
|
|
header: 'Device',
|
|
sortable: true,
|
|
},
|
|
{
|
|
key: 'status',
|
|
header: 'Status',
|
|
value: (row: any) => (row.connected ? 'Connected' : 'Disconnected'),
|
|
renderer: (val: string, row: any) => {
|
|
const on = row.connected;
|
|
return html`
|
|
<span style="display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;${on ? 'background:#4ade80;box-shadow:0 0 6px #4ade80' : 'background:#f87171;box-shadow:0 0 6px #f87171'}"></span>
|
|
<span style="color:${on ? '#4ade80' : '#f87171'}">${val}</span>
|
|
`;
|
|
},
|
|
},
|
|
{
|
|
key: 'contact',
|
|
header: 'Contact',
|
|
renderer: (_val: any, row: any) => {
|
|
const c = row.contact;
|
|
const text = c ? (c.port ? `${c.address}:${c.port}` : c.address) : '--';
|
|
return html`<span style="font-family:'JetBrains Mono',monospace;font-size:.75rem">${text}</span>`;
|
|
},
|
|
},
|
|
]}
|
|
></dees-table>
|
|
`;
|
|
}
|
|
}
|