update

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

@@ -1,21 +1,18 @@
 import { html } from '@design.estate/dees-element';
-import type { IAppIcon } from './eco-applauncher.js';
+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: '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') },
+  { 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[] = [
@@ -32,7 +29,33 @@ const mockAudioDevices: IAudioDevice[] = [
   { id: 'hdmi', name: 'LG Monitor', type: 'hdmi' },
 ];
 
-export const demo = () => html`
+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%;
@@ -41,6 +64,8 @@ export const demo = () => html`
   </style>
   <div class="demo-container">
     <eco-applauncher
+      .mode=${'home' as TApplauncherMode}
+      .loginConfig=${loginConfig}
       .apps=${mockApps}
       .batteryLevel=${85}
       .networkStatus=${'online'}
@@ -54,6 +79,9 @@ export const demo = () => html`
       .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')}
@@ -69,3 +97,37 @@ export const demo = () => html`
     ></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];