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

Removes excessive logging statements

Browse source 
Cleans up the codebase by removing unnecessary console log statements.

These logs were primarily used for debugging and are no longer needed in the production code.
This reduces noise in the console and improves overall performance.
This commit is contained in:
Janus Knudsen 2025-08-31 22:39:09 +02:00
parent 383eab7524
commit fafad16926
24 changed files with 4 additions and 275 deletions
Download patch file Download diff file Expand all files Collapse all files

4
build.js
View file

@ -23,7 +23,6 @@ async function renameFiles(dir) {
if (baseName !== kebabName) { if (baseName !== kebabName) {
const newPath = join(dirname(fullPath), kebabName + '.js'); const newPath = join(dirname(fullPath), kebabName + '.js');
await rename(fullPath, newPath); await rename(fullPath, newPath);
console.log(`Renamed: ${entry.name} -> ${kebabName}.js`);
} }
} }
} }
@ -32,7 +31,6 @@ async function renameFiles(dir) {
// Build with esbuild // Build with esbuild
async function build() { async function build() {
try { try {
console.log('Building TypeScript files...');
await esbuild.build({ await esbuild.build({
entryPoints: ['src/index.ts'], entryPoints: ['src/index.ts'],
@ -46,9 +44,7 @@ async function build() {
platform: 'browser' platform: 'browser'
}); });
console.log('Bundle created: js/calendar.js');
console.log('Build completed successfully!');
} catch (error) { } catch (error) {
console.error('Build failed:', error); console.error('Build failed:', error);
process.exit(1); process.exit(1);

5
calendar-eventbus.js
View file

@ -67,10 +67,7 @@ export class EventBus {
cancelable: true cancelable: true
}); });
// Log event
if (this.debug) {
console.log(`📢 Event: ${eventType}`, detail);
}
this.eventLog.push({ this.eventLog.push({
type: eventType, type: eventType,

1
month-view-design.html
View file

@ -529,7 +529,6 @@
if (e.target.classList.contains('month-day-cell') || e.target.closest('.month-day-cell')) { if (e.target.classList.contains('month-day-cell') || e.target.closest('.month-day-cell')) {
const cell = e.target.closest('.month-day-cell'); const cell = e.target.closest('.month-day-cell');
const dayNumber = cell.querySelector('.month-day-number').textContent; const dayNumber = cell.querySelector('.month-day-number').textContent;
console.log('Day clicked:', dayNumber);
} }
}); });
</script> </script>

5
src/core/CalendarConfig.ts
View file

@ -163,10 +163,8 @@ export class CalendarConfig {
// Set calendar mode // Set calendar mode
if (typeParam === 'resource' || typeParam === 'date') { if (typeParam === 'resource' || typeParam === 'date') {
this.calendarMode = typeParam; this.calendarMode = typeParam;
console.log(`CalendarConfig: Calendar mode set to '${this.calendarMode}' from URL parameter`);
} else { } else {
this.calendarMode = 'date'; // Default this.calendarMode = 'date'; // Default
console.log(`CalendarConfig: Calendar mode defaulted to '${this.calendarMode}'`);
} }
// Set selected date // Set selected date
@ -174,14 +172,11 @@ export class CalendarConfig {
const parsedDate = new Date(dateParam); const parsedDate = new Date(dateParam);
if (!isNaN(parsedDate.getTime())) { if (!isNaN(parsedDate.getTime())) {
this.selectedDate = parsedDate; this.selectedDate = parsedDate;
console.log(`CalendarConfig: Selected date set to '${this.selectedDate.toISOString()}' from URL parameter`);
} else { } else {
console.warn(`CalendarConfig: Invalid date parameter '${dateParam}', using current date`);
this.selectedDate = new Date(); this.selectedDate = new Date();
} }
} else { } else {
this.selectedDate = new Date(); // Default to today this.selectedDate = new Date(); // Default to today
console.log(`CalendarConfig: Selected date defaulted to today: ${this.selectedDate.toISOString()}`);
} }
} }

5
src/core/EventBus.ts
View file

@ -62,7 +62,6 @@ export class EventBus implements IEventBus {
emit(eventType: string, detail: any = {}): boolean { emit(eventType: string, detail: any = {}): boolean {
// Validate eventType // Validate eventType
if (!eventType || typeof eventType !== 'string') { if (!eventType || typeof eventType !== 'string') {
console.error('EventBus.emit: Invalid eventType provided', eventType);
return false; return false;
} }
@ -103,9 +102,6 @@ export class EventBus implements IEventBus {
const { emoji, color } = this.getCategoryStyle(category); const { emoji, color } = this.getCategoryStyle(category);
// Use collapsed group to reduce visual noise // Use collapsed group to reduce visual noise
console.groupCollapsed(`%c${emoji} ${category.toUpperCase()}`, `color: ${color}; font-weight: bold`);
console.log(`Event: ${eventType}`, detail);
console.groupEnd();
} }
/** /**
@ -113,7 +109,6 @@ export class EventBus implements IEventBus {
*/ */
private extractCategory(eventType: string): string { private extractCategory(eventType: string): string {
if (!eventType || typeof eventType !== 'string') { if (!eventType || typeof eventType !== 'string') {
console.error('EventBus.extractCategory: Invalid eventType', eventType);
return 'unknown'; return 'unknown';
} }

5
src/factories/CalendarTypeFactory.ts
View file

@ -27,7 +27,6 @@ export class CalendarTypeFactory {
*/ */
static initialize(): void { static initialize(): void {
if (this.isInitialized) { if (this.isInitialized) {
console.warn('CalendarModeFactory: Already initialized, skipping');
return; return;
} }
@ -45,7 +44,6 @@ export class CalendarTypeFactory {
}); });
this.isInitialized = true; this.isInitialized = true;
console.log('CalendarModeFactory: Initialized with default renderers', Array.from(this.renderers.keys()));
} }
/** /**
@ -53,7 +51,6 @@ export class CalendarTypeFactory {
*/ */
static registerRenderers(type: CalendarMode, config: RendererConfig): void { static registerRenderers(type: CalendarMode, config: RendererConfig): void {
this.renderers.set(type, config); this.renderers.set(type, config);
console.log(`CalendarModeFactory: Registered renderers for type '${type}'`);
} }
/** /**
@ -63,7 +60,6 @@ export class CalendarTypeFactory {
const renderers = this.renderers.get(type); const renderers = this.renderers.get(type);
if (!renderers) { if (!renderers) {
console.warn(`CalendarModeFactory: No renderers found for type '${type}', falling back to 'date'`);
return this.renderers.get('date')!; return this.renderers.get('date')!;
} }
@ -110,6 +106,5 @@ export class CalendarTypeFactory {
*/ */
static clear(): void { static clear(): void {
this.renderers.clear(); this.renderers.clear();
console.log('CalendarModeFactory: All renderers cleared');
} }
} }

5
src/factories/ManagerFactory.ts
View file

@ -37,7 +37,6 @@ export class ManagerFactory {
calendarManager: CalendarManager; calendarManager: CalendarManager;
dragDropManager: DragDropManager; dragDropManager: DragDropManager;
} { } {
console.log('🏭 ManagerFactory: Creating managers with proper DI...');
// Create managers in dependency order // Create managers in dependency order
const eventManager = new EventManager(eventBus); const eventManager = new EventManager(eventBus);
@ -58,7 +57,6 @@ export class ManagerFactory {
scrollManager scrollManager
); );
console.log('✅ ManagerFactory: All managers created successfully');
return { return {
eventManager, eventManager,
@ -79,13 +77,10 @@ export class ManagerFactory {
calendarManager: CalendarManager; calendarManager: CalendarManager;
[key: string]: any; [key: string]: any;
}): Promise<void> { }): Promise<void> {
console.log('🚀 ManagerFactory: Initializing managers...');
try { try {
await managers.calendarManager.initialize(); await managers.calendarManager.initialize();
console.log('✅ ManagerFactory: All managers initialized successfully');
} catch (error) { } catch (error) {
console.error('❌ ManagerFactory: Manager initialization failed:', error);
throw error; throw error;
} }
} }

9
src/index.ts
View file

