⚡ visite guidée

app/Resources/views/default/login-choices.html.twig

@@ -54,7 +54,7 @@
                                     </a>
                                 </li>
                                 <li>
-                                    <a class="btn {% if app.request.attributes.get('_route') == 'festival_index' %}
+                                    <a id="menu_festivals" class="btn {% if app.request.attributes.get('_route') == 'festival_index' %}
                                             btn-success
                                         {% else %}
                                             btn-default
@@ -70,7 +70,7 @@
                                     </a>
                                 </li>
                                 <li>
-                                    <a class="btn {% if app.request.attributes.get('_route') == 'seriefestival_index' %}
+                                    <a id="menu_series" class="btn {% if app.request.attributes.get('_route') == 'seriefestival_index' %}
                                             btn-success
                                         {% else %}
                                             btn-default
@@ -111,7 +111,7 @@
                                 </li>
                                 <li>
 
-                                    <a class="btn {% if app.request.attributes.get('_route') == 'previsionnel' %}
+                                    <a  id="menu_previsionnel" class="btn {% if app.request.attributes.get('_route') == 'previsionnel' %}
                                             btn-success
                                         {% else %}
                                             btn-default
@@ -140,7 +140,7 @@
                         </div>
 
                     </div>
-                    <div class="col-xs-12 col-sm-3 text-sm-left text-right">
+                    <div class="col-xs-12 col-sm-3 text-sm-left text-right user-info-part">
 
                         <button class="btn btn-default visible-xs pull-right" id="menu_button">
                             <i class="fa fa-bars"></i>
@@ -148,7 +148,7 @@
                         </button>
 
                         {% trans %}user.greet{% endtrans %}
-                        <a href="{{ path('fos_user_profile_edit') }}">
+                        <a href="{{ path('fos_user_profile_edit') }}" class="user-info-link">
                             <i class="fa fa-user"></i>
                             {{ app.user.username }}
 

app/Resources/views/logged/angular/current.html.twig

@@ -1,47 +1,12 @@
+{% verbatim %}
 <div class="current-selling">
-
+    <hr>
     <form>
 
-        <div class="row">
-            <div class="col-xs-12 col-sm-6">
-                <h2>
-                    <a class="btn " href="{{ path('festival_index') }}">
-                        {% verbatim %}
-                                        <i class="fa fa-th-large"></i>
-                                       Festival
-                                    </a>:
-                        <span class="badge" title="fond de caisse + chiffre d'affaire. veillez à vider votre fond de caisse ailleurs lorsqu'il devient trop important, par exemple au dela de 200€" ng-class="{'badge-warning': activeFestival.fondDeCaisseAvant + activeFestival.chiffreAffaire > 200}">
-                            <i class="fa fa-archive"></i>
-                            {{ activeFestival.fondDeCaisseAvant + activeFestival.chiffreAffaire}} €
-                        </span>
-                         <span class="badge badge-success">
-                         CA {{ activeFestival.chiffreAffaire }} €
-                         <span ng-if="sellingOk">
-                         <i class="fa fa-check-circle-o"></i>
-                          </span>
-                         </span>
-                         <span class="badge badge-success">{{ activeFestival.clientsCount }} <i class="fa fa-user"></i></span>
-                         </h2>
-                </div>
-    			<div class="col-xs-12 col-sm-6">
-
-        <input type="text" ng-model="activeFestival.name" placeholder="nom du festival">
-        <input class="pull-right" type="text" ng-model="activeFestival.commentaire" placeholder="commentaire">
-                </div>
-    </div>
-
-
-        <hr>
-
-
-
         </div>
         <div class="new-display">
 
 <div class="row">
-<!--        <div class="col-xs-12 col-sm-6">-->
-<!--            <h2>new display without duplicates:</h2>-->
-<!--        </div>-->
         <div class="col-xs-12 col-sm-6">
         <button class="btn btn-warning btn-remove-all" ng-click="removeAll()" ng-disable="!CurrentSellingTotal()">
                    <i class="fa fa-trash"></i> enlever tout

app/Resources/views/logged/angular/loaded-caisse.html.twig

@@ -5,12 +5,12 @@
     <!--caisse IHM-->
     <div id="load_ok">
 
-        <div class="listing-products col-xs-12 col-sm-12">
+        <div id="listing-products" class="listing-products col-xs-12 col-sm-12">
             {% include 'logged/angular/messages.html.twig' %}
             {% include 'logged/angular/listing-products.html.twig' %}
 
         </div>
