1ad7d10266
Adjusts grid layout for time axis and calendar container Simplifies CSS grid positioning and template rows Removes redundant border styling
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-time-axis>
|
||
<swp-header-spacer></swp-header-spacer>
|
||
<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>
|