@ -8,14 +8,12 @@ import { ManagerFactory } from './factories/ManagerFactory.js';
* Initialize the calendar application with simple direct calls * Initialize the calendar application with simple direct calls
*/ */
async function initializeCalendar(): Promise<void> { async function initializeCalendar(): Promise<void> {
console.log('🗓️ Initializing Calendar Plantempus with factory pattern...');
try { try {
// Use the singleton calendar configuration // Use the singleton calendar configuration
const config = calendarConfig; const config = calendarConfig;
// Initialize the CalendarTypeFactory before creating managers // Initialize the CalendarTypeFactory before creating managers
console.log('🏭 Initializing CalendarTypeFactory...');
CalendarTypeFactory.initialize(); CalendarTypeFactory.initialize();
// Create managers using factory pattern // Create managers using factory pattern
@ -28,8 +26,6 @@ async function initializeCalendar(): Promise<void> {
// Initialize all managers // Initialize all managers
await managerFactory.initializeManagers(managers); await managerFactory.initializeManagers(managers);
console.log('🎊 Calendar Plantempus initialized successfully!');
console.log('📊 Initialization Report:', managers.calendarManager.getInitializationReport());
// Expose to window for debugging // Expose to window for debugging
(window as any).calendarDebug = { (window as any).calendarDebug = {
@ -38,7 +34,6 @@ async function initializeCalendar(): Promise<void> {
}; };
} catch (error) { } catch (error) {
console.error('💥 Calendar initialization failed:', error);
throw error; throw error;
} }
} }
@ -47,11 +42,9 @@ async function initializeCalendar(): Promise<void> {
if (document.readyState === 'loading') { if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
initializeCalendar().catch(error => { initializeCalendar().catch(error => {
console.error('Failed to initialize calendar:', error); });
});
}); });
} else { } else {
initializeCalendar().catch(error => { initializeCalendar().catch(error => {
console.error('Failed to initialize calendar:', error);
}); });
} }

32
src/managers/CalendarManager.ts
View file

