diff --git a/counter/static/webpack/graph-index.ts b/counter/static/webpack/graph-index.ts index c68969ec..54a7b1f9 100644 --- a/counter/static/webpack/graph-index.ts +++ b/counter/static/webpack/graph-index.ts @@ -12,6 +12,7 @@ interface ActivityChartConfig { canvas: HTMLCanvasElement; startDate: Date; counterId: number; + locale: string; } interface OpeningTime { @@ -23,11 +24,9 @@ interface EventInput { start: Date; end: Date; backgroundColor: string; + title?: string; } -// TODO: Semaines passées -// TODO: Manage locales - exportToHtml("loadChart", loadChart); async function loadChart(options: ActivityChartConfig) { @@ -44,25 +43,44 @@ async function loadChart(options: ActivityChartConfig) { const calendar = new Calendar(options.canvas, { plugins: [timeGridPlugin], initialView: "timeGridWeek", - locale: "fr", + locale: options.locale, slotLabelFormat: { hour: "2-digit", minute: "2-digit", hour12: false }, dayHeaderFormat: { weekday: "long" }, firstDay: 1, views: { timeGrid: { allDaySlot: false } }, scrollTime: "09:00:00", - headerToolbar: { left: "", center: "", right: "" }, + headerToolbar: { left: "prev today", center: "title", right: "" }, events: events, nowIndicator: true, height: 600, }); calendar.render(); + + calendar.on("datesSet", async (info) => { + if (options.startDate <= info.start) { + return; + } + const newPerms = await paginated(permanencyFetchPermanancies, { + query: { + counter: [options.counterId], + // biome-ignore lint/style/useNamingConvention: backend API uses snake_case + end_after: info.startStr, + // biome-ignore lint/style/useNamingConvention: backend API uses snake_case + start_before: info.endStr, + }, + } as PermanencyFetchPermananciesData); + options.startDate = info.start; + calendar.addEventSource(getEvents(newPerms, false)); + permanancies.push(...newPerms); + calendar.render(); + }); } function roundToQuarter(date: Date, ceil: boolean) { const result = date; const minutes = date.getMinutes(); // removes minutes exceeding the lower quarter and adds 15 minutes if rounded to ceiling - result.setMinutes(minutes + +ceil * 15 - (minutes % 15), 0, 0); + result.setMinutes(minutes - (minutes % 15) + +ceil * 15, 0, 0); return result; } @@ -99,12 +117,15 @@ function getOpeningTimes(rawPermanancies: PermanencySchema[]) { return openingTimes; } -function getEvents(permanancies: PermanencySchema[]) { +function getEvents(permanancies: PermanencySchema[], currentWeek = true): EventInput[] { const openingTimes = getOpeningTimes(permanancies); const events: EventInput[] = []; for (const openingTime of openingTimes) { - const lastMonday = getLastMonday(); - const shift = openingTime.end < lastMonday; + let shift = false; + if (currentWeek) { + const lastMonday = getLastMonday(); + shift = openingTime.end < lastMonday; + } // if permanancies took place last week (=before monday), // -> display them in lightblue as part of the current week events.push({ @@ -117,8 +138,7 @@ function getEvents(permanancies: PermanencySchema[]) { } // Function to get last Monday at 00:00 -function getLastMonday(): Date { - const now = new Date(); +function getLastMonday(now = new Date()): Date { const dayOfWeek = now.getDay(); const lastMonday = new Date(now); lastMonday.setDate(now.getDate() - ((dayOfWeek + 6) % 7)); // Adjust for Monday as day 1 diff --git a/counter/templates/counter/activity.jinja b/counter/templates/counter/activity.jinja index 8df16b12..2732110e 100644 --- a/counter/templates/counter/activity.jinja +++ b/counter/templates/counter/activity.jinja @@ -26,8 +26,8 @@ {% trans %}There is currently no barman connected.{% endtrans %} {% endif %} -