Affichage des ordres qui passent

diff --git a/templates/analyze_file.html b/templates/analyze_file.html
index d28ac7b..864678a 100644 (file)
--- 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 %}