dees-catalog/ts_web/elements/dees-simple-appdash.demo.ts

import { html, DeesElement, customElement, css, cssManager } from '@design.estate/dees-element';
import type { IView } from './dees-simple-appdash.js';
import './dees-form.js';
import './dees-input-text.js';
import './dees-input-checkbox.js';
import './dees-form-submit.js';

// Create demo view components
@customElement('demo-view-dashboard')
class DemoViewDashboard extends DeesElement {
  static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        padding: 40px;
      }
      h1 {
        margin: 0 0 20px 0;
        color: ${cssManager.bdTheme('#000', '#fff')};
      }
      .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-top: 20px;
      }
      .stat-card {
        background: ${cssManager.bdTheme('#fff', '#111')};
        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
        border-radius: 8px;
        padding: 20px;
        text-align: center;
      }
      .stat-value {
        font-size: 32px;
        font-weight: bold;
        color: ${cssManager.bdTheme('#26a69a', '#26a69a')};
      }
      .stat-label {
        font-size: 14px;
        color: ${cssManager.bdTheme('#666', '#999')};
        margin-top: 8px;
      }
    `
  ];
  
  render() {
    return html`
      <h1>Dashboard</h1>
      <p>Welcome to your application dashboard. Here's an overview of your metrics:</p>
      <div class="stats-grid">
        <div class="stat-card">
          <div class="stat-value">1,234</div>
          <div class="stat-label">Active Users</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">56.7k</div>
          <div class="stat-label">Page Views</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">89%</div>
          <div class="stat-label">Uptime</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">3.2s</div>
          <div class="stat-label">Avg Response</div>
        </div>
      </div>
    `;
  }
}

@customElement('demo-view-analytics')
class DemoViewAnalytics extends DeesElement {
  static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        padding: 40px;
      }
      h1 {
        margin: 0 0 20px 0;
        color: ${cssManager.bdTheme('#000', '#fff')};
      }
    `
  ];
  
  render() {
    return html`
      <h1>Analytics</h1>
      <p>This is the analytics view. You can add charts and metrics here.</p>
    `;
  }
}

@customElement('demo-view-settings')
class DemoViewSettings extends DeesElement {
  static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        padding: 40px;
      }
      h1 {
        margin: 0 0 20px 0;
        color: ${cssManager.bdTheme('#000', '#fff')};
      }
      .settings-section {
        margin-top: 30px;
      }
      .settings-section h2 {
        font-size: 18px;
        margin: 0 0 15px 0;
        color: ${cssManager.bdTheme('#333', '#ccc')};
      }
    `
  ];
  
  render() {
    return html`
      <h1>Settings</h1>
      <p>Configure your application settings below:</p>
      
      <div class="settings-section">
        <h2>General Settings</h2>
        <dees-form>
          <dees-input-text key="appName" label="Application Name" value="My App"></dees-input-text>
          <dees-input-text key="apiEndpoint" label="API Endpoint" value="https://api.example.com"></dees-input-text>
          <dees-input-checkbox key="enableNotifications" label="Enable Notifications" value="true"></dees-input-checkbox>
          <dees-form-submit>Save Settings</dees-form-submit>
        </dees-form>
      </div>
    `;
  }
}

export const demoFunc = () => html`
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .demo-container {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
  <div class="demo-container">
    <dees-simple-appdash
      name="My Application"
      terminalSetupCommand="echo 'Welcome to the terminal!'"
      .viewTabs=${[
        {
          name: 'Dashboard',
          iconName: 'home',
          element: DemoViewDashboard,
        },
        {
          name: 'Analytics',
          iconName: 'lineChart',
          element: DemoViewAnalytics,
        },
        {
          name: 'Settings',
          iconName: 'settings',
          element: DemoViewSettings,
        }
      ] as IView[]}
      @logout=${() => {
        console.log('Logout event triggered');
        alert('Logout clicked!');
      }}
      @view-select=${(e: CustomEvent) => {
        console.log('View selected:', e.detail.view.name);
      }}
    ></dees-simple-appdash>
  </div>
`;