| @ -23,6 +23,9 @@ | |||||
| <script> | <script> | ||||
| $(document).ready(function(){ | $(document).ready(function(){ | ||||
| getMyAdressInfos(); | |||||
| $('#myNavbar').on('show.bs.collapse', function () { | $('#myNavbar').on('show.bs.collapse', function () { | ||||
| $('#logo_topisto').css({'height' : '30px','width' : '30px'}); | $('#logo_topisto').css({'height' : '30px','width' : '30px'}); | ||||
| $('#titre_topisto').css({'font-size' : '30px'}); | $('#titre_topisto').css({'font-size' : '30px'}); | ||||
| @ -66,6 +69,29 @@ | |||||
| }); | }); | ||||
| }); | }); | ||||
| /* | |||||
| * Récupéer les taux de change actuels | |||||
| * https://blockchain.info/ticker?cors=true | |||||
| * | |||||
| * Récupéer la balance de mon adresse | |||||
| * https://blockchain.info/q/addressbalance/15V7XfBX2Xn5uKpK3VuVngDg44TSKLtTSh?cors=true | |||||
| * | |||||
| * Calculer et afficher la balance en EUR et USD | |||||
| * | |||||
| */ | |||||
| function getMyAdressInfos() { | |||||
| var balance_url = 'https://blockchain.info/q/addressbalance/15V7XfBX2Xn5uKpK3VuVngDg44TSKLtTSh?cors=true'; | |||||
| $.get( balance_url, function( data ) { | |||||
| var balance = data/100000000; | |||||
| var btc_change = 'balance : ' + balance + ' ₿'; | |||||
| $.getJSON( 'https://blockchain.info/ticker?cors=true', function( data ) { | |||||
| btc_change += ' / '+ Math.round(data.USD['15m']*balance) + ' $'; | |||||
| btc_change += ' / '+ Math.round(data.EUR['15m']*balance) + ' €'; | |||||
| $('#BTC_CHANGE').html(btc_change); | |||||
| }); | |||||
| }); | |||||
| } | |||||
| </script> | </script> | ||||
| </head> | </head> | ||||
| @ -94,10 +120,18 @@ | |||||
| </div> | </div> | ||||
| </nav> | </nav> | ||||
| <div id="explorer" class="container-fluid bg-grey" style="padding-bottom:10px"> | |||||
| <div class="row"> | |||||
| <div class="col-sm-12 text-left"> | |||||
| <br>BTC adress : <a href="https://www.blockchain.com/btc/address/15V7XfBX2Xn5uKpK3VuVngDg44TSKLtTSh">15V7XfBX2Xn5uKpK3VuVngDg44TSKLtTSh</a> | |||||
| <br><div id="BTC_CHANGE"> ₿ - $ - €</div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div id="about" class="container-fluid"> | <div id="about" class="container-fluid"> | ||||
| <div class="row"> | <div class="row"> | ||||
| <div class="col-sm-8"> | <div class="col-sm-8"> | ||||
| <br><br><br> | |||||
| <h4>This site is a hobby.<br>It's also a testing place where i can do <a href="blog.php">things</a> that are impossible at work.</h4> | <h4>This site is a hobby.<br>It's also a testing place where i can do <a href="blog.php">things</a> that are impossible at work.</h4> | ||||
| <p class="text-justify">I like <b>surfing</b> and sailing on the ocean. But during longs winter nights, computing is fun. I'm interested into <b>cryptocurrencies</b>, computationnal art, datavisualisation. I know that <b>42</b> is the answer to <b>the Life, Universe and Everything Else</b>. As <b>Eto Demerzel</b> said to me, the <b>Seldon's Plan</b> will save the Galaxy. My favorites books are the <b>House of leaves</b>, the <b>Necronomicron</b> and the <b>DarkHold</b>. I also know that <b>great power comes with great responsibility</b>. I'm still in <b>the search of Captain Zero</b>, because <b>the Truth is out there</b>.</p> | <p class="text-justify">I like <b>surfing</b> and sailing on the ocean. But during longs winter nights, computing is fun. I'm interested into <b>cryptocurrencies</b>, computationnal art, datavisualisation. I know that <b>42</b> is the answer to <b>the Life, Universe and Everything Else</b>. As <b>Eto Demerzel</b> said to me, the <b>Seldon's Plan</b> will save the Galaxy. My favorites books are the <b>House of leaves</b>, the <b>Necronomicron</b> and the <b>DarkHold</b>. I also know that <b>great power comes with great responsibility</b>. I'm still in <b>the search of Captain Zero</b>, because <b>the Truth is out there</b>.</p> | ||||
| </div> | </div> | ||||
| @ -37,14 +37,13 @@ | |||||
| var pos = $(this).offset().top; | var pos = $(this).offset().top; | ||||
| var winTop = $(window).scrollTop(); | var winTop = $(window).scrollTop(); | ||||
| if (pos < winTop + 600) { | if (pos < winTop + 600) { | ||||
| blockchainExplorer.ajouterPreviousBlock(); | |||||
| blockchainExplorer.addBottomBlock(); | |||||
| $(this).addClass("slide"); | $(this).addClass("slide"); | ||||
| } | } | ||||
| }); | }); | ||||
| }); | }); | ||||
| blockchainExplorer.init(1); | blockchainExplorer.init(1); | ||||
| }); | }); | ||||
| function showInfos(element) | function showInfos(element) | ||||
| @ -0,0 +1,331 @@ | |||||
| 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 | |||||
| }; | |||||
| }(); | |||||
| @ -1,13 +1,11 @@ | |||||
| blockchainExplorer = function(){ | blockchainExplorer = function(){ | ||||
| // Init array | // 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 _known_blocks = null; | |||||
| var _liste_blocks = null; | |||||
| var _classes = ['bg-grey-even','bg-grey-odd']; | |||||
| var _cur_class = 0; | |||||
| var _cur_methode = 'hasard'; | |||||
| var _mode = 1; | var _mode = 1; | ||||
| function _precisionRound(number) { | function _precisionRound(number) { | ||||
| @ -19,8 +17,8 @@ blockchainExplorer = function(){ | |||||
| function _getblockNameFromHash(hash) | function _getblockNameFromHash(hash) | ||||
| { | { | ||||
| var retour = ''; | var retour = ''; | ||||
| if ( liste_blocks != null) | |||||
| liste_blocks.forEach(function(item){ | |||||
| if ( _ liste_blocks != null) | |||||
| _ liste_blocks.forEach(function(item){ | |||||
| if (hash == item.hash) retour = item.name; | if (hash == item.hash) retour = item.name; | ||||
| }); | }); | ||||
| return retour; | return retour; | ||||
| @ -29,7 +27,7 @@ blockchainExplorer = function(){ | |||||
| function _getblocHashFromName(name) | function _getblocHashFromName(name) | ||||
| { | { | ||||
| var retour = ''; | var retour = ''; | ||||
| liste_blocks.forEach(function(item){ | |||||
| _ liste_blocks.forEach(function(item){ | |||||
| if (name == item.name) retour = item.hash; | if (name == item.name) retour = item.hash; | ||||
| }); | }); | ||||
| return retour; | return retour; | ||||
| @ -40,9 +38,7 @@ blockchainExplorer = function(){ | |||||
| var contenu = ''; | var contenu = ''; | ||||
| var downloadingImage = new Image(); | var downloadingImage = new Image(); | ||||
| cur_height.push(block.height); | |||||
| cur_class = 1 - cur_class; | |||||
| _cur_class = 1 - _cur_class; | |||||
| blockName = _getblockNameFromHash(block.hash); | blockName = _getblockNameFromHash(block.hash); | ||||
| if (blockName != '') blockName = ' ( '+blockName+' )'; | if (blockName != '') blockName = ' ( '+blockName+' )'; | ||||
| @ -102,8 +98,9 @@ blockchainExplorer = function(){ | |||||
| if (_mode==1) div0.style.opacity=0.3; | if (_mode==1) div0.style.opacity=0.3; | ||||
| flag_nav = true; | flag_nav = true; | ||||
| }; | }; | ||||
| downloadingImage.src = 'images/block_image.php?methode='+ cur_methode+'&hash='+block.hash; | |||||
| downloadingImage.src = 'images/block_image.php?methode='+ _ cur_methode+'&hash='+block.hash; | |||||
| return true; | return true; | ||||
| } | } | ||||
| @ -112,7 +109,7 @@ blockchainExplorer = function(){ | |||||
| { | { | ||||
| var contenu = ''; | var contenu = ''; | ||||
| contenu += '<div id="block_'+block_height+'" class="container-fluid '+ classes[ cur_class]+'">'; | |||||
| contenu += '<div id="block_'+block_height+'" class="container-fluid '+ _ classes[ _ cur_class]+'">'; | |||||
| contenu += ' <div class="row">'; | contenu += ' <div class="row">'; | ||||
| contenu += '###BLOCK_DESC###'; | contenu += '###BLOCK_DESC###'; | ||||
| contenu += ' </div>'; | contenu += ' </div>'; | ||||
| @ -123,6 +120,7 @@ blockchainExplorer = function(){ | |||||
| function _addDivForBlock(block_height, onTop = false) | function _addDivForBlock(block_height, onTop = false) | ||||
| { | { | ||||
| var tmp; | |||||
| var contenu = _addDiv(block_height); | var contenu = _addDiv(block_height); | ||||
| var block_desc = ''; | var block_desc = ''; | ||||
| @ -130,12 +128,13 @@ blockchainExplorer = function(){ | |||||
| block_desc += ' <h2>BLOCK '+block_height+' ...</h2>'; | block_desc += ' <h2>BLOCK '+block_height+' ...</h2>'; | ||||
| block_desc += ' </div>'; | block_desc += ' </div>'; | ||||
| tmp = contenu.replace('###BLOCK_DESC###',block_desc) | |||||
| if (onTop) { | if (onTop) { | ||||
| tmp = contenu.replace('###BLOCK_DESC###',block_desc) | |||||
| tmp += $('#blockchain').html(); | tmp += $('#blockchain').html(); | ||||
| $('#blockchain').html(tmp); | $('#blockchain').html(tmp); | ||||
| } else { | } else { | ||||
| $('#blockchain').append( contenu.replace('###BLOCK_DESC###',block_desc) ); | |||||
| $('#blockchain').append( tmp ); | |||||
| } | } | ||||
| return true; | return true; | ||||
| } | } | ||||
| @ -145,23 +144,6 @@ blockchainExplorer = function(){ | |||||
| return _addDivForBlock('void'); | 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) | function _gotoBlock(block_name) | ||||
| { | { | ||||
| $(document).scrollTop( $("#explorer").offset().top ); | $(document).scrollTop( $("#explorer").offset().top ); | ||||
| @ -184,7 +166,7 @@ blockchainExplorer = function(){ | |||||
| return false; | return false; | ||||
| } | } | ||||
| liste_blocks['PREVIOUS'] = liste_blocks['BLOCK_'+cur_height[cur_height.length-1]]; | |||||
| _ liste_blocks['PREVIOUS'] = _ liste_blocks['BLOCK_'+cur_height[cur_height.length-1]]; | |||||
| cur_height.pop(); | cur_height.pop(); | ||||
| _toggleForwardBtn(); | _toggleForwardBtn(); | ||||
| @ -192,7 +174,7 @@ blockchainExplorer = function(){ | |||||
| $('#block_'+cur_height[cur_height.length-2]).slideDown(400, function() { | $('#block_'+cur_height[cur_height.length-2]).slideDown(400, function() { | ||||
| // Animation complete. | // Animation complete. | ||||
| $('#blockchain').children('div:last').remove(); | $('#blockchain').children('div:last').remove(); | ||||
| cur_class = 1 - cur_class; | |||||
| _ cur_class = 1 - _ cur_class; | |||||
| }); | }); | ||||
| } else { | } else { | ||||
| @ -203,10 +185,10 @@ blockchainExplorer = function(){ | |||||
| if (cur_height.length > 1) $('#block_'+cur_height[cur_height.length-2]).slideUp(); | if (cur_height.length > 1) $('#block_'+cur_height[cur_height.length-2]).slideUp(); | ||||
| block_hash = ''; | block_hash = ''; | ||||
| if (block_name != 'LAST') block_hash = '?block_hash='+ liste_blocks[block_name]; | |||||
| if (block_name != 'LAST') block_hash = '?block_hash='+ _ liste_blocks[block_name]; | |||||
| $.getJSON('data/getBlockInfo.php'+block_hash, function( data ) { | $.getJSON('data/getBlockInfo.php'+block_hash, function( data ) { | ||||
| liste_blocks['PREVIOUS'] = data.prev; | |||||
| liste_blocks['BLOCK_'+data.height] = data.hash; | |||||
| _ liste_blocks['PREVIOUS'] = data.prev; | |||||
| _ liste_blocks['BLOCK_'+data.height] = data.hash; | |||||
| _addInfoForBlock(data); | _addInfoForBlock(data); | ||||
| _toggleForwardBtn(); | _toggleForwardBtn(); | ||||
| @ -216,67 +198,63 @@ blockchainExplorer = function(){ | |||||
| return true; | return true; | ||||
| } | } | ||||
| function _a jouterTopBlock(data ) | |||||
| function _a ddTopBlock(data, flag = false ) | |||||
| { | { | ||||
| // Bloquer la navigation pendant le calcul | |||||
| if (!flag_nav) return false; | |||||
| flag_nav = false; | |||||
| if (flag) return "ajouterTopBlock"; | |||||
| // Maintenir la liste des blocks | |||||
| _liste_blocks['TOP'] = data.hash; | |||||
| _liste_blocks['BLOCK_'+data.height] = data.hash; | |||||
| // Ajouter un div | // Ajouter un div | ||||
| _addDivForBlock(data.height,true); | _addDivForBlock(data.height,true); | ||||
| // Mettre les infos dans le div | // Mettre les infos dans le div | ||||
| _addInfoForBlock(data); | |||||
| // 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; | |||||
| _addInfoForBlock(data); | |||||
| } | } | ||||
| function _a jouterPrevious Block() | |||||
| { | |||||
| // Bloquer la navigation pendant le calcul | |||||
| if (!flag_nav) return false ; | |||||
| flag_nav = false; | |||||
| function _addBottomBlock() | |||||
| { | |||||
| // Mettre les infos du block | |||||
| block_hash = '?block_hash='+_liste_blocks['BOTTOM']; | |||||
| $.getJSON('data/getBlockInfo.php'+block_hash, function( data ) { | |||||
| // Ajouter un div | |||||
| _addDivForBlock(cur_height[cur_height.length-1] - 1); | |||||
| _liste_blocks['BOTTOM'] = data.prev; | |||||
| _liste_blocks['BLOCK_'+data.height] = data.hash; | |||||
| _liste_blocks['LENGTH'] += 1; | |||||
| // Ajouter un div | |||||
| _addDivForBlock(data.height, false); | |||||
| // Mettre les infos du | |||||
| 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; | |||||
| // Mettre les infos dans le div | |||||
| _addInfoForBlock(data); | _addInfoForBlock(data); | ||||
| // Récursivité pour précharger par paquets | |||||
| if (_liste_blocks['LENGTH'] % 10) _addBottomBlock(); | |||||
| }); | }); | ||||
| } | } | ||||
| function _initBlockchain(block_name) | function _initBlockchain(block_name) | ||||
| { | { | ||||
| var block_hash = ''; | |||||
| $(document).scrollTop( $("#explorer").offset().top ); | $(document).scrollTop( $("#explorer").offset().top ); | ||||
| $('#blockchain').html(''); | $('#blockchain').html(''); | ||||
| cur_height = []; | |||||
| cur_class = 0; | |||||
| flag_nav = true; | |||||
| block_hash = ''; | |||||
| if (block_name != 'LAST') block_hash = '?block_hash='+_getblocHashFromName(block_name); | if (block_name != 'LAST') block_hash = '?block_hash='+_getblocHashFromName(block_name); | ||||
| $.getJSON('data/getBlockInfo.php'+block_hash, function( data ) { | $.getJSON('data/getBlockInfo.php'+block_hash, function( data ) { | ||||
| _liste_blocks['BOTTOM'] = data.prev; | |||||
| _liste_blocks['TOP'] = data.hash; | |||||
| _liste_blocks['BLOCK_'+data.height] = data.hash; | |||||
| _liste_blocks['LENGTH'] += 1; | |||||
| _addDivForBlock(data.height); | _addDivForBlock(data.height); | ||||
| _addInfoForBlock(data); | _addInfoForBlock(data); | ||||
| liste_blocks['PREVIOUS'] = data.prev; | |||||
| if (data.prev != '0000000000000000000000000000000000000000000000000000000000000000') | |||||
| _gotoBlock('PREVIOUS'); | |||||
| else | |||||
| _addDivForVoid(); | |||||
| // Ajouter le trigger sur les nouveaux blocks | |||||
| if (block_name == 'LAST') | |||||
| blockchainListener.addBlockHook(_ajouterTopBlock); | |||||
| blockchainListener.addBlockHook(_addTopBlock); | |||||
| _addBottomBlock(); | |||||
| }); | }); | ||||
| return true; | return true; | ||||
| @ -285,42 +263,47 @@ blockchainExplorer = function(){ | |||||
| function _blockSelectorChange() | function _blockSelectorChange() | ||||
| { | { | ||||
| _initBlockchain($('#blockSelector').val()); | _initBlockchain($('#blockSelector').val()); | ||||
| $('#fast_forward_btn').attr('data-original-title', $('#blockSelector').val()); | |||||
| } | } | ||||
| function _initBlockSelector() | function _initBlockSelector() | ||||
| { | { | ||||
| if (!isInitSelector) | |||||
| { | |||||
| // Init the selector | |||||
| var select = $('#blockSelector'); | |||||
| // Init the selector | |||||
| var select = $('#blockSelector'); | |||||
| $.each(liste_blocks, function (key, bloc) { | |||||
| select.append(new Option(bloc.name, bloc.name)); | |||||
| }); | |||||
| isInitSelector = true; | |||||
| } | |||||
| $.each(_liste_blocks, function (key, bloc) { | |||||
| select.append(new Option(bloc.name, bloc.name)); | |||||
| }); | |||||
| } | } | ||||
| function _init(mode = 1) | function _init(mode = 1) | ||||
| { | { | ||||
| _mode = mode; | _mode = mode; | ||||
| cur_height = []; | |||||
| if (_known_blocks == null) | |||||
| { | |||||
| $.getJSON('data/getKnownBlocksList.php', function( data ) { | |||||
| _liste_blocks = []; | |||||
| _liste_blocks['LENGTH'] = 0; | |||||
| $.getJSON('data/getKnownBlocksList.php', function( data ) { | |||||
| liste_blocks = data; | |||||
| _initBlockSelector(); | |||||
| if (cur_height.length == 0) _initBlockchain('LAST'); | |||||
| return true; | |||||
| }); | |||||
| _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; | |||||
| return 0; | |||||
| }); | |||||
| _initBlockchain('LAST'); | |||||
| return true; | |||||
| }); | |||||
| } | |||||
| } | } | ||||
| return { | return { | ||||
| ajouterPreviousBlock: _ajouterPreviousBlock, | |||||
| addTopBlock: _addTopBlock, | |||||
| addBottomBlock: _addBottomBlock, | |||||
| getblocHashFromName: _getblocHashFromName, | getblocHashFromName: _getblocHashFromName, | ||||
| ajouterTopBlock : _ajouterTopBlock, | |||||
| init: _init | init: _init | ||||
| }; | }; | ||||
| @ -9,10 +9,10 @@ blockchainListener = function(){ | |||||
| var _last_block = null; | var _last_block = null; | ||||
| var _last_block_hooks = []; | var _last_block_hooks = []; | ||||
| function _logBlockHash(leblock ) | |||||
| function _logBlockHash(leblock , flag ) | |||||
| { | { | ||||
| if (flag) return "logBlockHash"; | |||||
| console.log('Last Block detected : '+leblock.hash); | console.log('Last Block detected : '+leblock.hash); | ||||
| return true; | |||||
| }; | }; | ||||
| function _isBlockNew(leblock) | function _isBlockNew(leblock) | ||||
| @ -20,34 +20,43 @@ blockchainListener = function(){ | |||||
| return ((_last_block == null)||(_last_block.hash != leblock.hash)); | return ((_last_block == null)||(_last_block.hash != leblock.hash)); | ||||
| }; | }; | ||||
| function _ getLastBlockInfo () | |||||
| function _ lastBlockTrigger () | |||||
| { | { | ||||
| $.get( "data/getBlockInfo.php", function( data ) { | $.get( "data/getBlockInfo.php", function( data ) { | ||||
| if (_last_block_hooks.length > 0) | if (_last_block_hooks.length > 0) | ||||
| { | { | ||||
| if (_isBlockNew(data)) | if (_isBlockNew(data)) | ||||
| { | |||||
| { | |||||
| if (_last_block = data != null) | |||||
| { | |||||
| _last_block_hooks.forEach(function(trigger) { | |||||
| if (trigger instanceof Function) trigger(data); | |||||
| }); | |||||
| } | |||||
| _last_block = data; | _last_block = data; | ||||
| _last_block_hooks.forEach(function(trigger) { | |||||
| if (trigger instanceof Function) | |||||
| trigger(data); | |||||
| else | |||||
| console.log(trigger); | |||||
| }); | |||||
| } | } | ||||
| } | } | ||||
| }, "json" ); | }, "json" ); | ||||
| setTimeout(_ getLastBlockInfo , 30000); | |||||
| setTimeout(_lastBlockTrigger, 30000); | |||||
| }; | }; | ||||
| function _addBlockHook(addBlockHook){ | function _addBlockHook(addBlockHook){ | ||||
| _last_block_hooks.push(addBlockHook); | |||||
| var hookname = addBlockHook(null, true); | |||||
| var flag_add = true; | |||||
| _last_block_hooks.forEach(function(trigger) { | |||||
| if (trigger instanceof Function) | |||||
| { | |||||
| var local_hookname = trigger(null, true); | |||||
| flag_add = flag_add && (local_hookname == hookname); | |||||
| } | |||||
| }); | |||||
| if (flag_add) _last_block_hooks.push(addBlockHook); | |||||
| }; | }; | ||||
| function _init(){ | function _init(){ | ||||
| _last_block_hooks.push(_logBlockHash); | |||||
| _getLastBlockInfo(); | |||||
| _ addBlockHook (_logBlockHash); | |||||
| _ lastBlockTrigger (); | |||||
| }; | }; | ||||
| return {init: _init, addBlockHook: _addBlockHook}; | return {init: _init, addBlockHook: _addBlockHook}; | ||||