Some ignored filles was missing
This commit is contained in:
Janus C. H. Knudsen
parent
7db22245e2
commit
fd5ab6bc0d
268 changed files with 31970 additions and 4 deletions
289
wwwroot/js/renderers/GridRenderer.js
Normal file
289
wwwroot/js/renderers/GridRenderer.js
Normal file
|
|
@ -0,0 +1,289 @@
|
|||
import { TimeFormatter } from '../utils/TimeFormatter';
|
||||
/**
|
||||
* GridRenderer - Centralized DOM rendering for calendar grid structure
|
||||
*
|
||||
* ARCHITECTURE OVERVIEW:
|
||||
* =====================
|
||||
* GridRenderer is responsible for creating and managing the complete DOM structure
|
||||
* of the calendar grid. It follows the Strategy Pattern by delegating specific
|
||||
* rendering tasks to specialized renderers (DateHeaderRenderer, ColumnRenderer).
|
||||
*
|
||||
* RESPONSIBILITY HIERARCHY:
|
||||
* ========================
|
||||
* GridRenderer (this file)
|
||||
* ├─ Creates overall grid skeleton
|
||||
* ├─ Manages time axis (hour markers)
|
||||
* └─ Delegates to specialized renderers:
|
||||
* ├─ DateHeaderRenderer → Renders date headers
|
||||
* └─ ColumnRenderer → Renders day columns
|
||||
*
|
||||
* DOM STRUCTURE CREATED:
|
||||
* =====================
|
||||
* <swp-calendar-container>
|
||||
* <swp-header-spacer /> ← GridRenderer
|
||||
* <swp-time-axis> ← GridRenderer
|
||||
* <swp-hour-marker>00:00</...> ← GridRenderer (iterates hours)
|
||||
* </swp-time-axis>
|
||||
* <swp-grid-container> ← GridRenderer
|
||||
* <swp-calendar-header> ← GridRenderer creates container
|
||||
* <swp-day-header /> ← DateHeaderRenderer (iterates dates)
|
||||
* </swp-calendar-header>
|
||||
* <swp-scrollable-content> ← GridRenderer
|
||||
* <swp-time-grid> ← GridRenderer
|
||||
* <swp-grid-lines /> ← GridRenderer
|
||||
* <swp-day-columns> ← GridRenderer creates container
|
||||
* <swp-day-column /> ← ColumnRenderer (iterates dates)
|
||||
* </swp-day-columns>
|
||||
* </swp-time-grid>
|
||||
* </swp-scrollable-content>
|
||||
* </swp-grid-container>
|
||||
* </swp-calendar-container>
|
||||
*
|
||||
* RENDERING FLOW:
|
||||
* ==============
|
||||
* 1. renderGrid() - Entry point called by GridManager
|
||||
* ├─ First render: createCompleteGridStructure()
|
||||
* └─ Updates: updateGridContent()
|
||||
*
|
||||
* 2. createCompleteGridStructure()
|
||||
* ├─ Creates header spacer
|
||||
* ├─ Creates time axis (calls createOptimizedTimeAxis)
|
||||
* └─ Creates grid container (calls createOptimizedGridContainer)
|
||||
*
|
||||
* 3. createOptimizedGridContainer()
|
||||
* ├─ Creates calendar header container
|
||||
* ├─ Creates scrollable content structure
|
||||
* └─ Creates column container (calls renderColumnContainer)
|
||||
*
|
||||
* 4. renderColumnContainer()
|
||||
* └─ Delegates to ColumnRenderer.render()
|
||||
* └─ ColumnRenderer iterates dates and creates columns
|
||||
*
|
||||
* OPTIMIZATION STRATEGY:
|
||||
* =====================
|
||||
* - Caches DOM references (cachedGridContainer, cachedTimeAxis)
|
||||
* - Uses DocumentFragment for batch DOM insertions
|
||||
* - Only updates changed content on re-renders
|
||||
* - Delegates specialized tasks to strategy renderers
|
||||
*
|
||||
* USAGE EXAMPLE:
|
||||
* =============
|
||||
* const gridRenderer = new GridRenderer(columnRenderer, dateService, config);
|
||||
* gridRenderer.renderGrid(containerElement, new Date(), 'week');
|
||||
*/
|
||||
export class GridRenderer {
|
||||
constructor(columnRenderer, dateService, config, workHoursManager) {
|
||||
this.cachedGridContainer = null;
|
||||
this.cachedTimeAxis = null;
|
||||
this.dateService = dateService;
|
||||
this.columnRenderer = columnRenderer;
|
||||
this.config = config;
|
||||
this.workHoursManager = workHoursManager;
|
||||
}
|
||||
/**
|
||||
* Main entry point for rendering the complete calendar grid
|
||||
*
|
||||
* This method decides between full render (first time) or optimized update.
|
||||
* It caches the grid reference for performance.
|
||||
*
|
||||
* @param grid - Container element where grid will be rendered
|
||||
* @param currentDate - Base date for the current view (e.g., any date in the week)
|
||||
* @param view - Calendar view type (day/week/month)
|
||||
* @param dates - Array of dates to render as columns
|
||||
* @param events - All events for the period
|
||||
*/
|
||||
renderGrid(grid, currentDate, view = 'week', dates = [], events = []) {
|
||||
if (!grid || !currentDate) {
|
||||
return;
|
||||
}
|
||||
// Cache grid reference for performance
|
||||
this.cachedGridContainer = grid;
|
||||
// Only clear and rebuild if grid is empty (first render)
|
||||
if (grid.children.length === 0) {
|
||||
this.createCompleteGridStructure(grid, currentDate, view, dates, events);
|
||||
}
|
||||
else {
|
||||
// Optimized update - only refresh dynamic content
|
||||
this.updateGridContent(grid, currentDate, view, dates, events);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Creates the complete grid structure from scratch
|
||||
*
|
||||
* Uses DocumentFragment for optimal performance by minimizing reflows.
|
||||
* Creates all child elements in memory first, then appends everything at once.
|
||||
*
|
||||
* Structure created:
|
||||
* 1. Header spacer (placeholder for alignment)
|
||||
* 2. Time axis (hour markers 00:00-23:00)
|
||||
* 3. Grid container (header + scrollable content)
|
||||
*
|
||||
* @param grid - Parent container
|
||||
* @param currentDate - Current view date
|
||||
* @param view - View type
|
||||
* @param dates - Array of dates to render
|
||||
*/
|
||||
createCompleteGridStructure(grid, currentDate, view, dates, events) {
|
||||
// Create all elements in memory first for better performance
|
||||
const fragment = document.createDocumentFragment();
|
||||
// Create header spacer
|
||||
const headerSpacer = document.createElement('swp-header-spacer');
|
||||
fragment.appendChild(headerSpacer);
|
||||
// Create time axis with caching
|
||||
const timeAxis = this.createOptimizedTimeAxis();
|
||||
this.cachedTimeAxis = timeAxis;
|
||||
fragment.appendChild(timeAxis);
|
||||
// Create grid container with caching
|
||||
const gridContainer = this.createOptimizedGridContainer(currentDate, view, dates, events);
|
||||
this.cachedGridContainer = gridContainer;
|
||||
fragment.appendChild(gridContainer);
|
||||
// Append all at once to minimize reflows
|
||||
grid.appendChild(fragment);
|
||||
}
|
||||
/**
|
||||
* Creates the time axis with hour markers
|
||||
*
|
||||
* Iterates from dayStartHour to dayEndHour (configured in GridSettings).
|
||||
* Each marker shows the hour in the configured time format.
|
||||
*
|
||||
* @returns Time axis element with all hour markers
|
||||
*/
|
||||
createOptimizedTimeAxis() {
|
||||
const timeAxis = document.createElement('swp-time-axis');
|
||||
const timeAxisContent = document.createElement('swp-time-axis-content');
|
||||
const gridSettings = this.config.gridSettings;
|
||||
const startHour = gridSettings.dayStartHour;
|
||||
const endHour = gridSettings.dayEndHour;
|
||||
const fragment = document.createDocumentFragment();
|
||||
for (let hour = startHour; hour < endHour; hour++) {
|
||||
const marker = document.createElement('swp-hour-marker');
|
||||
const date = new Date(2024, 0, 1, hour, 0);
|
||||
marker.textContent = TimeFormatter.formatTime(date);
|
||||
fragment.appendChild(marker);
|
||||
}
|
||||
timeAxisContent.appendChild(fragment);
|
||||
timeAxisContent.style.top = '-1px';
|
||||
timeAxis.appendChild(timeAxisContent);
|
||||
return timeAxis;
|
||||
}
|
||||
/**
|
||||
* Creates the main grid container with header and columns
|
||||
*
|
||||
* This is the scrollable area containing:
|
||||
* - Calendar header (dates/resources) - created here, populated by DateHeaderRenderer
|
||||
* - Time grid (grid lines + day columns) - structure created here
|
||||
* - Column container - created here, populated by ColumnRenderer
|
||||
*
|
||||
* @param currentDate - Current view date
|
||||
* @param view - View type
|
||||
* @param dates - Array of dates to render
|
||||
* @returns Complete grid container element
|
||||
*/
|
||||
createOptimizedGridContainer(dates, events) {
|
||||
const gridContainer = document.createElement('swp-grid-container');
|
||||
// Create calendar header as first child - always exists now!
|
||||
const calendarHeader = document.createElement('swp-calendar-header');
|
||||
gridContainer.appendChild(calendarHeader);
|
||||
// Create scrollable content structure
|
||||
const scrollableContent = document.createElement('swp-scrollable-content');
|
||||
const timeGrid = document.createElement('swp-time-grid');
|
||||
// Add grid lines
|
||||
const gridLines = document.createElement('swp-grid-lines');
|
||||
timeGrid.appendChild(gridLines);
|
||||
// Create column container
|
||||
const columnContainer = document.createElement('swp-day-columns');
|
||||
this.renderColumnContainer(columnContainer, dates, events);
|
||||
timeGrid.appendChild(columnContainer);
|
||||
scrollableContent.appendChild(timeGrid);
|
||||
gridContainer.appendChild(scrollableContent);
|
||||
return gridContainer;
|
||||
}
|
||||
/**
|
||||
* Renders columns by iterating through dates
|
||||
*
|
||||
* GridRenderer creates column structure with work hours styling.
|
||||
* Event rendering is handled by EventRenderingService listening to GRID_RENDERED.
|
||||
*
|
||||
* @param columnContainer - Empty container to populate
|
||||
* @param dates - Array of dates to render
|
||||
* @param events - All events for the period (passed through, not used here)
|
||||
*/
|
||||
renderColumnContainer(columnContainer, dates, events) {
|
||||
// Iterate through dates and render each column structure
|
||||
dates.forEach(date => {
|
||||
// Create column with data-date attribute
|
||||
const column = document.createElement('swp-day-column');
|
||||
column.dataset.date = this.dateService.formatISODate(date);
|
||||
// Apply work hours styling
|
||||
this.applyWorkHoursStyling(column, date);
|
||||
// Add events layer (events will be rendered by EventRenderingService)
|
||||
const eventsLayer = document.createElement('swp-events-layer');
|
||||
column.appendChild(eventsLayer);
|
||||
columnContainer.appendChild(column);
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Apply work hours styling to a column
|
||||
*/
|
||||
applyWorkHoursStyling(column, date) {
|
||||
const workHours = this.workHoursManager.getWorkHoursForDate(date);
|
||||
if (workHours === 'off') {
|
||||
column.setAttribute('data-day-off', 'true');
|
||||
}
|
||||
else {
|
||||
column.removeAttribute('data-day-off');
|
||||
// Calculate non-work hours overlay positions
|
||||
const nonWorkStyle = this.workHoursManager.calculateNonWorkHoursStyle(workHours);
|
||||
if (nonWorkStyle) {
|
||||
column.style.setProperty('--before-work-height', `${nonWorkStyle.beforeWorkHeight}px`);
|
||||
column.style.setProperty('--after-work-top', `${nonWorkStyle.afterWorkTop}px`);
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Optimized update of grid content without full rebuild
|
||||
*
|
||||
* Only updates the column container content, leaving the structure intact.
|
||||
* This is much faster than recreating the entire grid.
|
||||
*
|
||||
* @param grid - Existing grid element
|
||||
* @param currentDate - New view date
|
||||
* @param view - View type
|
||||
* @param dates - Array of dates to render
|
||||
* @param events - All events for the period
|
||||
*/
|
||||
updateGridContent(grid, currentDate, view, dates, events) {
|
||||
// Update column container if needed
|
||||
const columnContainer = grid.querySelector('swp-day-columns');
|
||||
if (columnContainer) {
|
||||
columnContainer.innerHTML = '';
|
||||
this.renderColumnContainer(columnContainer, dates, events);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Creates a new grid for slide animations during navigation
|
||||
*
|
||||
* Used by NavigationManager for smooth week-to-week transitions.
|
||||
* Creates a complete grid positioned absolutely for animation.
|
||||
*
|
||||
* Note: Positioning is handled by Animation API, not here.
|
||||
*
|
||||
* @param parentContainer - Container for the new grid
|
||||
* @param weekStart - Start date of the new week
|
||||
* @returns New grid element ready for animation
|
||||
*/
|
||||
createNavigationGrid(parentContainer, weekStart) {
|
||||
// Use SAME method as initial load - respects workweek settings
|
||||
const newGrid = this.createOptimizedGridContainer(weekStart, 'week');
|
||||
// Position new grid for animation - NO transform here, let Animation API handle it
|
||||
newGrid.style.position = 'absolute';
|
||||
newGrid.style.top = '0';
|
||||
newGrid.style.left = '0';
|
||||
newGrid.style.width = '100%';
|
||||
newGrid.style.height = '100%';
|
||||
// Add to parent container
|
||||
parentContainer.appendChild(newGrid);
|
||||
return newGrid;
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=GridRenderer.js.map
|
||||
Loading…
Add table
Add a link
Reference in a new issue