split timetable parsing and display

timetable/static/bundled/timetable/timetable-index.ts

@@ -78,7 +78,10 @@ function parseSlots(s: string): TimetableSlot[] {
 }
 
 document.addEventListener("alpine:init", () => {
-  Alpine.data("timetableGenerator", () => ({
+  /**
+   * Alpine data that can parse a timetable, save it and export it to png.
+   */
+  Alpine.data("timetableGenerator", (userId: number) => ({
     content: DEFAULT_TIMETABLE,
     error: null as { incorrectRow?: string } | null,
     courses: [] as TimetableSlot[],
@@ -111,6 +114,8 @@ document.addEventListener("alpine:init", () => {
     async saveSith() {
       this.saving = true;
       const res = await timetableSaveTimetable({
+        // biome-ignore lint/style/useNamingConvention: api is snake case
+        path: { user_id: userId },
         body: {
           // biome-ignore lint/style/useNamingConvention: api is snake case
           is_viewable: this.edtPublic,
@@ -151,13 +156,10 @@ document.addEventListener("alpine:init", () => {
    */
   Alpine.data("timetableDisplay", (slots: TimetableSlot[]) => ({
     displayedWeekdays: [] as WeekDay[],
-    courses: [] as TimetableSlot[],
     startSlot: 0,
     endSlot: 0,
     table: { height: 0, width: 0 },
-    edtPublic: false,
-    saving: false,
-    timetableSavedMessage: new AlertMessage(),
+    slots: slots,
 
     colors: {} as Record<string, string>,
     colorPalette: [
@@ -174,19 +176,14 @@ document.addEventListener("alpine:init", () => {
       "#1b5e20",
     ],
 
-    generate() {
-      try {
-        this.courses = parseSlots(this.content);
-        this.error = null;
-      } catch (err) {
-        type ParseRowError = { cause: { row: string } };
-        this.error = { incorrectRow: (err as ParseRowError)?.cause?.row };
-        return;
-      }
+    init() {
+      this.$watch("slots", () => this.display());
+    },
 
+    display() {
       // color each UE
       let colorIndex = 0;
-      for (const slot of this.courses) {
+      for (const slot of this.slots) {
         if (!this.colors[slot.ueCode]) {
           this.colors[slot.ueCode] =
             this.colorPalette[colorIndex % this.colorPalette.length];
@@ -195,13 +192,13 @@ document.addEventListener("alpine:init", () => {
       }
 
       this.displayedWeekdays = WEEKDAYS.filter((day) =>
-        this.courses.some((slot: TimetableSlot) => slot.weekday === day),
+        this.slots.some((slot: TimetableSlot) => slot.weekday === day),
       );
-      this.startSlot = this.courses.reduce(
+      this.startSlot = this.slots.reduce(
         (acc: number, curr: TimetableSlot) => Math.min(acc, curr.startSlot),
         25 * 4,
       );
-      this.endSlot = this.courses.reduce(
+      this.endSlot = this.slots.reduce(
         (acc: number, curr: TimetableSlot) => Math.max(acc, curr.endSlot),
         1,
       );
@@ -222,15 +219,19 @@ document.addEventListener("alpine:init", () => {
       };
     },
 
-    getHours(): [string, object][] {
+    /**
+     * Return the hours that should be displayed on this timetable,
+     * with their `top` placing
+     */
+    getHours(): [string, { top: `${number}px` }][] {
       let hour: number = Number.parseInt(
-        this.courses
+        this.slots
           .map((c: TimetableSlot) => c.startHour)
           .reduce((res: string, hour: string) => (hour < res ? hour : res), "24:00")
           .split(":")[0],
         10,
       );
-      const res: [string, object][] = [];
+      const res: [string, { top: `${number}px` }][] = [];
       for (let i = 0; i <= this.endSlot - this.startSlot; i += 60 / MINUTES_PER_SLOT) {
         res.push([`${hour}:00`, { top: `${i * SLOT_HEIGHT}px` }]);
         hour += 1;
@@ -241,47 +242,5 @@ document.addEventListener("alpine:init", () => {
     getWidth() {
       return this.displayedWeekdays.length * SLOT_WIDTH + 20;
     },
-
-    async savePng() {
-      const elem = document.getElementById("timetable");
-      const img = (await html2canvas(elem as HTMLElement)).toDataURL();
-      const downloadLink = document.createElement("a");
-      downloadLink.href = img;
-      downloadLink.download = "edt.png";
-      document.body.appendChild(downloadLink);
-      downloadLink.click();
-      downloadLink.remove();
-    },
-
-    async saveSith() {
-      this.saving = true;
-      const res = await timetableSaveTimetable({
-        body: {
-          // biome-ignore lint/style/useNamingConvention: api is snake case
-          is_viewable: this.edtPublic,
-          slots: this.courses.map((c) =>
-            Object.assign({}, c, {
-              // biome-ignore lint/style/useNamingConvention: api is snake case
-              start_at: c.startSlot,
-              // biome-ignore lint/style/useNamingConvention: api is snake case
-              end_at: c.endSlot,
-              weekday: WEEKDAYS.indexOf(c.weekday) + 1,
-            }),
-          ),
-        },
-      });
-      if (res.response?.ok) {
-        this.timetableSavedMessage.display(
-          gettext("This timetable has been saved in your profile"),
-          { success: true },
-        );
-      } else {
-        this.timetableSavedMessage.display(
-          interpolate(gettext("Error %d: timetable save failed"), res.response?.status),
-          { success: false },
-        );
-      }
-      this.saving = false;
-    },
   }));
 });

timetable/static/timetable/css/generator.scss

@@ -1,6 +1,6 @@
 @import "core/static/core/colors";
 
-#timetable {
+.timetable {
   --hour-side-width: 60px;
 
   display: block;

timetable/templates/timetable/generator.jinja

@@ -1,11 +1,13 @@
-{% extends 'core/base.jinja' %}
+{% extends "core/base.jinja" %}
+
+{% from "timetable/macros.jinja" import display_timetable %}
 
 {%- block additional_css -%}
   <link rel="stylesheet" href="{{ static('timetable/css/generator.scss') }}">
 {%- endblock -%}
 
 {%- block additional_js -%}
-  <script type="module" src="{{ static('bundled/timetable/generator-index.ts') }}"></script>
+  <script type="module" src="{{ static('bundled/timetable/timetable-index.ts') }}"></script>
 {%- endblock -%}
 
 {% block title %}
@@ -32,7 +34,7 @@
 {% endblock %}
 
 {% block content %}
-  <div x-data="timetableGenerator">
+  <div x-data="timetableGenerator({{ user.id }})">
     <form @submit.prevent="generate()">
       <h1>{% trans %}Timetable generator{% endtrans %}</h1>
       <template x-if="error !== null" x-cloak>
@@ -60,39 +62,8 @@
       </div>
       <input type="submit" class="btn btn-blue" value="{% trans %}Generate{% endtrans %}">
     </form>
-    <div
-      id="timetable"
-      x-show="table.height > 0 && table.width > 0"
-      :style="{width: `${table.width+80}px`, height: `${table.height+40}px`}"
-    >
-      <div class="header">
-        <template x-for="weekday in displayedWeekdays">
-          <span x-text="weekday"></span>
-        </template>
-      </div>
-      <div class="content">
-        <div class="hours" :height="(endSlot - endSlot%4) - (startSlot - startSlot%4)">
-          <template x-for="[hour, style] in getHours()">
-            <div class="hour" :style="style">
-              <div x-text="hour"></div>
-              <div class="hour-bar" :style="{width: `${getWidth()}px`}"></div>
-            </div>
-          </template>
-        </div>
-        <div class="courses">
-          <template x-for="course in courses">
-            <div class="slot" :style="getStyle(course)">
-              <span class="course-type" x-text="course.courseType"></span>
-              <span x-text="course.ueCode"></span>
-              <span x-text="`${course.startHour} - ${course.endHour}`"></span>
-              <span x-text="(course.weekGroup ? `\nGroupe ${course.weekGroup}` : '')"></span>
-              <span x-text="course.room"></span>
-            </div>
-          </template>
-        </div>
-      </div>
-    </div>
-    <template x-if="table.height > 0 && table.width > 0">
+    {{ display_timetable("courses") }}
+    <template x-if="courses.length > 0">
       <section>
         {% if user.has_perm("timetable.add_self_timetable") %}
           <div id="timetable-save" class="margin-bottom">

timetable/templates/timetable/macros.jinja

@@ -0,0 +1,46 @@
+{# HTML+AlpineJS to display a timetable
+
+Args:
+    ues: either a JS variable name or an array of object
+         satisfying the TimetableSlot interface
+    reactive: if True and `ues` is a variable used in an Alpine context,
+         then this timetable will react to modifications and
+         change its own display
+#}
+{% macro display_timetable(ues) %}
+  <div
+    x-data="timetableDisplay({{ ues }})"
+    x-model="{{ ues }}"
+    x-modelable="slots"
+    class="timetable"
+    x-show="slots.length > 0"
+    :style="{width: `${table.width+80}px`, height: `${table.height+40}px`}"
+  >
+    <div class="header">
+      <template x-for="weekday in displayedWeekdays">
+        <span x-text="weekday"></span>
+      </template>
+    </div>
+    <div class="content">
+      <div class="hours" :height="(endSlot - endSlot%4) - (startSlot - startSlot%4)">
+        <template x-for="[hour, style] in getHours()">
+          <div class="hour" :style="style">
+            <div x-text="hour"></div>
+            <div class="hour-bar" :style="{width: `${getWidth()}px`}"></div>
+          </div>
+        </template>
+      </div>
+      <div class="courses">
+        <template x-for="course in slots">
+          <div class="slot" :style="getStyle(course)">
+            <span class="course-type" x-text="course.courseType"></span>
+            <span x-text="course.ueCode"></span>
+            <span x-text="`${course.startHour} - ${course.endHour}`"></span>
+            <span x-text="(course.weekGroup ? `\nGroupe ${course.weekGroup}` : '')"></span>
+            <span x-text="course.room"></span>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+{% endmacro %}