trainings tour

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

@@ -334,14 +334,88 @@ Application.Controllers.controller('TrainingsAdminController', ['$scope', '$stat
       });
     };
 
-    /* PRIVATE SCOPE */
 
     /**
-     * Kind of constructor: these actions will be realized first when the controller is loaded
+     * Setup the feature-tour for the admin/trainings page.
+     * This is intended as a contextual help
      */
-    const initialize = function () {
-      setupTrainingsTour();
+    $scope.setupTrainingsTour = function () {
+      // get the tour defined by the ui-tour directive
+      const uitour = uiTourService.getTourByName('trainings');
+      // TODO add the steps
+      uitour.createStep({
+        selector: 'body',
+        stepId: 'welcome',
+        order: 0,
+        title: _t('app.admin.tour.trainings.welcome.title'),
+        content: _t('app.admin.tour.trainings.welcome.content'),
+        placement: 'bottom',
+        orphan: true
+      });
+      uitour.createStep({
+        selector: '.trainings-monitoring .trainings-list tr>th:nth-child(2)',
+        stepId: 'machines',
+        order: 1,
+        title: _t('app.admin.tour.trainings.machines.title'),
+        content: _t('app.admin.tour.trainings.machines.content'),
+        placement: 'top'
+      });
+      uitour.createStep({
+        selector: '.trainings-monitoring .trainings-list tr>th:nth-child(3)',
+        stepId: 'tickets',
+        order: 2,
+        title: _t('app.admin.tour.trainings.tickets.title'),
+        content: _t('app.admin.tour.trainings.tickets.content'),
+        placement: 'top'
+      });
+      uitour.createStep({
+        selector: '.trainings-monitoring .filter-trainings',
+        stepId: 'filter',
+        order: 3,
+        title: _t('app.admin.tour.trainings.filter.title'),
+        content: _t('app.admin.tour.trainings.filter.content'),
+        placement: 'left'
+      });
+      uitour.createStep({
+        selector: '.trainings-monitoring .post-tracking',
+        stepId: 'tracking',
+        order: 4,
+        title: _t('app.admin.tour.trainings.tracking.title'),
+        content: _t('app.admin.tour.trainings.tracking.content'),
+        placement: 'bottom'
+      });
+      uitour.createStep({
+        selector: 'body',
+        stepId: 'conclusion',
+        order: 5,
+        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('trainings') < 0) {
+          Member.completeTour({ id: $scope.currentUser.id }, { tour: 'trainings' }, 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('trainings') < 0) {
+        uitour.start();
+      }
+      // start this tour when an user press F1 - this is contextual help
+      window.addEventListener('keydown', function (e) {
+        if (e.key === 'F1') {
+          e.preventDefault();
+          uitour.start();
+        }
+      });
+    }
+
+
+    /* PRIVATE SCOPE */
 
     /**
      * Group the trainings availabilities by trainings and by dates and return the resulting tree
@@ -374,46 +448,6 @@ Application.Controllers.controller('TrainingsAdminController', ['$scope', '$stat
       return tree;
     };
 
-    /**
-     * Setup the feature-tour for the admin/trainings page.
-     * This is intended as a contextual help
-     */
-    const setupTrainingsTour = function () {
-      // get the tour defined by the ui-tour directive
-      const uitour = uiTourService.getTourByName('trainings'); // FIXME undefined
-      // TODO add the steps
-      uitour.createStep({
-        selector: 'body',
-        stepId: 'welcome',
-        order: 0,
-        title: _t('app.public.tour.welcome.title'),
-        content: _t('app.public.tour.welcome.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('trainings') < 0) {
-          Member.completeTour({ id: $scope.currentUser.id }, { tour: 'trainings' }, 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('trainings') < 0) {
-        uitour.start();
-      }
-      // start this tour when an user press F1 - this is contextual help
-      window.addEventListener('keydown', function (e) {
-        if (e.key === 'F1') {
-          e.preventDefault();
-          uitour.start();
-        }
-      });
-    }
-
-    // !!! MUST BE CALLED AT THE END of the controller
-    return initialize();
   }
 
 ]);

app/assets/javascripts/directives/post_render.js

@@ -0,0 +1,12 @@
+Application.Directives.directive('postRender', [ '$timeout',
+  function ($timeout) {
+    return ({
+      restrict: 'A',
+      terminal: false,
+      transclude: false,
+      link: function (scope, element, attrs) {
+        $timeout(scope[attrs.postRender], 0);
+      }
+    });
+  }
+]);

app/assets/templates/admin/trainings/index.html.erb

@@ -15,11 +15,12 @@
 </section>
 
 
-<section class="m-lg"
+<section class="m-lg trainings-monitoring"
          ui-tour="trainings"
          ui-tour-backdrop="true"
          ui-tour-template-url="'<%= asset_path "shared/tour-step-template.html" %>'"
-         ui-tour-use-hotkeys="true">
+         ui-tour-use-hotkeys="true"
+         post-render="setupTrainingsTour">
   <div class="row">
 
     <div class="col-md-12">
@@ -30,7 +31,7 @@
               <i class="fa fa-plus m-r"></i>
               <span translate>{{ 'app.admin.trainings.add_a_new_training' }}</span>
             </button>
-            <div class="form-group pull-right">
+            <div class="form-group pull-right filter-trainings">
               <div class="input-group">
                 <span class="input-group-addon"><i class="fa fa-filter"></i></span>
                 <select ng-model="trainingFiltering" class="form-control">
@@ -40,7 +41,7 @@
             </div>
           </div>
 
-          <table class="table">
+          <table class="table trainings-list">
             <thead>
             <tr>
               <th style="width:20%" translate>{{ 'app.admin.trainings.name' }}</th>
@@ -69,7 +70,7 @@
           </table>
         </uib-tab>
 
-        <uib-tab heading="{{ 'app.admin.trainings.trainings_monitoring' | translate }}">
+        <uib-tab heading="{{ 'app.admin.trainings.trainings_monitoring' | translate }}" class="post-tracking">
           <div class="m-lg">
             <label for="training_select" translate>{{ 'app.admin.trainings.select_a_training' }}</label>
             <select ng-options="training as training.name for training in trainings" ng-model="monitoring.training" class="form-control" ng-change="selectTrainingToMonitor()" name="training_select">

app/assets/templates/shared/tour-step-template.html

@@ -2,9 +2,9 @@
   <div class="popover-content tour-step-content" bind-html-compile="tourStep.trustedContent || tourStep.content"></div>
   <div class="popover-navigation tour-step-navigation">
     <div class="btn-group">
-      <button type="button" class="btn btn-sm btn-default" ng-if="tourStep.isPrev()" ng-click="tour.prev()" translate>{{ 'app.public.tour.previous' }}</button>
-      <button type="button" class="btn btn-sm btn-default" ng-if="tourStep.isNext()" ng-click="tour.next()" translate>{{ 'app.public.tour.next' }}</button>
+      <button type="button" class="btn btn-sm btn-default" ng-if="tourStep.isPrev()" ng-click="tour.prev()" translate>{{ 'app.shared.tour.previous' }}</button>
+      <button type="button" class="btn btn-sm btn-default" ng-if="tourStep.isNext()" ng-click="tour.next()" translate>{{ 'app.shared.tour.next' }}</button>
     </div>
-    <button type="button" class="btn btn-sm btn-default" ng-click="tour.end()" translate>{{ 'app.public.tour.end' }}</button>
+    <button type="button" class="btn btn-sm btn-default" ng-click="tour.end()" translate>{{ 'app.shared.tour.end' }}</button>
   </div>
 </div>

config/locales/app.admin.fr.yml

@@ -1056,3 +1056,23 @@ 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"
+      tour:
+        conclusion:
+          title: "Merci de votre attention"
+          content: "Affichez de l'aide en appuyant sur <strong>F1</strong> à n'importe quel moment.<br> Bonne continuation avec Fab-Manager."
+        trainings:
+          welcome:
+            title: "Suivi formations"
+            content: "Ici vous pourrez créer, modifier et supprimer des formations. C'est également l'endroit où vous pourrez validez les formations des membres."
+          machines:
+            title: "Machines associées"
+            content: "Pour pouvoir réserver une des machines listée ici, un membre devra préalablement avoir suivi l'une des formation associée."
+          tickets:
+            title: "Nombre de places"
+            content: "Nombre de places par défaut pour la formation. Vous pourrez surcharger ce nombre de place chaque fois que vous planifierez une session de formation."
+          filter:
+            title: "Filtre"
+            content: "Par défaut, seules les formations actives sont affichées ici. Affichez les autres en choisissant un autre filtre ici."
+          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."

config/locales/app.public.fr.yml

@@ -379,9 +379,6 @@ fr:
         projects_using_the_space: "Projets utilisant l'espace"
 
       tour:
-        previous: "Précédent"
-        next: "Suivant"
-        end: "Terminer la visite"
         welcome:
           title: "Bienvenue dans Fab-Manager"
           content: "Afin de vous aider à bien prendre en main l'application, nous allons procéder à une rapide visite guidée des fonctionnalités."

config/locales/app.shared.fr.yml

@@ -439,3 +439,8 @@ fr:
         a_problem_occurred_during_the_payment_process_please_try_again_later: "Il y a eu un problème lors de la procédure de paiement. Veuillez réessayer plus tard."
         none: "Aucune"
         online_payment_disabled: "Le payment par carte bancaire n'est pas disponible. Merci de contacter directement l'accueil du Fablab."
+
+      tour:
+        previous: "Précédent"
+        next: "Suivant"
+        end: "Terminer la visite"