From b60db5703bcfaf70812fd95facaaca04ee86051f Mon Sep 17 00:00:00 2001
From: MEUNIER Thibaud <thibaud.meunier@laposte.net>
Date: Thu, 11 Nov 2021 16:52:08 +0100
Subject: [PATCH] stable final 20211111

---
 index.php           | 27 ++++++-----------
 js/blockexplorer.js | 73 ++++++++++++++++++++++-----------------------
 2 files changed, 45 insertions(+), 55 deletions(-)

diff --git a/index.php b/index.php
index 1814679..552c39f 100644
--- a/index.php
+++ b/index.php
@@ -22,6 +22,9 @@
   <script src="js/blockexplorer.js" defer></script>
 
   <script>
+
+    var lastScroll = 0;
+
     $(document).ready(function(){
       // Mask navigator scrollbar
       // Doesn't work : can't scroll anymore
@@ -37,13 +40,10 @@
       });
 
       $(window).scroll(function() {
-        var element = document.getElementById('blockchain');
-        var offset = element.getBoundingClientRect().top - element.offsetParent.getBoundingClientRect().top;
-        const top = window.pageYOffset + window.innerHeight - offset;
-
-        if (top === element.scrollHeight) {
-          console.log("bottom");
-          blockchainExplorer.addBottomBlock();
+        if ( window.scrollY > (2200+lastScroll))
+        {
+            lastScroll = window.scrollY;
+            blockchainExplorer.addBottomBlock();
         }
       });
 
@@ -51,19 +51,10 @@
 
     });
 
-    var isInViewport = function (elem) {
-      var bounding = elem.getBoundingClientRect();
-      return (
-        bounding.top >= 0 &&
-        bounding.left >= 0 &&
-        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
-      );
-    };
-
     function showInfos()
     {
-      blockchainExplorer.init(parseInt($('#mode_selector').val()));
+      lastScroll = 0;
+      blockchainExplorer.init(parseInt($('#mode_selector').val()), document.getElementById("mode_checkbox").checked);
     }
 
     function toggleInfos()
diff --git a/js/blockexplorer.js b/js/blockexplorer.js
index 6423885..1e14318 100644
--- a/js/blockexplorer.js
+++ b/js/blockexplorer.js
@@ -59,7 +59,7 @@ blockchainExplorer = function(){
     ladateStr += "/" +("00" + ladate.getDate()).slice(-2);
     ladateStr += " " +("00" + ladate.getHours()).slice(-2);
     ladateStr += ":" +("00" + ladate.getMinutes()).slice(-2);
-    ladateStr += ":" +("00" + ladate.getSeconds()).slice(-2);
+    // ladateStr += ":" +("00" + ladate.getSeconds()).slice(-2);
 
     return ladateStr;
   }