-        <div class="sellings col-xs-12 col-sm-12">
+        <div id="sellings" class="sellings col-xs-12 col-sm-12">
             <div class="well" ng-class="{'bg-success text-success': sellingOk }">
 
                 {% include 'logged/angular/validate-button.html.twig' %}

app/Resources/views/logged/caisse-main.html.twig

@@ -1,4 +1,11 @@
-{% verbatim %}
+<div id="infos_current">
+    <h2>
+
+    {% verbatim %}
+
+    </h2>
+</div>
+
     <div id="not_loaded" ng-if="!initLoadDone">
         <div class="well text-center">
          <i class="fa fa-refresh fa-spin fa-3x"></i> Chargement en cours de vos produits
@@ -7,7 +14,7 @@
     {% endverbatim %}
     {% include 'logged/angular/loaded-caisse.html.twig' %}
  {% verbatim %}
-<div class="choice-categories well" ng-if="categories.length">
+<div id="choice-categories" class="choice-categories well" ng-if="categories.length">
     <h2>
         <i class="fa-eye fa"></i>
         Visibilité des

app/Resources/views/logged/dashboard.html.twig

@@ -7,7 +7,7 @@
                 ng-controller="CaisseCtrl as MainCtrl"
         >
             <div class="row marged-v">
-                <div class="col-xs-12 col-md-6">
+                <div class="col-xs-12 col-md-6" id="main_options">
                     <button
                             title="la vente express vous permet d'enregistrer une vente pour un seul article sans remplir le formulaire de détail"
                             class="btn"
@@ -39,9 +39,35 @@
                                     <i class="fa fa-check-circle"></i>
                                 </span>
                     </button>
+                    <br>
+                    <div id="festival-current_info">
+                    {% endverbatim %}
+
+    <a class="btn " href="{{ path('festival_index') }}">
+
+        <i class="fa fa-th-large"></i>
+        Festival
+    </a>:
+    {% verbatim %}
+                        <input type="text" ng-model="activeFestival.name" placeholder="nom du festival">
+                            <input class="pull-right" type="text" ng-model="activeFestival.commentaire" placeholder="commentaire">
+                            <span class="badge" title="fond de caisse + chiffre d'affaire. veillez à vider votre fond de caisse ailleurs lorsqu'il devient trop important, par exemple au dela de 200€" ng-class="{'badge-warning': activeFestival.fondDeCaisseAvant + activeFestival.chiffreAffaire > 200}">
+                                                <i class="fa fa-archive"></i>
+                                                {{ activeFestival.fondDeCaisseAvant + activeFestival.chiffreAffaire}} €
+                                            </span>
+                        <span class="badge badge-success">
+                                             CA {{ activeFestival.chiffreAffaire }} €
+                                             <span ng-if="sellingOk">
+                                             <i class="fa fa-check-circle-o"></i>
+                                              </span>
+                                             </span>
+                        <span class="badge badge-success">{{ activeFestival.clientsCount }} <i class="fa fa-user"></i></span>
+                    </div>
+
+
                 </div>
                 <div class="col-xs-12 col-md-6">
-                        <div class="client-now padded">
+                        <div id="client-now" class="client-now padded">
                                 <i class="fa fa-user"></i>
                                 Client actuel:
                                   <input type="text" class="form-control" aria-label="Recipient's username" aria-describedby="basic-addon2" ng-model="sellingComment" placeholder="nom ou commentaire">

assets/css/pages/_intro.scss

