Calendar/src/v2/demo/DemoApp.ts

import { CalendarOrchestrator } from '../core/CalendarOrchestrator';
import { TimeAxisRenderer } from '../features/timeaxis/TimeAxisRenderer';
import { NavigationAnimator } from '../core/NavigationAnimator';
import { DateService } from '../core/DateService';
import { ViewConfig } from '../core/ViewConfig';

export class DemoApp {
  private animator!: NavigationAnimator;
  private container!: HTMLElement;
  private weekOffset = 0;
  private views!: Record<string, ViewConfig>;

  constructor(
    private orchestrator: CalendarOrchestrator,
    private timeAxisRenderer: TimeAxisRenderer,
    private dateService: DateService
  ) {}

  init(): void {
    this.container = document.querySelector('swp-calendar-container') as HTMLElement;

    // NavigationAnimator har DOM-dependencies - tilladt med new
    this.animator = new NavigationAnimator(
      document.querySelector('swp-header-track') as HTMLElement,
      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
    this.timeAxisRenderer.render(document.getElementById('time-axis') as HTMLElement);

    // Setup event handlers
    this.setupNavigation();
    this.setupViewSwitchers();

    // Initial render
    this.orchestrator.render(this.views.simple, this.container);
  }

  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));
    };

    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));
    };
  }

  private setupViewSwitchers(): void {
    document.getElementById('btn-simple')!.onclick = () =>
      this.animator.slide('right', () => this.orchestrator.render(this.views.simple, this.container));

    document.getElementById('btn-resource')!.onclick = () =>
      this.animator.slide('left', () => this.orchestrator.render(this.views.resource, this.container));

    document.getElementById('btn-team')!.onclick = () =>
      this.animator.slide('left', () => this.orchestrator.render(this.views.team, this.container));
  }
}