@@ -75,25 +75,17 @@ blockchainExplorer = function(){
     _flag_nav = false;
 
     blockName = _getblockNameFromHash(block.hash);
-    if (_mode > 1)
-        if (block.hash == _liste_blocks['TOP'])
-        {
-            div_label = 'LAST';
-            if (blockName == '') blockName = 'LAST';
-        }
-    if (blockName == '') blockName = block.height;
-
-    opacity='1.0';
+    if (block.hash == _liste_blocks['TOP'])  blockName = 'LAST BLOCK';
+    if (blockName == '') blockName = 'height';
+    else blockName = '<b>'+blockName+'</b>';
+
     visibility='hidden';
-    if (_infos) {
-      opacity='0.3';
-      visibility='visible';
-    }
+    if (_infos) visibility='visible';
 
-    contenu += '<div id="img_'+block.height+'" style="color:black;opacity:'+opacity+';margin-right:30pxo;height:220px">';
-    contenu += '      <table class="block_infos" align="center" width="330px" height="220px" style="margin-top:3px;visibility:'+visibility+'">';
-    contenu += '        <tr><td>block</td><td align="right"><b>'+blockName+'</b></td></tr>';
-    contenu += '        <tr><td>timestamp</td><td align="right"><b>'+_formatDate(block.time)+'</b></td></tr>';
+    contenu += '<div id="img_'+block.height+'" style="color:black;height:220px">';
+    contenu += '      <table class="block_infos" width="100%" align="center" height="220px" style="margin-top:3px;visibility:'+visibility+';background:rgba(255,255,255,0.7)">';
+    contenu += '        <tr><td>'+blockName+'</td><td align="right"><b>'+block.height+'</b></td></tr>';
+    contenu += '        <tr><td>timestamp&nbsp;&nbsp;&nbsp;</td><td align="right"><b>'+_formatDate(block.time)+'</b></td></tr>';
     contenu += '        <tr><td>nonce</td><td align="right"><b>'+block.nonce+'</b></td></tr>';
     contenu += '        <tr><td>nb tx</td><td align="right"><b>'+block.n_tx+'</b></td></tr>';
     contenu += '        <tr><td>outputs</td><td align="right"><b>'+_precisionRound(block.topisto_outputs).toFixed(4)+'</b></td></tr>';
@@ -113,7 +105,6 @@ blockchainExplorer = function(){
       div0.style.backgroundPosition = "center";
       div0.style.backgroundSize = "auto 100%";
       _flag_nav = true;
-
     };
     downloadingImage.src = 'images/block_image.php?methode='+_cur_methode+'&hash='+block.hash;
 
@@ -143,7 +134,7 @@ blockchainExplorer = function(){
       var block_desc = '';
 
       block_desc += '    <div class="col-sm-12" id="info_'+block_height+'">';
-      block_desc += '      <h2>BLOCK '+block_height+' ...</h2>';
+      block_desc += '      <div class="loading">LOADING ...</div>';
       block_desc += '    </div>';
 
       tmp = contenu.replace('###BLOCK_DESC###',block_desc)
@@ -250,19 +241,28 @@ blockchainExplorer = function(){
               break;
           case 1:
               // En mode "Blocks Connus", on prend le prochain de la liste
-              _liste_blocks['BOTTOM'] = _known_blocks[_liste_blocks['LENGTH']-1].hash;
+              _liste_blocks['BOTTOM'] = _known_blocks[0].hash;
+              for(i = 0; i < _known_blocks.length; i++){ 
+                if (data.height == _known_blocks[i].height)
+                  _liste_blocks['BOTTOM'] = _known_blocks[i+1].hash;
+              }
+              //_liste_blocks['BOTTOM'] = _known_blocks[_liste_blocks['LENGTH']-1].hash;
               break;
       }
+
+      if (data.height > 0)
+        if (_liste_blocks['LENGTH'] % 15)
+          _addBottomBlock();
   }
 
   function _addBottomBlock()
   {  
-    console.log('add '+_liste_blocks['BOTTOM']);
-
     // Mettre les infos du block
     block_hash = '?block_hash='+_liste_blocks['BOTTOM'];
     $.getJSON('data/getBlockInfo.php'+block_hash, function( data ) {
 
+        console.log('add '+ data.height + ' : ' + _liste_blocks['BOTTOM']);
+
         // Ajouter un div
         _addDivForBlock(data.height, false);
     
@@ -271,10 +271,6 @@ blockchainExplorer = function(){
 
         // Maintenir la Liste
         _maintenirListe(data);
-
-        if (data.height > 0)
-          if (_liste_blocks['LENGTH'] % 5) _addBottomBlock();
-        
     });
   }
 
@@ -288,7 +284,6 @@ blockchainExplorer = function(){
     $(document).scrollTop( $("#explorer").offset().top );
     $('#blockchain').html('');
 
-
     if (block_name != 'LAST') block_hash_url += '?block_hash='+_getblocHashFromName(block_name);
 
     $.getJSON(block_hash_url, function( data ) {
@@ -297,14 +292,13 @@ blockchainExplorer = function(){
       _liste_blocks['TOP'] = data.hash;
 
       _addDivForBlock(div_label);        
+
       _addInfoForBlock(data);
 
       _maintenirListe(data);
 
       // Cela fout le boxon pour l'instant
       // blockchainListener.addBlockHook(_addTopBlock);
-
-      _addBottomBlock();
     });
 
     return true;
@@ -325,9 +319,11 @@ blockchainExplorer = function(){
     });
   }
 
-  function _init(mode = 1)
+  function _init(mode, infos)
   {
     _mode = mode;
+    _infos = infos;
+
     if (_known_blocks == null)
     {
       $.getJSON('data/getKnownBlocksList.php', function( data ) {
@@ -335,8 +331,8 @@ blockchainExplorer = function(){
         _known_blocks = data;
         _known_blocks.sort(function(a,b){
           // sort desc ...
-          if (a.height < b.height) return 1;
-          if (a.height > b.height) return -1;
+          if (parseInt(a.height) < parseInt(b.height)) return 1;
+          if (parseInt(a.height) > parseInt(b.height)) return -1;
           return 0;
         });
         return true;
@@ -351,14 +347,16 @@ blockchainExplorer = function(){
     var infos = Array.from(document.getElementsByClassName('block_infos'));
     _infos = ! _infos;
     infos.forEach((item, index) => {
-      if (_infos) {
-        item.style.visibility = 'visible';
-        item.style.background = 'rgba(255,255,255,0.5)';
-      }
+      if (_infos) item.style.visibility = 'visible'; 
       else item.style.visibility = 'hidden';
     });
   }
 
+  function _getLength() {
+    if ( _liste_blocks === null) return 0;
+    return _liste_blocks['LENGTH'];
+  }
+
   return {
 
     addTopBlock: _addTopBlock,
@@ -366,6 +364,7 @@ blockchainExplorer = function(){
     getblocHashFromName: _getblocHashFromName,
 
     toggleInfos: _toggleInfos,
+    getLength: _getLength,
 
     init: _init
   };