Implemented locales + previous weeks in time graph

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) {
+    let shift = false;
+    if (currentWeek) {
       const lastMonday = getLastMonday();
-    const shift = openingTime.end < lastMonday;
+      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

counter/templates/counter/activity.jinja

@@ -26,8 +26,8 @@
         {% trans %}There is currently no barman connected.{% endtrans %}
       {% endif %}
     </ul>
-    <h4>{% trans %}Last Week Activity {% endtrans %}</h4>
-    <div id="activityGraph" width="400" height="200"></div>
+    <h4>{% trans %}Last weeks opening times{% endtrans %}</h4>
+    <div id="activityGraph"></div>
     <br/>
     <br/>
   {% endif %}
@@ -51,8 +51,10 @@
     window.addEventListener("DOMContentLoaded", () => {
       loadChart({
         canvas: document.getElementById("activityGraph"),
+        // sets the start day to 7 days ago
         startDate: new Date(new Date().setDate(new Date().getDate() - 7)),
         counterId: {{ counter.id }},
+        locale: {{ get_current_language()|tojson }}
       });
     });
   </script>

locale/fr/LC_MESSAGES/django.po

@@ -6076,3 +6076,7 @@ msgstr "Vous ne pouvez plus écrire de commentaires, la date est passée."
 #, python-format
 msgid "Maximum characters: %(max_length)s"
 msgstr "Nombre de caractères max: %(max_length)s"
+
+#: counter/activity.jinja
+msgid "Last weeks opening times"
+msgstr "Heures d'ouverture des dernières semaines"

sith/settings.py

@@ -165,6 +165,7 @@ TEMPLATES = [
                 "ProductType": "counter.models.ProductType",
                 "timezone": "django.utils.timezone",
                 "get_sith": "com.views.sith",
+                "get_current_language": "django.views.i18n.get_language",
             },
             "bytecode_cache": {
                 "name": "default",