72 lines
3.4 KiB
TypeScript
72 lines
3.4 KiB
TypeScript
|
import { html } from '@design.estate/dees-element';
|
||
|
|
import type { IAppIcon } from './eco-applauncher.js';
|
||
|
|
import type { IWifiNetwork } from '../eco-applauncher-wifimenu/index.js';
|
||
|
|
import type { IAudioDevice } from '../eco-applauncher-soundmenu/index.js';
|
||
|
|
|
||
|
|
const mockApps: IAppIcon[] = [
|
||
|
|
{ name: 'Settings', icon: 'lucide:settings', action: () => console.log('Settings clicked') },
|
||
|
|
{ name: 'Browser', icon: 'lucide:globe', action: () => console.log('Browser clicked') },
|
||
|
|
{ name: 'Terminal', icon: 'lucide:terminal', action: () => console.log('Terminal clicked') },
|
||
|
|
{ name: 'Files', icon: 'lucide:folder', action: () => console.log('Files clicked') },
|
||
|
|
{ name: 'Calendar', icon: 'lucide:calendar', action: () => console.log('Calendar clicked') },
|
||
|
|
{ name: 'Mail', icon: 'lucide:mail', action: () => console.log('Mail clicked') },
|
||
|
|
{ name: 'Music', icon: 'lucide:music', action: () => console.log('Music clicked') },
|
||
|
|
{ name: 'Photos', icon: 'lucide:image', action: () => console.log('Photos clicked') },
|
||
|
|
{ name: 'Notes', icon: 'lucide:fileText', action: () => console.log('Notes clicked') },
|
||
|
|
{ name: 'Calculator', icon: 'lucide:calculator', action: () => console.log('Calculator clicked') },
|
||
|
|
{ name: 'Weather', icon: 'lucide:cloudSun', action: () => console.log('Weather clicked') },
|
||
|
|
{ name: 'Maps', icon: 'lucide:map', action: () => console.log('Maps clicked') },
|
||
|
|
];
|
||
|
|
|
||
|
|
const mockNetworks: IWifiNetwork[] = [
|
||
|
|
{ ssid: 'HomeNetwork', signalStrength: 95, secured: true },
|
||
|
|
{ ssid: 'OfficeWiFi', signalStrength: 75, secured: true },
|
||
|
|
{ ssid: 'CoffeeShop_Guest', signalStrength: 60, secured: false },
|
||
|
|
{ ssid: 'Neighbor_5G', signalStrength: 40, secured: true },
|
||
|
|
{ ssid: 'WeakSignal', signalStrength: 15, secured: true },
|
||
|
|
];
|
||
|
|
|
||
|
|
const mockAudioDevices: IAudioDevice[] = [
|
||
|
|
{ id: 'speakers', name: 'Built-in Speakers', type: 'speaker' },
|
||
|
|
{ id: 'headphones', name: 'AirPods Pro', type: 'bluetooth' },
|
||
|
|
{ id: 'hdmi', name: 'LG Monitor', type: 'hdmi' },
|
||
|
|
];
|
||
|
|
|
||
|
|
export const demo = () => html`
|
||
|
|
<style>
|
||
|
|
.demo-container {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div class="demo-container">
|
||
|
|
<eco-applauncher
|
||
|
|
.apps=${mockApps}
|
||
|
|
.batteryLevel=${85}
|
||
|
|
.networkStatus=${'online'}
|
||
|
|
.soundLevel=${70}
|
||
|
|
.networks=${mockNetworks}
|
||
|
|
.connectedNetwork=${'HomeNetwork'}
|
||
|
|
.wifiEnabled=${true}
|
||
|
|
.timeRemaining=${'2h 30m remaining'}
|
||
|
|
.outputDevices=${mockAudioDevices}
|
||
|
|
.activeDeviceId=${'speakers'}
|
||
|
|
.muted=${false}
|
||
|
|
.userName=${'John Doe'}
|
||
|
|
.notificationCount=${3}
|
||
|
|
@wifi-toggle=${(e: CustomEvent) => console.log('WiFi toggle:', e.detail)}
|
||
|
|
@network-select=${(e: CustomEvent) => console.log('Network selected:', e.detail)}
|
||
|
|
@wifi-settings-click=${() => console.log('WiFi settings clicked')}
|
||
|
|
@battery-saver-toggle=${(e: CustomEvent) => console.log('Battery saver:', e.detail)}
|
||
|
|
@battery-settings-click=${() => console.log('Battery settings clicked')}
|
||
|
|
@volume-change=${(e: CustomEvent) => console.log('Volume:', e.detail)}
|
||
|
|
@mute-toggle=${(e: CustomEvent) => console.log('Mute:', e.detail)}
|
||
|
|
@device-select=${(e: CustomEvent) => console.log('Device:', e.detail)}
|
||
|
|
@sound-settings-click=${() => console.log('Sound settings clicked')}
|
||
|
|
@search-click=${() => console.log('Search clicked')}
|
||
|
|
@notifications-click=${() => console.log('Notifications clicked')}
|
||
|
|
@user-click=${() => console.log('User clicked')}
|
||
|
|
></eco-applauncher>
|
||
|
|
</div>
|
||
|
|
`;
|