système de console et timer de block

index.php

@@ -17,6 +17,7 @@
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
+  <script src="js/console.js" defer></script>
   <script src="js/lastblock.js" defer></script>
   <script src="js/blockexplorer.js" defer></script>
 
@@ -108,6 +109,7 @@
 </div>
 
 <script>
+  var lastBlockTime = null;
   function changeExploreBlock()
   {
     $('#img_explorer').attr('src', 'images/loading.gif');   
@@ -125,9 +127,57 @@
       $('#img_explorer').attr('src', this.src);   
     };
     downloadingImage.src = 'images/block_image.php?methode=hasard&hash='+le_block.hash;
+    lastBlockTime = le_block.time;
+    topistoConsole.log('Time last block : '+lastBlockTime);
+    compteurTemps();
   }
+
+  function formatNumber(myNumber, digits)
+  {
+    return ('0' + myNumber).slice(-1*digits);
+  }
+
+  function getBlockDate(str_date)
+  {
+    return new Date(
+        str_date.slice(0,4),
+        str_date.slice(5,7)-1,
+        str_date.slice(8,10),
+        str_date.slice(11,13),
+        str_date.slice(14,16),
+        str_date.slice(17,19)
+    );
+  }
+
+  function compteurTemps()
+  {
+    if (lastBlockTime == null) return false;
+    var d1 = getBlockDate(lastBlockTime);
+    var d2 = new Date();
+    var msec = d2 - d1;
+    var yyyy = Math.floor(msec / 365 / 24 / 1000 / 60 / 60);
+    msec -= yyyy * 365 * 24 * 1000 * 60 * 60;
+    var jj = Math.floor(msec / 24 / 1000 / 60 / 60);
+    msec -= jj * 24 * 1000 * 60 * 60;
+    var hh = formatNumber(Math.floor(msec / 1000 / 60 / 60),2);
+    msec -= hh * 1000 * 60 * 60;
+    var mm = formatNumber(Math.floor(msec / 1000 / 60),2);
+    msec -= mm * 1000 * 60;
+    var ss = formatNumber(Math.floor(msec / 1000),2);
+    msec -= ss * 1000;
+    var libel = 'Elapsed Time since that block : ';
+    if (yyyy > 0) libel += yyyy+' year(s) ';
+    if (jj > 0) libel += jj+' day(s) ';
+    if (hh > 0) libel += hh+' hour(s) ';
+    if (mm > 0) libel += mm+ ' min ';
+    if (ss > 0) libel += ss+' s';
+    $('#showElapsedTime').html(libel);
+    return true;
+  }
+
   $(document).ready(function(){
       blockchainListener.addBlockHook(changeExploreBlockDrawing);
+      setInterval(compteurTemps, 1000);
   });
 </script>
 
@@ -145,7 +195,7 @@
       <br>
       <h2>Explore the Bitcoin's Blockchain</h2>
       <h4>This is a drawing of the <select id="blockSelector" onchange="javascript:changeExploreBlock()"><option selected value="LAST">LAST</option></select> block of the Bitcoin's Blockchain.</h4>
-      <a href="explorer.php">Click here to see the other blocks</a>
+      <div id="showElapsedTime">&nbsp;</div><br><a href="explorer.php">Click here to see the other blocks</a>
     </div>
   </div>
 </div>

js/console.js

@@ -0,0 +1,27 @@
+/*
+ * Ce module fournit un log personnalisé
+ */
+topistoConsole = function(){
+
+  var _flag       = true;
+  
+  function _log(texte)
+  {
+    if (_flag) console.log(texte);
+    return _flag;
+  };
+
+  function _on()
+  {
+    _flag = true;
+    return _flag;
+  };
+
+  function _off()
+  {
+    _flag = false;
+    return _flag;
+  };
+
+  return {log: _log, on: _on, off: _off};
+}();

js/lastblock.js

@@ -1,5 +1,8 @@
 /*
  * Ce module permet d'écouter la blockchain
+ * Il maintient un tableau de hooks
+ * Il vérifie l'existence d'un nouveau block toutes les 30s
+ * Si un nouveau block est détecté, les hooks sont lancés un par un
  */
 blockchainListener = function(){
 
@@ -23,8 +26,8 @@ blockchainListener = function(){
       if (_isBlockNew(data))
       {           
         _last_block = data;
-        _last_block_hooks.forEach(function(element) {
+        _last_block_hooks.forEach(function(trigger) {
-          element(data);
+          trigger(data);
         });
       } 
     }, "json" );