75 lines
3.1 KiB
JavaScript
75 lines
3.1 KiB
JavaScript
|
import { CoreEvents } from '../constants/CoreEvents';
|
||
|
|
/**
|
||
|
|
* WeekInfoRenderer - Handles DOM rendering for week info display
|
||
|
|
* Updates swp-week-number and swp-date-range elements
|
||
|
|
*
|
||
|
|
* Renamed from NavigationRenderer to better reflect its actual responsibility
|
||
|
|
*/
|
||
|
|
export class WeekInfoRenderer {
|
||
|
|
constructor(eventBus, eventRenderer, dateService) {
|
||
|
|
this.eventBus = eventBus;
|
||
|
|
this.dateService = dateService;
|
||
|
|
this.setupEventListeners();
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Setup event listeners for DOM updates
|
||
|
|
*/
|
||
|
|
setupEventListeners() {
|
||
|
|
this.eventBus.on(CoreEvents.NAVIGATION_COMPLETED, (event) => {
|
||
|
|
const customEvent = event;
|
||
|
|
const { newDate } = customEvent.detail;
|
||
|
|
// Calculate week number and date range from the new date
|
||
|
|
const weekNumber = this.dateService.getWeekNumber(newDate);
|
||
|
|
const weekEnd = this.dateService.addDays(newDate, 6);
|
||
|
|
const dateRange = this.dateService.formatDateRange(newDate, weekEnd);
|
||
|
|
this.updateWeekInfoInDOM(weekNumber, dateRange);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
updateWeekInfoInDOM(weekNumber, dateRange) {
|
||
|
|
const weekNumberElement = document.querySelector('swp-week-number');
|
||
|
|
const dateRangeElement = document.querySelector('swp-date-range');
|
||
|
|
if (weekNumberElement) {
|
||
|
|
weekNumberElement.textContent = `Week ${weekNumber}`;
|
||
|
|
}
|
||
|
|
if (dateRangeElement) {
|
||
|
|
dateRangeElement.textContent = dateRange;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Apply filter state to pre-rendered grids
|
||
|
|
*/
|
||
|
|
applyFilterToPreRenderedGrids(filterState) {
|
||
|
|
// Find all grid containers (including pre-rendered ones)
|
||
|
|
const allGridContainers = document.querySelectorAll('swp-grid-container');
|
||
|
|
allGridContainers.forEach(container => {
|
||
|
|
const eventsLayers = container.querySelectorAll('swp-events-layer');
|
||
|
|
eventsLayers.forEach(layer => {
|
||
|
|
if (filterState.active) {
|
||
|
|
// Apply filter active state
|
||
|
|
layer.setAttribute('data-filter-active', 'true');
|
||
|
|
// Mark matching events in this layer
|
||
|
|
const events = layer.querySelectorAll('swp-event');
|
||
|
|
events.forEach(event => {
|
||
|
|
const eventId = event.getAttribute('data-event-id');
|
||
|
|
if (eventId && filterState.matchingIds.includes(eventId)) {
|
||
|
|
event.setAttribute('data-matches', 'true');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
event.removeAttribute('data-matches');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// Remove filter state
|
||
|
|
layer.removeAttribute('data-filter-active');
|
||
|
|
// Remove all match attributes
|
||
|
|
const events = layer.querySelectorAll('swp-event');
|
||
|
|
events.forEach(event => {
|
||
|
|
event.removeAttribute('data-matches');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//# sourceMappingURL=WeekInfoRenderer.js.map
|