// Column rendering strategy interface and implementations import { Configuration } from '../configuration/CalendarConfig'; import { DateService } from '../utils/DateService'; import { WorkHoursManager } from '../managers/WorkHoursManager'; /** * Interface for column rendering strategies */ export interface IColumnRenderer { render(columnContainer: HTMLElement, context: IColumnRenderContext): void; } /** * Context for column rendering */ export interface IColumnRenderContext { currentWeek: Date; config: Configuration; } /** * Date-based column renderer (original functionality) */ export class DateColumnRenderer implements IColumnRenderer { private dateService: DateService; private workHoursManager: WorkHoursManager; constructor( dateService: DateService, workHoursManager: WorkHoursManager ) { this.dateService = dateService; this.workHoursManager = workHoursManager; } render(columnContainer: HTMLElement, context: IColumnRenderContext): void { const { currentWeek, config } = context; const workWeekSettings = config.getWorkWeekSettings(); const dates = this.dateService.getWorkWeekDates(currentWeek, workWeekSettings.workDays); const dateSettings = config.getDateViewSettings(); const daysToShow = dates.slice(0, dateSettings.weekDays); daysToShow.forEach((date) => { const column = document.createElement('swp-day-column'); (column as any).dataset.date = this.dateService.formatISODate(date); // Apply work hours styling this.applyWorkHoursToColumn(column, date); const eventsLayer = document.createElement('swp-events-layer'); column.appendChild(eventsLayer); columnContainer.appendChild(column); }); } private applyWorkHoursToColumn(column: HTMLElement, date: Date): void { const workHours = this.workHoursManager.getWorkHoursForDate(date); if (workHours === 'off') { // No work hours - mark as off day (full day will be colored) (column as any).dataset.workHours = 'off'; } else { // Calculate and apply non-work hours overlays (before and after work) const nonWorkStyle = this.workHoursManager.calculateNonWorkHoursStyle(workHours); if (nonWorkStyle) { // Before work overlay (::before pseudo-element) column.style.setProperty('--before-work-height', `${nonWorkStyle.beforeWorkHeight}px`); // After work overlay (::after pseudo-element) column.style.setProperty('--after-work-top', `${nonWorkStyle.afterWorkTop}px`); } } } }