From 2fcdbf3bc3d80a589845a51049fad626d2292811 Mon Sep 17 00:00:00 2001
From: "Janus C. H. Knudsen"
Date: Thu, 25 Dec 2025 19:15:08 +0100
Subject: [PATCH] Adds closed day functionality to work schedule
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
---
package-lock.json | 6 +-
wwwroot/poc-arbejdstidsplan.html | 96 ++++-
wwwroot/poc-rapport.html | 615 +++++++++++++++++++++++++++++++
3 files changed, 701 insertions(+), 16 deletions(-)
create mode 100644 wwwroot/poc-rapport.html
diff --git a/package-lock.json b/package-lock.json
index 7e1d524..9950408 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1175,9 +1175,9 @@
]
},
"node_modules/@sevenweirdpeople/swp-charting": {
- "version": "0.1.1",
- "resolved": "https://registry.npmjs.org/@sevenweirdpeople/swp-charting/-/swp-charting-0.1.1.tgz",
- "integrity": "sha512-3kH7bHL8YzXC86g7N2qZfvFlNsl7SU5p8tZWSbdtNQmSCGax9MA3HV0U+M1WcYOTnfoFPg1KJbSGpiuupAw73A==",
+ "version": "0.1.2",
+ "resolved": "https://registry.npmjs.org/@sevenweirdpeople/swp-charting/-/swp-charting-0.1.2.tgz",
+ "integrity": "sha512-zvPLPWKxUg04yju3AtqoB0/Mom62NEyHhs0djhbd+IEKPpKG3VB1zDhY+t3kadoCMpleJbYvFnyAnLH8qHP5RQ==",
"license": "MIT"
},
"node_modules/@types/chai": {
diff --git a/wwwroot/poc-arbejdstidsplan.html b/wwwroot/poc-arbejdstidsplan.html
index b2fc5b5..cd2f12c 100644
--- a/wwwroot/poc-arbejdstidsplan.html
+++ b/wwwroot/poc-arbejdstidsplan.html
@@ -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 @@
-
09:00 - 17:00
09:00 - 13:00
- —
+ —
—
09:00 - 17:00
10:00 - 14:00
@@ -856,7 +893,7 @@
10:00 - 18:00
10:00 - 18:00
- Ferie
+ Ferie
Ferie
Ferie
—
@@ -869,7 +906,7 @@
09:00 - 17:00
09:00 - 17:00
- —
+ —
—
09:00 - 17:00
09:00 - 14:00
@@ -882,7 +919,7 @@
12:00 - 20:00
—
- —
+ —
—
12:00 - 20:00
10:00 - 18:00
@@ -895,7 +932,7 @@
Syg
09:00 - 15:00
- —
+ —
—
09:00 - 15:00
—
@@ -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);
+ });
+ });
diff --git a/wwwroot/poc-rapport.html b/wwwroot/poc-rapport.html
new file mode 100644
index 0000000..80094f0
--- /dev/null
+++ b/wwwroot/poc-rapport.html
@@ -0,0 +1,615 @@
+
+
+