dees-catalog/ts_web/elements/dees-dashboardgrid.demo.ts

import { html, css, cssManager } from '@design.estate/dees-element';
import type { DeesDashboardgrid } from './dees-dashboardgrid.js';
import '@design.estate/dees-wcctools/demotools';

export const demoFunc = () => {
  return html`
    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      const grid = elementArg.querySelector('#dashboardGrid') as DeesDashboardgrid;
      
      // Set initial widgets
      grid.widgets = [
        {
          id: 'metrics1',
          x: 0,
          y: 0,
          w: 3,
          h: 2,
          title: 'Revenue',
          icon: 'lucide:dollarSign',
          content: html`
            <div style="padding: 20px;">
              <div style="font-size: 32px; font-weight: 700; color: ${cssManager.bdTheme('#09090b', '#fafafa')};">$124,563</div>
              <div style="color: #22c55e; font-size: 14px; margin-top: 8px;">↑ 12.5% from last month</div>
            </div>
          `
        },
        {
          id: 'metrics2',
          x: 3,
          y: 0,
          w: 3,
          h: 2,
          title: 'Users',
          icon: 'lucide:users',
          content: html`
            <div style="padding: 20px;">
              <div style="font-size: 32px; font-weight: 700; color: ${cssManager.bdTheme('#09090b', '#fafafa')};">8,234</div>
              <div style="color: #3b82f6; font-size: 14px; margin-top: 8px;">↑ 5.2% from last week</div>
            </div>
          `
        },
        {
          id: 'chart1',
          x: 6,
          y: 0,
          w: 6,
          h: 4,
          title: 'Analytics',
          icon: 'lucide:lineChart',
          content: html`
            <div style="padding: 20px; height: 100%; display: flex; align-items: center; justify-content: center;">
              <div style="text-align: center; color: #71717a;">
                <dees-icon .icon=${'lucide:lineChart'} style="font-size: 48px; margin-bottom: 16px;"></dees-icon>
                <div>Chart visualization area</div>
              </div>
            </div>
          `
        }
      ];
      
      // Configure grid
      grid.cellHeight = 80;
      grid.margin = { top: 10, right: 10, bottom: 10, left: 10 };
      grid.enableAnimation = true;
      grid.showGridLines = false;
      
      let widgetCounter = 4;
      
      // Control buttons
      const buttons = elementArg.querySelectorAll('dees-button');
      buttons.forEach(button => {
        const text = button.textContent?.trim();
        
        if (text === 'Toggle Animation') {
          button.addEventListener('click', () => {
            grid.enableAnimation = !grid.enableAnimation;
          });
        } else if (text === 'Toggle Grid Lines') {
          button.addEventListener('click', () => {
            grid.showGridLines = !grid.showGridLines;
          });
        } else if (text === 'Add Widget') {
          button.addEventListener('click', () => {
            const newWidget = {
              id: `widget${widgetCounter++}`,
              x: 0,
              y: 0,
              w: 3,
              h: 2,
              autoPosition: true,
              title: `Widget ${widgetCounter - 1}`,
              icon: 'lucide:package',
              content: html`
                <div style="padding: 20px; text-align: center;">
                  <div style="color: #71717a;">New widget content</div>
                  <div style="margin-top: 8px; font-size: 24px; font-weight: 600; color: ${cssManager.bdTheme('#09090b', '#fafafa')};">${Math.floor(Math.random() * 1000)}</div>
                </div>
              `
            };
            grid.addWidget(newWidget, true);
          });
        } else if (text === 'Compact Grid') {
          button.addEventListener('click', () => {
            grid.compact();
          });
        } else if (text === 'Toggle Edit Mode') {
          button.addEventListener('click', () => {
            grid.editable = !grid.editable;
            button.textContent = grid.editable ? 'Lock Grid' : 'Unlock Grid';
          });
        }
      });
      
      // Listen to grid events
      grid.addEventListener('widget-move', (e: CustomEvent) => {
        console.log('Widget moved:', e.detail.widget);
      });
      
      grid.addEventListener('widget-resize', (e: CustomEvent) => {
        console.log('Widget resized:', e.detail.widget);
      });
    }}>
      <style>
        ${css`
          .demoBox {
            position: relative;
            background: ${cssManager.bdTheme('#f4f4f5', '#09090b')};
            height: 100%;
            width: 100%;
            padding: 40px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 24px;
          }
          
          .demo-controls {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
          }
          
          .demo-controls dees-button {
            flex-shrink: 0;
          }
          
          .grid-container-wrapper {
            flex: 1;
            min-height: 600px;
            position: relative;
          }
          
          .info {
            color: ${cssManager.bdTheme('#71717a', '#71717a')};
            font-size: 12px;
            font-family: 'Geist Sans', sans-serif;
            text-align: center;
          }
        `}
      </style>
      <div class="demoBox">
        <div class="demo-controls">
          <dees-button-group label="Animation:">
            <dees-button>Toggle Animation</dees-button>
          </dees-button-group>
          
          <dees-button-group label="Display:">
            <dees-button>Toggle Grid Lines</dees-button>
          </dees-button-group>
          
          <dees-button-group label="Actions:">
            <dees-button>Add Widget</dees-button>
            <dees-button>Compact Grid</dees-button>
          </dees-button-group>
          
          <dees-button-group label="Mode:">
            <dees-button>Toggle Edit Mode</dees-button>
          </dees-button-group>
        </div>
        
        <div class="grid-container-wrapper">
          <dees-dashboardgrid id="dashboardGrid"></dees-dashboardgrid>
        </div>
        
        <div class="info">
          Drag widgets to reposition • Resize from edges and corners • Add widgets with auto-positioning
        </div>
      </div>
    </dees-demowrapper>
  `;
};