home.html

<div class="row">
    <div class="col-sm-6">
        <div class="cardpad card">
            <div class="card-header">
                <h2>Network status</h2>
                <div class="nodes float-right">
                    <div id="btor1" class="float-right" title="BTOR1 nodes" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="">
                        <i class="fas fa-plug"></i>
                    </div>
                    <div id="btor2" class="float-right" title="BTOR2 nodes" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="">
                        <i class="fas fa-plug"></i>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <p>
                    <span data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Current mined block height">
                        <i class="fa fa-bars"></i> Height: <span id="blockchainHeight" data-height="0"></span>
                    </span>
                </p>
                <p>
                    <span data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Based on the current mined block">
                        <i class="fas fa-tachometer-alt"></i> Instant Hash Rate: <span id="networkHashrate"></span>
                    </span>
                </p>
                <p>
                    <span data-toggle="popover" data-trigger="hover" data-placement="top" data-content="On the last 31 blocks">
                        <i class="fas fa-percent"></i></i> Average Hash Rate: <span id="averageHashrate"></span>
                    </span>
                </p>
                <p>
                    <span data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Difficulty of the current mined block">
                        <i class="fas fa-microchip"></i> Next Difficulty: <span id="nextDifficulty"></span>
                    </span>
                </p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="cardpad card">
            <div class="card-header">
                <h2>Supply status</h2>
            </div>
            <div class="card-body">
                <p>
                    <span data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Already mined coins">
                        <i class="far fa-money-bill-alt"></i> Current Supply: <span id="alreadyGeneratedCoins"></span>
                    </span>
                </p>
                <p>
                    <span data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Percentage of overall mined coins">
                        <i class="fas fa-university"></i> Total emission: <span id="supplypercent"></span>
                    </span>
                </p>

                <p>
                    <span data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Already transactions done">
                    <i class="fas fa-exchange-alt"></i> Total transactions: <span id="alreadyGeneratedTransactions"></span>
                    </span>
                </p>
                <p>
                    <span data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Reward of the last found block">
                        <i class="fas fa-piggy-bank"></i> Last Reward: <span id="networkLastReward"></span>
                    </span>
                </p>
            </div>
        </div>
    </div>
    <div class="col-sm-12">
    <div class="cardpad card">
        <div class="card-body">
            <div class="input-group search">
                <input id="txt_search" class="form-control" placeholder="Search for block number / block hash / transaction hash">
                <div class="input-group-append">
                    <button id="btn_search" class="btn btn-outline-secondary" type="button"><i class="fa fa-search"></i> Search
                    </button>
                </div>
            </div>
        </div>
    </div>
    </div>
</div>

<div class="cardpad card">
    <div class="card-header">
        <span data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Waiting transaction(s) in pool" id="nb_tx"></span>
        <i id="tx_updated" class="fas fa-sync fa-spin"></i>
    </div>
    <div id="tx_table" class="card-body table-responsive d-none">
        <table class="table table-hover">
            <thead>
            <tr>
                <th><i class="fas fa-ellipsis-h"></i> Transaction hash</th>
                <th><i class="fas fa-donate"></i> Fee</th>
                <th><i class="fas fa-dollar-sign"></i> Total Amount</th>
                <th><i class="far fa-hdd"></i> Size</th>
            </tr>
            </thead>
            <tbody id="transactions_rows">

            </tbody>
        </table>
    </div>
</div>

<div class="cardpad card">
    <div class="card-header">
        Last 10 blocks found
    </div>
    <div id="block_table" class="card-body table-responsive">
        <table class="table table-hover">
            <thead>
            <tr>
                <th><i class="fa fa-bars"></i> Height</th>
                <th><i class="fas fa-microchip"></i> Difficulty</th>
                <th><i class="fas fa-ellipsis-h"></i> Block Hash</th>
                <th><i class="far fa-clock"></i> Time found</th>
                <th><i class="far fa-hdd"></i> Size</th>
                <th><i class="fas fa-exchange-alt"></i> tx</th>
            </tr>
            </thead>
            <tbody id="blocks_rows">

            </tbody>
        </table>
    </div>
</div>

