Adds work week configuration feature

Implements configurable work week presets, allowing users to customize the days displayed in the calendar.

This includes:
- Defining work week settings (work days, day names, total days).
- Providing predefined work week presets (standard, compressed, weekend, full week).
- Adding UI elements to switch between presets.
- Updating grid and header rendering logic to reflect the selected work week.
- Emitting events when the work week changes, triggering necessary UI updates and data re-renders.

This provides a more flexible and personalized calendar experience.
This commit is contained in:
Janus Knudsen 2025-08-18 22:27:17 +02:00
parent 26f0cb8aaa
commit d017d48bd6
11 changed files with 283 additions and 34 deletions

View file

@ -33,6 +33,9 @@ export class ViewManager {
// Setup view button handlers
this.setupViewButtonHandlers();
// Setup workweek preset button handlers
this.setupWorkweekButtonHandlers();
}
private setupViewButtonHandlers(): void {
@ -48,8 +51,22 @@ export class ViewManager {
});
}
private setupWorkweekButtonHandlers(): void {
const workweekButtons = document.querySelectorAll('swp-preset-button[data-workweek]');
workweekButtons.forEach(button => {
button.addEventListener('click', (event) => {
event.preventDefault();
const workweekId = button.getAttribute('data-workweek');
if (workweekId) {
this.changeWorkweek(workweekId);
}
});
});
}
private initializeView(): void {
this.updateViewButtons();
this.updateWorkweekButtons();
this.eventBus.emit(EventTypes.VIEW_RENDERED, {
view: this.currentView
@ -72,6 +89,18 @@ export class ViewManager {
});
}
private changeWorkweek(workweekId: string): void {
console.log(`ViewManager: Changing workweek to ${workweekId}`);
// Update the calendar config
calendarConfig.setWorkWeek(workweekId);
// Update button states
this.updateWorkweekButtons();
// Trigger a calendar refresh to apply the new workweek
this.eventBus.emit(EventTypes.REFRESH_REQUESTED);
}
private updateViewButtons(): void {
const viewButtons = document.querySelectorAll('swp-view-button[data-view]');
@ -85,6 +114,20 @@ export class ViewManager {
});
}
private updateWorkweekButtons(): void {
const currentWorkweek = calendarConfig.getCurrentWorkWeek();
const workweekButtons = document.querySelectorAll('swp-preset-button[data-workweek]');
workweekButtons.forEach(button => {
const buttonWorkweek = button.getAttribute('data-workweek');
if (buttonWorkweek === currentWorkweek) {
button.setAttribute('data-active', 'true');
} else {
button.removeAttribute('data-active');
}
});
}
private refreshCurrentView(): void {
this.eventBus.emit(EventTypes.VIEW_RENDERED, {
view: this.currentView