@@ -1,527 +0,0 @@
-.introjs-overlay {
-  position: absolute;
-  box-sizing: content-box;
-  z-index: 999999;
-  background-color: #000;
-  opacity: 0;
-  background: -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%);
-  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0, 0, 0, 0.4)), color-stop(100%, rgba(0, 0, 0, 0.9)));
-  background: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%);
-  background: -o-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%);
-  background: -ms-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%);
-  background: radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%);
-  filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1)";
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-  filter: alpha(opacity=50);
-  -webkit-transition: all 0.3s ease-out;
-  -moz-transition: all 0.3s ease-out;
-  -ms-transition: all 0.3s ease-out;
-  -o-transition: all 0.3s ease-out;
-  transition: all 0.3s ease-out;
-}
-
-.introjs-fixParent {
-  z-index: auto !important;
-  opacity: 1.0 !important;
-  -webkit-transform: none !important;
-  -moz-transform: none !important;
-  -ms-transform: none !important;
-  -o-transform: none !important;
-  transform: none !important;
-}
-
-.introjs-showElement,
-tr.introjs-showElement > td,
-tr.introjs-showElement > th {
-  z-index: 9999999 !important;
-}
-
-.introjs-disableInteraction {
-  z-index: 99999999 !important;
-  position: absolute;
-  background-color: white;
-  opacity: 0;
-  filter: alpha(opacity=0);
-}
-
-.introjs-relativePosition,
-tr.introjs-showElement > td,
-tr.introjs-showElement > th {
-  position: relative;
-}
-
-.introjs-helperLayer {
-  box-sizing: content-box;
-  position: absolute;
-  z-index: 9999998;
-  background-color: #FFF;
-  background-color: rgba(255, 255, 255, .9);
-  border: 1px solid #777;
-  border: 1px solid rgba(0, 0, 0, .5);
-  border-radius: 4px;
-  box-shadow: 0 2px 15px rgba(0, 0, 0, .4);
-  -webkit-transition: all 0.3s ease-out;
-  -moz-transition: all 0.3s ease-out;
-  -ms-transition: all 0.3s ease-out;
-  -o-transition: all 0.3s ease-out;
-  transition: all 0.3s ease-out;
-}
-
-.introjs-tooltipReferenceLayer {
-  box-sizing: content-box;
-  position: absolute;
-  visibility: hidden;
-  z-index: 100000000;
-  background-color: transparent;
-  -webkit-transition: all 0.3s ease-out;
-  -moz-transition: all 0.3s ease-out;
-  -ms-transition: all 0.3s ease-out;
-  -o-transition: all 0.3s ease-out;
-  transition: all 0.3s ease-out;
-}
-
-.introjs-helperLayer *,
-.introjs-helperLayer *:before,
-.introjs-helperLayer *:after {
-  -webkit-box-sizing: content-box;
-  -moz-box-sizing: content-box;
-  -ms-box-sizing: content-box;
-  -o-box-sizing: content-box;
-  box-sizing: content-box;
-}
-
-.introjs-helperNumberLayer {
-  box-sizing: content-box;
-  position: absolute;
-  visibility: visible;
-  top: -16px;
-  left: -16px;
-  z-index: 9999999999 !important;
-  padding: 2px;
-  font-family: Arial, verdana, tahoma;
-  font-size: 13px;
-  font-weight: bold;
-  color: white;
-  text-align: center;
-  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
-  background: #ff3019; /* Old browsers */
-  background: -webkit-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* Chrome10+,Safari5.1+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff3019), color-stop(100%, #cf0404)); /* Chrome,Safari4+ */
-  background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */
-  background: -ms-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* IE10+ */
-  background: -o-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* Opera 11.10+ */
-  background: linear-gradient(to bottom, #ff3019 0%, #cf0404 100%); /* W3C */
-  width: 20px;
-  height: 20px;
-  line-height: 20px;
-  border: 3px solid white;
-  border-radius: 50%;
-  filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019', endColorstr='#cf0404', GradientType=0)"; /* IE6-9 */
-  filter: "progid:DXImageTransform.Microsoft.Shadow(direction=135, strength=2, color=ff0000)"; /* IE10 text shadows */
-  box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
-}
-
-.introjs-arrow {
-  border: 5px solid transparent;
-  content: '';
-  position: absolute;
-}
-
-.introjs-arrow.top {
-  top: -10px;
-  border-bottom-color: white;
-}
-
-.introjs-arrow.top-right {
-  top: -10px;
-  right: 10px;
-  border-bottom-color: white;
-}
-
-.introjs-arrow.top-middle {
-  top: -10px;
-  left: 50%;
-  margin-left: -5px;
-  border-bottom-color: white;
-}
-
-.introjs-arrow.right {
-  right: -10px;
-  top: 10px;
-  border-left-color: white;
-}
-
-.introjs-arrow.right-bottom {
-  bottom: 10px;
-  right: -10px;
-  border-left-color: white;
-}
-
-.introjs-arrow.bottom {
-  bottom: -10px;
-  border-top-color: white;
-}
-
-.introjs-arrow.bottom-right {
-  bottom: -10px;
-  right: 10px;
-  border-top-color: white;
-}
-
-.introjs-arrow.bottom-middle {
-  bottom: -10px;
-  left: 50%;
-  margin-left: -5px;
-  border-top-color: white;
-}
-
-.introjs-arrow.left {
-  left: -10px;
-  top: 10px;
-  border-right-color: white;
-}
-
-.introjs-arrow.left-bottom {
-  left: -10px;
-  bottom: 10px;
-  border-right-color: white;
-}
-
-.introjs-tooltip {
-  box-sizing: content-box;
-  position: absolute;
-  visibility: visible;
-  padding: 10px;
-  background-color: white;
-  min-width: 200px;
-  max-width: 300px;
-  border-radius: 3px;
-  box-shadow: 0 1px 10px rgba(0, 0, 0, .4);
-  -webkit-transition: opacity 0.1s ease-out;
-  -moz-transition: opacity 0.1s ease-out;
-  -ms-transition: opacity 0.1s ease-out;
-  -o-transition: opacity 0.1s ease-out;
-  transition: opacity 0.1s ease-out;
-}
-
-.introjs-tooltipbuttons {
-  text-align: right;
-  white-space: nowrap;
-}
-
-/*
- Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
- Changed by Afshin Mehrabani
-*/
-.introjs-button {
-  box-sizing: content-box;
-  position: relative;
-  overflow: visible;
-  display: inline-block;
-  padding: 0.3em 0.8em;
-  border: 1px solid #d4d4d4;
-  margin: 0;
-  text-decoration: none;
-  text-shadow: 1px 1px 0 #fff;
-  font: 11px/normal sans-serif;
-  color: #333;
-  white-space: nowrap;
-  cursor: pointer;
-  outline: none;
-  background-color: #ececec;
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
-  background-image: -moz-linear-gradient(#f4f4f4, #ececec);
-  background-image: -o-linear-gradient(#f4f4f4, #ececec);
-  background-image: linear-gradient(#f4f4f4, #ececec);
-  -webkit-background-clip: padding;
-  -moz-background-clip: padding;
-  -o-background-clip: padding-box;
-  /*background-clip: padding-box;*/
-  /* commented out due to Opera 11.10 bug */
-  -webkit-border-radius: 0.2em;
-  -moz-border-radius: 0.2em;
-  border-radius: 0.2em;
-  /* IE hacks */
-  zoom: 1;
-  *display: inline;
-  margin-top: 10px;
-}
-
-.introjs-button:hover {
-  border-color: #bcbcbc;
-  text-decoration: none;
-  box-shadow: 0px 1px 1px #e3e3e3;
-}
-
-.introjs-button:focus,
-.introjs-button:active {
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ececec), to(#f4f4f4));
-  background-image: -moz-linear-gradient(#ececec, #f4f4f4);
-  background-image: -o-linear-gradient(#ececec, #f4f4f4);
-  background-image: linear-gradient(#ececec, #f4f4f4);
-}
-
-/* overrides extra padding on button elements in Firefox */
-.introjs-button::-moz-focus-inner {
-  padding: 0;
-  border: 0;
-}
-
-.introjs-skipbutton {
-  box-sizing: content-box;
-  margin-right: 5px;
-  color: #7a7a7a;
-}
-
-.introjs-prevbutton {
-  -webkit-border-radius: 0.2em 0 0 0.2em;
-  -moz-border-radius: 0.2em 0 0 0.2em;
-  border-radius: 0.2em 0 0 0.2em;
-  border-right: none;
-}
-
-.introjs-prevbutton.introjs-fullbutton {
-  border: 1px solid #d4d4d4;
-  -webkit-border-radius: 0.2em;
-  -moz-border-radius: 0.2em;
-  border-radius: 0.2em;
-}
-
-.introjs-nextbutton {
-  -webkit-border-radius: 0 0.2em 0.2em 0;
-  -moz-border-radius: 0 0.2em 0.2em 0;
-  border-radius: 0 0.2em 0.2em 0;
-}
-
-.introjs-nextbutton.introjs-fullbutton {
-  -webkit-border-radius: 0.2em;
-  -moz-border-radius: 0.2em;
-  border-radius: 0.2em;
-}
-
-.introjs-disabled, .introjs-disabled:hover, .introjs-disabled:focus {
-  color: #9a9a9a;
-  border-color: #d4d4d4;
-  box-shadow: none;
-  cursor: default;
-  background-color: #f4f4f4;
-  background-image: none;
-  text-decoration: none;
-}
-
-.introjs-hidden {
-  display: none;
-}
-
-.introjs-bullets {
-  text-align: center;
-}
-
-.introjs-bullets ul {
-  box-sizing: content-box;
-  clear: both;
-  margin: 15px auto 0;
-  padding: 0;
-  display: inline-block;
-}
-
-.introjs-bullets ul li {
-  box-sizing: content-box;
-  list-style: none;
-  float: left;
-  margin: 0 2px;
-}
-
-.introjs-bullets ul li a {
-  box-sizing: content-box;
-  display: block;
-  width: 6px;
-  height: 6px;
-  background: #ccc;
-  border-radius: 10px;
-  -moz-border-radius: 10px;
-  -webkit-border-radius: 10px;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.introjs-bullets ul li a:hover {
-  background: #999;
-}
-
-.introjs-bullets ul li a.active {
-  background: #999;
-}
-
-.introjs-progress {
-  box-sizing: content-box;
-  overflow: hidden;
-  height: 10px;
-  margin: 10px 0 5px 0;
-  border-radius: 4px;
-  background-color: #ecf0f1
-}
-
-.introjs-progressbar {
-  box-sizing: content-box;
-  float: left;
-  width: 0%;
-  height: 100%;
-  font-size: 10px;
-  line-height: 10px;
-  text-align: center;
-  background-color: #08c;
-}
-
-.introjsFloatingElement {
-  position: absolute;
-  height: 0;
-  width: 0;
-  left: 50%;
-  top: 50%;
-}
-
-.introjs-fixedTooltip {
-  position: fixed;
-}
-
-.introjs-hint {
-  box-sizing: content-box;
-  position: absolute;
-  background: transparent;
-  width: 20px;
-  height: 15px;
-  cursor: pointer;
-}
-
-.introjs-hint:focus {
-  border: 0;
-  outline: 0;
-}
-
-.introjs-hidehint {
-  display: none;
-}
-
-.introjs-fixedhint {
-  position: fixed;
-}
-
-.introjs-hint:hover > .introjs-hint-pulse {
-  border: 5px solid rgba(60, 60, 60, 0.57);
-}
-
-.introjs-hint-pulse {
-  box-sizing: content-box;
-  width: 10px;
-  height: 10px;
-  border: 5px solid rgba(60, 60, 60, 0.27);
-  -webkit-border-radius: 30px;
-  -moz-border-radius: 30px;
-  border-radius: 30px;
-  background-color: rgba(136, 136, 136, 0.24);
-  z-index: 10;
-  position: absolute;
-  -webkit-transition: all 0.2s ease-out;
-  -moz-transition: all 0.2s ease-out;
-  -ms-transition: all 0.2s ease-out;
-  -o-transition: all 0.2s ease-out;
-  transition: all 0.2s ease-out;
-}
-
-.introjs-hint-no-anim .introjs-hint-dot {
-  -webkit-animation: none;
-  -moz-animation: none;
-  animation: none;
-}
-
-.introjs-hint-dot {
-  box-sizing: content-box;
-  border: 10px solid rgba(146, 146, 146, 0.36);
-  background: transparent;
-  -webkit-border-radius: 60px;
-  -moz-border-radius: 60px;
-  border-radius: 60px;
-  height: 50px;
-  width: 50px;
-  -webkit-animation: introjspulse 3s ease-out;
-  -moz-animation: introjspulse 3s ease-out;
-  animation: introjspulse 3s ease-out;
-  -webkit-animation-iteration-count: infinite;
-  -moz-animation-iteration-count: infinite;
-  animation-iteration-count: infinite;
-  position: absolute;
-  top: -25px;
-  left: -25px;
-  z-index: 1;
-  opacity: 0;
-}
-
-@-webkit-keyframes introjspulse {
-  0% {
-    -webkit-transform: scale(0);
-    opacity: 0.0;
-  }
-  25% {
-    -webkit-transform: scale(0);
-    opacity: 0.1;
-  }
-  50% {
-    -webkit-transform: scale(0.1);
-    opacity: 0.3;
-  }
-  75% {
-    -webkit-transform: scale(0.5);
-    opacity: 0.5;
-  }
-  100% {
-    -webkit-transform: scale(1);
-    opacity: 0.0;
-  }
-}
-
-@-moz-keyframes introjspulse {
-  0% {
-    -moz-transform: scale(0);
-    opacity: 0.0;
-  }
-  25% {
-    -moz-transform: scale(0);
-    opacity: 0.1;
-  }
-  50% {
-    -moz-transform: scale(0.1);
-    opacity: 0.3;
-  }
-  75% {
-    -moz-transform: scale(0.5);
-    opacity: 0.5;
-  }
-  100% {
-    -moz-transform: scale(1);
-    opacity: 0.0;
-  }
-}
-
-@keyframes introjspulse {
-  0% {
-    transform: scale(0);
-    opacity: 0.0;
-  }
-  25% {
-    transform: scale(0);
-    opacity: 0.1;
-  }
-  50% {
-    transform: scale(0.1);
-    opacity: 0.3;
-  }
-  75% {
-    transform: scale(0.5);
-    opacity: 0.5;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0.0;
-  }
-}

assets/css/pages/libs.scss

@@ -1,3 +1,4 @@
 @import '~font-awesome/css/font-awesome.css';
 @import '~bootstrap-sass/assets/stylesheets/bootstrap';
-@import 'intro';
+@import '~intro.js/minified/introjs.min.css';
+@import '~intro.js/themes/introjs-dark.css';

assets/js/app.js

@@ -1,5 +1,4 @@
 require('../css/app.scss');
-require('../../node_modules/introjs/lib/index');
 require('../../node_modules/jquery/dist/jquery.min');
 require('../../node_modules/angular/angular.min.js');
 require('./parts/main.js');

assets/js/parts/caisseCtrl.js

@@ -0,0 +1 @@
+console.log('hi from caisse ctrl')

assets/js/parts/globalActions.js

@@ -0,0 +1,88 @@
+
+
+let introJs = require('intro.js');
+var $ = require('jquery');
+$(document).ready(function () {
+    let massimportExample = 'catégorie: livre\n' +
+      '    les moutaines;5€\n' +
+      '    la laine des moutons;6€\n' +
+      '    star wars spécial noël;7€\n' +
+      'catégorie: poster\n' +
+      '    super bannière A2;10€\n' +
+      '    Sébastien Chabal sexy;10€\n' +
+      'catégorie: dessin à la demande\n' +
+      '    dessin A4 crayon;20€\n' +
+      '    dessin A4 aquarelle;150€';
+
+    $('[data-toggle="popover"]').popover();
+    $('#menu_button').on('click', function () {
+        $('#menu-dashboard').toggleClass('shown');
+    });
+    // use example in mass import
+    $('#use_example').on('click', function () {
+        $('#produits').val(massimportExample);
+        // $('#filling_zone input').click();
+    });
+    // intro js
+    $('#introjs_start').on('click', function () {
+
+        function startIntro() {
+            var intro = introJs();
+            intro.setOptions({
+                steps: [
+                    {
+                        element: document.querySelector('#caisse-now'),
+                        position: 'right',
+                        intro  : "Ceci est l'écran principal de la CaisseBliss, <strong>votre tableau de bord</strong> liste les produits que vous souhaitez vendre actuellement. Utilisez les flèches du clavier pour continuer la visite guidée."
+                    },
+                    {
+                        element: document.querySelector('#main_options'),
+                        position: 'bottom',
+                        intro  : "Les options d'affichage des boutons de produit permettent de visualiser ou non les stocks restants de vos produits, le nombre de produit vendus sur le festival en cours, et d'activer ou non le bouton de caddie de <strong>vente express</strong> à utiliser pour les clients qui n'achètent qu'un seul produit à la fois."
+                    },
+                    {
+                        element: document.querySelector('#client-now'),
+                        position: 'bottom',
+                        intro  : "<strong>L'espace commentaire </strong> lié à la vente en cours vous permet de prendre une note que vous retrouverez plus tard dans votre historique de vente. Il peut servir à savoir à qui vous faites une dédicace dans un livre par exemple."
+                    },{
+                        element: document.querySelector('#listing-products'),
+                        intro  : "<strong>La liste des produits </strong> les range par colonne de catégorie. Vous n'avez qu'a appuyer sur un produit pour l'ajouter à la liste de vente en cours. Et vous pouvez scroller horizontalement vos colonnes"
+                    },{
+                        element: document.querySelector('#sellings'),
+                        intro  : "<strong>La liste de vente </strong> permet de modifier le prix des produits si vous faites des remises spéciales pour un client particulier, et vous calcule le rendu de monnaie si le client ne paie pas l'appoint."
+                    },{
+                        element: document.querySelector('#choice-categories'),
+                        intro  : "<strong>Les options de catégories </strong> permettent d'afficher ou masquer certaines catégories si vous ne vendez pas tous vos produits à chaque festival."
+                    },
+                    {
+                        element: document.querySelector('#menu-dashboard'),
+                        intro  : "<strong>Le menu latéral</strong> vous permet de gérer vos produits, stocks, catégories. Conforme au RGPD par design de logiciel libre, Caisse Bliss vous permet d'exporter vos données et respecte votre vie privée"
+                    },
+                    {
+                        element: document.querySelector('#menu_festivals'),
+                        position: 'right',
+                        intro  : "Les festivals vous permettent de séparer vos ventes lors de différents évènements et d'obtenir des statistiques détaillées afin de vous permettre de connaître la rentabilité de chaque évènement"
+                    },
+                    {
+                        element: document.querySelector('#menu_series'),
+                        position: 'right',
+                        intro  : "Les séries de festivals permettent de relier des évènements similaires d'une édition à une autre. Par exemple Festival Harajuku 2018 et 2019, Japan Expo de toutes les années. Et ce afin de pouvoir voir des statistiques groupées dans la partie Historique."
+                    },
+                    {
+                        element: document.querySelector('#menu_previsionnel'),
+                        position: 'right',
+                        intro  : "<strong>La page de prévisionnel</strong> n'est pas reliée à vos ventes de produits mais permet de voir si votre commerce est viable en fonction de ce que vous gagnez et dépensez habituellement. Toujours utile."
+                    }, {
+                        element: document.querySelector('.user-info-link'),
+                        position: 'right',
+                        intro  : "Vous pouvez modifier vos informations de compte utilisateur (email, pseudo, mot de passe...) en cliquant sur votre pseudo"
+                    },
+                ]
+            });
+
+            intro.start();
+        }
+        startIntro()
+    })
+    // $('#introjs_start').click();
+});

assets/js/parts/main.js

@@ -1,6 +1,5 @@
 require('../../../node_modules/canvasjs/dist/canvasjs.3');
 
-var $ = require('jquery');
 // JS is equivalent to the normal "bootstrap" package
 // no need to set this to a variable, just require it
 require('bootstrap-sass');
@@ -8,52 +7,11 @@ require('bootstrap-sass');
 // require('bootstrap-sass/javascripts/bootstrap/tooltip');
 // require('bootstrap-sass/javascripts/bootstrap/popover');
 
-$(document).ready(function () {
+require('./globalActions');
-    let massimportExample = 'catégorie: livre\n' +
-      '    les moutaines;5€\n' +
-      '    la laine des moutons;6€\n' +
-      '    star wars spécial noël;7€\n' +
-      'catégorie: poster\n' +
-      '    super bannière A2;10€\n' +
-      '    Sébastien Chabal sexy;10€\n' +
-      'catégorie: dessin à la demande\n' +
-      '    dessin A4 crayon;20€\n' +
-      '    dessin A4 aquarelle;150€';
-
-    $('[data-toggle="popover"]').popover();
-    $('#menu_button').on('click', function () {
-        $('#menu-dashboard').toggleClass('shown');
-    });
-    // use example in mass import
-    $('#use_example').on('click', function () {
-        $('#produits').val(massimportExample);
-        // $('#filling_zone input').click();
-    });
-    // intro js
-    $('#introjs_start').on('click', function () {
-
-        function startIntro() {
-            var intro = introJs();
-            intro.setOptions({
-                steps: [
-                    {
-                        element: document.querySelector('#menu-dashboard'),
-                        intro  : "Ceci est l'écran principal de la CaisseBliss, votre tableau de bord liste les produits que vous souhaitez vendre"
-                    },
-                ]
-            });
-
-            intro.start();
-        }
-
-    })
-});
-
 require('./caisseCtrl');
 require('./dashboard');
 var PrevisionnelCtrl = require('./previsionnel');
 
-console.log('hello console for main.js');
 var stuff = ['initialstuff'];
 
 // TODO split controllers in other files

package.json

@@ -12,7 +12,7 @@
     "bootstrap": "^4.0.0",
     "canvasjs": "^1.8.1",
     "font-awesome": "^4.7.0",
-    "introjs": "^0.2.2",
+    "intro.js": "^2.9.3",
     "jquery": "1.12.2"
   }
 }