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

Superposer l'image et les infos. Avec une checkbox

Browse Source
This commit is contained in:
MEUNIER Thibaud
2019-07-28 08:52:38 +02:00
parent c0239d260e
commit 4301ad5cb5
2 changed files with 84 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
index.php
View File

@@ -22,6 +22,7 @@
<script>
$(document).ready(function(){
$('#myNavbar').on('show.bs.collapse', function () {
$('#logo_topisto').css({'height' : '30px','width' : '30px'});
$('#titre_topisto').css({'font-size' : '30px'});
@@ -41,7 +42,18 @@
}
});
});
blockchainExplorer.init(1);
});
function showInfos(element)
{
$('#blockchain').html('');
flag = 1;
if (!element.checked) flag = 0;
blockchainExplorer.init(flag);
}
</script>
</head>
@@ -74,6 +86,7 @@
<div class="row">
<div class="col-sm-12 text-right">
<br>A BTC blockchain explorer<br>Scroll down to see the previous blocks<br>
<label>show infos&nbsp;</label><input type="checkbox" onchange="showInfos(this)" checked>
</div>
</div>
</div>

119
js/blockexplorer.js
View File

@@ -8,6 +8,7 @@ blockchainExplorer = function(){
var cur_height = [];
var cur_methode = 'hasard';
var isInitSelector = false;
var _mode = 1;
function _precisionRound(number) {
var precision = 4;
@@ -35,7 +36,6 @@ blockchainExplorer = function(){
function _addInfoForBlock(block)
{
var height = '300px';
var contenu = '';
var downloadingImage = new Image();
@@ -46,25 +46,59 @@ blockchainExplorer = function(){
blockName = _getblockNameFromHash(block.hash);
if (blockName != '') blockName = ' ( '+blockName+' )';
contenu += ' <h2> <span style="font-size:12px">block</span> '+block.height+blockName+'</h2>';
contenu += ' <table width="100%">';
//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>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 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:12px">';
//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>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');
// $('#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;
};
downloadingImage.src = 'images/block_image.php?methode='+cur_methode+'&hash='+block.hash;
@@ -72,48 +106,36 @@ blockchainExplorer = function(){
return true;
}
function _addDivForBlock(block_height)
function _addDiv(block_height)
{
var contenu = '';
contenu += '<div id="block_'+block_height+'" class="container-fluid '+classes[cur_class]+'">';
contenu += ' <div class="row">';
contenu += ' <div class="col-sm-8" id="info_'+block_height+'">';
contenu += ' <h2>COMPUTING ...</h2>';
contenu += ' </div>';
contenu += ' <div class="col-sm-4 text-right">';
contenu += ' <div width="100%" class="text-center">';
contenu += ' <img id="img_'+block_height+'" src="images/loading.gif" class="img-responsive"></img>';
contenu += ' </div>';
contenu += ' </div>';
contenu += '###BLOCK_DESC###';
contenu += ' </div>';
contenu += '</div>';
$('#blockchain').append(contenu);
return contenu;
}
function _addDivForBlock(block_height)
{
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>';
$('#blockchain').append(contenu.replace('###BLOCK_DESC###',block_desc));
return true;
}
function _addDivForVoid()
{
var contenu = '';
contenu += '<div id="the_void" class="container-fluid '+classes[cur_class]+'">';
contenu += ' <div class="row">';
contenu += ' <div class="col-sm-8">';
contenu += ' <h2>the VOID ... </h2>';
contenu += ' </div>';
contenu += ' <div class="col-sm-4 text-right">';
contenu += ' <div width="100%" class="text-center">';
contenu += ' <img src="images/loading.gif" class="img-responsive"></img>';
contenu += ' </div>';
contenu += ' </div>';
contenu += ' </div>';
contenu += '</div>';
$('#blockchain').append(contenu);
return true;
return _addDivForBlock('void');
}
function _toggleForwardBtn()
@@ -250,8 +272,11 @@ blockchainExplorer = function(){
}
}
function _init()
function _init(mode = 1)
{
_mode = mode;
cur_height = [];
$.getJSON('data/getKnownBlocksList.php', function( data ) {
liste_blocks = data;
_initBlockSelector();
@@ -268,7 +293,3 @@ blockchainExplorer = function(){
init: _init
};
}();
$(document).ready(function(){
blockchainExplorer.init();
});