131 lines
3.9 KiB
TypeScript
131 lines
3.9 KiB
TypeScript
/**
|
|
* EcoOS Devices View
|
|
* Shows network interfaces, disks, input devices, speakers, and microphones
|
|
*/
|
|
|
|
import {
|
|
html,
|
|
DeesElement,
|
|
customElement,
|
|
property,
|
|
css,
|
|
type TemplateResult,
|
|
} from '@design.estate/dees-element';
|
|
|
|
import { sharedStyles, formatBytes } from '../styles/shared.js';
|
|
import type { ISystemInfo } from '../../ts_interfaces/status.js';
|
|
|
|
@customElement('ecoos-devices')
|
|
export class EcoosDevices extends DeesElement {
|
|
@property({ type: Object })
|
|
public accessor systemInfo: ISystemInfo | null = null;
|
|
|
|
public static styles = [
|
|
sharedStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
padding: 20px;
|
|
}
|
|
|
|
.network-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid var(--ecoos-border);
|
|
}
|
|
|
|
.network-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.disk-item {
|
|
margin-bottom: 12px;
|
|
}
|
|
`,
|
|
];
|
|
|
|
render(): TemplateResult {
|
|
if (!this.systemInfo) {
|
|
return html`<div>Loading...</div>`;
|
|
}
|
|
|
|
return html`
|
|
<div class="grid">
|
|
<!-- Network Card -->
|
|
<div class="card">
|
|
<div class="card-title">Network</div>
|
|
${this.systemInfo.network?.length
|
|
? this.systemInfo.network.map(n => html`
|
|
<div class="network-item">
|
|
<span>${n.name}</span>
|
|
<span>${n.ip}</span>
|
|
</div>
|
|
`)
|
|
: html`<div style="color: var(--ecoos-text-dim)">No interfaces detected</div>`
|
|
}
|
|
</div>
|
|
|
|
<!-- Disks Card -->
|
|
<div class="card">
|
|
<div class="card-title">Disks</div>
|
|
${this.systemInfo.disks?.length
|
|
? this.systemInfo.disks.map(d => html`
|
|
<div class="disk-item">
|
|
<div class="stat-label">${d.mountpoint}</div>
|
|
<div class="stat-value">${formatBytes(d.used)} / ${formatBytes(d.total)}</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: ${d.usagePercent}%"></div>
|
|
</div>
|
|
</div>
|
|
`)
|
|
: html`<div style="color: var(--ecoos-text-dim)">No disks detected</div>`
|
|
}
|
|
</div>
|
|
|
|
<!-- Input Devices Card -->
|
|
<div class="card">
|
|
<div class="card-title">Input Devices</div>
|
|
${this.systemInfo.inputDevices?.length
|
|
? this.systemInfo.inputDevices.map(d => html`
|
|
<div class="device-item">
|
|
<span class="device-name">${d.name}</span>
|
|
<span class="device-type">${d.type}</span>
|
|
</div>
|
|
`)
|
|
: html`<div style="color: var(--ecoos-text-dim)">No input devices detected</div>`
|
|
}
|
|
</div>
|
|
|
|
<!-- Speakers Card -->
|
|
<div class="card">
|
|
<div class="card-title">Speakers</div>
|
|
${this.systemInfo.speakers?.length
|
|
? this.systemInfo.speakers.map(s => html`
|
|
<div class="device-item">
|
|
<span class="device-name">${s.description}</span>
|
|
${s.isDefault ? html`<span class="device-default">Default</span>` : ''}
|
|
</div>
|
|
`)
|
|
: html`<div style="color: var(--ecoos-text-dim)">No speakers detected</div>`
|
|
}
|
|
</div>
|
|
|
|
<!-- Microphones Card -->
|
|
<div class="card">
|
|
<div class="card-title">Microphones</div>
|
|
${this.systemInfo.microphones?.length
|
|
? this.systemInfo.microphones.map(m => html`
|
|
<div class="device-item">
|
|
<span class="device-name">${m.description}</span>
|
|
${m.isDefault ? html`<span class="device-default">Default</span>` : ''}
|
|
</div>
|
|
`)
|
|
: html`<div style="color: var(--ecoos-text-dim)">No microphones detected</div>`
|
|
}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|