diff --git a/PlanTempus.Application/wwwroot/css/employees.css b/PlanTempus.Application/wwwroot/css/employees.css index f62013d..7394d82 100644 --- a/PlanTempus.Application/wwwroot/css/employees.css +++ b/PlanTempus.Application/wwwroot/css/employees.css @@ -887,6 +887,17 @@ swp-schedule-scroll { max-width: var(--page-max-width); margin: 0 auto; overflow-x: auto; + -webkit-overflow-scrolling: touch; + cursor: grab; +} + +swp-schedule-scroll.dragging { + cursor: grabbing; + user-select: none; +} + +swp-schedule-scroll.dragging * { + pointer-events: none; } /* Når drawer er åben: page-container styles (padding animeres via JS) */ diff --git a/PlanTempus.Application/wwwroot/ts/modules/employees.ts b/PlanTempus.Application/wwwroot/ts/modules/employees.ts index 6e09d35..d130680 100644 --- a/PlanTempus.Application/wwwroot/ts/modules/employees.ts +++ b/PlanTempus.Application/wwwroot/ts/modules/employees.ts @@ -426,6 +426,9 @@ class ScheduleController { this.editBtn = document.getElementById('scheduleEditBtn'); this.scheduleTable = document.getElementById('scheduleTable'); + // Drag scroll works for all schedule scroll containers (Vagtplan + Arbejdstid) + this.setupDragScroll(); + if (!this.scheduleTable) return; this.setupEditModeToggle(); @@ -436,6 +439,48 @@ class ScheduleController { this.setupDrawerSave(); } + /** + * Setup drag-to-scroll on schedule scroll containers + */ + private setupDragScroll(): void { + const scrollContainers = document.querySelectorAll('swp-schedule-scroll'); + + scrollContainers.forEach(container => { + const el = container as HTMLElement; + let isDown = false; + let startX = 0; + let scrollLeft = 0; + + const onMouseDown = (e: MouseEvent) => { + // Don't drag if clicking on interactive elements + if ((e.target as HTMLElement).closest('swp-btn, input, select')) return; + + isDown = true; + el.classList.add('dragging'); + startX = e.clientX; + scrollLeft = el.scrollLeft; + }; + + const onMouseUp = () => { + isDown = false; + el.classList.remove('dragging'); + }; + + const onMouseMove = (e: MouseEvent) => { + if (!isDown) return; + e.preventDefault(); + const x = e.clientX; + const walk = (startX - x) * 1.5; + el.scrollLeft = scrollLeft + walk; + }; + + el.addEventListener('mousedown', onMouseDown); + el.addEventListener('mouseup', onMouseUp); + el.addEventListener('mouseleave', onMouseUp); + el.addEventListener('mousemove', onMouseMove); + }); + } + /** * Setup edit mode toggle button */