131 lines
4.3 KiB
HTML
131 lines
4.3 KiB
HTML
<!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>
|