@ -43,7 +43,6 @@ export class CalendarManager {
this.eventFilterManager = new EventFilterManager(); this.eventFilterManager = new EventFilterManager();
this.dateCalculator = new DateCalculator(config); this.dateCalculator = new DateCalculator(config);
this.setupEventListeners(); this.setupEventListeners();
console.log('📋 CalendarManager: Created with proper dependency injection');
} }
/** /**
@ -51,23 +50,18 @@ export class CalendarManager {
*/ */
public async initialize(): Promise<void> { public async initialize(): Promise<void> {
if (this.isInitialized) { if (this.isInitialized) {
console.warn('CalendarManager is already initialized');
return; return;
} }
console.log('🚀 CalendarManager: Starting simple initialization');
try { try {
// Debug: Check calendar type // Debug: Check calendar type
const calendarType = this.config.getCalendarMode(); const calendarType = this.config.getCalendarMode();
console.log(`🔍 CalendarManager: Initializing ${calendarType} calendar`);
// Step 1: Load data // Step 1: Load data
console.log('📊 Loading event data...');
await this.eventManager.loadData(); await this.eventManager.loadData();
// Step 2: Pass data to GridManager and render grid structure // Step 2: Pass data to GridManager and render grid structure
console.log('🏗️ Rendering grid...');
if (calendarType === 'resource') { if (calendarType === 'resource') {
const resourceData = this.eventManager.getResourceData(); const resourceData = this.eventManager.getResourceData();
this.gridManager.setResourceData(resourceData); this.gridManager.setResourceData(resourceData);
@ -76,7 +70,6 @@ export class CalendarManager {
// Step 2b: Trigger event rendering now that data is loaded // Step 2b: Trigger event rendering now that data is loaded
// Re-emit GRID_RENDERED to trigger EventRendererManager // Re-emit GRID_RENDERED to trigger EventRendererManager
console.log('🎨 Triggering event rendering...');
const gridContainer = document.querySelector('swp-calendar-container'); const gridContainer = document.querySelector('swp-calendar-container');
if (gridContainer) { if (gridContainer) {
const periodRange = this.gridManager.getDisplayDates(); const periodRange = this.gridManager.getDisplayDates();
@ -90,19 +83,15 @@ export class CalendarManager {
} }
// Step 3: Initialize scroll synchronization // Step 3: Initialize scroll synchronization
console.log('📜 Setting up scroll synchronization...');
this.scrollManager.initialize(); this.scrollManager.initialize();
// Step 4: Set initial view and date BEFORE event rendering // Step 4: Set initial view and date BEFORE event rendering
console.log('⚙️ Setting initial view and date...');
this.setView(this.currentView); this.setView(this.currentView);
this.setCurrentDate(this.currentDate); this.setCurrentDate(this.currentDate);
// Step 5: Event rendering will be triggered by GRID_RENDERED event // Step 5: Event rendering will be triggered by GRID_RENDERED event
console.log('🎨 Event rendering will be triggered automatically by grid events...');
this.isInitialized = true; this.isInitialized = true;
console.log('✅ CalendarManager: Simple initialization complete');
// Emit initialization complete event // Emit initialization complete event
this.eventBus.emit(CoreEvents.INITIALIZED, { this.eventBus.emit(CoreEvents.INITIALIZED, {
@ -111,7 +100,6 @@ export class CalendarManager {
}); });
} catch (error) { } catch (error) {
console.error('❌ CalendarManager initialization failed:', error);
throw error; throw error;
} }
} }
@ -127,7 +115,6 @@ export class CalendarManager {
const previousView = this.currentView; const previousView = this.currentView;
this.currentView = view; this.currentView = view;
console.log(`Changing view from ${previousView} to ${view}`);
// Emit view change event // Emit view change event
this.eventBus.emit(CoreEvents.VIEW_CHANGED, { this.eventBus.emit(CoreEvents.VIEW_CHANGED, {
@ -145,7 +132,6 @@ export class CalendarManager {
public setCurrentDate(date: Date): void { public setCurrentDate(date: Date): void {
// Validate input date // Validate input date
if (!date || !(date instanceof Date) || isNaN(date.getTime())) { if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
console.error('CalendarManager.setCurrentDate: Invalid date provided', date);
return; return;
} }
@ -156,7 +142,6 @@ export class CalendarManager {
const prevDateStr = previousDate && !isNaN(previousDate.getTime()) ? previousDate.toISOString() : 'Invalid Date'; const prevDateStr = previousDate && !isNaN(previousDate.getTime()) ? previousDate.toISOString() : 'Invalid Date';
const newDateStr = this.currentDate.toISOString(); const newDateStr = this.currentDate.toISOString();
console.log(`Changing date from ${prevDateStr} to ${newDateStr}`);
// Emit date change event // Emit date change event
this.eventBus.emit(CoreEvents.DATE_CHANGED, { this.eventBus.emit(CoreEvents.DATE_CHANGED, {
@ -235,7 +220,6 @@ export class CalendarManager {
* Genindlæs calendar data * Genindlæs calendar data
*/ */
public refresh(): void { public refresh(): void {
console.log('Refreshing calendar...');
this.eventBus.emit(CoreEvents.REFRESH_REQUESTED, { this.eventBus.emit(CoreEvents.REFRESH_REQUESTED, {
view: this.currentView, view: this.currentView,
@ -247,7 +231,6 @@ export class CalendarManager {
* Ryd calendar og nulstil til standard tilstand * Ryd calendar og nulstil til standard tilstand
*/ */
public reset(): void { public reset(): void {
console.log('Resetting calendar...');
this.currentView = 'week'; this.currentView = 'week';
this.currentDate = new Date(); this.currentDate = new Date();
@ -265,7 +248,6 @@ export class CalendarManager {
// Listen for workweek changes only // Listen for workweek changes only
this.eventBus.on(CoreEvents.WORKWEEK_CHANGED, (event: Event) => { this.eventBus.on(CoreEvents.WORKWEEK_CHANGED, (event: Event) => {
const customEvent = event as CustomEvent; const customEvent = event as CustomEvent;
console.log('CalendarManager: Workweek changed to', customEvent.detail.workWeekId);
this.handleWorkweekChange(); this.handleWorkweekChange();
// Also update week info display since workweek affects date range display // Also update week info display since workweek affects date range display
@ -379,7 +361,6 @@ export class CalendarManager {
* Handle workweek configuration changes * Handle workweek configuration changes
*/ */
private handleWorkweekChange(): void { private handleWorkweekChange(): void {
console.log('CalendarManager: Handling workweek change - forcing full grid rebuild');
// Force a complete grid rebuild by clearing existing structure // Force a complete grid rebuild by clearing existing structure
const container = document.querySelector('swp-calendar-container'); const container = document.querySelector('swp-calendar-container');
@ -401,7 +382,6 @@ export class CalendarManager {
* Re-render events after grid structure changes * Re-render events after grid structure changes
*/ */
private rerenderEvents(): void { private rerenderEvents(): void {
console.log('CalendarManager: Re-rendering events for new workweek');
// Get current period data to determine date range // Get current period data to determine date range
const periodData = this.calculateCurrentPeriod(); const periodData = this.calculateCurrentPeriod();
@ -409,7 +389,6 @@ export class CalendarManager {
// Find the grid container to render events in // Find the grid container to render events in
const container = document.querySelector('swp-calendar-container'); const container = document.querySelector('swp-calendar-container');
if (!container) { if (!container) {
console.warn('CalendarManager: No container found for event re-rendering');
return; return;
} }
@ -426,19 +405,16 @@ export class CalendarManager {
*/ */
private updateWeekInfoForWorkweekChange(): void { private updateWeekInfoForWorkweekChange(): void {
// Don't do anything here - let GRID_RENDERED event handle it // Don't do anything here - let GRID_RENDERED event handle it
console.log('CalendarManager: Workweek changed - week info will update after grid renders');
} }
/** /**
* Update week info based on actual rendered columns * Update week info based on actual rendered columns
*/ */
private updateWeekInfoFromRenderedColumns(): void { private updateWeekInfoFromRenderedColumns(): void {
console.log('CalendarManager: Updating week info from rendered columns');
// Get actual dates from rendered columns // Get actual dates from rendered columns
const columns = document.querySelectorAll('swp-day-column'); const columns = document.querySelectorAll('swp-day-column');
if (columns.length === 0) { if (columns.length === 0) {
console.warn('CalendarManager: No columns found for week info update');
return; return;
} }
@ -450,7 +426,6 @@ export class CalendarManager {
const lastDateStr = lastColumn.dataset.date; const lastDateStr = lastColumn.dataset.date;
if (!firstDateStr || !lastDateStr) { if (!firstDateStr || !lastDateStr) {
console.warn('CalendarManager: Column dates not found');
return; return;
} }
@ -464,13 +439,6 @@ export class CalendarManager {
// Format date range // Format date range
const dateRange = this.dateCalculator.formatDateRange(firstDate, lastDate); const dateRange = this.dateCalculator.formatDateRange(firstDate, lastDate);
console.log('CalendarManager: Week info from columns:', {
firstDate: firstDateStr,
lastDate: lastDateStr,
weekNumber,
dateRange
});
// Emit week info update // Emit week info update
this.eventBus.emit(CoreEvents.WEEK_CHANGED, { this.eventBus.emit(CoreEvents.WEEK_CHANGED, {
weekNumber, weekNumber,

16
src/managers/DragDropManager.ts
View file

@ -52,7 +52,6 @@ export class DragDropManager {
*/ */
public setSnapInterval(minutes: number): void { public setSnapInterval(minutes: number): void {
this.snapIntervalMinutes = minutes; this.snapIntervalMinutes = minutes;
console.log(`DragDropManager: Snap interval set to ${minutes} minutes (${this.snapDistancePx}px)`);
} }
private init(): void { private init(): void {
@ -126,10 +125,6 @@ export class DragDropManager {
column: this.currentColumn column: this.currentColumn
}); });
console.log('DragDropManager: Drag started', {
eventId: this.draggedEventId,
column: this.currentColumn
});
} }
} }
@ -156,10 +151,6 @@ export class DragDropManager {
mouseOffset: this.mouseOffset mouseOffset: this.mouseOffset
}); });
console.log(`DragDropManager: Drag moved ${this.snapIntervalMinutes} minutes`, {
snappedY,
column
});
} }
// Check for auto-scroll // Check for auto-scroll
@ -168,7 +159,6 @@ export class DragDropManager {
// Check for column change // Check for column change
const newColumn = this.detectColumn(event.clientX, event.clientY); const newColumn = this.detectColumn(event.clientX, event.clientY);
if (newColumn && newColumn !== this.currentColumn) { if (newColumn && newColumn !== this.currentColumn) {
console.log(`DragDropManager: Column changed from ${this.currentColumn} to ${newColumn}`);
this.currentColumn = newColumn; this.currentColumn = newColumn;
this.eventBus.emit('drag:column-change', { this.eventBus.emit('drag:column-change', {
@ -203,11 +193,6 @@ export class DragDropManager {
finalY finalY
}); });
console.log('DragDropManager: Drag ended', {
eventId: this.draggedEventId,
finalColumn,
finalY
});
// Clean up // Clean up
this.draggedEventId = null; this.draggedEventId = null;
@ -263,7 +248,6 @@ export class DragDropManager {
if (!this.scrollContainer) { if (!this.scrollContainer) {
this.scrollContainer = document.querySelector('swp-scrollable-content') as HTMLElement; this.scrollContainer = document.querySelector('swp-scrollable-content') as HTMLElement;
if (!this.scrollContainer) { if (!this.scrollContainer) {
console.warn('DragDropManager: Could not find swp-scrollable-content for auto-scroll');
return; return;
} }
} }

2
src/managers/EventFilterManager.ts
View file

@ -35,7 +35,6 @@ export class EventFilterManager {
this.searchInput = document.querySelector('swp-search-container input[type="search"]'); this.searchInput = document.querySelector('swp-search-container input[type="search"]');
if (!this.searchInput) { if (!this.searchInput) {
console.warn('EventFilterManager: Search input not found');
return; return;
} }
@ -113,7 +112,6 @@ export class EventFilterManager {
private applyFilter(query: string): void { private applyFilter(query: string): void {
if (!this.fuse) { if (!this.fuse) {
console.warn('EventFilterManager: Cannot filter - Fuse not initialized');
return; return;
} }

17
src/managers/EventManager.ts
View file

@ -12,10 +12,8 @@ export class EventManager {
private events: CalendarEvent[] = []; private events: CalendarEvent[] = [];
constructor(eventBus: IEventBus) { constructor(eventBus: IEventBus) {
console.log('EventManager: Constructor called');
this.eventBus = eventBus; this.eventBus = eventBus;
this.setupEventListeners(); this.setupEventListeners();
console.log('EventManager: Waiting for CALENDAR_INITIALIZED before loading data');
} }
private setupEventListeners(): void { private setupEventListeners(): void {
@ -28,17 +26,10 @@ export class EventManager {
* Public method to load data - called directly by CalendarManager * Public method to load data - called directly by CalendarManager
*/ */
public async loadData(): Promise<void> { public async loadData(): Promise<void> {
console.log('EventManager: Loading data via direct call');
await this.loadMockData(); await this.loadMockData();
console.log(`EventManager: Data loaded successfully - ${this.events.length} events`);
// Debug: Log first few events // Debug: Log first few events
if (this.events.length > 0) { if (this.events.length > 0) {
console.log('EventManager: First event:', {
title: this.events[0].title,
start: this.events[0].start,
end: this.events[0].end
});
} }
} }
@ -47,7 +38,6 @@ export class EventManager {
const calendarType = calendarConfig.getCalendarMode(); const calendarType = calendarConfig.getCalendarMode();
let jsonFile: string; let jsonFile: string;
console.log(`EventManager: Calendar type detected: '${calendarType}'`);
if (calendarType === 'resource') { if (calendarType === 'resource') {
jsonFile = '/src/data/mock-resource-events.json'; jsonFile = '/src/data/mock-resource-events.json';
@ -55,7 +45,6 @@ export class EventManager {
jsonFile = '/src/data/mock-events.json'; jsonFile = '/src/data/mock-events.json';
} }
console.log(`EventManager: Loading ${calendarType} calendar data from ${jsonFile}`);
const response = await fetch(jsonFile); const response = await fetch(jsonFile);
if (!response.ok) { if (!response.ok) {
@ -63,7 +52,6 @@ export class EventManager {
} }
const data = await response.json(); const data = await response.json();
console.log(`EventManager: Loaded data for ${calendarType} calendar`);
// Store raw data for GridManager // Store raw data for GridManager
this.rawData = data; this.rawData = data;
@ -71,7 +59,6 @@ export class EventManager {
// Process data for internal use // Process data for internal use
this.processCalendarData(calendarType, data); this.processCalendarData(calendarType, data);
} catch (error) { } catch (error) {
console.error('EventManager: Failed to load mock events:', error);
this.events = []; // Fallback to empty array this.events = []; // Fallback to empty array
} }
} }
@ -87,17 +74,14 @@ export class EventManager {
resourceEmployeeId: resource.employeeId resourceEmployeeId: resource.employeeId
})) }))
); );
console.log(`EventManager: Processed ${this.events.length} events from ${resourceData.resources.length} resources`);
} else { } else {
this.events = data as CalendarEvent[]; this.events = data as CalendarEvent[];
console.log(`EventManager: Processed ${this.events.length} date events`);
} }
} }
private syncEvents(): void { private syncEvents(): void {
// Events are synced during initialization // Events are synced during initialization
// This method maintained for internal state management only // This method maintained for internal state management only
console.log(`EventManager: Internal sync - ${this.events.length} events in memory`);
} }
public getEvents(): CalendarEvent[] { public getEvents(): CalendarEvent[] {
@ -122,7 +106,6 @@ export class EventManager {
* Get events for a specific time period * Get events for a specific time period
*/ */
public getEventsForPeriod(startDate: Date, endDate: Date): CalendarEvent[] { public getEventsForPeriod(startDate: Date, endDate: Date): CalendarEvent[] {
console.log(`EventManager.getEventsForPeriod: Checking ${this.events.length} events for period ${startDate.toDateString()} - ${endDate.toDateString()}`);
return this.events.filter(event => { return this.events.filter(event => {
const eventStart = new Date(event.start); const eventStart = new Date(event.start);
const eventEnd = new Date(event.end); const eventEnd = new Date(event.end);

11
src/managers/GridManager.ts
View file

@ -22,7 +22,6 @@ export class GridManager {
private eventCleanup: (() => void)[] = []; private eventCleanup: (() => void)[] = [];
constructor() { constructor() {
console.log('🏗️ GridManager: Constructor called with Strategy Pattern');
// Default to week view strategy // Default to week view strategy
this.currentStrategy = new WeekViewStrategy(); this.currentStrategy = new WeekViewStrategy();
@ -34,12 +33,10 @@ export class GridManager {
this.findElements(); this.findElements();
this.subscribeToEvents(); this.subscribeToEvents();
console.log('GridManager: Initialized with strategy pattern');
} }
private findElements(): void { private findElements(): void {
this.container = document.querySelector('swp-calendar-container'); this.container = document.querySelector('swp-calendar-container');
console.log('GridManager: Found container:', !!this.container);
} }
private subscribeToEvents(): void { private subscribeToEvents(): void {
@ -69,7 +66,6 @@ export class GridManager {
* Switch to a different view strategy * Switch to a different view strategy
*/ */
public switchViewStrategy(view: CalendarView): void { public switchViewStrategy(view: CalendarView): void {
console.log(`GridManager: Switching to ${view} strategy`);
// Clean up current strategy // Clean up current strategy
this.currentStrategy.destroy(); this.currentStrategy.destroy();
@ -84,7 +80,6 @@ export class GridManager {
this.currentStrategy = new MonthViewStrategy(); this.currentStrategy = new MonthViewStrategy();
break; break;
default: default:
console.warn(`GridManager: Unknown view type ${view}, defaulting to week`);
this.currentStrategy = new WeekViewStrategy(); this.currentStrategy = new WeekViewStrategy();
} }
@ -97,7 +92,6 @@ export class GridManager {
*/ */
public setResourceData(resourceData: ResourceCalendarData | null): void { public setResourceData(resourceData: ResourceCalendarData | null): void {
this.resourceData = resourceData; this.resourceData = resourceData;
console.log('GridManager: Updated resource data');
this.render(); this.render();
} }
@ -106,11 +100,9 @@ export class GridManager {
*/ */
public async render(): Promise<void> { public async render(): Promise<void> {
if (!this.container) { if (!this.container) {
console.warn('GridManager: No container found, cannot render');
return; return;
} }
console.log(`🎨 GridManager: Rendering ${this.currentDate.toDateString()} using ${this.currentStrategy.constructor.name}`);
// Create context for strategy // Create context for strategy
const context: ViewContext = { const context: ViewContext = {
@ -128,7 +120,6 @@ export class GridManager {
// Get period range from current strategy // Get period range from current strategy
const periodRange = this.currentStrategy.getPeriodRange(this.currentDate); const periodRange = this.currentStrategy.getPeriodRange(this.currentDate);
console.log(`GridManager: Emitting GRID_RENDERED for main container with period ${periodRange.startDate.toDateString()} - ${periodRange.endDate.toDateString()}`);
// Emit grid rendered event with explicit date range // Emit grid rendered event with explicit date range
eventBus.emit(CoreEvents.GRID_RENDERED, { eventBus.emit(CoreEvents.GRID_RENDERED, {
@ -140,7 +131,6 @@ export class GridManager {
columnCount: layoutConfig.columnCount columnCount: layoutConfig.columnCount
}); });
console.log(`✅ Grid rendered with ${layoutConfig.columnCount} columns`);
} }
@ -208,7 +198,6 @@ export class GridManager {
* Clean up all resources * Clean up all resources
*/ */
public destroy(): void { public destroy(): void {
console.log('GridManager: Cleaning up');
// Clean up event listeners // Clean up event listeners
this.eventCleanup.forEach(cleanup => cleanup()); this.eventCleanup.forEach(cleanup => cleanup());

12
src/managers/NavigationManager.ts
View file

@ -18,7 +18,6 @@ export class NavigationManager {
private animationQueue: number = 0; private animationQueue: number = 0;
constructor(eventBus: IEventBus, eventRenderer: EventRenderingService) { constructor(eventBus: IEventBus, eventRenderer: EventRenderingService) {
console.log('🧭 NavigationManager: Constructor called');
this.eventBus = eventBus; this.eventBus = eventBus;
this.dateCalculator = new DateCalculator(calendarConfig); this.dateCalculator = new DateCalculator(calendarConfig);
this.navigationRenderer = new NavigationRenderer(eventBus, calendarConfig, eventRenderer); this.navigationRenderer = new NavigationRenderer(eventBus, calendarConfig, eventRenderer);
@ -30,13 +29,11 @@ export class NavigationManager {
private init(): void { private init(): void {
this.setupEventListeners(); this.setupEventListeners();
// Don't update week info immediately - wait for DOM to be ready // Don't update week info immediately - wait for DOM to be ready
console.log('NavigationManager: Waiting for CALENDAR_INITIALIZED before updating DOM');
} }
private setupEventListeners(): void { private setupEventListeners(): void {
// Initial DOM update when calendar is initialized // Initial DOM update when calendar is initialized
this.eventBus.on(CoreEvents.INITIALIZED, () => { this.eventBus.on(CoreEvents.INITIALIZED, () => {
console.log('NavigationManager: Received CALENDAR_INITIALIZED, updating week info');
this.updateWeekInfo(); this.updateWeekInfo();
}); });
@ -75,13 +72,11 @@ export class NavigationManager {
// Validate date before processing // Validate date before processing
if (!dateFromEvent) { if (!dateFromEvent) {
console.warn('NavigationManager: No currentDate provided in DATE_CHANGED event', customEvent.detail);
return; return;
} }
const targetDate = new Date(dateFromEvent); const targetDate = new Date(dateFromEvent);
if (isNaN(targetDate.getTime())) { if (isNaN(targetDate.getTime())) {
console.warn('NavigationManager: Invalid currentDate in DATE_CHANGED event', dateFromEvent);
return; return;
} }
@ -146,19 +141,15 @@ export class NavigationManager {
const currentGrid = container?.querySelector('swp-grid-container:not([data-prerendered])'); const currentGrid = container?.querySelector('swp-grid-container:not([data-prerendered])');
if (!container || !currentGrid) { if (!container || !currentGrid) {
console.warn('NavigationManager: Required DOM elements not found');
return; return;
} }
console.group(`🎬 NAVIGATION ANIMATION: ${direction} to ${targetWeek.toDateString()}`);
console.log('1. Creating new container with events...');
let newGrid: HTMLElement; let newGrid: HTMLElement;
// Always create a fresh container for consistent behavior // Always create a fresh container for consistent behavior
newGrid = this.navigationRenderer.renderContainer(container as HTMLElement, targetWeek); newGrid = this.navigationRenderer.renderContainer(container as HTMLElement, targetWeek);
console.log('2. Starting slide animation...');
// Clear any existing transforms before animation // Clear any existing transforms before animation
newGrid.style.transform = ''; newGrid.style.transform = '';
@ -185,7 +176,6 @@ export class NavigationManager {
// Handle animation completion // Handle animation completion
slideInAnimation.addEventListener('finish', () => { slideInAnimation.addEventListener('finish', () => {
console.log('3. Animation finished, cleaning up...');
// Cleanup: Remove all old grids except the new one // Cleanup: Remove all old grids except the new one
const allGrids = container.querySelectorAll('swp-grid-container'); const allGrids = container.querySelectorAll('swp-grid-container');
@ -215,8 +205,6 @@ export class NavigationManager {
weekStart: this.currentWeek weekStart: this.currentWeek
}); });
console.log('✅ Animation completed successfully');
console.groupEnd();
}); });
} }

2
src/managers/ViewManager.ts
View file

@ -94,7 +94,6 @@ export class ViewManager {
const previousView = this.currentView; const previousView = this.currentView;
this.currentView = newView; this.currentView = newView;
console.log(`ViewManager: Changing view from ${previousView} to ${newView}`);
this.updateViewButtons(); this.updateViewButtons();
@ -105,7 +104,6 @@ export class ViewManager {
} }
private changeWorkweek(workweekId: string): void { private changeWorkweek(workweekId: string): void {
console.log(`ViewManager: Changing workweek to ${workweekId}`);
// Update the calendar config // Update the calendar config
calendarConfig.setWorkWeek(workweekId); calendarConfig.setWorkWeek(workweekId);

5
src/renderers/ColumnRenderer.ts
View file

@ -39,7 +39,6 @@ export class DateColumnRenderer implements ColumnRenderer {
const dateSettings = config.getDateViewSettings(); const dateSettings = config.getDateViewSettings();
const daysToShow = dates.slice(0, dateSettings.weekDays); const daysToShow = dates.slice(0, dateSettings.weekDays);
console.log('DateColumnRenderer: About to render', daysToShow.length, 'date columns with work hours');
daysToShow.forEach((date) => { daysToShow.forEach((date) => {
const column = document.createElement('swp-day-column'); const column = document.createElement('swp-day-column');
@ -61,7 +60,6 @@ export class DateColumnRenderer implements ColumnRenderer {
if (workHours === 'off') { if (workHours === 'off') {
// No work hours - mark as off day (full day will be colored) // No work hours - mark as off day (full day will be colored)
(column as any).dataset.workHours = 'off'; (column as any).dataset.workHours = 'off';
console.log(`DateColumnRenderer: ${this.dateCalculator.formatISODate(date)} is an off day`);
} else { } else {
// Calculate and apply non-work hours overlays (before and after work) // Calculate and apply non-work hours overlays (before and after work)
const nonWorkStyle = this.workHoursManager.calculateNonWorkHoursStyle(workHours); const nonWorkStyle = this.workHoursManager.calculateNonWorkHoursStyle(workHours);
@ -72,7 +70,6 @@ export class DateColumnRenderer implements ColumnRenderer {
// After work overlay (::after pseudo-element) // After work overlay (::after pseudo-element)
column.style.setProperty('--after-work-top', `${nonWorkStyle.afterWorkTop}px`); column.style.setProperty('--after-work-top', `${nonWorkStyle.afterWorkTop}px`);
console.log(`DateColumnRenderer: ${this.dateCalculator.formatISODate(date)} non-work overlays - before: ${nonWorkStyle.beforeWorkHeight}px, after: ${nonWorkStyle.afterWorkTop}px (work hours: ${workHours.start}-${workHours.end})`);
} }
} }
} }
@ -87,11 +84,9 @@ export class ResourceColumnRenderer implements ColumnRenderer {
const { resourceData } = context; const { resourceData } = context;
if (!resourceData) { if (!resourceData) {
console.warn('ResourceColumnRenderer: No resource data available for resource columns');
return; return;
} }
console.log('ResourceColumnRenderer: About to render', resourceData.resources.length, 'resource columns');
resourceData.resources.forEach((resource) => { resourceData.resources.forEach((resource) => {
const column = document.createElement('swp-resource-column'); const column = document.createElement('swp-resource-column');

79
src/renderers/EventRenderer.ts
View file

@ -71,7 +71,6 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
if (this.draggedClone && targetDate) { if (this.draggedClone && targetDate) {
// Scenario 1: Timed event being dragged to header - convert to all-day // Scenario 1: Timed event being dragged to header - convert to all-day
if (this.draggedClone.tagName === 'SWP-EVENT') { if (this.draggedClone.tagName === 'SWP-EVENT') {
console.log('EventRenderer: Converting timed event to all-day for date:', targetDate);
headerRenderer.addToAllDay(element); headerRenderer.addToAllDay(element);
this.convertToAllDayPreview(targetDate); this.convertToAllDayPreview(targetDate);
} }
@ -80,7 +79,6 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
else if (this.draggedClone.tagName === 'SWP-ALLDAY-EVENT') { else if (this.draggedClone.tagName === 'SWP-ALLDAY-EVENT') {
const currentDate = this.draggedClone.parentElement?.getAttribute('data-date'); const currentDate = this.draggedClone.parentElement?.getAttribute('data-date');
if (currentDate !== targetDate) { if (currentDate !== targetDate) {
console.log('EventRenderer: Moving all-day event from', currentDate, 'to', targetDate);
this.moveAllDayToNewDate(targetDate); this.moveAllDayToNewDate(targetDate);
} }
} }
@ -105,7 +103,6 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
if (dayHeader) { if (dayHeader) {
const targetDate = dayHeader.dataset.date; const targetDate = dayHeader.dataset.date;
if (targetDate && this.draggedClone.tagName === 'SWP-EVENT') { if (targetDate && this.draggedClone.tagName === 'SWP-EVENT') {
console.log(`EventRenderer: Mouse over day header for date ${targetDate}`);
// Find the header renderer from the calendar header // Find the header renderer from the calendar header
const calendarHeader = dayHeader.closest('swp-calendar-header'); const calendarHeader = dayHeader.closest('swp-calendar-header');
@ -153,13 +150,11 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
const duration = timeElement.getAttribute('data-duration'); const duration = timeElement.getAttribute('data-duration');
if (duration) { if (duration) {
const durationMinutes = parseInt(duration); const durationMinutes = parseInt(duration);
console.log(`EventRenderer: Read duration ${durationMinutes} minutes from data-duration attribute`);
return durationMinutes; return durationMinutes;
} }
} }
// Fallback to 60 minutes if attribute not found // Fallback to 60 minutes if attribute not found
console.warn('EventRenderer: No data-duration found, using fallback 60 minutes');
return 60; return 60;
} }
@ -179,7 +174,6 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
const originalDurationMinutes = this.getOriginalEventDuration(originalEvent); const originalDurationMinutes = this.getOriginalEventDuration(originalEvent);
clone.dataset.originalDuration = originalDurationMinutes.toString(); clone.dataset.originalDuration = originalDurationMinutes.toString();
console.log(`EventRenderer: Clone created with ${originalDurationMinutes} minutes duration from data-duration`);
// Style for dragging // Style for dragging
clone.style.position = 'absolute'; clone.style.position = 'absolute';
@ -221,7 +215,6 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
const newTimeText = `${this.formatTime(startTotalMinutes)} - ${this.formatTime(endTotalMinutes)}`; const newTimeText = `${this.formatTime(startTotalMinutes)} - ${this.formatTime(endTotalMinutes)}`;
timeElement.textContent = newTimeText; timeElement.textContent = newTimeText;
console.log(`EventRenderer: Updated timestamp to ${newTimeText} (${cachedDuration} min duration)`);
} }
} }
@ -259,13 +252,6 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
private handleDragStart(originalElement: HTMLElement, eventId: string, mouseOffset: any, column: string): void { private handleDragStart(originalElement: HTMLElement, eventId: string, mouseOffset: any, column: string): void {
this.originalEvent = originalElement; this.originalEvent = originalElement;
console.log('EventRenderer: Starting drag on element:', {
eventId,
tagName: originalElement.tagName,
currentOpacity: originalElement.style.opacity,
hasDataDuration: !!originalElement.querySelector('swp-event-time')?.getAttribute('data-duration')
});
// Create clone // Create clone
this.draggedClone = this.createEventClone(originalElement); this.draggedClone = this.createEventClone(originalElement);
@ -279,7 +265,6 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
originalElement.style.opacity = '0.3'; originalElement.style.opacity = '0.3';
originalElement.style.userSelect = 'none'; originalElement.style.userSelect = 'none';
console.log('EventRenderer: Drag started - original set to opacity 0.3, clone created');
} }
/** /**
@ -294,7 +279,6 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
// Update timestamp display // Update timestamp display
this.updateCloneTimestamp(this.draggedClone, snappedY); this.updateCloneTimestamp(this.draggedClone, snappedY);
console.log('EventRenderer: Clone position and timestamp updated');
} }
/** /**
@ -307,7 +291,6 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
const newColumnElement = document.querySelector(`swp-day-column[data-date="${newColumn}"]`); const newColumnElement = document.querySelector(`swp-day-column[data-date="${newColumn}"]`);
if (newColumnElement && this.draggedClone.parentElement !== newColumnElement) { if (newColumnElement && this.draggedClone.parentElement !== newColumnElement) {
newColumnElement.appendChild(this.draggedClone); newColumnElement.appendChild(this.draggedClone);
console.log(`EventRenderer: Clone moved to column ${newColumn}`);
} }
} }
@ -315,19 +298,12 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
* Handle drag end event * Handle drag end event
*/ */
private handleDragEnd(eventId: string, originalElement: HTMLElement, finalColumn: string, finalY: number): void { private handleDragEnd(eventId: string, originalElement: HTMLElement, finalColumn: string, finalY: number): void {
console.log('EventRenderer: Handling drag end', {
hasClone: !!this.draggedClone,
hasOriginal: !!this.originalEvent,
originalOpacity: this.originalEvent?.style.opacity
});
if (!this.draggedClone || !this.originalEvent) { if (!this.draggedClone || !this.originalEvent) {
console.warn('EventRenderer: Missing clone or original element at drag end');
return; return;
} }
// Fade out original // Fade out original
console.log('EventRenderer: Fading out original element');
this.fadeOutAndRemove(this.originalEvent); this.fadeOutAndRemove(this.originalEvent);
// Remove clone prefix and normalize clone to be a regular event // Remove clone prefix and normalize clone to be a regular event
@ -342,13 +318,11 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
this.draggedClone.style.userSelect = ''; this.draggedClone.style.userSelect = '';
this.draggedClone.style.zIndex = ''; this.draggedClone.style.zIndex = '';
console.log('EventRenderer: Clone normalized to regular event with ID:', this.draggedClone.dataset.eventId);
// Clean up // Clean up
this.draggedClone = null; this.draggedClone = null;
this.originalEvent = null; this.originalEvent = null;
console.log('EventRenderer: Drag completed and cleaned up');
} }
/** /**
@ -366,7 +340,6 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
// Expand header if needed // Expand header if needed
headerRenderer.addToAllDay(this.draggedClone.parentElement); headerRenderer.addToAllDay(this.draggedClone.parentElement);
console.log(`EventRenderer: Converted to all-day event for date ${targetDate}`);
} }
/** /**
@ -441,7 +414,6 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
// Transform clone to all-day format // Transform clone to all-day format
this.transformCloneToAllDay(this.draggedClone, targetDate); this.transformCloneToAllDay(this.draggedClone, targetDate);
console.log(`EventRenderer: Converted clone to all-day preview for ${targetDate}`);
} }
/** /**
@ -474,10 +446,8 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
allDayContainer.appendChild(this.draggedClone); allDayContainer.appendChild(this.draggedClone);
} }
console.log(`EventRenderer: Moved all-day event to date ${targetDate}, column ${columnIndex}`);
} }
renderEvents(events: CalendarEvent[], container: HTMLElement, config: CalendarConfig): void { renderEvents(events: CalendarEvent[], container: HTMLElement, config: CalendarConfig): void {
console.log('BaseEventRenderer: renderEvents called with', events.length, 'events');
// NOTE: Removed clearEvents() to support sliding animation // NOTE: Removed clearEvents() to support sliding animation
// With sliding animation, multiple grid containers exist simultaneously // With sliding animation, multiple grid containers exist simultaneously
@ -488,31 +458,25 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
const allDayEvents = events.filter(event => event.allDay); const allDayEvents = events.filter(event => event.allDay);
const regularEvents = events.filter(event => !event.allDay); const regularEvents = events.filter(event => !event.allDay);
console.log(`BaseEventRenderer: Rendering ${allDayEvents.length} all-day events and ${regularEvents.length} regular events`);
// Always call renderAllDayEvents to ensure height is set correctly (even to 0) // Always call renderAllDayEvents to ensure height is set correctly (even to 0)
this.renderAllDayEvents(allDayEvents, container, config); this.renderAllDayEvents(allDayEvents, container, config);
// Find columns in the specific container for regular events // Find columns in the specific container for regular events
const columns = this.getColumns(container); const columns = this.getColumns(container);
console.log(`BaseEventRenderer: Found ${columns.length} columns in container`);
columns.forEach(column => { columns.forEach(column => {
const columnEvents = this.getEventsForColumn(column, regularEvents); const columnEvents = this.getEventsForColumn(column, regularEvents);
console.log(`BaseEventRenderer: Rendering ${columnEvents.length} regular events in column`);
const eventsLayer = column.querySelector('swp-events-layer'); const eventsLayer = column.querySelector('swp-events-layer');
if (eventsLayer) { if (eventsLayer) {
columnEvents.forEach(event => { columnEvents.forEach(event => {
console.log(`BaseEventRenderer: Rendering event "${event.title}" in events layer`);
this.renderEvent(event, eventsLayer, config); this.renderEvent(event, eventsLayer, config);
}); });
// Debug: Verify events were actually added // Debug: Verify events were actually added
const renderedEvents = eventsLayer.querySelectorAll('swp-event'); const renderedEvents = eventsLayer.querySelectorAll('swp-event');
console.log(`BaseEventRenderer: Events layer now has ${renderedEvents.length} events`);
} else { } else {
console.warn('BaseEventRenderer: No events layer found in column');
} }
}); });
} }
@ -525,19 +489,16 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
* Render all-day events in the header row 2 * Render all-day events in the header row 2
*/ */
protected renderAllDayEvents(allDayEvents: CalendarEvent[], container: HTMLElement, config: CalendarConfig): void { protected renderAllDayEvents(allDayEvents: CalendarEvent[], container: HTMLElement, config: CalendarConfig): void {
console.log(`BaseEventRenderer: Rendering ${allDayEvents.length} all-day events using nested grid`);
// Find the calendar header // Find the calendar header
const calendarHeader = container.querySelector('swp-calendar-header'); const calendarHeader = container.querySelector('swp-calendar-header');
if (!calendarHeader) { if (!calendarHeader) {
console.warn('BaseEventRenderer: No calendar header found for all-day events');
return; return;
} }
// Find the all-day container // Find the all-day container
const allDayContainer = calendarHeader.querySelector('swp-allday-container') as HTMLElement; const allDayContainer = calendarHeader.querySelector('swp-allday-container') as HTMLElement;
if (!allDayContainer) { if (!allDayContainer) {
console.warn('BaseEventRenderer: No swp-allday-container found - HeaderRenderer should create this');
return; return;
} }
@ -617,13 +578,11 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
allDayContainer.appendChild(allDayEvent); allDayContainer.appendChild(allDayEvent);
console.log(`BaseEventRenderer: Placed "${event.title}" in row ${row}, columns ${span.startColumn} to ${span.startColumn + span.columnSpan - 1}`);
}); });
// Update height based on max row // Update height based on max row
this.updateAllDayHeight(maxRow); this.updateAllDayHeight(maxRow);
console.log(`BaseEventRenderer: Created ${maxRow} rows with auto-expanding grid`);
} }
protected renderEvent(event: CalendarEvent, container: Element, config: CalendarConfig): void { protected renderEvent(event: CalendarEvent, container: Element, config: CalendarConfig): void {
@ -654,17 +613,8 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
<swp-event-title>${event.title}</swp-event-title> <swp-event-title>${event.title}</swp-event-title>
`; `;
console.log(`BaseEventRenderer: Rendered "${event.title}" with ${durationMinutes} minutes duration`);
container.appendChild(eventElement); container.appendChild(eventElement);
console.log(`BaseEventRenderer: Created event element for "${event.title}":`, {
top: eventElement.style.top,
height: eventElement.style.height,
dataType: eventElement.dataset.type,
position: eventElement.style.position,
innerHTML: eventElement.innerHTML
});
} }
protected calculateEventPosition(event: CalendarEvent, config: CalendarConfig): { top: number; height: number } { protected calculateEventPosition(event: CalendarEvent, config: CalendarConfig): { top: number; height: number } {
@ -687,16 +637,6 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
const durationMinutes = endMinutes - startMinutes; const durationMinutes = endMinutes - startMinutes;
const height = (durationMinutes / 60) * hourHeight; const height = (durationMinutes / 60) * hourHeight;
console.log('Event positioning calculation:', {
eventTime: `${startDate.getHours()}:${startDate.getMinutes()}`,
startMinutes,
endMinutes,
dayStartMinutes,
dayStartHour,
hourHeight,
top,
height
});
return { top, height }; return { top, height };
} }
@ -716,18 +656,17 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
*/ */
private updateAllDayHeight(maxRows: number): void { private updateAllDayHeight(maxRows: number): void {
const root = document.documentElement; const root = document.documentElement;
const eventHeight = parseInt(getComputedStyle(root).getPropertyValue('--allday-event-height') || '26'); const eventHeight = parseInt(getComputedStyle(root).getPropertyValue('--all-day-event-height'));
const calculatedHeight = maxRows * eventHeight; const calculatedHeight = maxRows * eventHeight;
root.style.setProperty('--all-day-row-height', `${calculatedHeight}px`); root.style.setProperty('--all-day-row-height', `${calculatedHeight}px`);
// Update grid-template-rows for all swp-allday-containers // Update grid-template-rows for all swp-allday-containers
const allDayContainers = document.querySelectorAll('swp-allday-container'); const allDayContainers = document.querySelectorAll('swp-allday-container');
allDayContainers.forEach(container => { allDayContainers.forEach(container => {
const gridRows = `repeat(${maxRows}, var(--allday-event-height, 26px))`; const gridRows = `repeat(${maxRows}, var(--all-day-event-height))`;
(container as HTMLElement).style.gridTemplateRows = gridRows; (container as HTMLElement).style.gridTemplateRows = gridRows;
}); });
console.log(`BaseEventRenderer: Set all-day height to ${calculatedHeight}px and grid-template-rows to ${maxRows} rows`);
} }
/** /**
@ -778,10 +717,6 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
? container.querySelectorAll(selector) ? container.querySelectorAll(selector)
: document.querySelectorAll(selector); : document.querySelectorAll(selector);
if (existingEvents.length > 0) {
console.log(`BaseEventRenderer: Clearing ${existingEvents.length} events`,
container ? 'from container' : 'globally');
}
existingEvents.forEach(event => event.remove()); existingEvents.forEach(event => event.remove());
} }
} }
@ -793,19 +728,16 @@ export class DateEventRenderer extends BaseEventRenderer {
constructor(config: CalendarConfig) { constructor(config: CalendarConfig) {
super(config); super(config);
this.setupDragEventListeners(); this.setupDragEventListeners();
console.log('DateEventRenderer: Drag event listeners setup');
} }
protected getColumns(container: HTMLElement): HTMLElement[] { protected getColumns(container: HTMLElement): HTMLElement[] {
const columns = container.querySelectorAll('swp-day-column'); const columns = container.querySelectorAll('swp-day-column');
console.log('DateEventRenderer: Found', columns.length, 'day columns in container');
return Array.from(columns) as HTMLElement[]; return Array.from(columns) as HTMLElement[];
} }
protected getEventsForColumn(column: HTMLElement, events: CalendarEvent[]): CalendarEvent[] { protected getEventsForColumn(column: HTMLElement, events: CalendarEvent[]): CalendarEvent[] {
const columnDate = column.dataset.date; const columnDate = column.dataset.date;
if (!columnDate) { if (!columnDate) {
console.log(`DateEventRenderer: Column has no dataset.date`);
return []; return [];
} }
@ -814,15 +746,10 @@ export class DateEventRenderer extends BaseEventRenderer {
const eventDateStr = this.dateCalculator.formatISODate(eventDate); const eventDateStr = this.dateCalculator.formatISODate(eventDate);
const matches = eventDateStr === columnDate; const matches = eventDateStr === columnDate;
if (!matches) {
if(event.title == 'Architecture Planning')
console.log(`DateEventRenderer: Event ${event.title} (${eventDateStr}) does not match column (${columnDate})`);
}
return matches; return matches;
}); });
console.log(`DateEventRenderer: Column ${columnDate} has ${columnEvents.length} events from ${events.length} total`);
return columnEvents; return columnEvents;
} }
} }
@ -833,7 +760,6 @@ export class DateEventRenderer extends BaseEventRenderer {
export class ResourceEventRenderer extends BaseEventRenderer { export class ResourceEventRenderer extends BaseEventRenderer {
protected getColumns(container: HTMLElement): HTMLElement[] { protected getColumns(container: HTMLElement): HTMLElement[] {
const columns = container.querySelectorAll('swp-resource-column'); const columns = container.querySelectorAll('swp-resource-column');
console.log('ResourceEventRenderer: Found', columns.length, 'resource columns in container');
return Array.from(columns) as HTMLElement[]; return Array.from(columns) as HTMLElement[];
} }
@ -845,7 +771,6 @@ export class ResourceEventRenderer extends BaseEventRenderer {
return event.resource?.name === resourceName; return event.resource?.name === resourceName;
}); });
console.log(`ResourceEventRenderer: Resource ${resourceName} has ${columnEvents.length} events`);
return columnEvents; return columnEvents;
} }
} }

14
src/renderers/EventRendererManager.ts
View file

@ -30,11 +30,9 @@ export class EventRenderingService {
* Render events in a specific container for a given period * Render events in a specific container for a given period
*/ */
public renderEvents(context: RenderContext): void { public renderEvents(context: RenderContext): void {
console.log(` 📅 Getting events for ${context.startDate.toDateString()} - ${context.endDate.toDateString()}`);
// Clear existing events in the specific container first // Clear existing events in the specific container first
this.strategy.clearEvents(context.container); this.strategy.clearEvents(context.container);
console.log(` 🧹 Cleared existing events in container`);
// Get events from EventManager for the period // Get events from EventManager for the period
const events = this.eventManager.getEventsForPeriod( const events = this.eventManager.getEventsForPeriod(
@ -42,16 +40,13 @@ export class EventRenderingService {
context.endDate context.endDate
); );
console.log(` 📊 Found ${events.length} events for period`);
if (events.length === 0) { if (events.length === 0) {
console.log(' ⚠️ No events to render for this period');
return; return;
} }
// Use cached strategy to render events in the specific container // Use cached strategy to render events in the specific container
this.strategy.renderEvents(events, context.container, calendarConfig); this.strategy.renderEvents(events, context.container, calendarConfig);
console.log(` ✅ Rendered ${events.length} events successfully`);
// Emit EVENTS_RENDERED event for filtering system // Emit EVENTS_RENDERED event for filtering system
this.eventBus.emit(CoreEvents.EVENTS_RENDERED, { this.eventBus.emit(CoreEvents.EVENTS_RENDERED, {
@ -63,18 +58,15 @@ export class EventRenderingService {
private setupEventListeners(): void { private setupEventListeners(): void {
// Event-driven rendering: React to grid and container events // Event-driven rendering: React to grid and container events
this.eventBus.on(CoreEvents.GRID_RENDERED, (event: Event) => { this.eventBus.on(CoreEvents.GRID_RENDERED, (event: Event) => {
console.log('EventRenderer: Received GRID_RENDERED event');
this.handleGridRendered(event as CustomEvent); this.handleGridRendered(event as CustomEvent);
}); });
// CONTAINER_READY_FOR_EVENTS removed - events are now pre-rendered synchronously // CONTAINER_READY_FOR_EVENTS removed - events are now pre-rendered synchronously
// this.eventBus.on(EventTypes.CONTAINER_READY_FOR_EVENTS, (event: Event) => { // this.eventBus.on(EventTypes.CONTAINER_READY_FOR_EVENTS, (event: Event) => {
// console.log('EventRenderer: Received CONTAINER_READY_FOR_EVENTS event');
// this.handleContainerReady(event as CustomEvent); // this.handleContainerReady(event as CustomEvent);
// }); // });
this.eventBus.on(CoreEvents.VIEW_CHANGED, (event: Event) => { this.eventBus.on(CoreEvents.VIEW_CHANGED, (event: Event) => {
console.log('EventRenderer: Received VIEW_CHANGED event');
this.handleViewChanged(event as CustomEvent); this.handleViewChanged(event as CustomEvent);
}); });
} }
@ -87,7 +79,6 @@ export class EventRenderingService {
const { container, startDate, endDate, currentDate } = event.detail; const { container, startDate, endDate, currentDate } = event.detail;
if (!container) { if (!container) {
console.error('EventRenderer: No container in GRID_RENDERED event', event.detail);
return; return;
} }
@ -99,10 +90,8 @@ export class EventRenderingService {
periodStart = startDate; periodStart = startDate;
periodEnd = endDate; periodEnd = endDate;
} else if (currentDate) { } else if (currentDate) {
console.error('EventRenderer: GRID_RENDERED events must include explicit startDate and endDate', event.detail);
return; return;
} else { } else {
console.error('EventRenderer: No date information in GRID_RENDERED event', event.detail);
return; return;
} }
@ -120,7 +109,6 @@ export class EventRenderingService {
const { container, startDate, endDate } = event.detail; const { container, startDate, endDate } = event.detail;
if (!container || !startDate || !endDate) { if (!container || !startDate || !endDate) {
console.error('EventRenderer: Invalid CONTAINER_READY_FOR_EVENTS event data', event.detail);
return; return;
} }
@ -139,10 +127,8 @@ export class EventRenderingService {
this.clearEvents(); this.clearEvents();
// New rendering will be triggered by subsequent GRID_RENDERED event // New rendering will be triggered by subsequent GRID_RENDERED event
console.log('EventRenderer: Cleared events for view change, waiting for GRID_RENDERED');
} }
private clearEvents(container?: HTMLElement): void { private clearEvents(container?: HTMLElement): void {
console.log(`EventRenderer: Clearing events`, container ? 'in container' : 'globally');
this.strategy.clearEvents(container); this.strategy.clearEvents(container);
} }

16
src/renderers/GridRenderer.ts
View file

@ -24,31 +24,22 @@ export class GridRenderer {
currentWeek: Date, currentWeek: Date,
resourceData: ResourceCalendarData | null resourceData: ResourceCalendarData | null
): void { ): void {
console.log('GridRenderer: renderGrid called', {
hasGrid: !!grid,
hasCurrentWeek: !!currentWeek,
currentWeek: currentWeek
});
if (!grid || !currentWeek) { if (!grid || !currentWeek) {
console.warn('GridRenderer: Cannot render - missing grid or currentWeek');
return; return;
} }
// Only clear and rebuild if grid is empty (first render) // Only clear and rebuild if grid is empty (first render)
if (grid.children.length === 0) { if (grid.children.length === 0) {
console.log('GridRenderer: First render - creating grid structure');
// Create POC structure: header-spacer + time-axis + grid-container // Create POC structure: header-spacer + time-axis + grid-container
this.createHeaderSpacer(grid); this.createHeaderSpacer(grid);
this.createTimeAxis(grid); this.createTimeAxis(grid);
this.createGridContainer(grid, currentWeek, resourceData); this.createGridContainer(grid, currentWeek, resourceData);
} else { } else {
console.log('GridRenderer: Re-render - updating existing structure');
// Just update the calendar header for all-day events // Just update the calendar header for all-day events
this.updateCalendarHeader(grid, currentWeek, resourceData); this.updateCalendarHeader(grid, currentWeek, resourceData);
} }
console.log('GridRenderer: Grid rendered successfully with POC structure');
} }
/** /**
@ -69,7 +60,6 @@ export class GridRenderer {
const startHour = gridSettings.dayStartHour; const startHour = gridSettings.dayStartHour;
const endHour = gridSettings.dayEndHour; const endHour = gridSettings.dayEndHour;
console.log('GridRenderer: Creating time axis - startHour:', startHour, 'endHour:', endHour);
for (let hour = startHour; hour < endHour; hour++) { for (let hour = startHour; hour < endHour; hour++) {
const marker = document.createElement('swp-hour-marker'); const marker = document.createElement('swp-hour-marker');
@ -151,7 +141,6 @@ export class GridRenderer {
currentWeek: Date, currentWeek: Date,
resourceData: ResourceCalendarData | null resourceData: ResourceCalendarData | null
): void { ): void {
console.log('GridRenderer: renderColumnContainer called');
const calendarType = this.config.getCalendarMode(); const calendarType = this.config.getCalendarMode();
const columnRenderer = CalendarTypeFactory.getColumnRenderer(calendarType); const columnRenderer = CalendarTypeFactory.getColumnRenderer(calendarType);
@ -223,11 +212,6 @@ export class GridRenderer {
return; // No valid element found return; // No valid element found
} }
console.log('GridRenderer: Detected hover over:', {
elementType: dayHeader ? 'day-header' : 'all-day-container',
targetDate,
element: hoveredElement
});
// Get the header renderer for addToAllDay functionality // Get the header renderer for addToAllDay functionality
const calendarType = this.config.getCalendarMode(); const calendarType = this.config.getCalendarMode();

2
src/renderers/GridStyleManager.ts
View file

@ -36,7 +36,6 @@ export class GridStyleManager {
calendar.setAttribute('data-fit-to-width', gridSettings.fitToWidth.toString()); calendar.setAttribute('data-fit-to-width', gridSettings.fitToWidth.toString());
} }
console.log('GridStyleManager: Updated grid styles with', columnCount, 'columns for', calendarType, 'calendar');
} }
/** /**
@ -99,7 +98,6 @@ export class GridStyleManager {
// Set CSS variable for dynamic spacer height // Set CSS variable for dynamic spacer height
document.documentElement.style.setProperty('--all-day-row-height', `${allDayHeight}px`); document.documentElement.style.setProperty('--all-day-row-height', `${allDayHeight}px`);
console.log('GridStyleManager: Updated --all-day-row-height to', `${allDayHeight}px`, 'for', allDayEventCount, 'events');
} }
/** /**

7
src/renderers/HeaderRenderer.ts
View file

@ -35,7 +35,6 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
this.createAllDayMainStructure(calendarHeader); this.createAllDayMainStructure(calendarHeader);
this.animateHeaderExpansion(calendarHeader); this.animateHeaderExpansion(calendarHeader);
} }
console.log('BaseHeaderRenderer: Header expanded for all-day row');
} }
} }
@ -44,7 +43,6 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
*/ */
ensureAllDayContainers(calendarHeader: HTMLElement): void { ensureAllDayContainers(calendarHeader: HTMLElement): void {
// Do nothing initially - containers will be created when first needed // Do nothing initially - containers will be created when first needed
console.log('BaseHeaderRenderer: All-day containers will be created lazily when first event is dragged');
} }
private animateHeaderExpansion(calendarHeader: HTMLElement): void { private animateHeaderExpansion(calendarHeader: HTMLElement): void {
@ -108,7 +106,6 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
// Notify ScrollManager about header height change // Notify ScrollManager about header height change
eventBus.emit('header:height-changed'); eventBus.emit('header:height-changed');
console.log('HeaderRenderer: All-day container animated to visible');
}); });
} }
@ -120,9 +117,7 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
// Create simple all-day container (initially hidden) // Create simple all-day container (initially hidden)
container = document.createElement('swp-allday-container'); container = document.createElement('swp-allday-container');
calendarHeader.appendChild(container); calendarHeader.appendChild(container);
console.log('HeaderRenderer: Created swp-allday-container (initially hidden)');
} else { } else {
console.log('HeaderRenderer: swp-allday-container already exists');
} }
} }
} }
@ -179,7 +174,6 @@ export class ResourceHeaderRenderer extends BaseHeaderRenderer {
const { resourceData } = context; const { resourceData } = context;
if (!resourceData) { if (!resourceData) {
console.warn('ResourceHeaderRenderer: No resource data available for resource headers');
return; return;
} }
@ -198,6 +192,5 @@ export class ResourceHeaderRenderer extends BaseHeaderRenderer {
calendarHeader.appendChild(header); calendarHeader.appendChild(header);
}); });
console.log(`ResourceHeaderRenderer: Rendered ${resourceData.resources.length} resource headers`);
} }
} }

11
src/renderers/NavigationRenderer.ts
View file

@ -97,8 +97,6 @@ export class NavigationRenderer {
public renderContainer(parentContainer: HTMLElement, weekStart: Date): HTMLElement { public renderContainer(parentContainer: HTMLElement, weekStart: Date): HTMLElement {
const weekEnd = this.dateCalculator.addDays(weekStart, 6); const weekEnd = this.dateCalculator.addDays(weekStart, 6);
console.group(`🎨 RENDERING CONTAINER: ${weekStart.toDateString()} - ${weekEnd.toDateString()}`);
console.log('1. Creating grid structure...');
// Create new grid container // Create new grid container
const newGrid = document.createElement('swp-grid-container'); const newGrid = document.createElement('swp-grid-container');
@ -122,10 +120,8 @@ export class NavigationRenderer {
// Add to parent container // Add to parent container
parentContainer.appendChild(newGrid); parentContainer.appendChild(newGrid);
console.log('2. Rendering headers and columns...');
this.renderWeekContentInContainer(newGrid, weekStart); this.renderWeekContentInContainer(newGrid, weekStart);
console.log('3. Emitting GRID_RENDERED for navigation container...');
this.eventBus.emit(CoreEvents.GRID_RENDERED, { this.eventBus.emit(CoreEvents.GRID_RENDERED, {
container: newGrid, // Specific grid container, not parent container: newGrid, // Specific grid container, not parent
currentDate: weekStart, currentDate: weekStart,
@ -134,8 +130,6 @@ export class NavigationRenderer {
isNavigation: true // Flag to indicate this is navigation rendering isNavigation: true // Flag to indicate this is navigation rendering
}); });
console.log('✅ Container ready with GRID_RENDERED event emitted');
console.groupEnd();
return newGrid; return newGrid;
} }
@ -227,11 +221,6 @@ export class NavigationRenderer {
return; // No valid element found return; // No valid element found
} }
console.log('NavigationRenderer: Detected hover over:', {
elementType: dayHeader ? 'day-header' : 'all-day-container',
targetDate,
element: hoveredElement
});
// Get the header renderer for addToAllDay functionality // Get the header renderer for addToAllDay functionality
const calendarType = this.config.getCalendarMode(); const calendarType = this.config.getCalendarMode();

7
src/strategies/MonthViewStrategy.ts
View file

@ -24,16 +24,11 @@ export class MonthViewStrategy implements ViewStrategy {
} }
renderGrid(context: ViewContext): void { renderGrid(context: ViewContext): void {
console.group(`📅 MONTH VIEW: Rendering grid for ${context.currentDate.toDateString()}`);
// Clear existing content // Clear existing content
context.container.innerHTML = ''; context.container.innerHTML = '';
// Create month grid (completely different from week!) // Create month grid (completely different from week!)
this.createMonthGrid(context); this.createMonthGrid(context);
console.log('Month grid rendered with 7x6 layout');
console.groupEnd();
} }
private createMonthGrid(context: ViewContext): void { private createMonthGrid(context: ViewContext): void {
@ -120,7 +115,6 @@ export class MonthViewStrategy implements ViewStrategy {
private renderMonthEvents(container: HTMLElement, events: any[]): void { private renderMonthEvents(container: HTMLElement, events: any[]): void {
// TODO: Implement month event rendering // TODO: Implement month event rendering
// Events will be small blocks in day cells // Events will be small blocks in day cells
console.log(`MonthViewStrategy: Would render ${events.length} events`);
} }
getNextPeriod(currentDate: Date): Date { getNextPeriod(currentDate: Date): Date {
@ -159,6 +153,5 @@ export class MonthViewStrategy implements ViewStrategy {
} }
destroy(): void { destroy(): void {
console.log('MonthViewStrategy: Cleaning up');
} }
} }

7
src/strategies/WeekViewStrategy.ts
View file

@ -30,8 +30,6 @@ export class WeekViewStrategy implements ViewStrategy {
} }
renderGrid(context: ViewContext): void { renderGrid(context: ViewContext): void {
console.group(`🗓️ WEEK VIEW: Rendering grid for ${context.currentDate.toDateString()}`);
// Update grid styles // Update grid styles
this.styleManager.updateGridStyles(context.resourceData); this.styleManager.updateGridStyles(context.resourceData);
@ -41,9 +39,6 @@ export class WeekViewStrategy implements ViewStrategy {
context.currentDate, context.currentDate,
context.resourceData context.resourceData
); );
console.log(`Week grid rendered with ${this.getLayoutConfig().columnCount} columns`);
console.groupEnd();
} }
getNextPeriod(currentDate: Date): Date { getNextPeriod(currentDate: Date): Date {
@ -78,7 +73,5 @@ export class WeekViewStrategy implements ViewStrategy {
destroy(): void { destroy(): void {
// Clean up any week-specific resources // Clean up any week-specific resources
// For now, just log
console.log('WeekViewStrategy: Cleaning up');
} }
} }