<script>
    // Current page handlers (whe should know lastMinedBlockHeader)
    currentPage = {
        destroy: function () {
            if (xhrGetCurrentHeight) xhrGetCurrentHeight.abort();
            if (xhrGetLastMinedBlockDetails) xhrGetLastMinedBlockDetails.abort();
            if (xhrGetLastBlocks) xhrGetLastBlocks.abort();
            if (xhrGetTxPool) xhrGetTxPool.abort();
            if (xhrgetSeedsStatus) xhrgetSeedsStatus.abort();
            if(typeof txPulse !== 'undefined') {
                clearTimeout(txPulse);
            }
            if(typeof tx_wheel !== 'undefined') {
                clearTimeout(tx_wheel);
            }
        },
        init: function (){
            if(typeof poolUpdate !== 'undefined') {
                clearTimeout(poolUpdate);
            }
            if(typeof poolPulse !== 'undefined') {
                clearTimeout(poolPulse);
            }
            currentPage.update();
        },
        update: function () {
            if ((typeof lastMinedBlockHeader !== 'undefined') && parseInt(lastMinedBlockHeader.block_header.height, 10) !== parseInt($('#blockchainHeight').attr('data-height'), 10)) {
                updateText('networkLastReward', getReadableCoins(lastMinedBlockHeader.block_header.reward, 2));
                getCurrentMinedBlock();
                getLastMinedBlockDetails();
                getBlocks();
                getTxPool();
            }
            getSeedsStatus();
        }
    };

    // Current page functions.

    var xhrgetSeedsStatus;
    function getSeedsStatus(){
        if (xhrgetSeedsStatus) xhrgetSeedsStatus.abort();
        for (let i = 0, len = seedsNodes.length; i < len; i++) {
            xhrgetSeedsStatus = $.ajax({
                url: seedsNodes[i].url + '/getinfo',
                method: "GET",
                dataType: 'json',
                cache: 'false',
                timeout: 15000,
                servId: seedsNodes[i].id,
            })
                .done(function (data) {
                    renderSeeds(this.servId,data);
                })
                .fail(function (xhrGetCurrentPoolStat, status) {
                })
        }

    }

    function renderSeeds (servId,data) {
        let seedInfo = '';
        let seedError = false;
        if(data.status == 'OK'){
            // test if node is synced
            if( Math.abs( lastMinedBlockHeader.block_header.height - data.height ) > 1){
                seedInfo = seedInfo + data.height + '/'  + lastMinedBlockHeader.block_header.height+'<br/>';
                seedError = true;
            } else { // synced
                seedInfo = seedInfo + data.status + ', height : '+ data.height + '<br/>';
            }
        } else { // node is unreachable
            seedInfo = seedInfo + data.status + '<br/>';
            seedError = true;
        }
        if(seedError){
            $('#'+servId).removeClass('text-success');
            $('#'+servId).addClass('text-danger');
        } else {
            $('#'+servId).removeClass('text-danger');
            $('#'+servId).addClass('text-success');
        }

        $('#'+servId).attr('data-content', '<pre>'+seedInfo+'</pre>');
    }

    var xhrGetCurrentHeight;
    // get last block template (current mining block)
    function getCurrentMinedBlock() {
        if (xhrGetCurrentHeight) xhrGetCurrentHeight.abort();
        xhrGetCurrentHeight = $.ajax({
             url: api + '/getinfo',
             method: "GET",
             dataType: 'json',
             cache: 'false'
        })
            .done(function (data) {
                if (data.hasOwnProperty('difficulty')) {
                    updateText('networkHashrate', getReadableHashRateString(data.difficulty / coinDifficultyTarget));
                    $('#networkHashrate').attr('data-globalHR', (data.difficulty / coinDifficultyTarget).toString());
                    updateText('nextDifficulty', data.difficulty.toString());
                    $('#blockchainHeight').attr('data-height', data.network_height);
                    updateText('blockchainHeight', data.network_height);
                } else {
                    showalert('alert-danger','Core error : ',data.error.message);
                    $('#loading').hide();
                }
            })
            .fail(function (xhrGetCurrentHeight, textStatus) {
                if (textStatus != "abort") {
                    showalert('alert-danger','Request error : ',textStatus);
                    $('#loading').hide();
                }
            });
    }

    var xhrGetLastMinedBlockDetails;
    // get last mined block detail
    function getLastMinedBlockDetails() {
        if (xhrGetLastMinedBlockDetails) xhrGetLastMinedBlockDetails.abort();
        xhrGetLastMinedBlockDetails = $.ajax({
            url: api + '/json_rpc',
            method: "POST",
            data: JSON.stringify({
                jsonrpc: "2.0",
                id: "2",
                method: "f_block_json",
                params: {
                    hash: lastMinedBlockHeader.block_header.hash
                }
            }),
            dataType: 'json',
            cache: 'false'
        })
            .done(function (data) {
                if (data.hasOwnProperty('result')) {
                    let lastMinedBlockDetails = data.result;
                    updateText('alreadyGeneratedCoins', shortenLargeNumber(lastMinedBlockDetails.block.alreadyGeneratedCoins / coinUnits, 6, 0));
                    updateText('supplypercent', (lastMinedBlockDetails.block.alreadyGeneratedCoins / 180000000).toFixed(2) + ' %');
                    updateText('alreadyGeneratedTransactions', shortenLargeNumber(lastMinedBlockDetails.block.alreadyGeneratedTransactions, 3, 1));
                } else {
                    showalert('alert-danger','Core error : ',data.error.message);
                    $('#loading').hide();
                }
            })
            .fail(function (xhrGetLastMinedBlockDetails, textStatus) {
                if (textStatus != "abort") {
                    showalert('alert-danger','Request error : ',textStatus);
                    $('#loading').hide();
                }
            });
    }

    var xhrGetLastBlocks;
    // Get last 31 blocks
    function getBlocks() {
        if (xhrGetLastBlocks) xhrGetLastBlocks.abort();
        xhrGetLastBlocks = $.ajax({
            url: api + '/json_rpc',
            method: "POST",
            data: JSON.stringify({
                jsonrpc: "2.0",
                id: "4",
                method: "f_blocks_list_json",
                params: {
                    height: lastMinedBlockHeader.block_header.height
                }
            }),
            dataType: 'json',
            cache: 'false'
        })
            .done(function (data) {
                if (data.hasOwnProperty('result')) {
                    let lastBlocksList = data.result.blocks;
                    renderBlocks(lastBlocksList);
                } else {
                    showalert('alert-danger','Core error : ',data.error.message);
                    $('#loading').hide();
                }
            })
            .fail(function (xhrGetLastBlocks, textStatus) {
                if (textStatus != "abort") {
                    showalert('alert-danger','Request error : ',textStatus);
                    $('#loading').hide();
                }
            });
    }

    // Handle Blocks list

    function renderBlocks(blocksList) {
        let sumDiff = 0;
        $('#blocks_rows').empty();
        for (let i = 0; i < blocksList.length; i++) {
            if (i < 10) {
                let blockElement = getBlockRowElement(blocksList[i]);
                $('#blocks_rows').append(blockElement);
            }
            sumDiff += blocksList[i].difficulty;
        }
        let averageHashRate = sumDiff / 31;
        updateText('averageHashrate', getReadableHashRateString(averageHashRate / coinDifficultyTarget));
        $('#loading').hide();
    }

    function getBlockRowElement(block) {
        const row = document.createElement('tr');
        let columns =
            '<td>' + block.height + '</td>' +
            '<td>' + block.difficulty + '</td>' +
            '<td>' + formatBlockLink(block.hash) + '</td>' +
            '<td>' + formatDate(block.timestamp) + '</td>' +
            '<td>' + block.cumul_size + '</td>' +
            '<td>' + block.tx_count + '</td>';
        row.innerHTML = columns;
        return row;
    }

    var xhrGetTxPool;
    // Get current mempool update is handled by another timeout we have to kill on destroy
    function getTxPool() {
        if (xhrGetTxPool) xhrGetTxPool.abort();
        xhrGetTxPool = $.ajax({
            url: api + '/json_rpc',
            method: "POST",
            data: JSON.stringify({
                jsonrpc: "2.0",
                id: "3",
                method: "f_on_transactions_pool_json"
            }),
            dataType: 'json',
            cache: 'false'
        })
            .done(function (data) {
                if (data.hasOwnProperty('result')) {
                    txPool = data.result;
                    updateText('nb_tx', txPool.transactions.length.toString() + ' transaction' + (txPool.transactions.length != 1 ? 's' : '') + ' in pool');
                    $('#transactions_rows').empty();
                    if (txPool.transactions.length > 0) {
                        renderTransactions(txPool.transactions);
                        $('#tx_table').removeClass('d-none');
                    } else {
                        $('#tx_table').addClass('d-none');
                    }
                } else {
                    showalert('alert-danger','Core error : ',data.error.message);
                    $('#loading').hide();
                }
            })
            .fail(function (xhrGetTxPool, textStatus) {
                if (textStatus != "abort") {
                    showalert('alert-danger','Request error : ',textStatus);
                    $('#loading').hide();
                }
            })
            .always(function () {
                txPulse = setTimeout(function () {
                    console.log('tx tick');
                    pulseTxUpdate();
                    getTxPool();
                }, 16000);
            });
    }
    // Handle transaction pool
    function getTransactionCells(transaction) {
        return '<td><a href="?hash=' + transaction.hash + '#pool_transaction">' + transaction.hash + '</a></td>' +
            '<td>' + getReadableCoins(transaction.fee, 2, true) + '</td>' +
            '<td>' + getReadableCoins(transaction.amount_out, 2, false) + '</td>' +
            '<td>' + transaction.size + '</td>';
    }

    function getTransactionRowElement(transaction, jsonString) {
        const row = document.createElement('tr');
        row.setAttribute('data-json', jsonString);
        row.setAttribute('data-hash', transaction.hash);
        row.setAttribute('id', 'transactionRow' + transaction.hash);
        row.innerHTML = getTransactionCells(transaction);
        return row;
    }

    function renderTransactions(transactionResults) {
        const $transactionsRows = $('#transactions_rows');
        for (let i = 0; i < transactionResults.length; i++) {
            let transaction = transactionResults[i];
            let transactionJson = JSON.stringify(transaction);
            let existingRow = document.getElementById('transactionRow' + transaction.hash);
            if (existingRow && existingRow.getAttribute('data-json') !== transactionJson) {
                $(existingRow).replaceWith(getTransactionRowElement(transaction, transactionJson));
            }
            else if (!existingRow) {
                let transactionElement = getTransactionRowElement(transaction, transactionJson);
                $transactionsRows.append(transactionElement);
            }
        }
    }
    // show tx working icon
    function pulseTxUpdate() {
        const tx_update = document.getElementById('tx_updated');
        tx_update.style.transition = 'opacity 100ms ease-out';
        tx_update.style.opacity = 1;
        tx_wheel = setTimeout(function () {
            tx_update.style.transition = 'opacity 4000ms linear';
            tx_update.style.opacity = 0;
        }, 100);
    }

    $('#btn_search').click(function(e) {
        // console.warn('search !');
        text = document.getElementById('txt_search').value;
        // by height
        var xhrGetSearchBlockbyHeight;
        function GetSearchBlockbyHeight() {
            if (xhrGetSearchBlockbyHeight) xhrGetSearchBlockbyHeight.abort();
            xhrGetSearchBlockbyHeight = $.ajax({
                url: api + '/json_rpc',
                method: "POST",
                data: JSON.stringify({
                    jsonrpc: "2.0",
                    id: "blockbyheight",
                    method: "getblockheaderbyheight",
                    params: {
                        height: parseInt(text)
                    }
                }),
                dataType: 'json',
                cache: 'false'
            })
                .done(function (data) {
                    // console.log(data);
                    if (data.hasOwnProperty('result')) {
                        block = data.result.block_header;
                        window.location.href = getBlockchainUrl(block.hash);
                        // $('#myModal').modal('show');
                    } else {
                        showalert('alert-danger','Core error : ',data.error.message);
                        $('#loading').hide();
                    }
                })
                .fail(function (xhrGetLastBlocks, textStatus) {
                    if (textStatus != "abort") {
                        showalert('alert-danger','Can\'t connect to api : ',textStatus);
                        $('#loading').hide();
                    }
                });
        }
        // by hash
        function GetSearchBlock(){
            var block, xhrGetSearchBlock;
            if (xhrGetSearchBlock) xhrGetSearchBlock.abort();
            xhrGetSearchBlock = $.ajax({
                url: api + '/json_rpc',
                method: "POST",
                data: JSON.stringify({
                    jsonrpc:"2.0",
                    id: "GetSearchBlock",
                    method:"f_block_json",
                    params: {
                        hash: text // document.getElementById('txt_search').value // $('#txt_search').attr('value')
                    }
                }),
                dataType: 'json',
                cache: 'false',
                success: function(data){
                    if(data.result){
                        block = data.result.block;
                        window.location.href = getBlockchainUrl(block.hash);
                    } else if(data.error) {
                        window.location.href = transactionExplorer.replace('{id}', text);
                    }
                }
            });
        }
        // height detected
        if ( text.length < 64 ) {
            GetSearchBlockbyHeight();
        }
        // hash detected
        if ( text.length == 64 ) {
            GetSearchBlock();
        }
        e.preventDefault();
    });
    // enable enter key to search
    $('#txt_search').keyup(function(e){
        if(e.keyCode === 13)
            $('#btn_search').click();
    });
    // enable popover
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover({
        })
    });
</script>