Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactors calendar initialization with factory

Browse source 
Implements a factory pattern for manager creation and
initialization, improving dependency management and
extensibility.

This change replaces direct manager instantiation with a
`ManagerFactory` that handles dependency injection. This
enhances code organization and testability. It also includes
an initialization sequence diagram for better understanding
of the calendar's architecture and data flow.
This commit is contained in:
Janus Knudsen 2025-08-17 23:44:30 +02:00
parent 32ee35eb02
commit 26f0cb8aaa
11 changed files with 333 additions and 150 deletions
Download patch file Download diff file Expand all files Collapse all files

75
src/managers/EventManager.ts
View file

@ -184,81 +184,6 @@ export class EventManager {
this.syncEvents();
}
/**
* Load events for a specific week into a container (POC-style)
*/
private loadEventsForWeek(weekStart: Date, weekEnd: Date, container: HTMLElement): void {
console.log(`EventManager: Loading events for week ${weekStart.toDateString()} - ${weekEnd.toDateString()}`);
// Filter events for this week
const weekEvents = this.events.filter(event => {
const eventDate = new Date(event.start);
return eventDate >= weekStart && eventDate <= weekEnd;
});
console.log(`EventManager: Found ${weekEvents.length} events for this week`);
// Render events in the container (POC approach)
this.renderEventsInContainer(weekEvents, container);
}
/**
* Render events in a specific container (POC-style)
*/
private renderEventsInContainer(events: CalendarEvent[], container: HTMLElement): void {
const dayColumns = container.querySelectorAll('swp-day-column');
events.forEach(event => {
const eventDate = new Date(event.start);
const dayOfWeek = eventDate.getDay(); // 0 = Sunday
const column = dayColumns[dayOfWeek];
if (column) {
const eventsLayer = column.querySelector('swp-events-layer');
if (eventsLayer) {
this.renderEventInColumn(event, eventsLayer as HTMLElement);
}
}
});
}
/**
* Render a single event in a column (POC-style)
*/
private renderEventInColumn(event: CalendarEvent, eventsLayer: HTMLElement): void {
const eventElement = document.createElement('swp-event');
eventElement.dataset.type = event.type || 'meeting';
// Calculate position (simplified - assumes 7 AM start like POC)
const startTime = new Date(event.start);
const hours = startTime.getHours();
const minutes = startTime.getMinutes();
const startMinutes = (hours - 7) * 60 + minutes; // 7 is start hour like POC
// Calculate duration
const endTime = new Date(event.end);
const durationMs = endTime.getTime() - startTime.getTime();
const durationMinutes = Math.floor(durationMs / (1000 * 60));
eventElement.style.top = `${startMinutes}px`;
eventElement.style.height = `${durationMinutes}px`;
eventElement.innerHTML = `
<swp-event-time>${this.formatTime(hours, minutes)}</swp-event-time>
<swp-event-title>${event.title}</swp-event-title>
`;
eventsLayer.appendChild(eventElement);
}
/**
* Format time for display (POC-style)
*/
private formatTime(hours: number, minutes: number): string {
const period = hours >= 12 ? 'PM' : 'AM';
const displayHours = hours % 12 || 12;
return `${displayHours}:${String(minutes).padStart(2, '0')} ${period}`;
}
public destroy(): void {
this.events = [];