| @ -1,331 +0,0 @@ | |||||
| blockchainExplorer = function(){ | |||||
| // Init array | |||||
| var liste_blocks = null; | |||||
| var flag_nav = true; | |||||
| var classes = ['bg-grey-even','bg-grey-odd']; | |||||
| var cur_class = 0; | |||||
| var cur_height = []; | |||||
| var cur_methode = 'hasard'; | |||||
| var isInitSelector = false; | |||||
| var _mode = 1; | |||||
| function _precisionRound(number) { | |||||
| var precision = 4; | |||||
| var factor = Math.pow(10, precision); | |||||
| return Math.round((number/100000000) * factor) / factor; | |||||
| } | |||||
| function _getblockNameFromHash(hash) | |||||
| { | |||||
| var retour = ''; | |||||
| if (liste_blocks != null) | |||||
| liste_blocks.forEach(function(item){ | |||||
| if (hash == item.hash) retour = item.name; | |||||
| }); | |||||
| return retour; | |||||
| } | |||||
| function _getblocHashFromName(name) | |||||
| { | |||||
| var retour = ''; | |||||
| liste_blocks.forEach(function(item){ | |||||
| if (name == item.name) retour = item.hash; | |||||
| }); | |||||
| return retour; | |||||
| } | |||||
| function _addInfoForBlock(block) | |||||
| { | |||||
| var contenu = ''; | |||||
| var downloadingImage = new Image(); | |||||
| cur_height.push(block.height); | |||||
| cur_class = 1 - cur_class; | |||||
| blockName = _getblockNameFromHash(block.hash); | |||||
| if (blockName != '') blockName = ' ( '+blockName+' )'; | |||||
| contenu += ' <div style="height:220px;width:100%;display:block;position:absolute">'; | |||||
| if (_mode != 0) | |||||
| { | |||||
| contenu += '<div style="color:black;opacity:1.0;margin-right:30px">'; | |||||
| // contenu += ' <h2> <span style="font-size:12px">block</span> '+block.height+blockName+'</h2>'; | |||||
| //contenu += '<span style="font-size:4px"> </span>'; | |||||
| contenu += ' <table width="100%" style="margin-top:3px">'; | |||||
| //contenu += ' <tr><td>hash</td><td align="right"><b>'+block.hash+'</b></td></tr>'; | |||||
| //contenu += ' <tr><td>index</td><td align="right"><b>'+block.block_index+'</b></td></tr>'; | |||||
| contenu += ' <tr><td>height</td><td align="right"><b>'+block.height+'</b></td></tr>'; | |||||
| contenu += ' <tr><td>timestamp</td><td align="right"><b>'+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>'; | |||||
| contenu += ' <tr><td>inputs</td><td align="right"><b>'+_precisionRound(block.topisto_inputs).toFixed(4)+'</b></td></tr>'; | |||||
| contenu += ' <tr><td>fees</td><td align="right"><b>'+_precisionRound(block.topisto_fees).toFixed(4)+'</b></td></tr>'; | |||||
| contenu += ' <tr><td>reward</td><td align="right"><b>'+_precisionRound(block.topisto_reward).toFixed(4)+'</b></td></tr>'; | |||||
| contenu += ' </table>'; | |||||
| contenu += '</div>'; | |||||
| } | |||||
| contenu += ' </div>'; | |||||
| $('#info_'+block.height).html(contenu); | |||||
| contenu = ''; | |||||
| contenu += '<div id="img_'+block.height+'" style="'; | |||||
| contenu += 'height:220px;'; | |||||
| contenu += 'content: "";'; | |||||
| contenu += 'top: 0;'; | |||||
| contenu += 'left: 0;'; | |||||
| contenu += 'bottom: 0;'; | |||||
| contenu += 'right: 0;'; | |||||
| contenu += 'position: relative;'; | |||||
| contenu += 'z-index: -1; '; | |||||
| contenu += '"></div>' | |||||
| $('#info_'+block.height).append(contenu); | |||||
| downloadingImage.onload = function(){ | |||||
| // $('#img_'+block.height).attr('src', this.src); | |||||
| /* | |||||
| $('#img_'+block.height).attr('height', _height); | |||||
| $('#img_'+block.height).attr('width','auto'); | |||||
| */ | |||||
| var div0 = document.getElementById('img_'+block.height); | |||||
| div0.style.backgroundImage = "url(" + this.src + ")"; | |||||
| div0.style.backgroundRepeat = "no-repeat"; | |||||
| div0.style.backgroundPosition = "center"; | |||||
| div0.style.backgroundSize = "auto 100%"; | |||||
| if (_mode==1) div0.style.opacity=0.3; | |||||
| flag_nav = true; | |||||
| if (liste_blocks.length % 20) | |||||
| _gotoBlock(block.prev); | |||||
| }; | |||||
| downloadingImage.src = 'images/block_image.php?methode='+cur_methode+'&hash='+block.hash; | |||||
| return true; | |||||
| } | |||||
| function _addDiv(block_height) | |||||
| { | |||||
| var contenu = ''; | |||||
| contenu += '<div id="block_'+block_height+'" class="container-fluid '+classes[cur_class]+'">'; | |||||
| contenu += ' <div class="row">'; | |||||
| contenu += '###BLOCK_DESC###'; | |||||
| contenu += ' </div>'; | |||||
| contenu += '</div>'; | |||||
| return contenu; | |||||
| } | |||||
| function _addDivForBlock(block_height, onTop = false) | |||||
| { | |||||
| var tmp; | |||||
| var contenu = _addDiv(block_height); | |||||
| var block_desc = ''; | |||||
| block_desc += ' <div class="col-sm-12" id="info_'+block_height+'">'; | |||||
| block_desc += ' <h2>BLOCK '+block_height+' ...</h2>'; | |||||
| block_desc += ' </div>'; | |||||
| tmp = contenu.replace('###BLOCK_DESC###',block_desc); | |||||
| if (onTop) { | |||||
| tmp += $('#blockchain').html(); | |||||
| $('#blockchain').html(tmp); | |||||
| } else { | |||||
| $('#blockchain').append(tmp); | |||||
| } | |||||
| return true; | |||||
| } | |||||
| function _addDivForVoid() | |||||
| { | |||||
| return _addDivForBlock('void'); | |||||
| } | |||||
| function _toggleForwardBtn() | |||||
| { | |||||
| if (cur_height.length < 3) | |||||
| { | |||||
| $('#fast_forward_btn').removeClass('btn-success'); | |||||
| $('#fast_forward_btn').addClass('btn-secondary'); | |||||
| $('#btn-forward').removeClass('btn-info'); | |||||
| $('#btn-forward').addClass('btn-secondary'); | |||||
| } else { | |||||
| $('#fast_forward_btn').removeClass('btn-secondary'); | |||||
| $('#fast_forward_btn').addClass('btn-success'); | |||||
| $('#btn-forward').removeClass('btn-secondary'); | |||||
| $('#btn-forward').addClass('btn-info'); | |||||
| } | |||||
| return true; | |||||
| } | |||||
| function _gotoBlock(block_name) | |||||
| { | |||||
| $(document).scrollTop( $("#explorer").offset().top ); | |||||
| // Bloquer la navigation pendant le calcul | |||||
| if (!flag_nav) | |||||
| { | |||||
| window.alert('A block image is currently computed, please wait ...'); | |||||
| return false; | |||||
| } | |||||
| flag_nav = false; | |||||
| if (block_name == 'NEXT') | |||||
| { | |||||
| flag_nav = true; | |||||
| // Supprimer un block | |||||
| if (cur_height.length < 3) | |||||
| { | |||||
| window.alert('No Next Block, you are at '+$('#blockSelector').val()+' block !'); | |||||
| return false; | |||||
| } | |||||
| liste_blocks['PREVIOUS'] = liste_blocks['BLOCK_'+cur_height[cur_height.length-1]]; | |||||
| cur_height.pop(); | |||||
| _toggleForwardBtn(); | |||||
| $('#block_'+cur_height[cur_height.length-2]).slideDown(400, function() { | |||||
| // Animation complete. | |||||
| $('#blockchain').children('div:last').remove(); | |||||
| cur_class = 1 - cur_class; | |||||
| }); | |||||
| } else { | |||||
| // Ajouter un block | |||||
| _addDivForBlock(cur_height[cur_height.length-1] - 1); | |||||
| // Décaler d'un block vers le haut | |||||
| if (cur_height.length > 1) $('#block_'+cur_height[cur_height.length-2]).slideUp(); | |||||
| block_hash = ''; | |||||
| if (block_name != 'LAST') block_hash = '?block_hash='+liste_blocks[block_name]; | |||||
| $.getJSON('data/getBlockInfo.php'+block_hash, function( data ) { | |||||
| liste_blocks['PREVIOUS'] = data.prev; | |||||
| liste_blocks['BLOCK_'+data.height] = data.hash; | |||||
| _addInfoForBlock(data); | |||||
| _toggleForwardBtn(); | |||||
| }); | |||||
| } | |||||
| return true; | |||||
| } | |||||
| function _ajouterTopBlock(data, flag) | |||||
| { | |||||
| if (flag) return "ajouterTopBlock"; | |||||
| // Bloquer la navigation pendant le calcul | |||||
| if (!flag_nav) return false; | |||||
| flag_nav = false; | |||||
| // Ajouter un div | |||||
| _addDivForBlock(data.height,true); | |||||
| // Décaler le tableau cur_height par le haut | |||||
| cur_height.unshift(data.height); | |||||
| // Maintenir la liste des blocks | |||||
| liste_blocks['BLOCK_'+data.height] = data.hash; | |||||
| // Mettre les infos dans le div | |||||
| _addInfoForBlock(data); | |||||
| } | |||||
| function _ajouterPreviousBlock() | |||||
| { | |||||
| // Bloquer la navigation pendant le calcul | |||||
| if (!flag_nav) return false; | |||||
| flag_nav = false; | |||||
| // Ajouter un div | |||||
| _addDivForBlock(cur_height[cur_height.length-1] - 1); | |||||
| // Mettre les infos du block | |||||
| block_hash = '?block_hash='+liste_blocks['PREVIOUS']; | |||||
| $.getJSON('data/getBlockInfo.php'+block_hash, function( data ) { | |||||
| liste_blocks['PREVIOUS'] = data.prev; | |||||
| liste_blocks['BLOCK_'+data.height] = data.hash; | |||||
| _addInfoForBlock(data); | |||||
| }); | |||||
| } | |||||
| function _initBlockchain(block_name) | |||||
| { | |||||
| $(document).scrollTop( $("#explorer").offset().top ); | |||||
| $('#blockchain').html(''); | |||||
| cur_height = []; | |||||
| cur_class = 0; | |||||
| flag_nav = true; | |||||
| block_hash = ''; | |||||
| if (block_name != 'LAST') block_hash = '?block_hash='+_getblocHashFromName(block_name); | |||||
| $.getJSON('data/getBlockInfo.php'+block_hash, function( data ) { | |||||
| _addDivForBlock(data.height); | |||||
| _addInfoForBlock(data); | |||||
| liste_blocks['PREVIOUS'] = data.prev; | |||||
| if (data.prev != '0000000000000000000000000000000000000000000000000000000000000000') | |||||
| _gotoBlock('PREVIOUS'); | |||||
| else | |||||
| _addDivForVoid(); | |||||
| }); | |||||
| return true; | |||||
| } | |||||
| function _blockSelectorChange() | |||||
| { | |||||
| _initBlockchain($('#blockSelector').val()); | |||||
| $('#fast_forward_btn').attr('data-original-title', $('#blockSelector').val()); | |||||
| } | |||||
| function _initBlockSelector() | |||||
| { | |||||
| if (!isInitSelector) | |||||
| { | |||||
| // Init the selector | |||||
| var select = $('#blockSelector'); | |||||
| $.each(liste_blocks, function (key, bloc) { | |||||
| select.append(new Option(bloc.name, bloc.name)); | |||||
| }); | |||||
| isInitSelector = true; | |||||
| } | |||||
| } | |||||
| function _init(mode = 1) | |||||
| { | |||||
| _mode = mode; | |||||
| cur_height = []; | |||||
| $.getJSON('data/getKnownBlocksList.php', function( data ) { | |||||
| liste_blocks = data; | |||||
| _initBlockSelector(); | |||||
| if (cur_height.length == 0) _initBlockchain('LAST'); | |||||
| return true; | |||||
| }); | |||||
| } | |||||
| return { | |||||
| ajouterTopBlock: _ajouterTopBlock, | |||||
| ajouterPreviousBlock: _ajouterPreviousBlock, | |||||
| getblocHashFromName: _getblocHashFromName, | |||||
| ajouterTopBlock : _ajouterTopBlock, | |||||
| init: _init | |||||
| }; | |||||
| }(); | |||||