Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adds closed day functionality to work schedule

Browse source 
Enhances schedule UI with closed day feature
- Adds visual styling for closed days
- Implements interactive day header toggling
- Introduces closed day state for schedule columns

Supports better schedule management for holidays and days off
This commit is contained in:
Janus C. H. Knudsen 2025-12-25 19:15:08 +01:00
parent 83723c170f
commit 2fcdbf3bc3
3 changed files with 701 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

96
wwwroot/poc-arbejdstidsplan.html
View file

@ -186,6 +186,43 @@
color: var(--color-text);
}
/* Lukkedag styling */
body.edit-mode swp-schedule-cell.header:not(.week-number) {
cursor: pointer;
}
body.edit-mode swp-schedule-cell.header:not(.week-number):hover {
background: var(--color-border);
}
swp-schedule-cell.header.closed {
background: color-mix(in srgb, #f59e0b 10%, var(--color-background-alt));
border-top: 2px solid #f59e0b !important;
border-left: 2px solid #f59e0b !important;
border-right: 2px solid #f59e0b !important;
border-bottom: none !important;
}
swp-schedule-cell.header.closed swp-day-name {
color: #d97706;
}
/* Celler i lukket kolonne */
swp-schedule-cell.day.closed-day {
background: color-mix(in srgb, #f59e0b 6%, var(--color-background));
border-left: 2px solid #f59e0b !important;
border-right: 2px solid #f59e0b !important;
}
/* Sidste celle i lukket kolonne får bund-border */
swp-schedule-cell.day.closed-day:nth-last-child(-n+8) {
border-bottom: 2px solid #f59e0b !important;
}
swp-schedule-cell.day.closed-day swp-time-display {
opacity: 0.5;
}
swp-schedule-cell.employee {
align-items: flex-start;
gap: 2px;
@ -808,31 +845,31 @@
<!-- Header row -->
<swp-schedule-cell class="header week-number">Uge 52</swp-schedule-cell>
<swp-schedule-cell class="header">
<swp-day-name>Man</swp-day-name>
<swp-day-name>Mandag</swp-day-name>
<swp-day-date>23/12</swp-day-date>
</swp-schedule-cell>
<swp-schedule-cell class="header">
<swp-day-name>Tir</swp-day-name>
<swp-day-name>Tirsdag</swp-day-name>
<swp-day-date>24/12</swp-day-date>
</swp-schedule-cell>
<swp-schedule-cell class="header">
<swp-day-name>Ons</swp-day-name>
<swp-schedule-cell class="header closed">
<swp-day-name>Onsdag</swp-day-name>
<swp-day-date>25/12</swp-day-date>
</swp-schedule-cell>
<swp-schedule-cell class="header">
<swp-day-name>Tor</swp-day-name>
<swp-day-name>Torsdag</swp-day-name>
<swp-day-date>26/12</swp-day-date>
</swp-schedule-cell>
<swp-schedule-cell class="header">
<swp-day-name>Fre</swp-day-name>
<swp-day-name>Fredag</swp-day-name>
<swp-day-date>27/12</swp-day-date>
</swp-schedule-cell>
<swp-schedule-cell class="header">
<swp-day-name>Lør</swp-day-name>
<swp-day-name>Lørdag</swp-day-name>
<swp-day-date>28/12</swp-day-date>
</swp-schedule-cell>
<swp-schedule-cell class="header">
<swp-day-name>Søn</swp-day-name>
<swp-day-name>Søndag</swp-day-name>
<swp-day-date>29/12</swp-day-date>
</swp-schedule-cell>
@ -843,7 +880,7 @@
</swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Anna Sørensen" data-day="Man" data-date="23/12"><swp-time-display>09:00 - 17:00</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Anna Sørensen" data-day="Tir" data-date="24/12"><swp-time-display>09:00 - 13:00</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Anna Sørensen" data-day="Ons" data-date="25/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day closed-day" data-employee="Anna Sørensen" data-day="Ons" data-date="25/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Anna Sørensen" data-day="Tor" data-date="26/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Anna Sørensen" data-day="Fre" data-date="27/12"><swp-time-display>09:00 - 17:00</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Anna Sørensen" data-day="Lør" data-date="28/12"><swp-time-display>10:00 - 14:00</swp-time-display></swp-schedule-cell>
@ -856,7 +893,7 @@
</swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Mette Jensen" data-day="Man" data-date="23/12"><swp-time-display>10:00 - 18:00</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Mette Jensen" data-day="Tir" data-date="24/12"><swp-time-display>10:00 - 18:00</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Mette Jensen" data-day="Ons" data-date="25/12"><swp-time-display class="vacation">Ferie</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day closed-day" data-employee="Mette Jensen" data-day="Ons" data-date="25/12"><swp-time-display class="vacation">Ferie</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Mette Jensen" data-day="Tor" data-date="26/12"><swp-time-display class="vacation">Ferie</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Mette Jensen" data-day="Fre" data-date="27/12"><swp-time-display class="vacation">Ferie</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Mette Jensen" data-day="Lør" data-date="28/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
@ -869,7 +906,7 @@
</swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Louise Nielsen" data-day="Man" data-date="23/12"><swp-time-display>09:00 - 17:00</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Louise Nielsen" data-day="Tir" data-date="24/12"><swp-time-display>09:00 - 17:00</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Louise Nielsen" data-day="Ons" data-date="25/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day closed-day" data-employee="Louise Nielsen" data-day="Ons" data-date="25/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Louise Nielsen" data-day="Tor" data-date="26/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Louise Nielsen" data-day="Fre" data-date="27/12"><swp-time-display>09:00 - 17:00</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Louise Nielsen" data-day="Lør" data-date="28/12"><swp-time-display>09:00 - 14:00</swp-time-display></swp-schedule-cell>
@ -882,7 +919,7 @@
</swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Katrine Pedersen" data-day="Man" data-date="23/12"><swp-time-display>12:00 - 20:00</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Katrine Pedersen" data-day="Tir" data-date="24/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Katrine Pedersen" data-day="Ons" data-date="25/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day closed-day" data-employee="Katrine Pedersen" data-day="Ons" data-date="25/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Katrine Pedersen" data-day="Tor" data-date="26/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Katrine Pedersen" data-day="Fre" data-date="27/12"><swp-time-display>12:00 - 20:00</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Katrine Pedersen" data-day="Lør" data-date="28/12"><swp-time-display>10:00 - 18:00</swp-time-display></swp-schedule-cell>
@ -895,7 +932,7 @@
</swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Sofie Andersen" data-day="Man" data-date="23/12"><swp-time-display class="sick">Syg</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Sofie Andersen" data-day="Tir" data-date="24/12"><swp-time-display>09:00 - 15:00</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Sofie Andersen" data-day="Ons" data-date="25/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day closed-day" data-employee="Sofie Andersen" data-day="Ons" data-date="25/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Sofie Andersen" data-day="Tor" data-date="26/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Sofie Andersen" data-day="Fre" data-date="27/12"><swp-time-display>09:00 - 15:00</swp-time-display></swp-schedule-cell>
<swp-schedule-cell class="day" data-employee="Sofie Andersen" data-day="Lør" data-date="28/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
@ -1678,6 +1715,39 @@
document.getElementById('nextWeek').addEventListener('click', () => {
console.log('Next week');
});
// ==========================================
// LUKKEDAGE (klik på dag-header)
// ==========================================
const scheduleTable = document.querySelector('swp-schedule-table');
const dayHeaders = document.querySelectorAll('swp-schedule-cell.header:not(.week-number)');
dayHeaders.forEach((header, index) => {
header.addEventListener('click', () => {
if (!isEditMode) return;
// Toggle lukket status på header
header.classList.toggle('closed');
// Find alle celler i denne kolonne (kolonne index + 1 pga. employee kolonne)
const columnIndex = index + 1; // 0-baseret, +1 for employee kolonne
// Opdater alle dag-celler i kolonnen
const allDayCells = document.querySelectorAll('swp-schedule-cell.day');
allDayCells.forEach(cell => {
const cellIndex = allCells.indexOf(cell);
const cellColumn = cellIndex % GRID_COLUMNS;
if (cellColumn === columnIndex) {
cell.classList.toggle('closed-day', header.classList.contains('closed'));
}
});
// Opdater has-closed class på tabellen
const hasAnyClosed = document.querySelector('swp-schedule-cell.header.closed');
scheduleTable.classList.toggle('has-closed', !!hasAnyClosed);
});
});
</script>
</body>

615
wwwroot/poc-rapport.html Normal file
View file

@ -0,0 +1,615 @@
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rapport - POC</title>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
/* ==========================================
CSS VARIABLES (Design System)
========================================== */
:root {
--color-surface: #fff;
--color-background: #f5f5f5;
--color-background-hover: #f0f0f0;
--color-background-alt: #fafafa;
--color-border: #e0e0e0;
--color-text: #333;
--color-text-secondary: #666;
--color-teal: #00897b;
--color-purple: #8b5cf6;
--color-amber: #f59e0b;
--color-red: #e53935;
--color-green: #43a047;
--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
/* ==========================================
RESET & BASE
========================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-family);
font-size: 14px;
color: var(--color-text);
background: var(--color-background);
line-height: 1.5;
}
/* ==========================================
LAYOUT
========================================== */
swp-page-container {
display: block;
max-width: 1400px;
margin: 0 auto;
padding: 24px;
}
/* ==========================================
HEADER
========================================== */
swp-page-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
swp-page-title {
font-size: 24px;
font-weight: 600;
color: var(--color-text);
}
/* ==========================================
FILTERS
========================================== */
swp-report-filters {
display: flex;
align-items: center;
gap: 16px;
}
swp-period-selector {
display: flex;
background: var(--color-surface);
border-radius: 6px;
padding: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
swp-period-selector button {
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
border: none;
background: transparent;
color: var(--color-text-secondary);
border-radius: 4px;
cursor: pointer;
transition: all 150ms ease;
}
swp-period-selector button:hover {
color: var(--color-text);
}
swp-period-selector button.active {
background: var(--color-teal);
color: white;
}
swp-employee-filter select {
padding: 10px 32px 10px 12px;
font-size: 13px;
border: 1px solid var(--color-border);
border-radius: 6px;
background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
appearance: none;
cursor: pointer;
min-width: 180px;
}
/* ==========================================
STATS BAR
========================================== */
swp-stats-bar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 24px;
}
swp-stat-card {
background: var(--color-surface);
border-radius: 8px;
padding: 20px 24px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
swp-stat-value {
display: block;
font-size: 32px;
font-weight: 600;
color: var(--color-text);
font-family: var(--font-mono);
}
swp-stat-label {
display: block;
font-size: 12px;
color: var(--color-text-secondary);
margin-top: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
swp-stat-card.teal swp-stat-value { color: var(--color-teal); }
swp-stat-card.red swp-stat-value { color: var(--color-red); }
swp-stat-card.amber swp-stat-value { color: var(--color-amber); }
swp-stat-card.purple swp-stat-value { color: var(--color-purple); }
/* ==========================================
CHARTS GRID
========================================== */
swp-charts-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 24px;
margin-bottom: 24px;
}
swp-chart-card {
background: var(--color-surface);
border-radius: 8px;
padding: 20px 24px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
swp-chart-title {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--color-text);
margin-bottom: 16px;
}
swp-chart-container {
display: block;
height: 240px;
position: relative;
}
/* Bar chart (simple CSS implementation) */
swp-bar-chart {
display: flex;
align-items: flex-end;
justify-content: space-around;
height: 100%;
padding-bottom: 24px;
border-bottom: 1px solid var(--color-border);
}
swp-bar {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
flex: 1;
max-width: 60px;
}
swp-bar-fill {
width: 32px;
background: var(--color-teal);
border-radius: 4px 4px 0 0;
transition: height 300ms ease;
}
swp-bar-label {
font-size: 11px;
color: var(--color-text-secondary);
}
/* Pie chart (simple CSS implementation) */
swp-pie-chart {
display: flex;
align-items: center;
justify-content: center;
gap: 32px;
height: 100%;
}
swp-pie {
width: 160px;
height: 160px;
border-radius: 50%;
background: conic-gradient(
var(--color-red) 0deg 120deg,
var(--color-amber) 120deg 200deg,
var(--color-purple) 200deg 360deg
);
position: relative;
}
swp-pie::after {
content: '';
position: absolute;
inset: 40px;
background: var(--color-surface);
border-radius: 50%;
}
swp-pie-legend {
display: flex;
flex-direction: column;
gap: 12px;
}
swp-legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
}
swp-legend-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
swp-legend-dot.red { background: var(--color-red); }
swp-legend-dot.amber { background: var(--color-amber); }
swp-legend-dot.purple { background: var(--color-purple); }
swp-legend-value {
font-family: var(--font-mono);
font-weight: 500;
margin-left: auto;
}
/* ==========================================
REPORT TABLE
========================================== */
swp-report-table {
display: block;
background: var(--color-surface);
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
swp-table-header,
swp-table-row {
display: grid;
grid-template-columns: 200px repeat(7, 1fr);
align-items: center;
}
swp-table-header {
background: var(--color-background-alt);
border-bottom: 1px solid var(--color-border);
padding: 14px 20px;
}
swp-th {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-secondary);
user-select: none;
}
swp-th.sortable {
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
transition: color 150ms ease;
}
swp-th.sortable:hover {
color: var(--color-teal);
}
swp-th.sorted {
color: var(--color-teal);
}
.sort-icon {
font-size: 10px;
opacity: 0.4;
transition: opacity 150ms ease, transform 150ms ease;
}
swp-th.sorted .sort-icon {
opacity: 1;
}
swp-th.sorted.desc .sort-icon {
transform: rotate(180deg);
}
swp-th.right,
swp-td.right {
text-align: right;
justify-content: flex-end;
}
swp-table-body {
display: block;
}
swp-table-row {
padding: 14px 20px;
border-bottom: 1px solid var(--color-border);
transition: background 150ms ease;
}
swp-table-row:last-child {
border-bottom: none;
}
swp-table-row:hover {
background: var(--color-background-hover);
}
swp-td {
font-size: 13px;
color: var(--color-text);
}
swp-td.name {
font-weight: 500;
}
swp-td.number {
font-family: var(--font-mono);
font-size: 12px;
}
swp-td.red { color: var(--color-red); }
swp-td.amber { color: var(--color-amber); }
swp-td.purple { color: var(--color-purple); }
swp-badge {
display: inline-block;
padding: 2px 8px;
font-size: 11px;
font-weight: 500;
border-radius: 4px;
font-family: var(--font-mono);
}
swp-badge.low {
background: color-mix(in srgb, var(--color-green) 15%, white);
color: var(--color-green);
}
swp-badge.medium {
background: color-mix(in srgb, var(--color-amber) 15%, white);
color: var(--color-amber);
}
swp-badge.high {
background: color-mix(in srgb, var(--color-red) 15%, white);
color: var(--color-red);
}
/* ==========================================
FOOTER
========================================== */
swp-table-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
background: var(--color-background-alt);
border-top: 1px solid var(--color-border);
font-size: 13px;
color: var(--color-text-secondary);
}
</style>
</head>
<body>
<swp-page-container>
<!-- Header -->
<swp-page-header>
<swp-page-title>Rapport</swp-page-title>
<swp-report-filters>
<swp-period-selector>
<button>Uge</button>
<button class="active">Måned</button>
<button>Kvartal</button>
<button>År</button>
</swp-period-selector>
<swp-employee-filter>
<select>
<option>Alle medarbejdere</option>
<option>Anna Jensen</option>
<option>Martin Nielsen</option>
<option>Sofie Larsen</option>
<option>Peter Hansen</option>
</select>
</swp-employee-filter>
</swp-report-filters>
</swp-page-header>
<!-- Stats Bar -->
<swp-stats-bar>
<swp-stat-card class="teal">
<swp-stat-value>320 t</swp-stat-value>
<swp-stat-label>Planlagte timer</swp-stat-label>
</swp-stat-card>
<swp-stat-card class="red">
<swp-stat-value>24 t</swp-stat-value>
<swp-stat-label>Fravær total</swp-stat-label>
</swp-stat-card>
<swp-stat-card class="amber">
<swp-stat-value>8 t</swp-stat-value>
<swp-stat-label>Overarbejde</swp-stat-label>
</swp-stat-card>
<swp-stat-card>
<swp-stat-value>7.5%</swp-stat-value>
<swp-stat-label>Fraværsprocent</swp-stat-label>
</swp-stat-card>
</swp-stats-bar>
<!-- Charts -->
<swp-charts-grid>
<swp-chart-card>
<swp-chart-title>Timer pr. uge</swp-chart-title>
<swp-chart-container>
<swp-bar-chart>
<swp-bar>
<swp-bar-fill style="height: 65%"></swp-bar-fill>
<swp-bar-label>Uge 48</swp-bar-label>
</swp-bar>
<swp-bar>
<swp-bar-fill style="height: 80%"></swp-bar-fill>
<swp-bar-label>Uge 49</swp-bar-label>
</swp-bar>
<swp-bar>
<swp-bar-fill style="height: 75%"></swp-bar-fill>
<swp-bar-label>Uge 50</swp-bar-label>
</swp-bar>
<swp-bar>
<swp-bar-fill style="height: 90%"></swp-bar-fill>
<swp-bar-label>Uge 51</swp-bar-label>
</swp-bar>
<swp-bar>
<swp-bar-fill style="height: 45%"></swp-bar-fill>
<swp-bar-label>Uge 52</swp-bar-label>
</swp-bar>
</swp-bar-chart>
</swp-chart-container>
</swp-chart-card>
<swp-chart-card>
<swp-chart-title>Fraværsfordeling</swp-chart-title>
<swp-chart-container>
<swp-pie-chart>
<swp-pie></swp-pie>
<swp-pie-legend>
<swp-legend-item>
<swp-legend-dot class="red"></swp-legend-dot>
<span>Syg</span>
<swp-legend-value>12 t</swp-legend-value>
</swp-legend-item>
<swp-legend-item>
<swp-legend-dot class="amber"></swp-legend-dot>
<span>Ferie</span>
<swp-legend-value>8 t</swp-legend-value>
</swp-legend-item>
<swp-legend-item>
<swp-legend-dot class="purple"></swp-legend-dot>
<span>Fri</span>
<swp-legend-value>4 t</swp-legend-value>
</swp-legend-item>
</swp-pie-legend>
</swp-pie-chart>
</swp-chart-container>
</swp-chart-card>
</swp-charts-grid>
<!-- Table -->
<swp-report-table>
<swp-table-header>
<swp-th class="sortable sorted">Medarbejder <span class="sort-icon">▲</span></swp-th>
<swp-th class="sortable right">Planlagt <span class="sort-icon">▲</span></swp-th>
<swp-th class="sortable right">Fravær <span class="sort-icon">▲</span></swp-th>
<swp-th class="sortable right">Syg <span class="sort-icon">▲</span></swp-th>
<swp-th class="sortable right">Ferie <span class="sort-icon">▲</span></swp-th>
<swp-th class="sortable right">Fri <span class="sort-icon">▲</span></swp-th>
<swp-th class="sortable right">Overarbejde <span class="sort-icon">▲</span></swp-th>
<swp-th class="sortable right">Fraværs-% <span class="sort-icon">▲</span></swp-th>
</swp-table-header>
<swp-table-body>
<swp-table-row>
<swp-td class="name">Anna Jensen</swp-td>
<swp-td class="number right">80 t</swp-td>
<swp-td class="number right">4 t</swp-td>
<swp-td class="number right red">0 t</swp-td>
<swp-td class="number right amber">4 t</swp-td>
<swp-td class="number right purple">0 t</swp-td>
<swp-td class="number right">2 t</swp-td>
<swp-td class="right"><swp-badge class="low">5.0%</swp-badge></swp-td>
</swp-table-row>
<swp-table-row>
<swp-td class="name">Martin Nielsen</swp-td>
<swp-td class="number right">80 t</swp-td>
<swp-td class="number right">8 t</swp-td>
<swp-td class="number right red">8 t</swp-td>
<swp-td class="number right amber">0 t</swp-td>
<swp-td class="number right purple">0 t</swp-td>
<swp-td class="number right">0 t</swp-td>
<swp-td class="right"><swp-badge class="medium">10.0%</swp-badge></swp-td>
</swp-table-row>
<swp-table-row>
<swp-td class="name">Sofie Larsen</swp-td>
<swp-td class="number right">80 t</swp-td>
<swp-td class="number right">4 t</swp-td>
<swp-td class="number right red">0 t</swp-td>
<swp-td class="number right amber">0 t</swp-td>
<swp-td class="number right purple">4 t</swp-td>
<swp-td class="number right">4 t</swp-td>
<swp-td class="right"><swp-badge class="low">5.0%</swp-badge></swp-td>
</swp-table-row>
<swp-table-row>
<swp-td class="name">Peter Hansen</swp-td>
<swp-td class="number right">80 t</swp-td>
<swp-td class="number right">8 t</swp-td>
<swp-td class="number right red">4 t</swp-td>
<swp-td class="number right amber">4 t</swp-td>
<swp-td class="number right purple">0 t</swp-td>
<swp-td class="number right">2 t</swp-td>
<swp-td class="right"><swp-badge class="medium">10.0%</swp-badge></swp-td>
</swp-table-row>
</swp-table-body>
<swp-table-footer>
<span>Viser 4 medarbejdere</span>
<span>Total: 320 t planlagt, 24 t fravær, 8 t overarbejde</span>
</swp-table-footer>
</swp-report-table>
</swp-page-container>
<script>
// Period selector
document.querySelectorAll('swp-period-selector button').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('swp-period-selector button').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
});
});
// Sort columns
document.querySelectorAll('swp-th.sortable').forEach(th => {
th.addEventListener('click', () => {
const wasSorted = th.classList.contains('sorted');
const wasDesc = th.classList.contains('desc');
// Remove sorted state from all
document.querySelectorAll('swp-th.sortable').forEach(t => {
t.classList.remove('sorted', 'desc');
});
// Toggle this column
th.classList.add('sorted');
if (wasSorted && !wasDesc) {
th.classList.add('desc');
}
});
});
</script>
</body>
</html>