New renders+css

src/v2/features/date/DateRenderer.ts

@@ -0,0 +1,38 @@
+import { IGroupingRenderer } from '../../core/IGroupingRenderer';
+import { RenderContext } from '../../core/RenderContext';
+
+export interface IDateService {
+  parseISO(dateStr: string): Date;
+  getDayName(date: Date, format: 'short' | 'long'): string;
+}
+
+export const defaultDateService: IDateService = {
+  parseISO: (str) => new Date(str),
+  getDayName: (date, format) => date.toLocaleDateString('da-DK', { weekday: format })
+};
+
+export class DateRenderer implements IGroupingRenderer {
+  readonly type = 'date';
+
+  constructor(private dateService: IDateService = defaultDateService) {}
+
+  render(context: RenderContext): void {
+    for (const dateStr of context.values) {
+      const date = this.dateService.parseISO(dateStr);
+
+      const headerCell = document.createElement('swp-day-header');
+      headerCell.dataset.date = dateStr;
+      headerCell.innerHTML = `
+        <swp-day-name>${this.dateService.getDayName(date, 'short')}</swp-day-name>
+        <swp-day-date>${date.getDate()}</swp-day-date>
+      `;
+      context.headerContainer.appendChild(headerCell);
+
+      const column = document.createElement('swp-day-column');
+      column.dataset.date = dateStr;
+      if (context.parentId) column.dataset.parentId = context.parentId;
+      column.innerHTML = '<swp-events-layer></swp-events-layer>';
+      context.columnContainer.appendChild(column);
+    }
+  }
+}

src/v2/features/date/index.ts

@@ -0,0 +1 @@
+export { DateRenderer, IDateService, defaultDateService } from './DateRenderer';

src/v2/features/event/EventRenderer.ts

@@ -0,0 +1,71 @@
+import { IGroupingRenderer } from '../../core/IGroupingRenderer';
+import { RenderContext } from '../../core/RenderContext';
+
+export interface IEventData {
+  id: string;
+  title: string;
+  start: Date;
+  end: Date;
+  type?: string;
+  allDay?: boolean;
+}
+
+export interface IEventStore {
+  getByDateAndResource(date: string, resourceId?: string): Promise<IEventData[]>;
+}
+
+export class EventRenderer implements IGroupingRenderer {
+  readonly type = 'event';
+
+  constructor(
+    private eventStore: IEventStore,
+    private hourHeight = 60,
+    private dayStartHour = 6
+  ) {}
+
+  render(context: RenderContext): void {
+    this.renderAsync(context);
+  }
+
+  private async renderAsync(context: RenderContext): Promise<void> {
+    const columns = context.columnContainer.querySelectorAll<HTMLElement>('swp-day-column');
+
+    for (const column of columns) {
+      const dateStr = column.dataset.date;
+      if (!dateStr) continue;
+
+      const eventsLayer = column.querySelector('swp-events-layer');
+      if (!eventsLayer) continue;
+
+      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);
+      }
+    }
+  }
+
+  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)
+    };
+  }
+
+  private formatTime(d: Date): string {
+    return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`;
+  }
+}

src/v2/features/event/index.ts

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

src/v2/features/resource/ResourceRenderer.ts

@@ -0,0 +1,16 @@
+import { IGroupingRenderer } from '../../core/IGroupingRenderer';
+import { RenderContext } from '../../core/RenderContext';
+
+export class ResourceRenderer implements IGroupingRenderer {
+  readonly type = 'resource';
+
+  render(context: RenderContext): void {
+    for (const resourceId of context.values) {
+      const cell = document.createElement('swp-resource-header');
+      cell.dataset.resourceId = resourceId;
+      cell.textContent = resourceId;
+      if (context.colspan > 1) cell.style.gridColumn = `span ${context.colspan}`;
+      context.headerContainer.appendChild(cell);
+    }
+  }
+}

src/v2/features/resource/index.ts

@@ -0,0 +1 @@
+export { ResourceRenderer } from './ResourceRenderer';

src/v2/features/team/TeamRenderer.ts

@@ -0,0 +1,16 @@
+import { IGroupingRenderer } from '../../core/IGroupingRenderer';
+import { RenderContext } from '../../core/RenderContext';
+
+export class TeamRenderer implements IGroupingRenderer {
+  readonly type = 'team';
+
+  render(context: RenderContext): void {
+    for (const teamId of context.values) {
+      const cell = document.createElement('swp-team-header');
+      cell.dataset.teamId = teamId;
+      cell.textContent = teamId;
+      if (context.colspan > 1) cell.style.gridColumn = `span ${context.colspan}`;
+      context.headerContainer.appendChild(cell);
+    }
+  }
+}

src/v2/features/team/index.ts

@@ -0,0 +1 @@
+export { TeamRenderer } from './TeamRenderer';