mirror of
https://github.com/ae-utbm/sith.git
synced 2025-07-11 04:19:25 +00:00
Room reservations planning
This commit is contained in:
@ -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();
|
||||
}
|
||||
}
|
21
reservation/templates/reservation/schedule.jinja
Normal file
21
reservation/templates/reservation/schedule.jinja
Normal file
@ -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 %}
|
@ -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"),
|
||||
|
@ -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):
|
||||
|
Reference in New Issue
Block a user