[#595] Add button step-by-step guide

- floating guide example used from introjs.com
- add guide_custom option in /etc/rvd_front.conf for custom guide
- add button to see guide in action
- add id="stepX" in template for guide steps

etc/rvd_front.conf.example

@@ -11,6 +11,7 @@
   ,group => 'ravada'
   ,secrets => ['changeme1','changeme2']
   ,login_custom => ''
+  ,guide_custom => ''
   ,session_timeout => 5*60
   ,session_timeout_admin => 15*60
 };

public/js/ravada.js

@@ -122,6 +122,7 @@
             $scope.toggle_only_public=function() {
                     $scope.only_public = !$scope.only_public;
             };
+            $scope.startIntro = startIntro;
         };
 
         function singleMachinePageC($scope, $http, $interval, request, $location) {

public/js/ravada_guide.js

+function startIntro(){
+        var intro = introJs();
+          intro.setOptions({
+            steps: [
+              { 
+                intro: "<h4>User guide step-to-step</h4><br /> " + 
+                "<div class=\"alert alert-info\" ><small>You can use cursor keys & ESC for exit</small></div>"
+              },
+              { 
+                intro: "Welcome to Ravada VDI"
+              },
+              {
+                element: document.querySelector('#step1'),
+                intro: "Available machines",
+                position: 'right'
+              },
+              {
+                element: document.querySelectorAll('#step2')[0],
+                intro: "Start, stop and settings",
+                position: 'right'
+              },
+              {
+                element: '#step3',
+                intro: 'More features, more fun.',
+                position: 'left'
+              },
+              {
+                element: '#step4',
+                intro: "Another step.",
+                position: 'bottom'
+              },
+              {
+                element: '#step5',
+                intro: 'The end'
+              }
+            ],
+            showProgress: true,
+            showBullets: false,
+          });
+          intro.start();
+}

rvd_front.pl

@@ -49,6 +49,7 @@ my $CONFIG_FRONT = plugin Config => { default => {
                                               ,login_message => ''
                                               ,secrets => ['changeme0']
                                               ,login_custom => ''
+                                              ,guide_custom => ''
                                               ,admin => {
                                                     hide_clones => 15
                                               }
@@ -842,6 +843,12 @@ sub quick_start {
 
 sub render_machines_user {
     my $c = shift;
+
+    if ($CONFIG_FRONT->{guide_custom}) {
+        push @{$c->stash->{js}}, $CONFIG_FRONT->{guide_custom};
+    } else {
+        push @{$c->stash->{js}}, '/js/ravada_guide.js';
+    }
     return $c->render(
         template => 'main/list_bases2'
         ,machines => $RAVADA->list_machines_user($USER)

templates/bootstrap/header.html.ep

@@ -17,6 +17,7 @@
     <link href="<%= $csslink %>" rel="stylesheet">
 % }
     <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/introjs.css" rel="stylesheet" type="text/css">
 
   <style>
 % foreach my $csssnip (@$csssnippets) {

templates/bootstrap/scripts.html.ep

@@ -17,6 +17,8 @@
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.js"></script>
 
+<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/intro.js"></script>
+
 % foreach my $jslink (@$js) {
 <script src="<%= $jslink %>"></script>
 % }

templates/main/list_bases2.html.ep

@@ -27,6 +27,9 @@
     <div class="panel panel-default">
         <div class="panel-heading">
             <h2><%=l 'Choose a Machine to Start' %></h2>
+%       if ( $public_bases ) {
+            <a class="btn btn-large btn-success" href="javascript:void(0);" ng-click="startIntro();"><%= l 'Step-by-step guide' %></a>
+%           }
 %           if ($user->is_admin && $public_bases && $private_bases) {
             <div ng-cloak>
                 <a ng-click="toggle_only_public()" class="label label-primary"
@@ -55,7 +58,7 @@
             <div class="col-sm-4"
                 ng-hide="!<%= $machine->{is_public} %> && only_public">
             <div class="panel panel-success">
-            <div class="panel-heading">
+            <div class="panel-heading" id="step1">
                 <h3 class="panel-title"><a class="btn btn-link"
                    href="/machine/clone/<%= $machine->{id} %>.html" role="button"><%= $machine->{name} %></a>
 %                   if ( !$machine->{is_public} ) {
@@ -69,7 +72,7 @@
 %               }
 
             </div>
-            <div class="panel-body">
+            <div class="panel-body" id="step2">
                 <a type="button" class="btn btn-success" href="/machine/clone/<%= $machine->{id} %>.html"><strong><i class="fa fa-play" aria-hidden="true"></i>&nbsp;<%=l 'Start' %></strong></a>
 %               if (!$machine->{is_locked}) {
 %                   if ( $machine->{id_clone} && $machine->{is_active} ) {
@@ -126,8 +129,15 @@
 </div><!-- page header -->
 </div><!-- page wrapper -->
 %= include 'bootstrap/scripts'
+
 </div>
 
+<style>
+.introjs-tooltip {
+    min-width: 450px;
+}
+</style>
+
 %= include 'bootstrap/footer'
 %= include 'bootstrap/messages'
 </body>