Renaming part 1

src/renderers/EventRenderer.ts

@@ -0,0 +1,141 @@
+// Event rendering strategy interface and implementations
+
+import { CalendarEvent } from '../types/CalendarTypes';
+import { CalendarConfig } from '../core/CalendarConfig';
+import { DateUtils } from '../utils/DateUtils';
+
+/**
+ * Interface for event rendering strategies
+ */
+export interface EventRendererStrategy {
+  findColumn(event: CalendarEvent): HTMLElement | null;
+  renderEvents(events: CalendarEvent[], config: CalendarConfig): void;
+  clearEvents(): void;
+}
+
+/**
+ * Base class for event renderers with common functionality
+ */
+export abstract class BaseEventRenderer implements EventRendererStrategy {
+  abstract findColumn(event: CalendarEvent): HTMLElement | null;
+
+  renderEvents(events: CalendarEvent[], config: CalendarConfig): void {
+    console.log('BaseEventRenderer: renderEvents called with', events.length, 'events');
+    
+    // Clear existing events first
+    this.clearEvents();
+
+    // Filter out all-day events (handled by GridManager)
+    const nonAllDayEvents = events.filter(event => !event.allDay);
+    console.log('BaseEventRenderer: Rendering', nonAllDayEvents.length, 'non-all-day events');
+
+    // Render each event in the correct column
+    nonAllDayEvents.forEach(event => {
+      const column = this.findColumn(event);
+      
+      if (column) {
+        const eventsLayer = column.querySelector('swp-events-layer');
+        if (eventsLayer) {
+          this.renderEvent(event, eventsLayer, config);
+        } else {
+          console.warn('BaseEventRenderer: No events layer found in column for event', event.title);
+        }
+      } else {
+        console.warn('BaseEventRenderer: No column found for event', event.title);
+      }
+    });
+  }
+
+  protected renderEvent(event: CalendarEvent, container: Element, config: CalendarConfig): 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, config);
+    eventElement.style.position = 'absolute';
+    eventElement.style.top = `${position.top + 1}px`;
+    eventElement.style.height = `${position.height - 1}px`;
+
+    // Set color
+    eventElement.style.backgroundColor = event.metadata?.color || '#3498db';
+
+    // 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>
+    `;
+
+    container.appendChild(eventElement);
+  }
+
+  protected calculateEventPosition(event: CalendarEvent, config: CalendarConfig): { top: number; height: number } {
+    const startDate = new Date(event.start);
+    const endDate = new Date(event.end);
+    
+    const dayStartHour = config.get('dayStartHour');
+    const hourHeight = config.get('hourHeight');
+
+    // Calculate minutes from visible day start
+    const startMinutes = startDate.getHours() * 60 + startDate.getMinutes();
+    const endMinutes = endDate.getHours() * 60 + endDate.getMinutes();
+    const dayStartMinutes = dayStartHour * 60;
+
+    // Calculate top position (subtract day start to align with time axis)
+    const top = ((startMinutes - dayStartMinutes) / 60) * hourHeight;
+    
+    // Calculate height
+    const durationMinutes = endMinutes - startMinutes;
+    const height = (durationMinutes / 60) * hourHeight;
+
+    return { top, height };
+  }
+
+  protected formatTime(isoString: string): string {
+    const date = new Date(isoString);
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
+    const period = hours >= 12 ? 'PM' : 'AM';
+    const displayHour = hours > 12 ? hours - 12 : (hours === 0 ? 12 : hours);
+    
+    return `${displayHour}:${minutes.toString().padStart(2, '0')} ${period}`;
+  }
+
+  clearEvents(): void {
+    const existingEvents = document.querySelectorAll('swp-event');
+    existingEvents.forEach(event => event.remove());
+  }
+}
+
+/**
+ * Date-based event renderer
+ */
+export class DateEventRenderer extends BaseEventRenderer {
+  findColumn(event: CalendarEvent): HTMLElement | null {
+    const eventDate = new Date(event.start);
+    const dateStr = DateUtils.formatDate(eventDate);
+    const dayColumn = document.querySelector(`swp-day-column[data-date="${dateStr}"]`) as HTMLElement;
+    console.log('DateEventRenderer: Looking for day column with date', dateStr, 'found:', !!dayColumn);
+    return dayColumn;
+  }
+}
+
+/**
+ * Resource-based event renderer
+ */
+export class ResourceEventRenderer extends BaseEventRenderer {
+  findColumn(event: CalendarEvent): HTMLElement | null {
+    if (!event.resourceName) {
+      console.warn('ResourceEventRenderer: Event has no resourceName', event);
+      return null;
+    }
+
+    const resourceColumn = document.querySelector(`swp-resource-column[data-resource="${event.resourceName}"]`) as HTMLElement;
+    console.log('ResourceEventRenderer: Looking for resource column with name', event.resourceName, 'found:', !!resourceColumn);
+    return resourceColumn;
+  }
+}