From 8bf62c94e75b60bc18fe39c5f56f05ec8c289774 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Olivier=20T=C3=A9tard?= <olivier.tetard@miskin.fr>
Date: Mon, 16 Nov 2015 22:49:39 +0100
Subject: [PATCH] Affichage des ordres qui passent

---
 templates/analyze_file.html | 63 +++++++++++++++++++++++++++++--------
 1 file changed, 50 insertions(+), 13 deletions(-)

diff --git a/templates/analyze_file.html b/templates/analyze_file.html
index d28ac7b..864678a 100644
--- a/templates/analyze_file.html
+++ b/templates/analyze_file.html
@@ -4,13 +4,6 @@
 {% block femto_title %}Analyse d’un nouveau fichier son : {{ filename }}{% endblock %}
 
 {% block femto_content %}
-  <div id="waveform">
-    <div class="progress progress-striped active" id="progress-bar">
-      <div class="progress-bar progress-bar-info"></div>
-    </div>
-
-    <!-- Here be the waveform -->
-  </div>
 
   <div class="controls">
     <button class="btn btn-primary" data-action="play">
@@ -27,17 +20,58 @@
     </button>
   </div>
 
-  <pre>
-    {{ json }}
-  </pre>
+  <div id="waveform">
+    <div class="progress progress-striped active" id="progress-bar">
+      <div class="progress-bar progress-bar-info"></div>
+    </div>
+
+    <!-- Here be the waveform -->
+  </div>
+
+  <div id="ordres"></div>
+
+{% endblock %}
+
+{% block styles %}
+  {{ super() }}
+  <style>
+    .ordre .index:before { content: '[#'; }
+    .ordre .index:after { content: ']'; }
+    .ordre .index { color: grey; }
+    .ordre .type_ordre, .ordre .valeur { font-weight: bold; }
+  </style>
 {% endblock %}
 
 {% block scripts %}
   {{ super() }}
   <script src="{{ url_for('static', filename='wavesurfer.js/dist/wavesurfer.min.js') }}"></script>
+  <script src="{{ url_for('static', filename='wavesurfer.js/dist/plugin/wavesurfer.regions.min.js') }}"></script>
   <script>
+
+var json_file = {{ json | safe }};
 var wavesurfer = Object.create(WaveSurfer);
 
+function lancementOrdres() {
+    periode = json_file["période"] * 1000;
+
+    var ordres = $('<ul></ul>');
+    $('#ordres').append(ordres);
+
+    var currentItemIndex = 0;
+    var interval = setInterval(function() {
+	order = json_file["orders"][currentItemIndex];
+	console.log(order);
+
+	ordres.append(`<li class="ordre"><span class="index">${currentItemIndex}</span> <span class="type_ordre">${order['action']}</span> <span class="valeur">${order['valeur du CAC']}</span> <span class="order_details">(${order['cote']} × ${order['number']} actions)</span></li>`);
+
+	currentItemIndex += 1
+
+	if(currentItemIndex >= json_file["nombre d'ordres"]) {
+	    clearInterval(interval);
+	}
+    }, periode);
+}
+
 document.addEventListener('DOMContentLoaded', function () {
     var options = {
         container     : document.querySelector('#waveform'),
@@ -62,6 +96,10 @@ document.addEventListener('DOMContentLoaded', function () {
             color: 'rgba(0, 255, 0, 0.1)'
         });
     }
+
+    wavesurfer.on('play', function() {
+	lancementOrdres();
+    });
 });
 
 // Play at once when ready
@@ -139,6 +177,5 @@ document.addEventListener('DOMContentLoaded', function () {
         });
     });
 });
-
-</script>
-    {% endblock %}
+  </script>
+{% endblock %}
-- 
2.30.2