6bbf2d8adb
Replaces DateCalculator with DateService for improved date and time operations, including timezone handling. This change enhances the calendar's accuracy and flexibility in managing dates, especially concerning timezone configurations. It also corrects a typo in the `allDay` dataset attribute.
105 lines
No EOL
3.4 KiB
TypeScript
105 lines
No EOL
3.4 KiB
TypeScript
// Column rendering strategy interface and implementations
|
|
|
|
import { CalendarConfig } from '../core/CalendarConfig';
|
|
import { ResourceCalendarData } from '../types/CalendarTypes';
|
|
import { DateService } from '../utils/DateService';
|
|
import { WorkHoursManager } from '../managers/WorkHoursManager';
|
|
|
|
/**
|
|
* Interface for column rendering strategies
|
|
*/
|
|
export interface ColumnRenderer {
|
|
render(columnContainer: 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 {
|
|
private dateService!: DateService;
|
|
private workHoursManager!: WorkHoursManager;
|
|
|
|
render(columnContainer: HTMLElement, context: ColumnRenderContext): void {
|
|
const { currentWeek, config } = context;
|
|
|
|
// Initialize date service and work hours manager
|
|
const timezone = config.getTimezone?.() || 'Europe/Copenhagen';
|
|
this.dateService = new DateService(timezone);
|
|
this.workHoursManager = new WorkHoursManager();
|
|
|
|
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`);
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
/**
|
|
* Resource-based column renderer
|
|
*/
|
|
export class ResourceColumnRenderer implements ColumnRenderer {
|
|
render(columnContainer: HTMLElement, context: ColumnRenderContext): void {
|
|
const { resourceData } = context;
|
|
|
|
if (!resourceData) {
|
|
return;
|
|
}
|
|
|
|
|
|
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);
|
|
|
|
columnContainer.appendChild(column);
|
|
});
|
|
}
|
|
} |