(feat) auto fresh calendar

app/frontend/src/javascript/controllers/calendar.js

@@ -16,8 +16,8 @@
  * Controller used in the public calendar global
  */
 
-Application.Controllers.controller('CalendarController', ['$scope', '$state', '$aside', '$uibModal', 'moment', 'Availability', 'Setting', 'growl', 'dialogs', 'bookingWindowStart', 'bookingWindowEnd', '_t', 'uiCalendarConfig', 'CalendarConfig', 'trainingsPromise', 'machinesPromise', 'spacesPromise', 'iCalendarPromise', 'machineCategoriesPromise',
+Application.Controllers.controller('CalendarController', ['$scope', '$state', '$aside', '$uibModal', 'moment', 'Availability', 'Setting', 'growl', 'dialogs', 'bookingWindowStart', 'bookingWindowEnd', '_t', 'uiCalendarConfig', 'CalendarConfig', 'trainingsPromise', 'machinesPromise', 'spacesPromise', 'iCalendarPromise', 'machineCategoriesPromise', '$interval',
-  function ($scope, $state, $aside, $uibModal, moment, Availability, Setting, growl, dialogs, bookingWindowStart, bookingWindowEnd, _t, uiCalendarConfig, CalendarConfig, trainingsPromise, machinesPromise, spacesPromise, iCalendarPromise, machineCategoriesPromise) {
+  function ($scope, $state, $aside, $uibModal, moment, Availability, Setting, growl, dialogs, bookingWindowStart, bookingWindowEnd, _t, uiCalendarConfig, CalendarConfig, trainingsPromise, machinesPromise, spacesPromise, iCalendarPromise, machineCategoriesPromise, $interval) {
   /* PRIVATE STATIC CONSTANTS */
     let currentMachineEvent = null;
     machinesPromise.forEach(m => m.checked = true);
@@ -27,6 +27,8 @@ Application.Controllers.controller('CalendarController', ['$scope', '$state', '$
     // check all formation/machine is select in filter
     const isSelectAll = (type, scope) => scope[type].length === scope[type].filter(t => t.checked).length;
 
+    let stopRedirectPage = false;
+
     /* PUBLIC SCOPE */
 
     // List of trainings
@@ -190,6 +192,45 @@ Application.Controllers.controller('CalendarController', ['$scope', '$state', '$
         }]
       });
 
+    $scope.triggerOnlyCalendarViewMode = function () {
+      const header = document.getElementById('top-header');
+      const nav = document.getElementById('nav');
+      const calendarBackButton = document.getElementById('calendar-back-button');
+      const mainContent = $('.vbox > header.header-md ~ section');
+      if (!header || !nav || !calendarBackButton || !mainContent) { return; }
+      if (header.style.display === 'none') {
+        header.style.display = '';
+        nav.style.display = '';
+        calendarBackButton.style.display = '';
+        mainContent.css('top', '');
+      } else {
+        header.style.display = 'none';
+        nav.style.display = 'none';
+        calendarBackButton.style.display = 'none';
+        mainContent.css('top', '0');
+      }
+    };
+
+    // refresh calendar every 5 minutes
+    $scope.triggerAutoRefresh = function () {
+      if ($scope.autoRefresh) {
+        $interval.cancel($scope.autoRefresh);
+        $scope.autoRefresh = undefined;
+        stopRedirectPage = false;
+      } else {
+        $scope.autoRefresh = $interval(refreshCalendar, 10000);
+        stopRedirectPage = true;
+      }
+    };
+
+    $scope.$on('$destroy', function () {
+      if ($scope.autoRefresh) {
+        $interval.cancel($scope.autoRefresh);
+        $scope.autoRefresh = undefined;
+        stopRedirectPage = false;
+      }
+    });
+
     /* PRIVATE SCOPE */
 
     /**
@@ -257,13 +298,13 @@ Application.Controllers.controller('CalendarController', ['$scope', '$state', '$
       } else if (event.available_type === 'space') {
         calendar.fullCalendar('changeView', 'agendaDay');
         calendar.fullCalendar('gotoDate', event.start);
-      } else if (event.available_type === 'event') {
+      } else if (event.available_type === 'event' && !stopRedirectPage) {
         $state.go('app.public.events_show', { id: event.event_id });
-      } else if (event.available_type === 'training') {
+      } else if (event.available_type === 'training' && !stopRedirectPage) {
         $state.go('app.public.training_show', { id: event.training_id });
       } else {
         if (event.machine_ids) {
-          if (event.machine_ids.length === 1) {
+          if (event.machine_ids.length === 1 && !stopRedirectPage) {
             $state.go('app.public.machines_show', { id: event.machine_ids[0] });
           } else {
             // open a modal to ask the user to select the machine to show
@@ -350,6 +391,12 @@ Application.Controllers.controller('CalendarController', ['$scope', '$state', '$
 
     const availabilitySourceUrl = () => `/api/availabilities/public?${$.param(getFilter())}`;
 
+    const refreshCalendar = function () {
+      uiCalendarConfig.calendars.calendar.fullCalendar('changeView', 'agendaWeek');
+      uiCalendarConfig.calendars.calendar.fullCalendar('today');
+      uiCalendarConfig.calendars.calendar.fullCalendar('refetchEvents');
+    };
+
     // !!! MUST BE CALLED AT THE END of the controller
     return initialize();
   }

app/frontend/templates/calendar/calendar.html

@@ -1,21 +1,27 @@
 <section class="heading b-b">
   <div class="row no-gutter">
-    <div class="col-xs-2 col-sm-2 col-md-1">
+    <div class="col-xs-2 col-sm-2 col-md-1" id="calendar-back-button">
       <section class="heading-btn">
         <a ng-click="backPrevLocation($event)"><i class="fas fa-long-arrow-alt-left "></i></a>
       </section>
     </div>
-    <div class="col-xs-10 col-sm-10 col-md-8 b-l b-r-md hide-b-r-lg">
+    <div class="col-xs-10 col-sm-10 col-md-6 b-l b-r-md hide-b-r-lg">
       <section class="heading-title">
         <h1 translate>{{ 'app.public.calendar.calendar' }}</h1>
       </section>
     </div>
 
-    <div class="col-xs-12 col-sm-12 col-md-3 b-t hide-b-md">
+    <div class="col-xs-12 col-sm-12 col-md-5 b-t hide-b-md">
       <div class="heading-actions wrapper">
         <button type="button" class="btn btn-default m-t m-b" ng-click="openFilterAside()">
           <span class="fa fa-filter"></span> {{ 'app.shared.calendar.filter_calendar' | translate }}
         </button>
+        <button type="button" class="btn btn-default m-t m-b" ng-click="triggerAutoRefresh()">
+          <span class="fa fa-refresh"></span> {{ 'app.shared.calendar.auto_refresh' | translate }}
+        </button>
+        <button type="button" class="btn btn-default m-t m-b" ng-click="triggerOnlyCalendarViewMode()">
+          <span class="fa fa-calendar"></span> {{ 'app.shared.calendar.calendar_view' | translate }}
+        </button>
       </div>
     </div>
 

app/views/application/index.html.erb

@@ -106,7 +106,7 @@
 
   <section class="vbox">
 
-    <header class="header header-md navbar navbar-fixed-top-xs">
+    <header id="top-header" class="header header-md navbar navbar-fixed-top-xs">
       <div ui-view="header"></div>
     </header>
 

config/locales/app.shared.fr.yml

@@ -548,6 +548,8 @@ fr:
         events: "Événements"
         externals: "Autres calendriers"
         show_reserved_uniq: "Afficher uniquement les créneaux avec réservation"
+        auto_refresh: "Rafraîchissement automatique"
+        calendar_view: "Agenda"
       machine:
         machine_uncategorized: "Machines non classés"
       form_unsaved_list: