catalog/ts_web/elements/00group-applauncher/eco-applauncher/eco-applauncher.demo.ts

import { html } from '@design.estate/dees-element';
import type { IAppIcon, ILoginConfig, ILoginCredentials, TApplauncherMode } from './eco-applauncher.js';
import type { IWifiNetwork } from '../eco-applauncher-wifimenu/index.js';
import type { IAudioDevice } from '../eco-applauncher-soundmenu/index.js';
import '../../../views/eco-view-settings/eco-view-settings.js';
import '../../../views/eco-view-peripherals/eco-view-peripherals.js';
import '../../../views/eco-view-saasshare/eco-view-saasshare.js';
import '../../../views/eco-view-system/eco-view-system.js';
import type { EcoApplauncher } from './eco-applauncher.js';

const mockApps: IAppIcon[] = [
  { name: 'SaaS Share', icon: 'lucide:share2', view: html`<eco-view-saasshare></eco-view-saasshare>` },
  { name: 'System', icon: 'lucide:activity', view: html`<eco-view-system></eco-view-system>` },
  { name: 'Peripherals', icon: 'lucide:monitor', view: html`<eco-view-peripherals></eco-view-peripherals>` },
  { name: 'Settings', icon: 'lucide:settings', view: html`<eco-view-settings></eco-view-settings>` },
];

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' },
];

const loginConfig: ILoginConfig = {
  allowedMethods: ['pin', 'password', 'qr'],
  pinLength: 4,
  welcomeMessage: 'Welcome to EcoBridge',
};

const handleLoginAttempt = (e: CustomEvent) => {
  const credentials = e.detail as ILoginCredentials;
  const applauncher = e.target as EcoApplauncher;

  console.log('Login attempt:', credentials);

  // Demo validation: PIN "1234" or password "demo"
  if (
    (credentials.method === 'pin' && credentials.value === '1234') ||
    (credentials.method === 'password' && credentials.value === 'demo')
  ) {
    console.log('Login successful!');
    applauncher.setLoginResult(true);
  } else {
    console.log('Login failed');
    applauncher.setLoginResult(false, 'Invalid credentials. Try PIN: 1234 or Password: demo');
  }
};

// Home mode demo
const demoHome = () => html`
  <style>
    .demo-container {
      width: 100%;
      height: 100%;
    }
  </style>
  <div class="demo-container">
    <eco-applauncher
      .mode=${'home' as TApplauncherMode}
      .loginConfig=${loginConfig}
      .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}
      @login-attempt=${handleLoginAttempt}
      @login-success=${() => console.log('Login success event received')}
      @login-failure=${(e: CustomEvent) => console.log('Login failure:', e.detail)}
      @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>
`;
demoHome.demoTitle = 'Home Mode';

// Login mode demo
const demoLogin = () => html`
  <style>
    .demo-container {
      width: 100%;
      height: 100%;
    }
  </style>
  <div class="demo-container">
    <eco-applauncher
      .mode=${'login' as TApplauncherMode}
      .loginConfig=${loginConfig}
      .apps=${mockApps}
      .batteryLevel=${85}
      .networkStatus=${'online'}
      .soundLevel=${70}
      .networks=${mockNetworks}
      .connectedNetwork=${'HomeNetwork'}
      .wifiEnabled=${true}
      .outputDevices=${mockAudioDevices}
      .activeDeviceId=${'speakers'}
      .muted=${false}
      @login-attempt=${handleLoginAttempt}
      @login-success=${() => console.log('Login success event received')}
      @login-failure=${(e: CustomEvent) => console.log('Login failure:', e.detail)}
    ></eco-applauncher>
  </div>
`;
demoLogin.demoTitle = 'Login Mode';

// Export array of demo functions
export const demo = [demoHome, demoLogin];