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

121
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();
@@ -267,8 +292,4 @@ blockchainExplorer = function(){
init: _init
};
}();
$(document).ready(function(){
blockchainExplorer.init();
});
}();