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

23
src/managers/CalendarManager.ts
View file

@ -4,7 +4,7 @@ import { CalendarConfig } from '../core/CalendarConfig.js';
import { CalendarEvent, CalendarView, IEventBus } from '../types/CalendarTypes.js';
import { EventManager } from './EventManager.js';
import { GridManager } from './GridManager.js';
import { EventRenderer } from '../renderers/EventRendererManager.js';
import { EventRenderingService } from '../renderers/EventRendererManager.js';
import { ScrollManager } from './ScrollManager.js';
/**
@ -16,27 +16,28 @@ export class CalendarManager {
private config: CalendarConfig;
private eventManager: EventManager;
private gridManager: GridManager;
private eventRenderer: EventRenderer;
private eventRenderer: EventRenderingService;
private scrollManager: ScrollManager;
private currentView: CalendarView = 'week';
private currentDate: Date = new Date();
private isInitialized: boolean = false;
constructor(eventBus: IEventBus, config: CalendarConfig) {
constructor(
eventBus: IEventBus,
config: CalendarConfig,
eventManager: EventManager,
gridManager: GridManager,
eventRenderer: EventRenderingService,
scrollManager: ScrollManager
) {
this.eventBus = eventBus;
this.config = config;
this.setupEventListeners();
console.log('📋 CalendarManager: Created with direct coordination');
}
/**
* Set manager references (called from index.ts)
*/
public setManagers(eventManager: EventManager, gridManager: GridManager, eventRenderer: EventRenderer, scrollManager: ScrollManager): void {
this.eventManager = eventManager;
this.gridManager = gridManager;
this.eventRenderer = eventRenderer;
this.scrollManager = scrollManager;
this.setupEventListeners();
console.log('📋 CalendarManager: Created with proper dependency injection');
}
/**

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 = [];

15
src/managers/NavigationManager.ts
View file

@ -197,25 +197,12 @@ export class NavigationManager {
});
}
// Utility functions (from POC) - moved formatting to NavigationRenderer
private updateWeekInfo(): void {
const weekNumber = DateUtils.getWeekNumber(this.currentWeek);
const weekEnd = DateUtils.addDays(this.currentWeek, 6);
const dateRange = DateUtils.formatDateRange(this.currentWeek, weekEnd);
// Update week info in DOM
const weekNumberElement = document.querySelector('swp-week-number');
const dateRangeElement = document.querySelector('swp-date-range');
if (weekNumberElement)
weekNumberElement.textContent = `Week ${weekNumber}`;
if (dateRangeElement)
dateRangeElement.textContent = dateRange;
// Notify other managers about week info update
// Notify other managers about week info update - DOM manipulation should happen via events
this.eventBus.emit(EventTypes.WEEK_INFO_UPDATED, {
weekNumber,
dateRange,