admin calendar tour

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

@@ -18,9 +18,9 @@
  * Controller used in the calendar management page
  */
 
-Application.Controllers.controller('AdminCalendarController', ['$scope', '$state', '$uibModal', 'moment', 'Availability', 'Slot', 'Setting', 'Export', 'growl', 'dialogs', 'bookingWindowStart', 'bookingWindowEnd', 'machinesPromise', '_t', 'uiCalendarConfig', 'CalendarConfig',
-  function ($scope, $state, $uibModal, moment, Availability, Slot, Setting, Export, growl, dialogs, bookingWindowStart, bookingWindowEnd, machinesPromise, _t, uiCalendarConfig, CalendarConfig) {
-  /* PRIVATE STATIC CONSTANTS */
+Application.Controllers.controller('AdminCalendarController', ['$scope', '$state', '$uibModal', 'moment', 'Availability', 'Slot', 'Setting', 'Export', 'growl', 'dialogs', 'bookingWindowStart', 'bookingWindowEnd', 'machinesPromise', '_t', 'uiCalendarConfig', 'CalendarConfig', 'Member', 'uiTourService',
+  function ($scope, $state, $uibModal, moment, Availability, Slot, Setting, Export, growl, dialogs, bookingWindowStart, bookingWindowEnd, machinesPromise, _t, uiCalendarConfig, CalendarConfig, Member, uiTourService) {
+    /* PRIVATE STATIC CONSTANTS */
 
     // The calendar is divided in slots of 30 minutes
     const BASE_SLOT = '00:30:00';
@@ -252,14 +252,90 @@ Application.Controllers.controller('AdminCalendarController', ['$scope', '$state
       });
     };
 
+    /**
+     * Setup the feature-tour for the admin/calendar page.
+     * This is intended as a contextual help (when pressing F1)
+     */
+    $scope.setupCalendarTour = function () {
+      // get the tour defined by the ui-tour directive
+      const uitour = uiTourService.getTourByName('calendar');
+      // TODO add the steps
+      uitour.createStep({
+        selector: 'body',
+        stepId: 'welcome',
+        order: 0,
+        title: _t('app.admin.tour.calendar.welcome.title'),
+        content: _t('app.admin.tour.calendar.welcome.content'),
+        placement: 'bottom',
+        orphan: true
+      });
+      uitour.createStep({
+        selector: '.admin-calendar .fc-view-container',
+        stepId: 'agenda',
+        order: 1,
+        title: _t('app.admin.tour.calendar.agenda.title'),
+        content: _t('app.admin.tour.calendar.agenda.content'),
+        placement: 'right'
+      });
+      uitour.createStep({
+        selector: '.admin-calendar .export-xls-button',
+        stepId: 'export',
+        order: 2,
+        title: _t('app.admin.tour.calendar.export.title'),
+        content: _t('app.admin.tour.calendar.export.content'),
+        placement: 'left'
+      });
+      uitour.createStep({
+        selector: '.heading .import-ics-button',
+        stepId: 'import',
+        order: 3,
+        title: _t('app.admin.tour.calendar.import.title'),
+        content: _t('app.admin.tour.calendar.import.content'),
+        placement: 'left'
+      });
+      uitour.createStep({
+        selector: 'body',
+        stepId: 'conclusion',
+        order: 4,
+        title: _t('app.admin.tour.conclusion.title'),
+        content: _t('app.admin.tour.conclusion.content'),
+        placement: 'bottom',
+        orphan: true
+      });
+      // on tour end, save the status in database
+      uitour.on('ended', function () {
+        if (uitour.getStatus() === uitour.Status.ON && $scope.currentUser.profile.tours.indexOf('calendar') < 0) {
+          Member.completeTour({ id: $scope.currentUser.id }, { tour: 'calendar' }, function (res) {
+            $scope.currentUser.profile.tours = res.tours;
+          });
+        }
+      });
+      // if the user has never seen the tour, show him now
+      if ($scope.currentUser.profile.tours.indexOf('calendar') < 0) {
+        uitour.start();
+      }
+      // start this tour when an user press F1 - this is contextual help
+      window.addEventListener('keydown', handleF1);
+    }
+
     /* PRIVATE SCOPE */
 
+    /**
+     * Kind of constructor: these actions will be realized first when the controller is loaded
+     */
+    const initialize = function () {
+      // listen the $destroy event of the controller to remove the F1 key binding
+      $scope.$on('$destroy', function () {
+        window.removeEventListener('keydown', handleF1);
+      });
+    };
+
     /**
      * Return an enumerable meaninful string for the gender of the provider user
      * @param user {Object} Database user record
      * @return {string} 'male' or 'female'
      */
-    var getGender = function (user) {
+    const getGender = function (user) {
       if (user.statistic_profile) {
         if (user.statistic_profile.gender === 'true') { return 'male'; } else { return 'female'; }
       } else { return 'other'; }
@@ -268,7 +344,7 @@ Application.Controllers.controller('AdminCalendarController', ['$scope', '$state
     // Triggered when the admin drag on the agenda to create a new reservable slot.
     // @see http://fullcalendar.io/docs/selection/select_callback/
     //
-    var calendarSelectCb = function (start, end, jsEvent, view) {
+    const calendarSelectCb = function (start, end, jsEvent, view) {
       start = moment.tz(start.toISOString(), Fablab.timezone);
       end = moment.tz(end.toISOString(), Fablab.timezone);
 
@@ -329,7 +405,7 @@ Application.Controllers.controller('AdminCalendarController', ['$scope', '$state
      * Triggered when the admin clicks on a availability slot in the agenda.
      * @see http://fullcalendar.io/docs/mouse/eventClick/
      */
-    var calendarEventClickCb = function (event, jsEvent, view) {
+    const calendarEventClickCb = function (event, jsEvent, view) {
       $scope.availability = event;
 
       if ($scope.availabilityDom) {
@@ -352,7 +428,7 @@ Application.Controllers.controller('AdminCalendarController', ['$scope', '$state
      * Append the event tag into the block, just after the event title.
      * @see http://fullcalendar.io/docs/event_rendering/eventRender/
      */
-    var eventRenderCb = function (event, element) {
+    const eventRenderCb = function (event, element) {
       if (event.available_type !== 'event') {
         element.find('.fc-content').prepend('<span class="remove-event">x&nbsp;</span>');
       }
@@ -387,6 +463,21 @@ Application.Controllers.controller('AdminCalendarController', ['$scope', '$state
       $scope.availability = null;
       $scope.availabilityDom = null;
     };
+
+    /**
+     * Callback used to trigger the feature tour when the user press the F1 key.
+     * @param e {KeyboardEvent}
+     */
+    const handleF1 = function (e) {
+      if (e.key === 'F1') {
+        e.preventDefault();
+        const tour = uiTourService.getTourByName('calendar');
+        if (tour) { tour.start(); }
+      }
+    };
+
+    // !!! MUST BE CALLED AT THE END of the controller
+    return initialize();
   }
 
 ]);

app/assets/templates/admin/calendar/calendar.html.erb

@@ -13,7 +13,7 @@
 
     <div class="col-xs-1">
       <section class="heading-actions wrapper">
-        <a role="button" ui-sref="app.admin.calendar.icalendar" class="btn btn-default b-2x rounded pointer m-t-sm">
+        <a role="button" ui-sref="app.admin.calendar.icalendar" class="btn btn-default b-2x rounded pointer m-t-sm import-ics-button">
           <i class="fa fa-exchange" aria-hidden="true"></i>
         </a>
       </section>
@@ -23,7 +23,12 @@
 </section>
 
 
-<section class="row no-gutter">
+<section class="row no-gutter admin-calendar"
+         ui-tour="calendar"
+         ui-tour-backdrop="true"
+         ui-tour-template-url="'<%= asset_path "shared/tour-step-template.html" %>'"
+         ui-tour-use-hotkeys="true"
+         post-render="setupCalendarTour">
 
   <div class="col-sm-12 col-md-12 col-lg-9">
     <div ui-calendar="calendarConfig" ng-model="eventSources" calendar="calendar" class="wrapper-lg"></div>
@@ -40,7 +45,7 @@
 
   <div class="col-sm-12 col-md-12 col-lg-3">
     <div class="m text-center">
-      <a class="btn btn-default"
+      <a class="btn btn-default export-xls-button"
          ng-href="api/availabilities/export_index.xlsx"
          target="export-frame"
          ng-click="alertExport('index')"

config/locales/app.admin.fr.yml

@@ -1076,6 +1076,19 @@ fr:
           tracking:
             title: "Suivi formations"
             content: "Une fois qu'une session de formation est terminée, vous pourrez valider la formation pour les membres présents depuis cet écran. Cette validation est indispensable pour leur permettre d'utiliser les machines associées."
+        calendar:
+          welcome:
+            title: "Gestion du calendrier"
+            content: "À partir de cet écran, vous pourrez planifier de sessions de formation ou des créneaux, durant lesquels les machines / espaces seront reservable par les membres."
+          agenda:
+            title: "L'agenda"
+            content: "Cliquez dans l'agenda pour commencer la création d'une nouvelle plage de disponibilité. En maintenant votre clic, vous pouvez sélectionner directement toute la plage horaire souhaitée."
+          export:
+            title: "Exporter"
+            content: "Lancez la génération d'un fichier Excel, listant l'ensemble des créneaux de disponibilité créés dans l'agenda."
+          import:
+            title: "Importer des agendas externes"
+            content: "Permet d'importer des agendas depuis une source externe au format iCal."
         members:
           welcome:
             title: "Gestion des utilisateurs"