Room reservations planning

reservation/static/bundled/reservation/components/room-scheduler-index.ts

@@ -0,0 +1,120 @@
+import { inheritHtmlElement, registerComponent } from "#core:utils/web-components";
+import {
+  Calendar,
+  type EventDropArg,
+  type EventSourceFuncArg,
+} from "@fullcalendar/core";
+import enLocale from "@fullcalendar/core/locales/en-gb";
+import frLocale from "@fullcalendar/core/locales/fr";
+
+import {
+  type ReservationslotFetchSlotsData,
+  type SlotSchema,
+  reservableroomFetchRooms,
+  reservationslotFetchSlots,
+  reservationslotUpdateSlot,
+} from "#openapi";
+
+import { paginated } from "#core:utils/api";
+import interactionPlugin from "@fullcalendar/interaction";
+import resourceTimelinePlugin from "@fullcalendar/resource-timeline";
+
+@registerComponent("room-scheduler")
+export class RoomScheduler extends inheritHtmlElement("div") {
+  static observedAttributes = ["locale", "can_edit_slot", "can_create_slot"];
+  private scheduler: Calendar;
+  private locale = "en";
+  private canEditSlot = false;
+  private canBookSlot = false;
+
+  attributeChangedCallback(name: string, _oldValue?: string, newValue?: string) {
+    if (name === "locale") {
+      this.locale = newValue;
+    }
+    if (name === "can_edit_slot") {
+      this.canEditSlot = newValue.toLowerCase() === "true";
+    }
+    if (name === "can_create_slot") {
+      this.canBookSlot = newValue.toLowerCase() === "true";
+    }
+  }
+
+  /**
+   * Fetch the events displayed in the timeline.
+   * cf https://fullcalendar.io/docs/events-function
+   */
+  async fetchEvents(fetchInfo: EventSourceFuncArg) {
+    const res: SlotSchema[] = await paginated(reservationslotFetchSlots, {
+      query: { after: fetchInfo.startStr, before: fetchInfo.endStr },
+    } as ReservationslotFetchSlotsData);
+    return res.map((i) =>
+      Object.assign(i, {
+        title: `${i.author.first_name} ${i.author.last_name}`,
+        resourceId: i.room,
+        editable: new Date(i.start) > new Date(),
+      }),
+    );
+  }
+
+  /**
+   * Fetch the resources which events are associated with.
+   * cf https://fullcalendar.io/docs/resources-function
+   */
+  async fetchResources() {
+    const res = await reservableroomFetchRooms();
+    return res.data.map((i) => Object.assign(i, { title: i.name, group: i.location }));
+  }
+
+  /**
+   * Send a request to the API to change
+   * the start and the duration of a reservation slot
+   */
+  async changeReservation(args: EventDropArg) {
+    const duration = new Date(args.event.end.getTime() - args.event.start.getTime());
+    const response = await reservationslotUpdateSlot({
+      // biome-ignore lint/style/useNamingConvention: api is snake_case
+      path: { slot_id: Number.parseInt(args.event.id) },
+      query: {
+        start: args.event.startStr,
+        duration: `PT${duration.getUTCHours()}H${duration.getUTCMinutes()}M${duration.getUTCSeconds()}S`,
+      },
+    });
+    if (response.response.ok) {
+      this.scheduler.refetchEvents();
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.scheduler = new Calendar(this.node, {
+      schedulerLicenseKey: "GPL-My-Project-Is-Open-Source",
+      initialView: "resourceTimelineDay",
+      headerToolbar: {
+        left: "prev,next today",
+        center: "title",
+        right: "resourceTimelineDay,resourceTimelineWeek",
+      },
+      plugins: [resourceTimelinePlugin, interactionPlugin],
+      locales: [frLocale, enLocale],
+      height: "auto",
+      locale: this.locale,
+      resourceGroupField: "group",
+      resourceAreaHeaderContent: gettext("Rooms"),
+      editable: this.canEditSlot,
+      snapDuration: "00:15",
+      eventConstraint: { start: new Date() }, // forbid edition of past events
+      eventOverlap: false,
+      eventResourceEditable: false,
+      refetchResourcesOnNavigate: true,
+      resourceAreaWidth: "20%",
+      resources: this.fetchResources,
+      events: this.fetchEvents,
+      selectOverlap: false,
+      selectable: this.canBookSlot,
+      selectConstraint: { start: new Date() },
+      nowIndicator: true,
+      eventDrop: this.changeReservation,
+    });
+    this.scheduler.render();
+  }
+}

reservation/templates/reservation/schedule.jinja

@@ -0,0 +1,21 @@
+{% extends "core/base.jinja" %}
+
+{% block additional_js %}
+  <script type="module" src="{{ static("bundled/reservation/components/room-scheduler-index.ts") }}"></script>
+  <script type="module" src="{{ static("bundled/reservation/slot-reservation-index.ts") }}"></script>
+{% endblock %}
+
+{% block additional_css %}
+  <link rel="stylesheet" href="{{ static('core/components/calendar.scss') }}">
+  <link rel="stylesheet" href="{{ static('reservation/reservation.scss') }}">
+{% endblock %}
+
+
+{% block content %}
+  <h2 class="margin-bottom">{% trans %}Room reservation{% endtrans %}</h2>
+  <room-scheduler
+    locale="{{ LANGUAGE_CODE }}"
+    can_edit_slot="{{ user.has_perm("reservation.change_reservationslot") }}"
+    can_create_slot="{{ user.has_perm("reservation.add_reservationslot") }}"
+  ></room-scheduler>
+{% endblock %}

reservation/urls.py

@@ -1,12 +1,14 @@
 from django.urls import path
 
 from reservation.views import (
+    ReservationScheduleView,
     RoomCreateView,
     RoomDeleteView,
     RoomUpdateView,
 )
 
 urlpatterns = [
+    path("", ReservationScheduleView.as_view(), name="main"),
     path("room/create/", RoomCreateView.as_view(), name="room_create"),
     path("room/<int:room_id>/edit", RoomUpdateView.as_view(), name="room_edit"),
     path("room/<int:room_id>/delete", RoomDeleteView.as_view(), name="room_delete"),

reservation/views.py

@@ -8,10 +8,13 @@ from django.views.generic import CreateView, DeleteView, TemplateView, UpdateVie
 
 from club.models import Club
 from core.auth.mixins import CanEditMixin
-from core.views import UseFragmentsMixin
-from core.views.mixins import FragmentMixin
-from reservation.forms import ReservationForm, RoomCreateForm, RoomUpdateForm
-from reservation.models import ReservationSlot, Room
+from reservation.forms import RoomCreateForm, RoomUpdateForm
+from reservation.models import Room
+
+
+class ReservationScheduleView(PermissionRequiredMixin, TemplateView):
+    template_name = "reservation/schedule.jinja"
+    permission_required = "reservation.view_room"
 
 
 class RoomCreateView(SuccessMessageMixin, PermissionRequiredMixin, CreateView):