Improved user experience in defining slots in the calendar management

CHANGELOG.md

@@ -1,5 +1,6 @@
 # Changelog Fab Manager
 
+- Improved user experience in defining slots in the calendar management
 - Improved notification email to the member when a rolling subscription is taken
 - Handle Ctrl^C in upgrade scripts
 - Updated moment-timezone

app/assets/javascripts/controllers/admin/calendar.js.erb

@@ -275,46 +275,56 @@ Application.Controllers.controller('AdminCalendarController', ['$scope', '$state
     var calendarSelectCb = function (start, end, jsEvent, view) {
       start = moment.tz(start.toISOString(), Fablab.timezone);
       end = moment.tz(end.toISOString(), Fablab.timezone);
-      // first we check that the selected slot is an N-hours multiple (ie. not decimal)
-      if (Number.isInteger(parseInt((end.valueOf() - start.valueOf()) / (SLOT_MULTIPLE * 1000), 10) / SLOT_MULTIPLE)) {
-        const today = new Date();
-        if (parseInt((start.valueOf() - today) / (60 * 1000), 10) >= 0) {
-        // then we open a modal window to let the admin specify the slot type
-          const modalInstance = $uibModal.open({
-            templateUrl: '<%= asset_path "admin/calendar/eventModal.html" %>',
-            controller: 'CreateEventModalController',
-            resolve: {
-              start () { return start; },
-              end () { return end; },
-              machinesPromise: ['Machine', function (Machine) { return Machine.query().$promise; }],
-              trainingsPromise: ['Training', function (Training) { return Training.query().$promise; }],
-              spacesPromise: ['Space', function (Space) { return Space.query().$promise; }]
-            } });
-          // when the modal is closed, we send the slot to the server for saving
-          modalInstance.result.then(
-            function (availability) {
-              uiCalendarConfig.calendars.calendar.fullCalendar(
-                'renderEvent',
-                {
-                  id: availability.id,
-                  title: availability.title,
-                  start: availability.start_at,
-                  end: availability.end_at,
-                  textColor: 'black',
-                  backgroundColor: availability.backgroundColor,
-                  borderColor: availability.borderColor,
-                  tag_ids: availability.tag_ids,
-                  tags: availability.tags,
-                  machine_ids: availability.machine_ids
-                },
-                true
-              );
-            },
-            function () { uiCalendarConfig.calendars.calendar.fullCalendar('unselect'); }
-          );
-        }
+
+      // check if slot is not in the past
+      const today = new Date();
+      if (Math.trunc((start.valueOf() - today) / (60 * 1000)) < 0) {
+        growl.warning(_t('admin_calendar.event_in_the_past'));
+        return uiCalendarConfig.calendars.calendar.fullCalendar('unselect');
       }
 
+      // check that the selected slot is an N-hours multiple (ie. not decimal)
+      const slots = Math.trunc((end.valueOf() - start.valueOf()) / (60 * 1000)) / SLOT_MULTIPLE;
+      if (!Number.isInteger(slots)) {
+        // otherwise, round it to nearest decimal
+        const nearest = Math.round(slots) * SLOT_MULTIPLE;
+        end = moment(start).add(nearest, 'minutes');
+      }
+
+      // then we open a modal window to let the admin specify the slot type
+      const modalInstance = $uibModal.open({
+        templateUrl: '<%= asset_path "admin/calendar/eventModal.html" %>',
+        controller: 'CreateEventModalController',
+        resolve: {
+          start () { return start; },
+          end () { return end; },
+          machinesPromise: ['Machine', function (Machine) { return Machine.query().$promise; }],
+          trainingsPromise: ['Training', function (Training) { return Training.query().$promise; }],
+          spacesPromise: ['Space', function (Space) { return Space.query().$promise; }]
+        } });
+      // when the modal is closed, we send the slot to the server for saving
+      modalInstance.result.then(
+        function (availability) {
+          uiCalendarConfig.calendars.calendar.fullCalendar(
+            'renderEvent',
+            {
+              id: availability.id,
+              title: availability.title,
+              start: availability.start_at,
+              end: availability.end_at,
+              textColor: 'black',
+              backgroundColor: availability.backgroundColor,
+              borderColor: availability.borderColor,
+              tag_ids: availability.tag_ids,
+              tags: availability.tags,
+              machine_ids: availability.machine_ids
+            },
+            true
+          );
+        },
+        function () { uiCalendarConfig.calendars.calendar.fullCalendar('unselect'); }
+      );
+
       return uiCalendarConfig.calendars.calendar.fullCalendar('unselect');
     };
 

config/locales/app.admin.en.yml

@@ -61,6 +61,7 @@ en:
           unlockable_because_reservations: "Unable to block booking on this slot because some uncancelled reservations exist on it."
           delete_slot: "Delete this slot"
           do_you_really_want_to_delete_this_slot: "Do you really want to delete this slot?"
+          event_in_the_past: "Unable to create a slot in the past."
 
       project_elements:
         # management of the projects' components

config/locales/app.admin.es.yml

@@ -61,6 +61,7 @@ es:
           unlockable_because_reservations: "No se puede bloquear la reserva en esta ranura porque existen algunas reservas no canceladas."
           delete_slot: "Delete this slot"                                                          # translation_missing
           do_you_really_want_to_delete_this_slot: "Do you really want to delete this slot?"
+          event_in_the_past: "Unable to create a slot in the past."                                # translation_missing
 
       project_elements:
         # management of the projects' components

config/locales/app.admin.fr.yml

@@ -61,6 +61,7 @@ fr:
           unlockable_because_reservations: "Impossible de bloquer les réservations sur ce créneau car il existe des réservations non annulées sur celui-ci."
           delete_slot: "Supprimer le créneau"
           do_you_really_want_to_delete_this_slot: "Êtes vous sur de vouloir supprimer ce créneau ?"
+          event_in_the_past: "Impossible de créer un créneau dans le passé."
 
       project_elements:
         # gestion des éléments constituant les projets

config/locales/app.admin.pt.yml

@@ -61,6 +61,7 @@ pt:
           unlockable_because_reservations: "Não é possível bloquear a reserva neste slot porque existem algumas reservas não cancelados nele."
           delete_slot: "Exclua o slot"
           do_you_really_want_to_delete_this_slot: "Você realmente quer excluir esse slot?"
+          event_in_the_past: "Unable to create a slot in the past."                                # translation_missing
 
       project_elements:
         # management of the projects' components