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
This commit is contained in:
Janus C. H. Knudsen
parent
83723c170f
commit
2fcdbf3bc3
3 changed files with 701 additions and 16 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue