topisto/www
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Refonte Explorateur

Browse Source
This commit is contained in:
MEUNIER Thibaud
2019-12-21 19:54:39 +01:00
parent 315a82c2fb
commit 8621260f26
5 changed files with 469 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
about.php
View File

@@ -23,6 +23,9 @@
<script>
$(document).ready(function(){
getMyAdressInfos();
$('#myNavbar').on('show.bs.collapse', function () {
$('#logo_topisto').css({'height' : '30px','width' : '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 + ' &#8383';
$.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>
</head>
@@ -94,10 +120,18 @@
</div>
</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">&nbsp; &#8383 - &nbsp; $ - &nbsp; €</div>
</div>
</div>
</div>
<div id="about" class="container-fluid">
<div class="row">
<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>
<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>

3
index.php
View File

@@ -37,14 +37,13 @@
var pos = $(this).offset().top;
var winTop = $(window).scrollTop();
if (pos < winTop + 600) {
blockchainExplorer.ajouterPreviousBlock();
blockchainExplorer.addBottomBlock();
$(this).addClass("slide");
}
});
});
blockchainExplorer.init(1);
});
function showInfos(element)

331
js/blockexplorer copy.js Normal file
View File

@@ -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">&nbsp;</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
};
}();

155
js/blockexplorer.js
View File

@@ -1,13 +1,11 @@
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 _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;
function _precisionRound(number) {
@@ -19,8 +17,8 @@ blockchainExplorer = function(){
function _getblockNameFromHash(hash)
{
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;
});
return retour;
@@ -29,7 +27,7 @@ blockchainExplorer = function(){
function _getblocHashFromName(name)
{
var retour = '';
liste_blocks.forEach(function(item){
_liste_blocks.forEach(function(item){
if (name == item.name) retour = item.hash;
});
return retour;
@@ -40,9 +38,7 @@ blockchainExplorer = function(){
var contenu = '';
var downloadingImage = new Image();
cur_height.push(block.height);
cur_class = 1 - cur_class;
_cur_class = 1 - _cur_class;
blockName = _getblockNameFromHash(block.hash);
if (blockName != '') blockName = ' ( '+blockName+' )';
@@ -102,8 +98,9 @@ blockchainExplorer = function(){
if (_mode==1) div0.style.opacity=0.3;
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;
}
@@ -112,7 +109,7 @@ blockchainExplorer = function(){
{
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 += '###BLOCK_DESC###';
contenu += ' </div>';
@@ -123,6 +120,7 @@ blockchainExplorer = function(){
function _addDivForBlock(block_height, onTop = false)
{
var tmp;
var contenu = _addDiv(block_height);
var block_desc = '';
@@ -130,12 +128,13 @@ blockchainExplorer = function(){
block_desc += ' <h2>BLOCK '+block_height+' ...</h2>';
block_desc += ' </div>';
if (onTop) {
tmp = contenu.replace('###BLOCK_DESC###',block_desc)
if (onTop) {
tmp += $('#blockchain').html();
$('#blockchain').html(tmp);
} else {
$('#blockchain').append(contenu.replace('###BLOCK_DESC###',block_desc));
$('#blockchain').append(tmp);
}
return true;
}
@@ -145,23 +144,6 @@ blockchainExplorer = function(){
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 );
@@ -184,7 +166,7 @@ blockchainExplorer = function(){
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();
_toggleForwardBtn();
@@ -192,7 +174,7 @@ blockchainExplorer = function(){
$('#block_'+cur_height[cur_height.length-2]).slideDown(400, function() {
// Animation complete.
$('#blockchain').children('div:last').remove();
cur_class = 1 - cur_class;
_cur_class = 1 - _cur_class;
});
} else {
@@ -203,10 +185,10 @@ blockchainExplorer = function(){
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];
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;
_liste_blocks['PREVIOUS'] = data.prev;
_liste_blocks['BLOCK_'+data.height] = data.hash;
_addInfoForBlock(data);
_toggleForwardBtn();
@@ -216,67 +198,63 @@ blockchainExplorer = function(){
return true;
}
function _ajouterTopBlock(data)
function _addTopBlock(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
_addDivForBlock(data.height,true);
// 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;
}
function _ajouterPreviousBlock()
function _addBottomBlock()
{
// Bloquer la navigation pendant le calcul
if (!flag_nav) return false;
flag_nav = false;
// Mettre les infos du block
block_hash = '?block_hash='+_liste_blocks['BOTTOM'];
$.getJSON('data/getBlockInfo.php'+block_hash, function( data ) {
_liste_blocks['BOTTOM'] = data.prev;
_liste_blocks['BLOCK_'+data.height] = data.hash;
_liste_blocks['LENGTH'] += 1;
// Ajouter un div
_addDivForBlock(cur_height[cur_height.length-1] - 1);
_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);
// Récursivité pour précharger par paquets
if (_liste_blocks['LENGTH'] % 10) _addBottomBlock();
});
}
function _initBlockchain(block_name)
{
var block_hash = '';
$(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 ) {
_liste_blocks['BOTTOM'] = data.prev;
_liste_blocks['TOP'] = data.hash;
_liste_blocks['BLOCK_'+data.height] = data.hash;
_liste_blocks['LENGTH'] += 1;
_addDivForBlock(data.height);
_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;
@@ -285,42 +263,47 @@ blockchainExplorer = function(){
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) {
$.each(_liste_blocks, function (key, bloc) {
select.append(new Option(bloc.name, bloc.name));
});
isInitSelector = true;
}
}
function _init(mode = 1)
{
_mode = mode;
cur_height = [];
if (_known_blocks == null)
{
$.getJSON('data/getKnownBlocksList.php', function( data ) {
liste_blocks = data;
_initBlockSelector();
if (cur_height.length == 0) _initBlockchain('LAST');
_liste_blocks = [];
_liste_blocks['LENGTH'] = 0;
_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 {
ajouterPreviousBlock: _ajouterPreviousBlock,
addTopBlock: _addTopBlock,
addBottomBlock: _addBottomBlock,
getblocHashFromName: _getblocHashFromName,
ajouterTopBlock : _ajouterTopBlock,
init: _init
};

33
js/lastblock.js
View File

@@ -9,10 +9,10 @@ blockchainListener = function(){
var _last_block = null;
var _last_block_hooks = [];
function _logBlockHash(leblock)
function _logBlockHash(leblock, flag)
{
if (flag) return "logBlockHash";
console.log('Last Block detected : '+leblock.hash);
return true;
};
function _isBlockNew(leblock)
@@ -20,34 +20,43 @@ blockchainListener = function(){
return ((_last_block == null)||(_last_block.hash != leblock.hash));
};
function _getLastBlockInfo()
function _lastBlockTrigger()
{
$.get( "data/getBlockInfo.php", function( data ) {
if (_last_block_hooks.length > 0)
{
if (_isBlockNew(data))
{
_last_block = data;
if (_last_block = data != null)
{
_last_block_hooks.forEach(function(trigger) {
if (trigger instanceof Function)
trigger(data);
else
console.log(trigger);
if (trigger instanceof Function) trigger(data);
});
}
_last_block = data;
}
}
}, "json" );
setTimeout(_getLastBlockInfo, 30000);
setTimeout(_lastBlockTrigger, 30000);
};
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(){
_last_block_hooks.push(_logBlockHash);
_getLastBlockInfo();
_addBlockHook(_logBlockHash);
_lastBlockTrigger();
};
return {init: _init, addBlockHook: _addBlockHook};