From f29613e55f61a33195bfb951b2c3916fb21b467d Mon Sep 17 00:00:00 2001 From: Janus Knudsen Date: Sat, 2 Aug 2025 00:28:45 +0200 Subject: [PATCH] Updates mock event data and adds logging Updates mock event data to reflect future dates for testing purposes. Adds console logging in various managers to aid in debugging and understanding the event loading and rendering process. Specifically, logs the number of loaded events, the first and last event details, and information about event rendering and time axis creation. Also, adds execution permission for PowerShell scripts in the .claude settings. --- .claude/settings.local.json | 7 +-- src/managers/EventManager.ts | 76 ++++++++++++++++++++--------- src/managers/EventRenderer.ts | 3 ++ src/managers/GridManager.ts | 1 + wwwroot/css/calendar-base-css.css | 2 + wwwroot/css/calendar-layout-css.css | 2 +- wwwroot/css/calendar.css | 48 +----------------- 7 files changed, 66 insertions(+), 73 deletions(-) diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 456dfe7..0c962a0 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -1,9 +1,10 @@ { + "$schema": "https://json.schemastore.org/claude-code-settings.json", "permissions": { "allow": [ - "Bash(npm run build:*)" + "Bash(npm run build:*)", + "Bash(powershell:*)" ], "deny": [] - }, - "$schema": "https://json.schemastore.org/claude-code-settings.json" + } } \ No newline at end of file diff --git a/src/managers/EventManager.ts b/src/managers/EventManager.ts index c8ee732..5fe6c04 100644 --- a/src/managers/EventManager.ts +++ b/src/managers/EventManager.ts @@ -36,8 +36,8 @@ export class EventManager { { id: '1', title: 'Team Standup', - start: '2024-01-15T09:00:00', - end: '2024-01-15T09:30:00', + start: '2025-07-28T09:00:00', + end: '2025-07-28T09:30:00', type: 'meeting', allDay: false, syncStatus: 'synced', @@ -46,8 +46,8 @@ export class EventManager { { id: '2', title: 'Client Meeting', - start: '2024-01-15T14:00:00', - end: '2024-01-15T15:30:00', + start: '2025-07-28T14:00:00', + end: '2025-07-28T15:30:00', type: 'meeting', allDay: false, syncStatus: 'synced', @@ -56,8 +56,8 @@ export class EventManager { { id: '3', title: 'Lunch', - start: '2024-01-15T12:00:00', - end: '2024-01-15T13:00:00', + start: '2025-07-28T12:00:00', + end: '2025-07-28T13:00:00', type: 'meal', allDay: false, syncStatus: 'synced', @@ -66,8 +66,8 @@ export class EventManager { { id: '4', title: 'Deep Work Session', - start: '2024-01-16T10:00:00', - end: '2024-01-16T12:00:00', + start: '2025-07-29T10:00:00', + end: '2025-07-29T12:00:00', type: 'work', allDay: false, syncStatus: 'synced', @@ -76,8 +76,8 @@ export class EventManager { { id: '5', title: 'Team Standup', - start: '2024-01-16T09:00:00', - end: '2024-01-16T09:30:00', + start: '2025-07-29T09:00:00', + end: '2025-07-29T09:30:00', type: 'meeting', allDay: false, syncStatus: 'synced', @@ -86,8 +86,8 @@ export class EventManager { { id: '6', title: 'Lunch', - start: '2024-01-16T12:30:00', - end: '2024-01-16T13:30:00', + start: '2025-07-29T12:30:00', + end: '2025-07-29T13:30:00', type: 'meal', allDay: false, syncStatus: 'synced', @@ -96,8 +96,8 @@ export class EventManager { { id: '7', title: 'Project Review', - start: '2024-01-17T15:00:00', - end: '2024-01-17T16:00:00', + start: '2025-07-30T15:00:00', + end: '2025-07-30T16:00:00', type: 'meeting', allDay: false, syncStatus: 'synced', @@ -106,8 +106,8 @@ export class EventManager { { id: '8', title: 'Lunch', - start: '2024-01-17T12:00:00', - end: '2024-01-17T13:00:00', + start: '2025-07-30T12:00:00', + end: '2025-07-30T13:00:00', type: 'meal', allDay: false, syncStatus: 'synced', @@ -116,8 +116,8 @@ export class EventManager { { id: '9', title: 'Sprint Planning', - start: '2024-01-18T10:00:00', - end: '2024-01-18T12:00:00', + start: '2025-07-31T10:00:00', + end: '2025-07-31T12:00:00', type: 'meeting', allDay: false, syncStatus: 'synced', @@ -126,8 +126,8 @@ export class EventManager { { id: '10', title: 'Coffee Break', - start: '2024-01-18T15:00:00', - end: '2024-01-18T15:30:00', + start: '2025-07-31T15:00:00', + end: '2025-07-31T15:30:00', type: 'meal', allDay: false, syncStatus: 'synced', @@ -136,16 +136,48 @@ export class EventManager { { id: '11', title: 'Documentation', - start: '2024-01-19T13:00:00', - end: '2024-01-19T16:00:00', + start: '2025-08-01T13:00:00', + end: '2025-08-01T16:00:00', type: 'work', allDay: false, syncStatus: 'synced', metadata: { duration: 180 } + }, + { + id: '12', + title: 'Early Morning Workout', + start: '2025-07-29T06:00:00', + end: '2025-07-29T07:00:00', + type: 'work', + allDay: false, + syncStatus: 'synced', + metadata: { duration: 60 } + }, + { + id: '13', + title: 'Late Evening Call', + start: '2025-07-30T21:00:00', + end: '2025-07-30T22:00:00', + type: 'meeting', + allDay: false, + syncStatus: 'synced', + metadata: { duration: 60 } + }, + { + id: '14', + title: 'Midnight Release', + start: '2025-07-31T23:00:00', + end: '2025-08-01T01:00:00', + type: 'work', + allDay: false, + syncStatus: 'synced', + metadata: { duration: 120 } } ]; console.log(`EventManager: Loaded ${this.events.length} mock events`); + console.log('EventManager: First event:', this.events[0]); + console.log('EventManager: Last event:', this.events[this.events.length - 1]); } private syncEvents(): void { diff --git a/src/managers/EventRenderer.ts b/src/managers/EventRenderer.ts index 7fa4a45..9ab3567 100644 --- a/src/managers/EventRenderer.ts +++ b/src/managers/EventRenderer.ts @@ -19,6 +19,7 @@ export class EventRenderer { this.eventBus.on(EventTypes.EVENTS_LOADED, (event: Event) => { const customEvent = event as CustomEvent; const { events } = customEvent.detail; + console.log('EventRenderer: Received EVENTS_LOADED with', events.length, 'events'); // Store events but don't render yet - wait for grid to be ready this.pendingEvents = events; this.tryRenderEvents(); @@ -39,8 +40,10 @@ export class EventRenderer { private tryRenderEvents(): void { // Only render if we have both events and grid is ready + console.log('EventRenderer: tryRenderEvents called, pending events:', this.pendingEvents.length); if (this.pendingEvents.length > 0) { const dayColumns = document.querySelectorAll('swp-day-column'); + console.log('EventRenderer: Found', dayColumns.length, 'day columns'); if (dayColumns.length > 0) { this.renderEvents(this.pendingEvents); this.pendingEvents = []; // Clear pending events after rendering diff --git a/src/managers/GridManager.ts b/src/managers/GridManager.ts index 288f3f1..bf35d12 100644 --- a/src/managers/GridManager.ts +++ b/src/managers/GridManager.ts @@ -169,6 +169,7 @@ export class GridManager { const timeAxisContent = document.createElement('swp-time-axis-content'); const startHour = calendarConfig.get('dayStartHour'); const endHour = calendarConfig.get('dayEndHour'); + console.log('GridManager: Creating time axis - startHour:', startHour, 'endHour:', endHour); for (let hour = startHour; hour < endHour; hour++) { const marker = document.createElement('swp-hour-marker'); diff --git a/wwwroot/css/calendar-base-css.css b/wwwroot/css/calendar-base-css.css index 562ded2..6c67e76 100644 --- a/wwwroot/css/calendar-base-css.css +++ b/wwwroot/css/calendar-base-css.css @@ -13,6 +13,8 @@ --hour-height: 60px; --minute-height: 1px; --snap-interval: 15; + --day-column-min-width: 250px; + --week-days: 7; /* Time boundaries */ --day-start-hour: 0; diff --git a/wwwroot/css/calendar-layout-css.css b/wwwroot/css/calendar-layout-css.css index 6ca33c4..ebb0f92 100644 --- a/wwwroot/css/calendar-layout-css.css +++ b/wwwroot/css/calendar-layout-css.css @@ -206,7 +206,7 @@ swp-hour-marker::after { top: 0; left: 100%; width: 100vw; - height: 1px; + height: 2px; background: var(--color-grid-line); pointer-events: none; } diff --git a/wwwroot/css/calendar.css b/wwwroot/css/calendar.css index ce74259..ecbdb62 100644 --- a/wwwroot/css/calendar.css +++ b/wwwroot/css/calendar.css @@ -1,50 +1,4 @@ -/* Base CSS */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - /* Grid measurements */ - --hour-height: 60px; - --minute-height: 1px; - --snap-interval: 15; - --day-column-min-width: 250px; - --week-days: 7; - - /* Time boundaries */ - --day-start-hour: 7; - --day-end-hour: 19; - --work-start-hour: 8; - --work-end-hour: 17; - - /* Colors */ - --color-primary: #2196f3; - --color-grid-line: #e0e0e0; - --color-grid-line-light: rgba(0, 0, 0, 0.03); - --color-work-hours: rgba(0, 100, 0, 0.02); - --color-current-time: #ff0000; - - /* Event colors */ - --color-event-meeting: #e3f2fd; - --color-event-meeting-border: #2196f3; - --color-event-meal: #fff3e0; - --color-event-meal-border: #ff9800; - --color-event-work: #f3e5f5; - --color-event-work-border: #9c27b0; - - /* UI colors */ - --color-background: #ffffff; - --color-surface: #f5f5f5; - --color-text: #333333; - --color-text-secondary: #666666; - --color-border: #e0e0e0; - - /* Shadows */ - --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); - --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); -} +/* Base CSS - Variables are defined in calendar-base-css.css */ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;