87 lines
2.6 KiB
TypeScript
87 lines
2.6 KiB
TypeScript
|
// 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);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|