From 31dce73f14170628c4afe230e4348ac61777496f Mon Sep 17 00:00:00 2001 From: Sylvain Date: Tue, 25 Feb 2020 10:47:16 +0100 Subject: [PATCH] project elements tour --- .../controllers/admin/calendar.js.erb | 1 - .../controllers/admin/events.js.erb | 1 - .../controllers/admin/invoices.js.erb | 1 - .../controllers/admin/members.js.erb | 1 - .../controllers/admin/pricing.js.erb | 1 - .../controllers/admin/project_elements.js | 84 ++++++++++++++++++- .../controllers/admin/trainings.js.erb | 1 - .../javascripts/controllers/machines.js.erb | 1 - .../javascripts/controllers/spaces.js.erb | 1 - .../admin/project_elements/index.html.erb | 10 ++- config/locales/app.admin.fr.yml | 37 +++++++- 11 files changed, 124 insertions(+), 15 deletions(-) diff --git a/app/assets/javascripts/controllers/admin/calendar.js.erb b/app/assets/javascripts/controllers/admin/calendar.js.erb index 54cb2cbc3..12e5cef95 100644 --- a/app/assets/javascripts/controllers/admin/calendar.js.erb +++ b/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', diff --git a/app/assets/javascripts/controllers/admin/events.js.erb b/app/assets/javascripts/controllers/admin/events.js.erb index 1e037730a..a584c2b54 100644 --- a/app/assets/javascripts/controllers/admin/events.js.erb +++ b/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', diff --git a/app/assets/javascripts/controllers/admin/invoices.js.erb b/app/assets/javascripts/controllers/admin/invoices.js.erb index ca6350784..ad4629899 100644 --- a/app/assets/javascripts/controllers/admin/invoices.js.erb +++ b/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', diff --git a/app/assets/javascripts/controllers/admin/members.js.erb b/app/assets/javascripts/controllers/admin/members.js.erb index 5c63c7377..8e34b0efe 100644 --- a/app/assets/javascripts/controllers/admin/members.js.erb +++ b/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', diff --git a/app/assets/javascripts/controllers/admin/pricing.js.erb b/app/assets/javascripts/controllers/admin/pricing.js.erb index e02e20dd8..527ccfdec 100644 --- a/app/assets/javascripts/controllers/admin/pricing.js.erb +++ b/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', diff --git a/app/assets/javascripts/controllers/admin/project_elements.js b/app/assets/javascripts/controllers/admin/project_elements.js index 60157f14c..05a330fa1 100644 --- a/app/assets/javascripts/controllers/admin/project_elements.js +++ b/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(); } ]); diff --git a/app/assets/javascripts/controllers/admin/trainings.js.erb b/app/assets/javascripts/controllers/admin/trainings.js.erb index b42b154cc..6ee23cde4 100644 --- a/app/assets/javascripts/controllers/admin/trainings.js.erb +++ b/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', diff --git a/app/assets/javascripts/controllers/machines.js.erb b/app/assets/javascripts/controllers/machines.js.erb index 0cbbacb81..39e4a4a10 100644 --- a/app/assets/javascripts/controllers/machines.js.erb +++ b/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', diff --git a/app/assets/javascripts/controllers/spaces.js.erb b/app/assets/javascripts/controllers/spaces.js.erb index 806d35cb7..5e546212a 100644 --- a/app/assets/javascripts/controllers/spaces.js.erb +++ b/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', diff --git a/app/assets/templates/admin/project_elements/index.html.erb b/app/assets/templates/admin/project_elements/index.html.erb index a18d94310..cb510fe01 100644 --- a/app/assets/templates/admin/project_elements/index.html.erb +++ b/app/assets/templates/admin/project_elements/index.html.erb @@ -12,14 +12,20 @@
- {{ 'app.admin.project_elements.manage_abuses' }} + {{ 'app.admin.project_elements.manage_abuses' }}
-
+
'" + ui-tour-use-hotkeys="true" + ui-tour-scroll-parent-id="content-main" + post-render="setupProjectElementsTour">
diff --git a/config/locales/app.admin.fr.yml b/config/locales/app.admin.fr.yml index 7755b13fa..24fb2dafd 100644 --- a/config/locales/app.admin.fr.yml +++ b/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: "

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.).

Attention : Gardez à l'esprit que toute modification non maîtrisée peut casser l'apparence de la page d'accueil.

" + 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: "

Expliquez ici la façon dont vous utilisez les données que vous recueillez sur vos membres.

La RGPD impose qu'une politique de confidentialité soit définie, ainsi qu'un délégué à la protection des données.

" + 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"