// Column rendering strategy interface and implementations import { CalendarConfig } from '../core/CalendarConfig'; import { ResourceCalendarData } from '../types/CalendarTypes'; /** * Interface for column rendering strategies */ export interface ColumnRenderer { render(dayColumns: HTMLElement, context: ColumnRenderContext): void; } /** * Context for column rendering */ export interface ColumnRenderContext { currentWeek: Date; config: CalendarConfig; resourceData?: ResourceCalendarData | null; } /** * Date-based column renderer (original functionality) */ export class DateColumnRenderer implements ColumnRenderer { render(dayColumns: HTMLElement, context: ColumnRenderContext): void { const { currentWeek, config } = context; const dates = this.getWeekDates(currentWeek); const weekDays = config.get('weekDays'); const daysToShow = dates.slice(0, weekDays); console.log('DateColumnRenderer: About to render', daysToShow.length, 'date columns'); daysToShow.forEach((date) => { const column = document.createElement('swp-day-column'); (column as any).dataset.date = this.formatDate(date); const eventsLayer = document.createElement('swp-events-layer'); column.appendChild(eventsLayer); dayColumns.appendChild(column); }); } private getWeekDates(weekStart: Date): Date[] { const dates: Date[] = []; for (let i = 0; i < 7; i++) { const date = new Date(weekStart); date.setDate(weekStart.getDate() + i); dates.push(date); } return dates; } private formatDate(date: Date): string { return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`; } } /** * Resource-based column renderer */ export class ResourceColumnRenderer implements ColumnRenderer { render(dayColumns: HTMLElement, context: ColumnRenderContext): void { const { resourceData } = context; if (!resourceData) { console.warn('ResourceColumnRenderer: No resource data available for resource columns'); return; } console.log('ResourceColumnRenderer: About to render', resourceData.resources.length, 'resource columns'); resourceData.resources.forEach((resource) => { const column = document.createElement('swp-resource-column'); (column as any).dataset.resource = resource.name; (column as any).dataset.employeeId = resource.employeeId; (column as any).dataset.date = resourceData.date; const eventsLayer = document.createElement('swp-events-layer'); column.appendChild(eventsLayer); dayColumns.appendChild(column); }); } }