[ongoing] help modal

app/assets/javascripts/controllers/application.js.erb

@@ -12,8 +12,8 @@
  * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
  */
 
-Application.Controllers.controller('ApplicationController', ['$rootScope', '$scope', '$window', '$locale', '$timeout', 'Session', 'AuthService', 'Auth', '$uibModal', '$state', 'growl', 'Notification', '$interval', 'Setting', '_t', 'Version',
+Application.Controllers.controller('ApplicationController', ['$rootScope', '$scope', '$window', '$locale', '$timeout', 'Session', 'AuthService', 'Auth', '$uibModal', '$state', 'growl', 'Notification', '$interval', 'Setting', '_t', 'Version', 'Help',
-  function ($rootScope, $scope, $window, $locale, $timeout, Session, AuthService, Auth, $uibModal, $state, growl, Notification, $interval, Setting, _t, Version) {
+  function ($rootScope, $scope, $window, $locale, $timeout, Session, AuthService, Auth, $uibModal, $state, growl, Notification, $interval, Setting, _t, Version, Help) {
   /* PRIVATE STATIC CONSTANTS */
 
     // User's notifications will get refreshed every 30s
@@ -346,22 +346,7 @@ Application.Controllers.controller('ApplicationController', ['$rootScope', '$sco
       $rootScope.login = $scope.login;
 
       // handle F1 key to trigger help
-      window.addEventListener('keydown', function(e) {
+      window.addEventListener('keydown', Help);
-        if (e.key === 'F1') {
-          if ($rootScope.currentUser.role !== 'admin') return;
-
-          e.preventDefault();
-          // we wait a little bit and then, check if a tour has started (by checking for a tour popover).
-          // if not, we consider that we are on a page that does not provides a tour so we fallback to the default behavior
-          // -> opening the user's manual
-          setTimeout(function() {
-            const tourPopover = document.querySelector('.ui-tour-popup');
-            if (!tourPopover || (tourPopover.offsetTop === 0 && tourPopover.offsetTop === 0)) {
-              window.open('https://github.com/sleede/fab-manager/raw/master/doc/fr/guide_utilisation_fab_manager_v4.3.pdf', '_blank');
-            }
-          }, 300);
-        }
-      });
     };
 
     /**

app/assets/javascripts/controllers/home.js

@@ -1,7 +1,7 @@
 'use strict';
 
-Application.Controllers.controller('HomeController', ['$scope', '$stateParams', 'settingsPromise', 'Member', 'uiTourService', '_t',
+Application.Controllers.controller('HomeController', ['$scope', '$stateParams', 'settingsPromise', 'Member', 'uiTourService', '_t', 'Help',
-  function ($scope, $stateParams, settingsPromise, Member, uiTourService, _t) {
+  function ($scope, $stateParams, settingsPromise, Member, uiTourService, _t, Help) {
   /* PUBLIC SCOPE */
 
     // Home page HTML content
@@ -41,10 +41,6 @@ Application.Controllers.controller('HomeController', ['$scope', '$stateParams',
       // We set the home page content, with the directives replacing the placeholders
       $scope.homeContent = insertDirectives(settingsPromise.home_content);
 
-      // listen the $destroy event of the controller to remove the F1 key binding
-      $scope.$on('$destroy', function () {
-        window.removeEventListener('keydown', handleF1);
-      });
 
       // for admins, setup the tour on login
       $scope.$watch('currentUser', function (newValue, oldValue) {
@@ -305,20 +301,6 @@ Application.Controllers.controller('HomeController', ['$scope', '$stateParams',
       if (Fablab.featureTourDisplay !== 'manual' && $scope.currentUser.profile.tours.indexOf('welcome') < 0) {
         uitour.start();
       }
-      // start this tour when an user press F1 - this is contextual help
-      window.addEventListener('keydown', handleF1);
-    };
-
-    /**
-     * 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('welcome');
-        if (tour) { tour.start(); }
-      }
     };
 
     // !!! MUST BE CALLED AT THE END of the controller

app/assets/javascripts/services/help.js.erb

@@ -0,0 +1,53 @@
+'use strict';
+
+Application.Services.factory('Help', ['$uibModal', '$state', function ($uibModal, $state) {
+  const TOURS = {
+    'app.public.home': 'welcome',
+    'app.public.machines_list': 'machines',
+    'app.public.spaces_list': 'spaces',
+    'app.admin.trainings': 'trainings',
+    'app.admin.calendar': 'calendar',
+    'app.admin.members': 'members',
+    'app.admin.invoices': 'invoices',
+    'app.admin.pricing': 'pricing',
+    'app.admin.events': 'events',
+    'app.admin.project_elements': 'project_elements',
+    'app.admin.statistics': 'statistics',
+    'app.admin.settings': 'settings',
+    'app.admin.open_api_clients': 'open_api'
+  };
+
+
+  return function (e) {
+    if (e.key === 'F1') {
+      e.preventDefault();
+      // retrieve the tour name, based on the current location
+      const tour = TOURS[$state.current.name];
+
+      // if no tour, just open the guide
+      if (tour === undefined) {
+        return window.open('https://github.com/sleede/fab-manager/raw/master/doc/fr/guide_utilisation_fab_manager_v4.3.pdf', '_blank');
+      }
+
+      $uibModal.open({
+        animation: true,
+        templateUrl: '<%= asset_path "shared/help_modal.html" %>',
+        controller: ['$scope', '$uibModalInstance', 'uiTourService', function ($scope, $uibModalInstance, uiTourService) {
+          // start the tour and hide the modal
+          $scope.onTour = function () {
+            const tour = uiTourService.getTourByName(tour);
+            if (tour) { tour.start(); }
+
+            $uibModalInstance.close('tour');
+          };
+
+          // open the user's guide and hide the modal
+          $scope.onGuide = function () {
+            $uibModalInstance.close('guide');
+          };
+        }]
+      });
+    }
+  };
+
+}]);

app/assets/templates/shared/help_modal.html.erb

@@ -0,0 +1,20 @@
+<div class="modal-header">
+  <img ng-src="{{logoBlack.custom_asset_file_attributes.attachment_url}}" alt="{{logo.custom_asset_file_attributes.attachment}}" class="modal-logo"/>
+  <h1>
+    <i class="fa fa-question-circle" aria-hidden="true"></i>
+    <span translate>{{ 'app.shared.help.title' }}</span>
+  </h1>
+</div>
+<div class="modal-body">
+  <p translate>{{ 'app.shared.help.what_to_do' }}</p>
+  <div class="row text-center">
+    <button class="btn btn-default" ng-click="onTour()" translate>{{ 'app.shared.help.tour' }}</button>
+  </div>
+  <div class="row text-center m-t-lg m-b-md">
+    <a class="btn btn-default"
+       ng-click="onGuide()"
+       href="https://github.com/sleede/fab-manager/raw/master/doc/fr/guide_utilisation_fab_manager_v4.3.pdf"
+       target="_blank"
+       translate>{{ 'app.shared.help.guide' }}</a>
+  </div>
+</div>

config/locales/app.admin.en.yml

@@ -1042,6 +1042,7 @@ en:
         report_will_be_destroyed: "Once the report has been processed, it will be deleted. This can't be undone, continue?"
         report_removed: "The report has been deleted"
         failed_to_remove: "An error occurred, unable to delete the report"
+      #feature tour
       tour:
         conclusion:
           title: "Thank you for your attention"

config/locales/app.admin.fr.yml

@@ -1042,6 +1042,7 @@ fr:
         report_will_be_destroyed: "Une fois le signalement traité, le rapport sera supprimé. Cette action est irréversible, continuer ?"
         report_removed: "Le rapport a bien été supprimé"
         failed_to_remove: "Une erreur est survenue, impossible de supprimer le rapport"
+      #feature tour
       tour:
         conclusion:
           title: "Merci de votre attention"

config/locales/app.shared.en.yml

@@ -425,7 +425,14 @@ en:
         slot_at_same_time: "Conflict with others reservations"
         do_you_really_want_to_book_slot_at_same_time: "Do you really want to book this slot? Other bookings take place at the same time"
         unable_to_book_slot_because_really_have_reservation_at_same_time: "Unable to book this slot because the following reservation occurs at the same time."
+      # feature-tour modal
       tour:
         previous: "Previous"
         next: "Next"
         end: "End the tour"
+      # help modal
+      help:
+        title: "Help"
+        what_to_do: "What do you want to do?"
+        tour: "Start the feature tour"
+        guide: "Open the user's manual"

config/locales/app.shared.fr.yml

@@ -425,7 +425,14 @@ fr:
         slot_at_same_time: "Conflit avec d'autres réservations"
         do_you_really_want_to_book_slot_at_same_time: "Êtes-vous sûr de réserver ce créneau ? D'autres réservations ont lieu en même temps"
         unable_to_book_slot_because_really_have_reservation_at_same_time: "Impossible de réserver ce créneau car les réservations ci-dessous ont lieu en même temps."
+      # feature-tour modal
       tour:
         previous: "Précédent"
         next: "Suivant"
         end: "Terminer la visite"
+      # help modal
+      help:
+        title: "Aide"
+        what_to_do: "Que voulez-vous faire ?"
+        tour: "Lancer la visite guidée"
+        guide: "Ouvrir le manuel de l'utilisateur"