From 537f128f49cd96b1ad4001ff0cd581e37cd45a3f Mon Sep 17 00:00:00 2001
From: Thomas Muguet <t.muguet@thomasmuguet.info>
Date: Sun, 8 Oct 2017 22:18:26 +0200
Subject: [PATCH] Added progressbar while computing

---
 index.html          | 21 +++++++++++++++------
 src/css/default.css | 27 +++++++++++++++++++++++++++
 src/js/state.js     |  2 ++
 3 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index c08e8c6..48263d3 100644
--- a/index.html
+++ b/index.html
@@ -177,16 +177,25 @@
             <button class="export-kml-button"><span class="ico kml"></span></button>
         </div>
     </div>
-    <div id="map" style="display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 150px;"></div>
-    <div id="data" style="display: block; position: absolute; height: 150px; left: 0px; right: 0px; bottom: 0px;">
+    <div id="map"></div>
+    <div id="data" class="data">
         <canvas id="chart" width="100%" height="100%"></canvas>
     </div>
 
-    <div id="data-empty" style="display: block; position: absolute; height: 150px; left: 0px; right: 0px; bottom: 0px; background-color: #FFFFFF; text-align: center;"><h2><i class="fa fa-area-chart fa-3x" aria-hidden="true"></i><br/>Rien à montrer ici...</h2>Commencez à tracer votre itinéraire pour voir les données le concernant.</i></div>
-    <div id="data-invalid" style="display: none; position: absolute; height: 150px; left: 0px; right: 0px; bottom: 0px; background-color: #FFFFFF; text-align: center;"><h2><i class="fa fa-exclamation-triangle fa-3x" aria-hidden="true"></i><br/>Tracé invalide !</h2>Le tracé est invalide: l'itinéraire n'a pas pu être calculé avec le dernier marqueur. Déplacez le marqueur translucide pour ré-essayer un nouvel itinéraire.</i></div>
-    <div id="data-computing" style="display: none; position: absolute; height: 150px; left: 0px; right: 0px; bottom: 0px; background-color: #FFFFFF; text-align: center; overflow: hidden;"><h2><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i><br/><strong><span id="data-computing-progress"></span> <small>- <span id="data-computing-status">Calculs en cours...</span></small></h2></div>
+    <div id="data-empty" class="data">
+        <h2><i class="fa fa-area-chart fa-3x" aria-hidden="true"></i><br/>Rien à montrer ici...</h2>
+        Commencez à tracer votre itinéraire pour voir les données le concernant.
+    </div>
+    <div id="data-invalid" class="data">
+        <h2><i class="fa fa-exclamation-triangle fa-3x" aria-hidden="true"></i><br/>Tracé invalide !</h2>
+        Le tracé est invalide: l'itinéraire n'a pas pu être calculé avec le dernier marqueur. Déplacez le marqueur translucide pour ré-essayer un nouvel itinéraire.
+    </div>
+    <div id="data-computing" class="data">
+        <h2><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i><br/>
+            <strong><span id="data-computing-progress"></span> <small>- <span id="data-computing-status">Calculs en cours...</span></small></strong>
+            <div id="data-computing-progressbar-container"><div id="data-computing-progressbar"></div></div></h2></div>
     <div id="loading" style="display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: #FFFFFF; z-index: 5000; text-align: center;"><h2><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i><br/>Chargement en cours...</h2></div>
-    <div id="mobile-warning" style="display: none; position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 10000; background-color: #C0C0C0"><strong>Attention:</strong> ce site n'est pas destiné aux mobiles. <button>Ok, j'ai compris</button></div>
+    <div id="mobile-warning"><strong>Attention:</strong> ce site n'est pas destiné aux mobiles. <button>Ok, j'ai compris</button></div>
 
     <script src="js/map2gpx.min.js"></script>
 </body>
diff --git a/src/css/default.css b/src/css/default.css
index 11aa2ba..944c2f6 100644
--- a/src/css/default.css
+++ b/src/css/default.css
@@ -40,3 +40,30 @@ ul.legend.black {border-left-color: #303030;}
 .shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li .shepherd-button {background: #24b835; transition:background .2s ease-out;}
 .shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li .shepherd-button:hover {background: #27cc3a; transition:background .3s ease-in;}
 .shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li .shepherd-button.shepherd-button-secondary:hover {background: #f4f4f4; transition:background .3s ease-in;}
+
+#map {
+    display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 150px;
+}
+.data {
+    display: none;
+    position: absolute;
+    overflow: hidden;
+    height: 150px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    background-color: #FFFFFF;
+    text-align: center;
+}
+#data.data, #data-empty.data {
+    display: block;
+}
+#data-computing-progressbar-container {
+    width: 400px; height: 3px; background-color: grey; margin:0px auto;
+}
+#data-computing-progressbar {
+    height: 100%; width: 0%; background-color: #24b835;
+}
+#mobile-warning {
+    display: none; position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 10000; background-color: #C0C0C0;
+}
\ No newline at end of file
diff --git a/src/js/state.js b/src/js/state.js
index be3c35e..faa9db9 100644
--- a/src/js/state.js
+++ b/src/js/state.js
@@ -7,6 +7,7 @@
 
     const $h2 = $('#data-computing h2');
     const $progress = $('#data-computing-progress');
+    const $progressbar = $('#data-computing-progressbar');
     const $status = $('#data-computing-status');
     const $pending = $('#data-computing-pending');
 
@@ -61,6 +62,7 @@
             p = _progress / _total;
 
         $progress.text(Math.round(p * 100) + '%');
+        $progressbar.css('width', Math.round(p * 100) + '%');
 
         if (Math.round(p * 100) == 42)
             $('<div><small>La grande question sur la vie, l\'univers et le reste répondue</small></div>').insertAfter($h2).fadeOut(400, function () {this.remove();});