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.
91 lines
No EOL
2.9 KiB
TypeScript
91 lines
No EOL
2.9 KiB
TypeScript
// Header rendering strategy interface and implementations
|
|
|
|
import { CalendarConfig } from '../core/CalendarConfig';
|
|
import { ResourceCalendarData } from '../types/CalendarTypes';
|
|
import { DateService } from '../utils/DateService';
|
|
|
|
/**
|
|
* Interface for header rendering strategies
|
|
*/
|
|
export interface HeaderRenderer {
|
|
render(calendarHeader: HTMLElement, context: HeaderRenderContext): void;
|
|
}
|
|
|
|
|
|
/**
|
|
* Context for header rendering
|
|
*/
|
|
export interface HeaderRenderContext {
|
|
currentWeek: Date;
|
|
config: CalendarConfig;
|
|
resourceData?: ResourceCalendarData | null;
|
|
}
|
|
|
|
/**
|
|
* Date-based header renderer (original functionality)
|
|
*/
|
|
export class DateHeaderRenderer implements HeaderRenderer {
|
|
private dateService!: DateService;
|
|
|
|
render(calendarHeader: HTMLElement, context: HeaderRenderContext): void {
|
|
const { currentWeek, config } = context;
|
|
|
|
// FIRST: Always create all-day container as part of standard header structure
|
|
const allDayContainer = document.createElement('swp-allday-container');
|
|
calendarHeader.appendChild(allDayContainer);
|
|
|
|
// Initialize date service with config
|
|
const timezone = config.getTimezone?.() || 'Europe/Copenhagen';
|
|
this.dateService = new DateService(timezone);
|
|
|
|
const workWeekSettings = config.getWorkWeekSettings();
|
|
const dates = this.dateService.getWorkWeekDates(currentWeek, workWeekSettings.workDays);
|
|
const weekDays = config.getDateViewSettings().weekDays;
|
|
const daysToShow = dates.slice(0, weekDays);
|
|
|
|
daysToShow.forEach((date, index) => {
|
|
const header = document.createElement('swp-day-header');
|
|
if (this.dateService.isSameDay(date, new Date())) {
|
|
(header as any).dataset.today = 'true';
|
|
}
|
|
|
|
const dayName = this.dateService.getDayName(date, 'short');
|
|
|
|
header.innerHTML = `
|
|
<swp-day-name>${dayName}</swp-day-name>
|
|
<swp-day-date>${date.getDate()}</swp-day-date>
|
|
`;
|
|
(header as any).dataset.date = this.dateService.formatISODate(date);
|
|
|
|
calendarHeader.appendChild(header);
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Resource-based header renderer
|
|
*/
|
|
export class ResourceHeaderRenderer implements HeaderRenderer {
|
|
render(calendarHeader: HTMLElement, context: HeaderRenderContext): void {
|
|
const { resourceData } = context;
|
|
|
|
if (!resourceData) {
|
|
return;
|
|
}
|
|
|
|
resourceData.resources.forEach((resource) => {
|
|
const header = document.createElement('swp-resource-header');
|
|
header.setAttribute('data-resource', resource.name);
|
|
header.setAttribute('data-employee-id', resource.employeeId);
|
|
|
|
header.innerHTML = `
|
|
<swp-resource-avatar>
|
|
<img src="${resource.avatarUrl}" alt="${resource.displayName}" onerror="this.style.display='none'">
|
|
</swp-resource-avatar>
|
|
<swp-resource-name>${resource.displayName}</swp-resource-name>
|
|
`;
|
|
|
|
calendarHeader.appendChild(header);
|
|
});
|
|
}
|
|
} |