wip

src/v2/features/event/EventRenderer.ts

@@ -1,71 +1,140 @@
-import { IGroupingRenderer } from '../../core/IGroupingRenderer';
-import { RenderContext } from '../../core/RenderContext';
+import { ICalendarEvent } from '../../types/CalendarTypes';
+import { EventService } from '../../storage/events/EventService';
+import { calculateEventPosition, getDateKey, formatTimeRange, GridConfig } from '../../utils/PositionUtils';
 
-export interface IEventData {
-  id: string;
-  title: string;
-  start: Date;
-  end: Date;
-  type?: string;
-  allDay?: boolean;
-}
+/**
+ * EventRenderer - Renders calendar events to the DOM
+ *
+ * CLEAN approach:
+ * - Only data-id attribute on event element
+ * - innerHTML contains only visible content
+ * - Event data retrieved via EventService when needed
+ */
+export class EventRenderer {
+  private readonly gridConfig: GridConfig = {
+    dayStartHour: 6,
+    dayEndHour: 18,
+    hourHeight: 64
+  };
 
-export interface IEventStore {
-  getByDateAndResource(date: string, resourceId?: string): Promise<IEventData[]>;
-}
+  constructor(private eventService: EventService) {}
 
-export class EventRenderer implements IGroupingRenderer {
-  readonly type = 'event';
+  /**
+   * Render events for visible dates into day columns
+   */
+  async render(container: HTMLElement, visibleDates: string[]): Promise<void> {
+    // Get date range for query
+    const startDate = new Date(visibleDates[0]);
+    const endDate = new Date(visibleDates[visibleDates.length - 1]);
+    endDate.setHours(23, 59, 59, 999);
 
-  constructor(
-    private eventStore: IEventStore,
-    private hourHeight = 60,
-    private dayStartHour = 6
-  ) {}
+    // Fetch events from IndexedDB
+    const events = await this.eventService.getByDateRange(startDate, endDate);
 
-  render(context: RenderContext): void {
-    this.renderAsync(context);
-  }
+    // Group events by date
+    const eventsByDate = this.groupEventsByDate(events);
 
-  private async renderAsync(context: RenderContext): Promise<void> {
-    const columns = context.columnContainer.querySelectorAll<HTMLElement>('swp-day-column');
+    // Find day columns
+    const dayColumns = container.querySelector('swp-day-columns');
+    if (!dayColumns) return;
 
-    for (const column of columns) {
-      const dateStr = column.dataset.date;
-      if (!dateStr) continue;
+    const columns = dayColumns.querySelectorAll('swp-day-column');
 
-      const eventsLayer = column.querySelector('swp-events-layer');
-      if (!eventsLayer) continue;
+    // Render events into columns
+    columns.forEach((column, index) => {
+      const dateKey = visibleDates[index];
+      const dateEvents = eventsByDate.get(dateKey) || [];
 
-      const events = await this.eventStore.getByDateAndResource(dateStr, column.dataset.parentId);
-
-      for (const event of events) {
-        if (event.allDay) continue;
-
-        const { top, height } = this.calculatePosition(event.start, event.end);
-        const el = document.createElement('swp-event');
-        el.dataset.eventId = event.id;
-        el.dataset.type = event.type || 'work';
-        el.style.cssText = `position:absolute;top:${top}px;height:${height}px;left:2px;right:2px`;
-        el.innerHTML = `
-          <swp-event-time>${this.formatTime(event.start)} - ${this.formatTime(event.end)}</swp-event-time>
-          <swp-event-title>${event.title}</swp-event-title>
-        `;
-        eventsLayer.appendChild(el);
+      // Get or create events layer
+      let eventsLayer = column.querySelector('swp-events-layer');
+      if (!eventsLayer) {
+        eventsLayer = document.createElement('swp-events-layer');
+        column.appendChild(eventsLayer);
       }
+
+      // Clear existing events
+      eventsLayer.innerHTML = '';
+
+      // Render each event
+      dateEvents.forEach(event => {
+        if (!event.allDay) {
+          const eventElement = this.createEventElement(event);
+          eventsLayer!.appendChild(eventElement);
+        }
+      });
+    });
+  }
+
+  /**
+   * Group events by their date key
+   */
+  private groupEventsByDate(events: ICalendarEvent[]): Map<string, ICalendarEvent[]> {
+    const map = new Map<string, ICalendarEvent[]>();
+
+    events.forEach(event => {
+      const dateKey = getDateKey(event.start);
+      const existing = map.get(dateKey) || [];
+      existing.push(event);
+      map.set(dateKey, existing);
+    });
+
+    return map;
+  }
+
+  /**
+   * Create a single event element
+   *
+   * CLEAN approach:
+   * - Only data-id for lookup
+   * - Visible content in innerHTML only
+   */
+  private createEventElement(event: ICalendarEvent): HTMLElement {
+    const element = document.createElement('swp-event');
+
+    // Only essential data attribute
+    element.dataset.id = event.id;
+
+    // Calculate position
+    const position = calculateEventPosition(event.start, event.end, this.gridConfig);
+    element.style.top = `${position.top}px`;
+    element.style.height = `${position.height}px`;
+
+    // Color class based on event type
+    const colorClass = this.getColorClass(event);
+    if (colorClass) {
+      element.classList.add(colorClass);
     }
+
+    // Visible content only
+    element.innerHTML = `
+      <swp-event-time>${formatTimeRange(event.start, event.end)}</swp-event-time>
+      <swp-event-title>${this.escapeHtml(event.title)}</swp-event-title>
+      ${event.description ? `<swp-event-description>${this.escapeHtml(event.description)}</swp-event-description>` : ''}
+    `;
+
+    return element;
   }
 
-  private calculatePosition(start: Date, end: Date) {
-    const startMin = start.getHours() * 60 + start.getMinutes() - this.dayStartHour * 60;
-    const endMin = end.getHours() * 60 + end.getMinutes() - this.dayStartHour * 60;
-    return {
-      top: (startMin / 60) * this.hourHeight,
-      height: Math.max(((endMin - startMin) / 60) * this.hourHeight, 15)
+  /**
+   * Get color class based on event type
+   */
+  private getColorClass(event: ICalendarEvent): string {
+    const typeColors: Record<string, string> = {
+      'customer': 'is-blue',
+      'vacation': 'is-green',
+      'break': 'is-amber',
+      'meeting': 'is-purple',
+      'blocked': 'is-red'
     };
+    return typeColors[event.type] || 'is-blue';
   }
 
-  private formatTime(d: Date): string {
-    return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`;
+  /**
+   * Escape HTML to prevent XSS
+   */
+  private escapeHtml(text: string): string {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
   }
 }