From c164975494d9df6f695518a52d90b5d2a7e82011 Mon Sep 17 00:00:00 2001 From: Janus Knudsen Date: Mon, 4 Aug 2025 23:55:04 +0200 Subject: [PATCH] wip --- src/managers/EventManager.ts | 27 +++++++++ src/managers/GridManager.ts | 94 ++++++++++++++++++++++++----- wwwroot/css/calendar-layout-css.css | 13 +++- 3 files changed, 117 insertions(+), 17 deletions(-) diff --git a/src/managers/EventManager.ts b/src/managers/EventManager.ts index d38ebf0..af719e3 100644 --- a/src/managers/EventManager.ts +++ b/src/managers/EventManager.ts @@ -180,6 +180,33 @@ export class EventManager { allDay: false, syncStatus: 'synced', metadata: { duration: 120 } + }, + // All-day events for demo + { + id: '15', + title: 'Company Holiday', + start: '2025-08-04T00:00:00', + end: '2025-08-04T23:59:59', + type: 'milestone', + allDay: true, + syncStatus: 'synced', + metadata: { + duration: 1440, // Full day in minutes + color: '#4caf50' // Green color + } + }, + { + id: '16', + title: 'Team Building Event', + start: '2025-08-06T00:00:00', + end: '2025-08-06T23:59:59', + type: 'meeting', + allDay: true, + syncStatus: 'synced', + metadata: { + duration: 1440, // Full day in minutes + color: '#2196f3' // Blue color + } } ]; diff --git a/src/managers/GridManager.ts b/src/managers/GridManager.ts index 596e5f3..c41286f 100644 --- a/src/managers/GridManager.ts +++ b/src/managers/GridManager.ts @@ -21,6 +21,7 @@ export class GridManager { private container: HTMLElement | null = null; private grid: HTMLElement | null = null; private currentWeek: Date | null = null; + private allDayEvents: any[] = []; // Store all-day events for current week constructor() { this.init(); @@ -76,6 +77,12 @@ export class GridManager { this.render(); }); + // Handle events loaded + eventBus.on(EventTypes.EVENTS_LOADED, (e: Event) => { + const detail = (e as CustomEvent).detail; + this.updateAllDayEvents(detail.events); + }); + // Handle grid clicks this.setupGridInteractions(); } @@ -255,34 +262,91 @@ export class GridManager { weekHeader.appendChild(header); }); - // Add all-day events in row 2 - const allDayEventLeft = document.createElement('swp-allday-event'); - allDayEventLeft.textContent = 'Left Section'; - allDayEventLeft.style.gridColumn = '1 / 3'; // Span columns 1-2 - weekHeader.appendChild(allDayEventLeft); - - const allDayEventRight = document.createElement('swp-allday-event'); - allDayEventRight.textContent = 'Right Section'; - allDayEventRight.style.gridColumn = '3 / 8'; // Span columns 3-7 - weekHeader.appendChild(allDayEventRight); + // Render all-day events in row 2 + this.renderAllDayEvents(weekHeader); // Update spacer heights based on all-day events this.updateSpacerHeights(); } + /** + * Update all-day events data and re-render if needed + */ + private updateAllDayEvents(events: any[]): void { + if (!this.currentWeek) return; + + // Filter all-day events for current week + const weekStart = this.currentWeek; + const weekEnd = new Date(weekStart); + weekEnd.setDate(weekStart.getDate() + 6); + + this.allDayEvents = events.filter(event => { + if (!event.allDay) return false; + + const eventDate = new Date(event.start); + return eventDate >= weekStart && eventDate <= weekEnd; + }); + + console.log('GridManager: Updated all-day events:', this.allDayEvents.length); + + // Re-render if grid is already rendered + if (this.grid && this.grid.children.length > 0) { + this.render(); + } + } + + /** + * Render all-day events in week header row 2 + */ + private renderAllDayEvents(weekHeader: HTMLElement): void { + if (!this.currentWeek) return; + + const dates = this.getWeekDates(this.currentWeek); + const weekDays = calendarConfig.get('weekDays'); + const daysToShow = dates.slice(0, weekDays); + + // Group all-day events by date + const eventsByDate = new Map(); + + this.allDayEvents.forEach(event => { + const eventDate = new Date(event.start); + const dateKey = this.formatDate(eventDate); + + if (!eventsByDate.has(dateKey)) { + eventsByDate.set(dateKey, []); + } + eventsByDate.get(dateKey)!.push(event); + }); + + // Render all-day events for each day + daysToShow.forEach((date, dayIndex) => { + const dateKey = this.formatDate(date); + const dayEvents = eventsByDate.get(dateKey) || []; + + dayEvents.forEach(event => { + const allDayEvent = document.createElement('swp-allday-event'); + allDayEvent.textContent = event.title; + allDayEvent.style.gridColumn = `${dayIndex + 1} / ${dayIndex + 2}`; // Single column + allDayEvent.style.backgroundColor = event.metadata?.color || '#ff9800'; + + weekHeader.appendChild(allDayEvent); + }); + }); + } + /** * Update spacer heights based on all-day events presence */ private updateSpacerHeights(): void { - // TODO: Check for actual all-day events in current week - // For now, simulate having all-day events with 30px height - const hasAllDayEvents = true; // This should be determined from actual event data - const allDayHeight = hasAllDayEvents ? 30 : 0; + const allDayEventCount = this.allDayEvents.length; + const eventHeight = 20; // Height per all-day event in pixels + const padding = 4; // Top/bottom padding + const allDayHeight = allDayEventCount > 0 ? (allDayEventCount * eventHeight) + padding : 0; // Set CSS variable for dynamic spacer height document.documentElement.style.setProperty('--all-day-row-height', `${allDayHeight}px`); - console.log('GridManager: Updated --all-day-row-height to', `${allDayHeight}px`); + console.log('GridManager: Updated --all-day-row-height to', `${allDayHeight}px`, 'for', allDayEventCount, 'events'); } /** diff --git a/wwwroot/css/calendar-layout-css.css b/wwwroot/css/calendar-layout-css.css index 9655c88..ca67797 100644 --- a/wwwroot/css/calendar-layout-css.css +++ b/wwwroot/css/calendar-layout-css.css @@ -280,10 +280,19 @@ swp-week-header::after { /* All-day events in row 2 */ swp-allday-event { grid-row: 2; /* Row 2 only */ - background: #ff9800; /* Orange background */ + height: calc(var(--all-day-row-height) - 2px); /* Dynamic height minus margin */ + background: #ff9800; /* Default orange background */ display: flex; align-items: center; - justify-content: center; + justify-content: flex-start; + color: #fff; + font-size: 0.75rem; + padding: 2px 4px; + margin: 1px; + border-radius: 3px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; border-right: 1px solid rgba(0, 0, 0, 0.1); }