project elements tour

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

@@ -259,7 +259,6 @@ Application.Controllers.controller('AdminCalendarController', ['$scope', '$state
     $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',

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

@@ -382,7 +382,6 @@ Application.Controllers.controller('AdminEventsController', ['$scope', '$state',
     $scope.setupEventsTour = function () {
       // get the tour defined by the ui-tour directive
       const uitour = uiTourService.getTourByName('events');
-      // TODO add the steps
       uitour.createStep({
         selector: 'body',
         stepId: 'welcome',

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

@@ -566,7 +566,6 @@ Application.Controllers.controller('InvoicesController', ['$scope', '$state', 'I
     $scope.setupInvoicesTour = function () {
       // get the tour defined by the ui-tour directive
       const uitour = uiTourService.getTourByName('invoices');
-      // TODO add the steps
       uitour.createStep({
         selector: 'body',
         stepId: 'welcome',

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

@@ -300,7 +300,6 @@ Application.Controllers.controller('AdminMembersController', ['$scope', '$sce',
     $scope.setupMembersTour = function () {
       // get the tour defined by the ui-tour directive
       const uitour = uiTourService.getTourByName('members');
-      // TODO add the steps
       uitour.createStep({
         selector: 'body',
         stepId: 'welcome',

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

@@ -624,7 +624,6 @@ Application.Controllers.controller('EditPricingController', ['$scope', '$state',
     $scope.setupPricingTour = function () {
       // get the tour defined by the ui-tour directive
       const uitour = uiTourService.getTourByName('pricing');
-      // TODO add the steps
       uitour.createStep({
         selector: 'body',
         stepId: 'welcome',

app/assets/javascripts/controllers/admin/project_elements.js

@@ -12,9 +12,9 @@
  */
 'use strict';
 
-Application.Controllers.controller('ProjectElementsController', ['$scope', '$state', 'Component', 'Licence', 'Theme', 'componentsPromise', 'licencesPromise', 'themesPromise',
-  function ($scope, $state, Component, Licence, Theme, componentsPromise, licencesPromise, themesPromise) {
-  // Materials list (plastic, wood ...)
+Application.Controllers.controller('ProjectElementsController', ['$scope', '$state', 'Component', 'Licence', 'Theme', 'componentsPromise', 'licencesPromise', 'themesPromise', '_t', 'Member', 'uiTourService',
+  function ($scope, $state, Component, Licence, Theme, componentsPromise, licencesPromise, themesPromise, _t, Member, uiTourService) {
+    // Materials list (plastic, wood ...)
     $scope.components = componentsPromise;
 
     // Licences list (Creative Common ...)
@@ -149,12 +149,88 @@ Application.Controllers.controller('ProjectElementsController', ['$scope', '$sta
      * @param rowform {Object} see http://vitalets.github.io/angular-xeditable/
      * @param index {number} licence index in the $scope.licences array
      */
-    return $scope.cancelLicence = function (rowform, index) {
+    $scope.cancelLicence = function (rowform, index) {
       if ($scope.licences[index].id != null) {
         return rowform.$cancel();
       } else {
         return $scope.licences.splice(index, 1);
       }
     };
+
+    /**
+     * Setup the feature-tour for the admin/project_elements page.
+     * This is intended as a contextual help (when pressing F1)
+     */
+    $scope.setupProjectElementsTour = function () {
+      // get the tour defined by the ui-tour directive
+      const uitour = uiTourService.getTourByName('project-elements');
+      uitour.createStep({
+        selector: 'body',
+        stepId: 'welcome',
+        order: 0,
+        title: _t('app.admin.tour.projectElements.welcome.title'),
+        content: _t('app.admin.tour.projectElements.welcome.content'),
+        placement: 'bottom',
+        orphan: true
+      });
+      uitour.createStep({
+        selector: '.heading .abuses-button',
+        stepId: 'abuses',
+        order: 1,
+        title: _t('app.admin.tour.projectElements.abuses.title'),
+        content: _t('app.admin.tour.projectElements.abuses.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('project-elements') < 0) {
+          Member.completeTour({ id: $scope.currentUser.id }, { tour: 'project-elements' }, 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('project-elements') < 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);
+      });
+    };
+
+    /**
+     * 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('project-elements');
+        if (tour) { tour.start(); }
+      }
+    };
+
+    // !!! MUST BE CALLED AT THE END of the controller
+    return initialize();
   }
 ]);

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

@@ -342,7 +342,6 @@ Application.Controllers.controller('TrainingsAdminController', ['$scope', '$stat
     $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',

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

@@ -222,7 +222,6 @@ Application.Controllers.controller('MachinesController', ['$scope', '$state', '_
       if ($scope.currentUser && $scope.currentUser.role === 'admin') {
         // get the tour defined by the ui-tour directive
         const uitour = uiTourService.getTourByName('machines');
-        // TODO add the steps
         uitour.createStep({
           selector: 'body',
           stepId: 'welcome',

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

@@ -134,7 +134,6 @@ Application.Controllers.controller('SpacesController', ['$scope', '$state', 'spa
       if ($scope.currentUser && $scope.currentUser.role === 'admin') {
         // get the tour defined by the ui-tour directive
         const uitour = uiTourService.getTourByName('spaces');
-        // TODO add the steps
         uitour.createStep({
           selector: 'body',
           stepId: 'welcome',

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

@@ -12,14 +12,20 @@
     </div>
     <div class="col-xs-12 col-sm-12 col-md-3 b-t hide-b-md">
       <section class="heading-actions wrapper">
-        <a class="btn btn-ng btn-warning b-2x rounded m-t-sm upper text-sm" ui-sref="app.admin.manage_abuses" role="button" translate>{{ 'app.admin.project_elements.manage_abuses' }}</a>
+        <a class="btn btn-ng btn-warning b-2x rounded m-t-sm upper text-sm abuses-button" ui-sref="app.admin.manage_abuses" role="button" translate>{{ 'app.admin.project_elements.manage_abuses' }}</a>
       </section>
     </div>
   </div>
 </section>
 
 
-<section class="m-lg">
+<section class="m-lg project-elements"
+         ui-tour="project-elements"
+         ui-tour-backdrop="true"
+         ui-tour-template-url="'<%= asset_path "shared/tour-step-template.html" %>'"
+         ui-tour-use-hotkeys="true"
+         ui-tour-scroll-parent-id="content-main"
+         post-render="setupProjectElementsTour">
   <div class="row">
 
     <div class="col-md-12">

config/locales/app.admin.fr.yml

@@ -1195,7 +1195,7 @@ fr:
           prices:
             title: "Catégories tarifaires"
             content: "Le prix des évènements ne dépend pas des groupes ou des abonnements, mais des catégories que vous définissez sur cette page."
-        projects:
+        projectElements:
           welcome:
             title: "Gérer les éléments projet"
             content: "Vous pouvez définir ici l'ensemble des éléments qui seront disponibles pour que les membres documentent les projets qu'ils réalisent."
@@ -1212,4 +1212,39 @@ fr:
           trending:
             title: "Évolution"
             content: "Visualisez l'évolution dans le temps des principaux usages de votre Fab Lab, grâce à des graphiques et des courbes."
+        settings:
+          welcome:
+            title: "Personnalisation de l'application"
+            content: "D'ici, vous pourrez configurer les réglages généraux de Fab-Manager ainsi que personnaliser différents éléments de l'interface."
+          home:
+            title: "Personnaliser la page d'accueil"
+            content: "<p>Cet éditeur WYSIWYG vous permet de personnaliser l'apparence de la page d'accueil tout en utilisant différents composants (dernier tweet, brève, etc.).</p><p><strong>Attention :</strong> Gardez à l'esprit que toute modification non maîtrisée peut casser l'apparence de la page d'accueil.</p>"
+          components:
+            title: "Insérer un composant"
+            content: "Cliquez ici pour insérer un composant pré-existant dans la page d'accueil."
+          codeview:
+            title: "Afficher le code HTML"
+            content: "Ce bouton vous permet d'afficher et de modifier directement le code de la page d'accueil. C'est la méthode recommandée, mais elle nécessite une connaissance préalable du HTML."
+          reset:
+            title: "Revenir en arrière"
+            content: "À tout moment, vous pouvez restaurer la page d'accueil initiale en cliquant ici."
+          css:
+            title: "Personnaliser la feuille de style"
+            content: "Pour les utilisateurs avancés, il est possible de définir une feuille de style personnalisée pour la page d'accueil."
+          about:
+            title: "À propos"
+            content: "Personnalisez entièrement cette page pour présenter votre activité."
+          privacy:
+            title: "Politique de confidentialité"
+            content: "<p>Expliquez ici la façon dont vous utilisez les données que vous recueillez sur vos membres.</p><p>La RGPD impose qu'une politique de confidentialité soit définie, ainsi qu'un délégué à la protection des données.</p>"
+          draft:
+            title: "Brouillon"
+            content: "Cliquez ici pour afficher un brouillon à trous d'une politique de confidentialité, qu'il ne vous reste plus qu'à relire et à compléter."
+          open_api:
+            welcome:
+              title: "OpenAPI"
+              content: "Fab-Manager propose une API ouverte permettant à des logiciels tiers de s'interfacer simplement avec ses données. Cet écran vous permet d'accorder des accès à cette API."
+            doc:
+              title: "Documentation"
+              content: "Cliquez ici pour accéder à la documentation en ligne de l'API"