Initial commit: Calendar Plantempus project setup with TypeScript, ASP.NET Core, and event-driven architecture

src/managers/EventRenderer.ts

@@ -0,0 +1,177 @@
+import { EventBus } from '../core/EventBus';
+import { IEventBus, CalendarEvent } from '../types/CalendarTypes';
+import { EventTypes } from '../constants/EventTypes';
+import { calendarConfig } from '../core/CalendarConfig';
+
+/**
+ * EventRenderer - Render events i DOM med positionering
+ * Håndterer event positioning og overlap detection
+ */
+export class EventRenderer {
+    private eventBus: IEventBus;
+
+    constructor(eventBus: IEventBus) {
+        this.eventBus = eventBus;
+        this.setupEventListeners();
+    }
+
+    private setupEventListeners(): void {
+        this.eventBus.on(EventTypes.EVENTS_LOADED, (event: Event) => {
+            const customEvent = event as CustomEvent;
+            const { events } = customEvent.detail;
+            this.renderEvents(events);
+        });
+
+        this.eventBus.on(EventTypes.VIEW_RENDERED, () => {
+            // Clear existing events when view changes
+            this.clearEvents();
+        });
+    }
+
+    private renderEvents(events: CalendarEvent[]): void {
+        console.log(`EventRenderer: Rendering ${events.length} events`);
+        
+        // Clear existing events first
+        this.clearEvents();
+
+        // Group events by day for better rendering
+        const eventsByDay = this.groupEventsByDay(events);
+
+        // Render events for each day
+        Object.entries(eventsByDay).forEach(([dayIndex, dayEvents]) => {
+            this.renderDayEvents(parseInt(dayIndex), dayEvents);
+        });
+
+        this.eventBus.emit(EventTypes.EVENT_RENDERED, {
+            count: events.length
+        });
+    }
+
+    private groupEventsByDay(events: CalendarEvent[]): Record<number, CalendarEvent[]> {
+        const grouped: Record<number, CalendarEvent[]> = {};
+
+        events.forEach(event => {
+            const day = event.metadata?.day || 0;
+            if (!grouped[day]) {
+                grouped[day] = [];
+            }
+            grouped[day].push(event);
+        });
+
+        return grouped;
+    }
+
+    private renderDayEvents(dayIndex: number, events: CalendarEvent[]): void {
+        const dayColumns = document.querySelectorAll('swp-day-column');
+        const dayColumn = dayColumns[dayIndex];
+        if (!dayColumn) {
+            console.warn(`EventRenderer: Day column ${dayIndex} not found`);
+            return;
+        }
+
+        const eventsLayer = dayColumn.querySelector('swp-events-layer');
+        if (!eventsLayer) {
+            console.warn(`EventRenderer: Events layer not found for day ${dayIndex}`);
+            return;
+        }
+
+        // Sort events by start time
+        const sortedEvents = events.sort((a, b) => a.start.localeCompare(b.start));
+
+        sortedEvents.forEach(event => {
+            this.renderEvent(event, eventsLayer);
+        });
+    }
+
+    private renderEvent(event: CalendarEvent, container: Element): void {
+        const eventElement = document.createElement('swp-event');
+        eventElement.dataset.eventId = event.id;
+        eventElement.dataset.type = event.type;
+
+        // Calculate position based on time
+        const position = this.calculateEventPosition(event);
+        eventElement.style.top = `${position.top}px`;
+        eventElement.style.height = `${position.height}px`;
+
+        // Format time for display
+        const startTime = this.formatTime(event.start);
+        const endTime = this.formatTime(event.end);
+
+        // Create event content
+        eventElement.innerHTML = `
+            <swp-event-time>${startTime} - ${endTime}</swp-event-time>
+            <swp-event-title>${event.title}</swp-event-title>
+        `;
+
+        // Add event listeners
+        this.addEventListeners(eventElement, event);
+
+        container.appendChild(eventElement);
+    }
+
+    private calculateEventPosition(event: CalendarEvent): { top: number; height: number } {
+        const startDate = new Date(event.start);
+        const endDate = new Date(event.end);
+        
+        const startHour = calendarConfig.get('dayStartHour');
+        const hourHeight = calendarConfig.get('hourHeight');
+
+        // Calculate minutes from day start
+        const startMinutes = (startDate.getHours() - startHour) * 60 + startDate.getMinutes();
+        const duration = (endDate.getTime() - startDate.getTime()) / (1000 * 60); // Duration in minutes
+
+        // Convert to pixels
+        const top = startMinutes * (hourHeight / 60);
+        const height = duration * (hourHeight / 60);
+
+        return { top, height };
+    }
+
+    private formatTime(isoString: string): string {
+        const date = new Date(isoString);
+        const hours = date.getHours();
+        const minutes = date.getMinutes();
+        
+        const period = hours >= 12 ? 'PM' : 'AM';
+        const displayHours = hours % 12 || 12;
+        const displayMinutes = minutes.toString().padStart(2, '0');
+        
+        return `${displayHours}:${displayMinutes} ${period}`;
+    }
+
+    private addEventListeners(eventElement: HTMLElement, event: CalendarEvent): void {
+        // Click handler
+        eventElement.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.eventBus.emit(EventTypes.EVENT_SELECTED, {
+                event,
+                element: eventElement
+            });
+        });
+
+        // Hover effects are handled by CSS
+        eventElement.addEventListener('mouseenter', () => {
+            eventElement.style.zIndex = '20';
+        });
+
+        eventElement.addEventListener('mouseleave', () => {
+            eventElement.style.zIndex = '10';
+        });
+    }
+
+    private clearEvents(): void {
+        const eventsLayers = document.querySelectorAll('swp-events-layer');
+        eventsLayers.forEach(layer => {
+            layer.innerHTML = '';
+        });
+    }
+
+    public refresh(): void {
+        // Request fresh events from EventManager
+        this.eventBus.emit(EventTypes.REFRESH_REQUESTED);
+    }
+
+    public destroy(): void {
+        this.clearEvents();
+    }
+}