New renders+css

2025-12-06 01:22:04 +01:00 · 2025-12-06 01:22:04 +01:00 · b3f47e93e8
commit b3f47e93e8
parent 73e284660f
22 changed files with 763 additions and 3 deletions
--- a/wwwroot/v2.html
+++ b/wwwroot/v2.html
@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Calendar V2</title>
+  <link rel="stylesheet" href="css/calendar-v2.css">
+</head>
+<body>
+  <div class="calendar-wrapper">
+    <swp-calendar>
+      <swp-calendar-nav>
+        <swp-nav-button id="btn-simple">Datoer</swp-nav-button>
+        <swp-nav-button id="btn-resource">Resources</swp-nav-button>
+        <swp-nav-button id="btn-team">Teams</swp-nav-button>
+        <swp-week-info>
+          <swp-week-number>V2</swp-week-number>
+          <swp-date-range id="view-info"></swp-date-range>
+        </swp-week-info>
+      </swp-calendar-nav>
+
+      <swp-calendar-container>
+        <swp-header-spacer></swp-header-spacer>
+        <swp-time-axis>
+          <swp-time-axis-content id="time-axis"></swp-time-axis-content>
+        </swp-time-axis>
+        <swp-grid-container>
+          <swp-calendar-header></swp-calendar-header>
+          <swp-scrollable-content>
+            <swp-time-grid>
+              <swp-grid-lines></swp-grid-lines>
+              <swp-day-columns></swp-day-columns>
+            </swp-time-grid>
+          </swp-scrollable-content>
+        </swp-grid-container>
+      </swp-calendar-container>
+    </swp-calendar>
+  </div>
+
+  <script type="module">
+    import {
+      CalendarOrchestrator,
+      RendererRegistry,
+      StoreRegistry,
+      DateRenderer,
+      ResourceRenderer,
+      TeamRenderer
+    } from './js/calendar-v2.js';
+
+    const rendererRegistry = new RendererRegistry([
+      new DateRenderer(),
+      new ResourceRenderer(),
+      new TeamRenderer()
+    ]);
+
+    const mockTeams = [
+      { id: 'alpha', name: 'Team Alpha' },
+      { id: 'beta', name: 'Team Beta' }
+    ];
+
+    const mockResources = [
+      { id: 'alice', name: 'Alice', teamId: 'alpha' },
+      { id: 'bob', name: 'Bob', teamId: 'alpha' },
+      { id: 'carol', name: 'Carol', teamId: 'beta' },
+      { id: 'dave', name: 'Dave', teamId: 'beta' }
+    ];
+
+    const storeRegistry = new StoreRegistry();
+    storeRegistry.register('team', { getByIds: ids => mockTeams.filter(t => ids.includes(t.id)) });
+    storeRegistry.register('resource', { getByIds: ids => mockResources.filter(r => ids.includes(r.id)) });
+
+    const orchestrator = new CalendarOrchestrator(rendererRegistry, storeRegistry);
+    const container = document.querySelector('swp-calendar-container');
+    const viewInfo = document.getElementById('view-info');
+
+    function getWeekDates() {
+      const today = new Date();
+      const mon = new Date(today);
+      mon.setDate(today.getDate() - today.getDay() + 1);
+      return Array.from({ length: 5 }, (_, i) => {
+        const d = new Date(mon);
+        d.setDate(mon.getDate() + i);
+        return d.toISOString().split('T')[0];
+      });
+    }
+
+    const dates = getWeekDates();
+
+    const views = {
+      simple: {
+        templateId: 'simple',
+        groupings: [{ type: 'date', values: dates }]
+      },
+      resource: {
+        templateId: 'resource',
+        groupings: [
+          { type: 'resource', values: ['alice', 'bob', 'carol'] },
+          { type: 'date', values: dates.slice(0, 3) }
+        ]
+      },
+      team: {
+        templateId: 'team',
+        groupings: [
+          { type: 'team', values: ['alpha', 'beta'] },
+          { type: 'resource', values: ['alice', 'bob', 'carol', 'dave'], parentKey: 'teamId' },
+          { type: 'date', values: dates.slice(0, 3) }
+        ]
+      }
+    };
+
+    function generateTimeAxis() {
+      const el = document.getElementById('time-axis');
+      el.innerHTML = Array.from({ length: 15 }, (_, i) =>
+        `<swp-hour-marker>${(6 + i).toString().padStart(2, '0')}:00</swp-hour-marker>`
+      ).join('');
+    }
+
+    async function render(view, label) {
+      viewInfo.textContent = label;
+      await orchestrator.render(view, container);
+    }
+
+    document.getElementById('btn-simple').onclick = () => render(views.simple, '5 datoer');
+    document.getElementById('btn-resource').onclick = () => render(views.resource, '3 resources × 3 datoer');
+    document.getElementById('btn-team').onclick = () => render(views.team, '2 teams × 2 resources × 3 datoer');
+
+    generateTimeAxis();
+    render(views.simple, '5 datoer');
+  </script>
+</body>
+</html>