User timetable save

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

@@ -1,4 +1,6 @@
 import html2canvas from "html2canvas";
+import { AlertMessage } from "#core:utils/alert-message";
+import { timetableSaveTimetable } from "#openapi";
 
 // see https://regex101.com/r/QHSaPM/3
 const TIMETABLE_ROW_RE: RegExp =
@@ -83,10 +85,10 @@ document.addEventListener("alpine:init", () => {
     courses: [] as TimetableSlot[],
     startSlot: 0,
     endSlot: 0,
-    table: {
+    table: { height: 0, width: 0 },
-      height: 0,
+    edtPublic: false,
-      width: 0,
+    saving: false,
-    },
+    timetableSavedMessage: new AlertMessage(),
 
     colors: {} as Record<string, string>,
     colorPalette: [
@@ -181,5 +183,36 @@ document.addEventListener("alpine:init", () => {
       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/templates/timetable/generator.jinja

@@ -92,12 +92,39 @@
         </div>
       </div>
     </div>
-    <button
+    <template x-if="table.height > 0 && table.width > 0">
-      class="margin-bottom btn btn-blue"
+      <section>
-      @click="savePng"
+        {% if user.has_perm("timetable.add_self_timetable") %}
-      x-show="table.height > 0 && table.width > 0"
+          <div id="timetable-save" class="margin-bottom">
-    >
+            <h3>{% trans %}Save on your profile{% endtrans %}</h3>
-      {% trans %}Save to PNG{% endtrans %}
+            <form>
+              <fieldset>
+                <input type="checkbox" class="switch" id="edt-public-switch-id" x-model="edtPublic">
+                <label for="edt-public-switch-id">{% trans %}Make this timetable public{% endtrans %}</label>
+                <span class="helptext">
+                  {% trans trimmed url=url("core:user_prefs", user_id=user.id) %}
+                    You can change this at any time in <a href="{{ url }}">your preferences</a>
+                  {% endtrans %}
+                </span>
+              </fieldset>
+              <button class="btn btn-blue" :disabled="saving" @click.prevent="saveSith">
+                {% trans %}Save timetable{% endtrans %}
               </button>
+              <p
+                class="alert"
+                :class="timetableSavedMessage.success ? 'alert-green' : 'alert-red'"
+                x-show="timetableSavedMessage.open"
+                x-transition.duration.500ms
+                x-text="timetableSavedMessage.content"
+              ></p>
+            </form>
+          </div>
+        {% endif %}
+        <h3 class="margin-bottom">{% trans %}Export{% endtrans %}</h3>
+        <button class="margin-bottom btn btn-blue" @click="savePng">
+          {% trans %}Export to PNG{% endtrans %}
+        </button>
+      </section>
+    </template>
   </div>
 {% endblock content %}