wip

src/v2/demo/DemoApp.ts

@@ -4,15 +4,15 @@ import { NavigationAnimator } from '../core/NavigationAnimator';
 import { DateService } from '../core/DateService';
 import { ScrollManager } from '../core/ScrollManager';
 import { HeaderDrawerManager } from '../core/HeaderDrawerManager';
-import { ViewConfig } from '../core/ViewConfig';
 import { IndexedDBContext } from '../storage/IndexedDBContext';
 import { DataSeeder } from '../workers/DataSeeder';
+import { ViewConfig } from '../core/ViewConfig';
 
 export class DemoApp {
   private animator!: NavigationAnimator;
   private container!: HTMLElement;
   private weekOffset = 0;
-  private views!: Record<string, ViewConfig>;
+  private currentView: 'simple' | 'resource' | 'team' = 'team';
 
   constructor(
     private orchestrator: CalendarOrchestrator,
@@ -41,27 +41,6 @@ export class DemoApp {
       document.querySelector('swp-content-track') as HTMLElement
     );
 
-    // View configs
-    const dates = this.dateService.getWeekDates();
-    this.views = {
-      simple: { templateId: 'simple', groupings: [{ type: 'date', values: dates }] },
-      resource: {
-        templateId: 'resource',
-        groupings: [
-          { type: 'resource', values: ['alice', 'bob', 'carol'] },
-          { type: 'date', values: dates.slice(0, 3) }
-        ]
-      },
-      team: {
-        templateId: 'team',
-        groupings: [
-          { type: 'team', values: ['alpha', 'beta'] },
-          { type: 'resource', values: ['alice', 'bob', 'carol', 'dave'], parentKey: 'teamId' },
-          { type: 'date', values: dates.slice(0, 3) }
-        ]
-      }
-    };
-
     // Render time axis (06:00 - 18:00)
     this.timeAxisRenderer.render(document.getElementById('time-axis') as HTMLElement, 6, 18);
 
@@ -73,36 +52,78 @@ export class DemoApp {
 
     // Setup event handlers
     this.setupNavigation();
-    this.setupViewSwitchers();
     this.setupDrawerToggle();
+    this.setupViewSwitching();
 
     // Initial render
-    this.orchestrator.render(this.views.simple, this.container);
+    this.render();
+  }
+
+  private async render(): Promise<void> {
+    const viewConfig = this.buildViewConfig();
+    await this.orchestrator.render(viewConfig, this.container);
+  }
+
+  private buildViewConfig(): ViewConfig {
+    const dates = this.dateService.getWeekDates(this.weekOffset);
+
+    switch (this.currentView) {
+      case 'simple':
+        return {
+          templateId: 'simple',
+          groupings: [
+            { type: 'date', values: dates }
+          ]
+        };
+
+      case 'resource':
+        return {
+          templateId: 'resource',
+          groupings: [
+            { type: 'resource', values: ['res1', 'res2', 'res3'] },
+            { type: 'date', values: dates }
+          ]
+        };
+
+      case 'team':
+        return {
+          templateId: 'team',
+          groupings: [
+            { type: 'team', values: ['team1', 'team2'] },
+            { type: 'resource', values: ['res1', 'res2', 'res3'] },
+            { type: 'date', values: dates }
+          ]
+        };
+    }
   }
 
   private setupNavigation(): void {
     document.getElementById('btn-prev')!.onclick = () => {
       this.weekOffset--;
-      this.views.simple.groupings[0].values = this.dateService.getWeekDates(this.weekOffset);
-      this.animator.slide('right', () => this.orchestrator.render(this.views.simple, this.container));
+      this.animator.slide('right', () => this.render());
     };
 
     document.getElementById('btn-next')!.onclick = () => {
       this.weekOffset++;
-      this.views.simple.groupings[0].values = this.dateService.getWeekDates(this.weekOffset);
-      this.animator.slide('left', () => this.orchestrator.render(this.views.simple, this.container));
+      this.animator.slide('left', () => this.render());
     };
   }
 
-  private setupViewSwitchers(): void {
-    document.getElementById('btn-simple')!.onclick = () =>
-      this.animator.slide('right', () => this.orchestrator.render(this.views.simple, this.container));
+  private setupViewSwitching(): void {
+    document.getElementById('btn-simple')?.addEventListener('click', () => {
+      this.currentView = 'simple';
+      this.render();
+    });
 
-    document.getElementById('btn-resource')!.onclick = () =>
-      this.animator.slide('left', () => this.orchestrator.render(this.views.resource, this.container));
+    document.getElementById('btn-resource')?.addEventListener('click', () => {
+      this.currentView = 'resource';
+      this.render();
+    });
 
-    document.getElementById('btn-team')!.onclick = () =>
-      this.animator.slide('left', () => this.orchestrator.render(this.views.team, this.container));
+    document.getElementById('btn-team')?.addEventListener('click', () => {
+      this.currentView = 'team';
+      this.render();
+    });
   }
 
   private setupDrawerToggle(): void {