Room reservation form

Author: imperosol

core/static/bundled/alpine-index.js

@@ -1,7 +1,8 @@
+import { morph } from "@alpinejs/morph";
 import sort from "@alpinejs/sort";
 import Alpine from "alpinejs";
 
-Alpine.plugin(sort);
+Alpine.plugin([sort, morph]);
 window.Alpine = Alpine;
 
 window.addEventListener("DOMContentLoaded", () => {

core/static/bundled/htmx-index.js

@@ -1,4 +1,5 @@
 import htmx from "htmx.org";
+import "htmx-ext-alpine-morph";
 
 document.body.addEventListener("htmx:beforeRequest", (event) => {
   event.target.ariaBusy = true;

core/views/mixins.py

@@ -109,7 +109,7 @@ def some_view(request):
             return render(
                 request,
                 "app/template.jinja",
-                context={"fragment": fragment(request)
+                context={"fragment": fragment(request)}
             }
 
         # in urls.py

package-lock.json

@@ -40,6 +40,7 @@
     "vite-plugin-static-copy": "^3.0.2"
   },
   "dependencies": {
+    "@alpinejs/morph": "^3.14.9",
     "@alpinejs/sort": "^3.14.7",
     "@arendjr/text-clipper": "npm:@jsr/arendjr__text-clipper@^3.0.0",
     "@floating-ui/dom": "^1.6.13",
@@ -64,6 +65,7 @@
     "d3-force-3d": "^3.0.5",
     "easymde": "^2.19.0",
     "glob": "^11.0.0",
+    "htmx-ext-alpine-morph": "^2.0.1",
     "htmx.org": "^2.0.3",
     "jquery": "^3.7.1",
     "js-cookie": "^3.0.5",

package.json

@@ -2,7 +2,8 @@
 
 from club.widgets.ajax_select import AutoCompleteSelectClub
 from core.models import User
-from reservation.models import Room
+from core.views.forms import FutureDateTimeField, SelectDateTime
+from reservation.models import ReservationSlot, Room
 
 
 class RoomCreateForm(forms.ModelForm):
@@ -31,3 +32,22 @@ def __init__(self, *args, request_user: User, **kwargs):
             # (i.e. it's a club board member, but not a sith admin)
             # some fields aren't editable
             del self.fields["club"]
+
+
+class ReservationForm(forms.ModelForm):
+    required_css_class = "required"
+    error_css_class = "error"
+
+    class Meta:
+        model = ReservationSlot
+        fields = ["room", "start_at", "end_at", "comment"]
+        field_classes = {"start_at": FutureDateTimeField, "end_at": FutureDateTimeField}
+        widgets = {"start_at": SelectDateTime(), "end_at": SelectDateTime()}
+
+    def __init__(self, *args, author: User, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.author = author
+
+    def save(self, commit: bool = True):  # noqa FBT001
+        self.instance.author = self.author
+        return super().save(commit)

reservation/forms.py

@@ -1,6 +1,7 @@
 import { inheritHtmlElement, registerComponent } from "#core:utils/web-components";
 import {
   Calendar,
+  type DateSelectArg,
   type EventDropArg,
   type EventSourceFuncArg,
 } from "@fullcalendar/core";
@@ -18,6 +19,7 @@ import {
 import { paginated } from "#core:utils/api";
 import interactionPlugin from "@fullcalendar/interaction";
 import resourceTimelinePlugin from "@fullcalendar/resource-timeline";
+import type { SlotSelectedEventArg } from "#reservation:reservation/types";
 
 @registerComponent("room-scheduler")
 export class RoomScheduler extends inheritHtmlElement("div") {
@@ -26,6 +28,7 @@ export class RoomScheduler extends inheritHtmlElement("div") {
   private locale = "en";
   private canEditSlot = false;
   private canBookSlot = false;
+  private canDeleteSlot = false;
 
   attributeChangedCallback(name: string, _oldValue?: string, newValue?: string) {
     if (name === "locale") {
@@ -37,6 +40,9 @@ export class RoomScheduler extends inheritHtmlElement("div") {
     if (name === "can_create_slot") {
       this.canBookSlot = newValue.toLowerCase() === "true";
     }
+    if (name === "can_delete_slot") {
+      this.canDeleteSlot = newValue.toLowerCase() === "true";
+    }
   }
 
   /**
@@ -84,6 +90,18 @@ export class RoomScheduler extends inheritHtmlElement("div") {
     }
   }
 
+  selectFreeSlot(infos: DateSelectArg) {
+    document.dispatchEvent(
+      new CustomEvent<SlotSelectedEventArg>("timeSlotSelected", {
+        detail: {
+          ressource: Number.parseInt(infos.resource.id),
+          start: infos.startStr,
+          end: infos.endStr,
+        },
+      }),
+    );
+  }
+
   connectedCallback() {
     super.connectedCallback();
     this.scheduler = new Calendar(this.node, {
@@ -109,6 +127,7 @@ export class RoomScheduler extends inheritHtmlElement("div") {
       resourceAreaWidth: "20%",
       resources: this.fetchResources,
       events: this.fetchEvents,
+      select: this.selectFreeSlot,
       selectOverlap: false,
       selectable: this.canBookSlot,
       selectConstraint: { start: new Date() },

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

@@ -0,0 +1,23 @@
+import type { SlotSelectedEventArg } from "#reservation:reservation/types";
+
+document.addEventListener("alpine:init", () => {
+  Alpine.data("slotReservation", () => ({
+    start: null as string,
+    end: null as string,
+    room: null as number,
+    showForm: false,
+
+    init() {
+      document.addEventListener(
+        "timeSlotSelected",
+        (event: CustomEvent<SlotSelectedEventArg>) => {
+          this.start = event.detail.start.split("+")[0];
+          this.end = event.detail.end.split("+")[0];
+          this.room = event.detail.ressource;
+          this.showForm = true;
+          this.$nextTick(() => this.$el.scrollIntoView({ behavior: "smooth" })).then();
+        },
+      );
+    },
+  }));
+});

reservation/static/bundled/reservation/slot-reservation-index.ts

@@ -0,0 +1,5 @@
+export interface SlotSelectedEventArg {
+  start: string;
+  end: string;
+  ressource: number;
+}

reservation/static/bundled/reservation/types.d.ts

@@ -0,0 +1,39 @@
+#slot-reservation {
+  margin-top: 3em;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  h3 {
+    display: block;
+    margin: auto;
+    text-align: left;
+  }
+
+  .alert, .error {
+    display: block;
+    margin: 1em auto auto;
+    max-width: 400px;
+    word-wrap: break-word;
+    text-wrap: wrap;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: .5em;
+    justify-content: center;
+
+    .buttons-row {
+      input[type="submit"], button {
+        margin: 0;
+      }
+    }
+    textarea {
+      max-width: unset;
+      width: 100%;
+      margin-top: unset;
+    }
+  }
+}