Major refactorering to get a hold on all these events
This commit is contained in:
Janus Knudsen
parent
2a766cf685
commit
59b3c64c55
18 changed files with 1901 additions and 357 deletions
|
|
@ -2,15 +2,49 @@
|
|||
|
||||
import { eventBus } from './EventBus';
|
||||
import { EventTypes } from '../constants/EventTypes';
|
||||
import { CalendarConfig as ICalendarConfig, ViewType, CalendarType } from '../types/CalendarTypes';
|
||||
import { CalendarConfig as ICalendarConfig, ViewPeriod, CalendarMode, DateViewType, CalendarType } from '../types/CalendarTypes';
|
||||
|
||||
/**
|
||||
* View-specific settings interface
|
||||
* Layout and timing settings for the calendar grid
|
||||
*/
|
||||
interface ViewSettings {
|
||||
columns: number;
|
||||
showAllDay: boolean;
|
||||
interface GridSettings {
|
||||
// Time boundaries
|
||||
dayStartHour: number;
|
||||
dayEndHour: number;
|
||||
workStartHour: number;
|
||||
workEndHour: number;
|
||||
|
||||
// Layout settings
|
||||
hourHeight: number;
|
||||
snapInterval: number;
|
||||
fitToWidth: boolean;
|
||||
scrollToHour: number | null;
|
||||
|
||||
// Display options
|
||||
showCurrentTime: boolean;
|
||||
showWorkHours: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* View settings for date-based calendar mode
|
||||
*/
|
||||
interface DateViewSettings {
|
||||
period: ViewPeriod; // day/week/month
|
||||
weekDays: number; // Number of days to show in week view
|
||||
firstDayOfWeek: number; // 0=Sunday, 1=Monday
|
||||
showAllDay: boolean; // Show all-day event row
|
||||
}
|
||||
|
||||
/**
|
||||
* View settings for resource-based calendar mode
|
||||
*/
|
||||
interface ResourceViewSettings {
|
||||
maxResources: number; // Maximum resources to display
|
||||
showAvatars: boolean; // Display user avatars
|
||||
avatarSize: number; // Avatar size in pixels
|
||||
resourceNameFormat: 'full' | 'short'; // How to display names
|
||||
showResourceDetails: boolean; // Show additional resource info
|
||||
showAllDay: boolean; // Show all-day event row
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -18,29 +52,14 @@ interface ViewSettings {
|
|||
*/
|
||||
export class CalendarConfig {
|
||||
private config: ICalendarConfig;
|
||||
private calendarType: CalendarType = 'date';
|
||||
private calendarMode: CalendarMode = 'date';
|
||||
private selectedDate: Date | null = null;
|
||||
private gridSettings: GridSettings;
|
||||
private dateViewSettings: DateViewSettings;
|
||||
private resourceViewSettings: ResourceViewSettings;
|
||||
|
||||
constructor() {
|
||||
this.config = {
|
||||
// View settings
|
||||
view: 'week', // 'day' | 'week' | 'month'
|
||||
weekDays: 7, // 4-7 days for week view
|
||||
firstDayOfWeek: 1, // 0 = Sunday, 1 = Monday
|
||||
|
||||
// Time settings
|
||||
dayStartHour: 0, // Calendar starts at midnight (default)
|
||||
dayEndHour: 24, // Calendar ends at midnight (default)
|
||||
workStartHour: 8, // Work hours start
|
||||
workEndHour: 17, // Work hours end
|
||||
snapInterval: 15, // Minutes: 5, 10, 15, 30, 60
|
||||
|
||||
// Display settings
|
||||
hourHeight: 60, // Pixels per hour
|
||||
showCurrentTime: true,
|
||||
showWorkHours: true,
|
||||
fitToWidth: false, // Fit columns to calendar width (no horizontal scroll)
|
||||
|
||||
// Scrollbar styling
|
||||
scrollbarWidth: 16, // Width of scrollbar in pixels
|
||||
scrollbarColor: '#666', // Scrollbar thumb color
|
||||
|
|
@ -68,8 +87,40 @@ export class CalendarConfig {
|
|||
maxEventDuration: 480 // 8 hours
|
||||
};
|
||||
|
||||
// Grid display settings
|
||||
this.gridSettings = {
|
||||
hourHeight: 60,
|
||||
dayStartHour: 0,
|
||||
dayEndHour: 24,
|
||||
workStartHour: 8,
|
||||
workEndHour: 17,
|
||||
snapInterval: 15,
|
||||
showCurrentTime: true,
|
||||
showWorkHours: true,
|
||||
fitToWidth: false,
|
||||
scrollToHour: 8
|
||||
};
|
||||
|
||||
// Date view settings
|
||||
this.dateViewSettings = {
|
||||
period: 'week',
|
||||
weekDays: 7,
|
||||
firstDayOfWeek: 1,
|
||||
showAllDay: true
|
||||
};
|
||||
|
||||
// Resource view settings
|
||||
this.resourceViewSettings = {
|
||||
maxResources: 10,
|
||||
showAvatars: true,
|
||||
avatarSize: 32,
|
||||
resourceNameFormat: 'full',
|
||||
showResourceDetails: true,
|
||||
showAllDay: true
|
||||
};
|
||||
|
||||
// Set computed values
|
||||
this.config.minEventDuration = this.config.snapInterval;
|
||||
this.config.minEventDuration = this.gridSettings.snapInterval;
|
||||
|
||||
// Load calendar type from URL parameter
|
||||
this.loadCalendarType();
|
||||
|
|
@ -86,13 +137,13 @@ export class CalendarConfig {
|
|||
const typeParam = urlParams.get('type');
|
||||
const dateParam = urlParams.get('date');
|
||||
|
||||
// Set calendar type
|
||||
// Set calendar mode
|
||||
if (typeParam === 'resource' || typeParam === 'date') {
|
||||
this.calendarType = typeParam;
|
||||
console.log(`CalendarConfig: Calendar type set to '${this.calendarType}' from URL parameter`);
|
||||
this.calendarMode = typeParam;
|
||||
console.log(`CalendarConfig: Calendar mode set to '${this.calendarMode}' from URL parameter`);
|
||||
} else {
|
||||
this.calendarType = 'date'; // Default
|
||||
console.log(`CalendarConfig: Calendar type defaulted to '${this.calendarType}'`);
|
||||
this.calendarMode = 'date'; // Default
|
||||
console.log(`CalendarConfig: Calendar mode defaulted to '${this.calendarMode}'`);
|
||||
}
|
||||
|
||||
// Set selected date
|
||||
|
|
@ -121,13 +172,19 @@ export class CalendarConfig {
|
|||
// Read data attributes
|
||||
const attrs = calendar.dataset;
|
||||
|
||||
if (attrs.view) this.config.view = attrs.view as ViewType;
|
||||
if (attrs.weekDays) this.config.weekDays = parseInt(attrs.weekDays);
|
||||
if (attrs.snapInterval) this.config.snapInterval = parseInt(attrs.snapInterval);
|
||||
if (attrs.dayStartHour) this.config.dayStartHour = parseInt(attrs.dayStartHour);
|
||||
if (attrs.dayEndHour) this.config.dayEndHour = parseInt(attrs.dayEndHour);
|
||||
if (attrs.hourHeight) this.config.hourHeight = parseInt(attrs.hourHeight);
|
||||
if (attrs.fitToWidth !== undefined) this.config.fitToWidth = attrs.fitToWidth === 'true';
|
||||
// Update date view settings
|
||||
if (attrs.view) this.dateViewSettings.period = attrs.view as ViewPeriod;
|
||||
if (attrs.weekDays) this.dateViewSettings.weekDays = parseInt(attrs.weekDays);
|
||||
|
||||
// Update grid settings
|
||||
if (attrs.snapInterval) this.gridSettings.snapInterval = parseInt(attrs.snapInterval);
|
||||
if (attrs.dayStartHour) this.gridSettings.dayStartHour = parseInt(attrs.dayStartHour);
|
||||
if (attrs.dayEndHour) this.gridSettings.dayEndHour = parseInt(attrs.dayEndHour);
|
||||
if (attrs.hourHeight) this.gridSettings.hourHeight = parseInt(attrs.hourHeight);
|
||||
if (attrs.fitToWidth !== undefined) this.gridSettings.fitToWidth = attrs.fitToWidth === 'true';
|
||||
|
||||
// Update computed values
|
||||
this.config.minEventDuration = this.gridSettings.snapInterval;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -144,10 +201,7 @@ export class CalendarConfig {
|
|||
const oldValue = this.config[key];
|
||||
this.config[key] = value;
|
||||
|
||||
// Update computed values
|
||||
if (key === 'snapInterval') {
|
||||
this.config.minEventDuration = value as number;
|
||||
}
|
||||
// Update computed values handled in specific update methods
|
||||
|
||||
// Emit config update event
|
||||
eventBus.emit(EventTypes.CONFIG_UPDATE, {
|
||||
|
|
@ -178,11 +232,11 @@ export class CalendarConfig {
|
|||
*/
|
||||
|
||||
get minuteHeight(): number {
|
||||
return this.config.hourHeight / 60;
|
||||
return this.gridSettings.hourHeight / 60;
|
||||
}
|
||||
|
||||
get totalHours(): number {
|
||||
return this.config.dayEndHour - this.config.dayStartHour;
|
||||
return this.gridSettings.dayEndHour - this.gridSettings.dayStartHour;
|
||||
}
|
||||
|
||||
get totalMinutes(): number {
|
||||
|
|
@ -190,7 +244,7 @@ export class CalendarConfig {
|
|||
}
|
||||
|
||||
get slotsPerHour(): number {
|
||||
return 60 / this.config.snapInterval;
|
||||
return 60 / this.gridSettings.snapInterval;
|
||||
}
|
||||
|
||||
get totalSlots(): number {
|
||||
|
|
@ -198,7 +252,7 @@ export class CalendarConfig {
|
|||
}
|
||||
|
||||
get slotHeight(): number {
|
||||
return this.config.hourHeight / this.slotsPerHour;
|
||||
return this.gridSettings.hourHeight / this.slotsPerHour;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -209,48 +263,144 @@ export class CalendarConfig {
|
|||
}
|
||||
|
||||
/**
|
||||
* Get view-specific settings
|
||||
* Get grid display settings
|
||||
*/
|
||||
getViewSettings(view: ViewType = this.config.view): ViewSettings {
|
||||
const settings: Record<ViewType, ViewSettings> = {
|
||||
day: {
|
||||
columns: 1,
|
||||
showAllDay: true,
|
||||
scrollToHour: 8
|
||||
},
|
||||
week: {
|
||||
columns: this.config.weekDays,
|
||||
showAllDay: true,
|
||||
scrollToHour: 8
|
||||
},
|
||||
month: {
|
||||
columns: 7,
|
||||
showAllDay: false,
|
||||
scrollToHour: null
|
||||
}
|
||||
};
|
||||
|
||||
return settings[view] || settings.week;
|
||||
getGridSettings(): GridSettings {
|
||||
return { ...this.gridSettings };
|
||||
}
|
||||
|
||||
/**
|
||||
* Get calendar type
|
||||
* Update grid display settings
|
||||
*/
|
||||
getCalendarType(): CalendarType {
|
||||
return this.calendarType;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set calendar type
|
||||
*/
|
||||
setCalendarType(type: CalendarType): void {
|
||||
const oldType = this.calendarType;
|
||||
this.calendarType = type;
|
||||
updateGridSettings(updates: Partial<GridSettings>): void {
|
||||
this.gridSettings = { ...this.gridSettings, ...updates };
|
||||
|
||||
// Emit calendar type change event
|
||||
// Update computed values
|
||||
if (updates.snapInterval) {
|
||||
this.config.minEventDuration = updates.snapInterval;
|
||||
}
|
||||
|
||||
// Emit grid settings update event
|
||||
eventBus.emit(EventTypes.CONFIG_UPDATE, {
|
||||
key: 'gridSettings',
|
||||
value: this.gridSettings,
|
||||
oldValue: this.gridSettings
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get date view settings
|
||||
*/
|
||||
getDateViewSettings(): DateViewSettings {
|
||||
return { ...this.dateViewSettings };
|
||||
}
|
||||
|
||||
/**
|
||||
* Legacy method - for backwards compatibility
|
||||
*/
|
||||
getDateHeaderSettings(): DateViewSettings {
|
||||
return this.getDateViewSettings();
|
||||
}
|
||||
|
||||
/**
|
||||
* Update date view settings
|
||||
*/
|
||||
updateDateViewSettings(updates: Partial<DateViewSettings>): void {
|
||||
this.dateViewSettings = { ...this.dateViewSettings, ...updates };
|
||||
|
||||
// Emit date view settings update event
|
||||
eventBus.emit(EventTypes.CONFIG_UPDATE, {
|
||||
key: 'dateViewSettings',
|
||||
value: this.dateViewSettings,
|
||||
oldValue: this.dateViewSettings
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Legacy method - for backwards compatibility
|
||||
*/
|
||||
updateDateHeaderSettings(updates: Partial<DateViewSettings>): void {
|
||||
this.updateDateViewSettings(updates);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get resource view settings
|
||||
*/
|
||||
getResourceViewSettings(): ResourceViewSettings {
|
||||
return { ...this.resourceViewSettings };
|
||||
}
|
||||
|
||||
/**
|
||||
* Legacy method - for backwards compatibility
|
||||
*/
|
||||
getResourceHeaderSettings(): ResourceViewSettings {
|
||||
return this.getResourceViewSettings();
|
||||
}
|
||||
|
||||
/**
|
||||
* Update resource view settings
|
||||
*/
|
||||
updateResourceViewSettings(updates: Partial<ResourceViewSettings>): void {
|
||||
this.resourceViewSettings = { ...this.resourceViewSettings, ...updates };
|
||||
|
||||
// Emit resource view settings update event
|
||||
eventBus.emit(EventTypes.CONFIG_UPDATE, {
|
||||
key: 'resourceViewSettings',
|
||||
value: this.resourceViewSettings,
|
||||
oldValue: this.resourceViewSettings
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Legacy method - for backwards compatibility
|
||||
*/
|
||||
updateResourceHeaderSettings(updates: Partial<ResourceViewSettings>): void {
|
||||
this.updateResourceViewSettings(updates);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if current mode is resource-based
|
||||
*/
|
||||
isResourceMode(): boolean {
|
||||
return this.calendarMode === 'resource';
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if current mode is date-based
|
||||
*/
|
||||
isDateMode(): boolean {
|
||||
return this.calendarMode === 'date';
|
||||
}
|
||||
|
||||
/**
|
||||
* Legacy methods - for backwards compatibility
|
||||
*/
|
||||
isResourceView(): boolean {
|
||||
return this.isResourceMode();
|
||||
}
|
||||
|
||||
isDateView(): boolean {
|
||||
return this.isDateMode();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get calendar mode
|
||||
*/
|
||||
getCalendarMode(): CalendarMode {
|
||||
return this.calendarMode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set calendar mode
|
||||
*/
|
||||
setCalendarMode(mode: CalendarMode): void {
|
||||
const oldMode = this.calendarMode;
|
||||
this.calendarMode = mode;
|
||||
|
||||
// Emit calendar mode change event
|
||||
eventBus.emit(EventTypes.CALENDAR_TYPE_CHANGED, {
|
||||
oldType,
|
||||
newType: type
|
||||
oldType: oldMode,
|
||||
newType: mode
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue