wip

src/v2/V2CompositionRoot.ts

@@ -6,7 +6,6 @@ import { DateService } from './core/DateService';
 import { ITimeFormatConfig } from './core/ITimeFormatConfig';
 import { ResourceRenderer } from './features/resource/ResourceRenderer';
 import { TeamRenderer } from './features/team/TeamRenderer';
-import { RendererRegistry } from './core/RendererRegistry';
 import { CalendarOrchestrator } from './core/CalendarOrchestrator';
 import { TimeAxisRenderer } from './features/timeaxis/TimeAxisRenderer';
 import { ScrollManager } from './core/ScrollManager';
@@ -32,6 +31,9 @@ import { MockEventRepository } from './repositories/MockEventRepository';
 // Workers
 import { DataSeeder } from './workers/DataSeeder';
 
+// Features
+import { EventRenderer } from './features/event/EventRenderer';
+
 const defaultTimeFormatConfig: ITimeFormatConfig = {
   timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
   use24HourFormat: true,
@@ -70,14 +72,14 @@ export function createV2Container(): Container {
   // Workers
   builder.registerType(DataSeeder).as<DataSeeder>();
 
-  // Renderers - registreres som IGroupingRenderer
+  // Features
+  builder.registerType(EventRenderer).as<EventRenderer>();
+
+  // Renderers - registreres som IGroupingRenderer (array injection til CalendarOrchestrator)
   builder.registerType(DateRenderer).as<IGroupingRenderer>();
   builder.registerType(ResourceRenderer).as<IGroupingRenderer>();
   builder.registerType(TeamRenderer).as<IGroupingRenderer>();
 
-  // RendererRegistry modtager IGroupingRenderer[] automatisk (array injection)
-  builder.registerType(RendererRegistry).as<RendererRegistry>();
-
   // Stores - registreres som IGroupingStore
   builder.registerType(MockTeamStore).as<IGroupingStore>();
   builder.registerType(MockResourceStore).as<IGroupingStore>();

src/v2/core/CalendarOrchestrator.ts

@@ -1,7 +1,8 @@
 import { ViewConfig, GroupingConfig } from './ViewConfig';
 import { RenderContext } from './RenderContext';
-import { RendererRegistry } from './RendererRegistry';
+import { IGroupingRenderer } from './IGroupingRenderer';
 import { IGroupingStore } from './IGroupingStore';
+import { EventRenderer } from '../features/event/EventRenderer';
 
 interface HierarchyNode {
   type: string;
@@ -18,10 +19,15 @@ interface GroupingData {
 
 export class CalendarOrchestrator {
   constructor(
-    private rendererRegistry: RendererRegistry,
-    private stores: IGroupingStore[]
+    private renderers: IGroupingRenderer[],
+    private stores: IGroupingStore[],
+    private eventRenderer: EventRenderer
   ) {}
 
+  private getRenderer(type: string): IGroupingRenderer | undefined {
+    return this.renderers.find(r => r.type === type);
+  }
+
   private getStore(type: string): IGroupingStore | undefined {
     return this.stores.find(s => s.type === type);
   }
@@ -47,15 +53,17 @@ export class CalendarOrchestrator {
 
     this.renderHierarchy(hierarchy, headerContainer, columnContainer);
 
-    const eventRenderer = this.rendererRegistry.get('event');
-    eventRenderer?.render({
-      headerContainer,
-      columnContainer,
-      values: [],
-      headerRow: viewConfig.groupings.length + 1,
-      columnIndex: 1,
-      colspan: 1
-    });
+    // Render events from IndexedDB
+    const visibleDates = this.extractVisibleDates(viewConfig);
+    await this.eventRenderer.render(container, visibleDates);
+  }
+
+  /**
+   * Extract visible dates from view config
+   */
+  private extractVisibleDates(viewConfig: ViewConfig): string[] {
+    const dateGrouping = viewConfig.groupings.find(g => g.type === 'date');
+    return dateGrouping?.values || [];
   }
 
   private fetchAllData(groupings: GroupingConfig[]): Map<string, GroupingData> {
@@ -132,7 +140,7 @@ export class CalendarOrchestrator {
     headerRow = 1
   ): void {
     for (const node of nodes) {
-      const renderer = this.rendererRegistry.get(node.type);
+      const renderer = this.getRenderer(node.type);
       const colspan = this.countLeaves([node]) || 1;
 
       renderer?.render({

src/v2/core/RendererRegistry.ts

@@ -1,9 +0,0 @@
-import { IGroupingRenderer } from './IGroupingRenderer';
-
-export class RendererRegistry {
-  constructor(private renderers: IGroupingRenderer[]) {}
-
-  get(type: string): IGroupingRenderer | undefined {
-    return this.renderers.find(r => r.type === type);
-  }
-}

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;
   }
 }

src/v2/features/event/index.ts

@@ -1 +1 @@
-export { EventRenderer, IEventData, IEventStore } from './EventRenderer';
+export { EventRenderer } from './EventRenderer';

src/v2/index.ts

@@ -3,7 +3,6 @@ export { ViewTemplate, ViewConfig, GroupingConfig } from './core/ViewConfig';
 export { RenderContext } from './core/RenderContext';
 export { IGroupingRenderer } from './core/IGroupingRenderer';
 export { IGroupingStore } from './core/IGroupingStore';
-export { RendererRegistry } from './core/RendererRegistry';
 export { CalendarOrchestrator } from './core/CalendarOrchestrator';
 export { NavigationAnimator } from './core/NavigationAnimator';
 
@@ -11,7 +10,7 @@ export { NavigationAnimator } from './core/NavigationAnimator';
 export { DateRenderer } from './features/date';
 export { DateService } from './core/DateService';
 export { ITimeFormatConfig } from './core/ITimeFormatConfig';
-export { EventRenderer, IEventData, IEventStore } from './features/event';
+export { EventRenderer } from './features/event';
 export { ResourceRenderer } from './features/resource';
 export { TeamRenderer } from './features/team';
 export { TimeAxisRenderer } from './features/timeaxis/TimeAxisRenderer';

src/v2/utils/PositionUtils.ts

@@ -0,0 +1,58 @@
+/**
+ * PositionUtils - Event position calculations
+ *
+ * Converts between time and pixel positions for calendar events.
+ */
+
+export interface EventPosition {
+  top: number;    // pixels from day start
+  height: number; // pixels
+}
+
+export interface GridConfig {
+  dayStartHour: number;
+  dayEndHour: number;
+  hourHeight: number;
+}
+
+/**
+ * Calculate pixel position for an event based on its times
+ */
+export function calculateEventPosition(
+  start: Date,
+  end: Date,
+  config: GridConfig
+): EventPosition {
+  const startMinutes = start.getHours() * 60 + start.getMinutes();
+  const endMinutes = end.getHours() * 60 + end.getMinutes();
+
+  const dayStartMinutes = config.dayStartHour * 60;
+  const minuteHeight = config.hourHeight / 60;
+
+  const top = (startMinutes - dayStartMinutes) * minuteHeight;
+  const height = (endMinutes - startMinutes) * minuteHeight;
+
+  return { top, height };
+}
+
+/**
+ * Get the date key (YYYY-MM-DD) for a Date object
+ */
+export function getDateKey(date: Date): string {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+/**
+ * Format time range for display (e.g., "10:00 - 11:30")
+ */
+export function formatTimeRange(start: Date, end: Date): string {
+  const formatTime = (d: Date) => {
+    const h = String(d.getHours()).padStart(2, '0');
+    const m = String(d.getMinutes()).padStart(2, '0');
+    return `${h}:${m}`;
+  };
+  return `${formatTime(start)} - ${formatTime(end)}`;
+}