blockchain_transaction.html

<h2><i class="fa fa-exchange fa-fw" aria-hidden="true"></i> Transaction</h2>
<div class="row" id="tx_info">
    <div class="col-md-12 stats">
        <div><span data-toggle="tooltip" data-placement="right" data-original-title="Unique fingerprint of the transaction."><i class="fa fa-question-circle"></i></span> Hash: <span id="transaction.hash" style="word-break: break-all;"></span></div>
		<div id="confirmations" style="display: none;"><span data-toggle="tooltip" data-placement="right" data-original-title="The number of network confirmations."><i class="fa fa-question-circle"></i></span> Confirmations: <span id="transaction.confirmations"></span>, First confirmation time: <span id="transaction.timestamp"></span> (<time class="transaction-timeago"></time>)</div>
        <div><span data-toggle="tooltip" data-placement="right" data-original-title="Money that goes to the miner, who included this transaction into block."><i class="fa fa-question-circle"></i></span> Fee: <span id="transaction.fee"></span></div>
        <div><span data-toggle="tooltip" data-placement="right" data-original-title="It does not mean that this is the amount that is actually transferred."><i class="fa fa-question-circle"></i></span> Sum of outputs: <span id="transaction.amount_out"></span></div>
        <div><span data-toggle="tooltip" data-placement="right" data-original-title="Size of the transaction in bytes."><i class="fa fa-question-circle"></i></span> Size: <span id="transaction.size"></span></div>
        <div id="div_transaction_paymentId"><span data-toggle="tooltip" data-placement="right" data-original-title="Optional user-defined hexadecimal characters string. Can be used by anyone to distinguish the transactions easier."><i class="fa fa-question-circle"></i></span> Payment ID: <span id="transaction.paymentId"></span></div>
        <div id="div_transaction_mixin"><span data-toggle="tooltip" data-placement="right" data-original-title="Denotes how many random inputs are mixed within this transactions in order to achieve desired level of anonimity. Mixin count 1 means no additional inputs are mixed in and thus each input can be traced back."><i class="fa fa-question-circle"></i></span> Mixin count: <span id="transaction.mixin"></span></div>
		<div id="tx_unconfirmed" style="display: none;"><span data-toggle="tooltip" data-placement="right" data-original-title="The transaction is not included into block yet and therefore is not wtitten into blockchain."><i class="fa fa-question-circle"></i></span> <span class="text-warning">Unconfirmed transaction</span></div>
    </div>
</div>
<div id="tx_block">
	<h3><i class="fa fa-cube fa-fw" aria-hidden="true"></i> In block</h3>
	<div class="row">
		<div class="col-md-12 stats">
			<div><i class="fa fa-circle-o"></i> Hash: <span id="block.hash" style="word-break: break-all;"></span></div>
			<div><i class="fa fa-circle-o"></i> Height: <span id="block.height"></span></div>
			<div><i class="fa fa-circle-o"></i> Timestamp: <span id="block.timestamp"></span></div>
		</div>
	</div>
</div>

<h3 class="inputs">Inputs (<span id="inputs_count"></span>)</h3>
<div class="table-responsive">
    <table class="table table-hover">
        <thead>
        <tr>
            <th><i class="fa fa-money"></i> Amount</th>
            <th><i class="fa fa-paw"></i> Image</th>
        </tr>
        </thead>
        <tbody id="inputs_rows">

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


<h3 class="outputs">Outputs (<span id="outputs_count"></span>)</h3>
<div class="table-responsive">
    <table class="table table-hover">
        <thead>
        <tr>
            <th><i class="fa fa-money"></i> Amount</th>
            <th><i class="fa fa-key"></i> Key</th>
        </tr>
        </thead>
        <tbody id="outputs_rows">

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

<script>
    var xhrGetTransaction, transaction;

    currentPage = {
        destroy: function(){
            if (xhrGetTransaction) xhrGetTransaction.abort();
        },
        init: function(){
            getTransaction();
        },
        update: function(){
        }
    };

    function getTransaction(){
        if (xhrGetTransaction) xhrGetTransaction.abort();
		var searchTx = $.parseJSON(sessionStorage.getItem('searchTransaction'));
		if (searchTx) {
			renderTransaction(searchTx);
		} else {
			xhrGetTransaction = $.ajax({
				url: api + '/json_rpc',
				method: "POST",
				data: JSON.stringify({
					jsonrpc:"2.0",
					id: "test",
					method:"f_transaction_json",
					params: {
						hash: urlParam('hash')
					}
				}),
				dataType: 'json',
				cache: 'false',
				success: function(data){
					var tx = data.result;
					renderTransaction(tx);
				}
			});
		}
		sessionStorage.removeItem('searchTransaction');
	}

	function renderTransaction(transaction){
				var details = transaction.txDetails;
                inputs = transaction.tx.vin;
                outputs = transaction.tx.vout;
                block = transaction.block;
				
                updateText('transaction.hash', details.hash);
                if (block.hash){
					$('#confirmations').show();
					updateText('transaction.confirmations', lastStats.height - block.height);
					updateText('transaction.timestamp', formatDate(block.timestamp));
					$(".transaction-timeago").timeago('update', new Date(block.timestamp * 1000).toISOString());
				}
                updateText('transaction.amount_out', (getReadableCoins(details.amount_out)));
                updateText('transaction.fee', getReadableCoins(details.fee));
                updateText('transaction.mixin', details.mixin);
                if (!details.mixin)
                    $('#div_transaction_mixin').hide();
                updateText('transaction.paymentId', details.paymentId);
                if (!details.paymentId)
                    $('#div_transaction_paymentId').hide();
                updateText('transaction.size', details.size);

				if (!block.hash){
					$('#tx_block').hide();
					$('#tx_unconfirmed').show();
				}
				
                updateTextLinkable('block.hash', formatBlockLink(block.hash));
                updateText('block.height', block.height);
                updateText('block.timestamp', formatDate(block.timestamp));
				
                renderInputs(inputs);
                renderOutputs(outputs);
	}

    function getInputCells(input){
        return '<td>' + getReadableCoins(input.value.amount) + '</td>' +
            '<td>' + input.value.k_image + '</td>';
    }


    function getInputRowElement(input, jsonString){

        var row = document.createElement('tr');
        row.setAttribute('data-json', jsonString);
        row.setAttribute('data-k_image', input.value.k_image);
        row.setAttribute('id', 'inputRow' + input.value.k_image);

        row.innerHTML = getInputCells(input);

        return row;
    }

    function renderInputs(inputResults){

        var $inputsRows = $('#inputs_rows');

        for (var i = 0; i < inputResults.length; i++){
		
            var input = inputResults[i];
		
            if (!input.value.amount)
                continue;
				
            var inputJson = JSON.stringify(input);
			
            var existingRow = document.getElementById('inputRow' + input.value.k_image);

            if (existingRow && existingRow.getAttribute('data-json') !== inputJson){
                $(existingRow).replaceWith(getInputRowElement(input, inputJson));
            }
            else if (!existingRow){

                var inputElement = getInputRowElement(input, inputJson);
                $inputsRows.append(inputElement);
            }
			
        }
		
		updateText('inputs_count', document.querySelectorAll('#inputs_rows tr').length);
    }


    function getOutputCells(output){
        return '<td>' + getReadableCoins(output.amount) + '</td>' +
            '<td>' + output.target.data.key + '</td>';
    }


    function getOutputRowElement(output, jsonString){

        var row = document.createElement('tr');
        row.setAttribute('data-json', jsonString);
        row.setAttribute('data-k_image', output.target.data.key);
        row.setAttribute('id', 'outputRow' + output.target.data.key);

        row.innerHTML = getOutputCells(output);

        return row;
    }

    function renderOutputs(outputResults){

        var $outputsRows = $('#outputs_rows');

        for (var i = 0; i < outputResults.length; i++){

            var output = outputResults[i];

            var outputJson = JSON.stringify(output);
			
            var existingRow = document.getElementById('outputRow' + output.target.data.key);

            if (existingRow && existingRow.getAttribute('data-json') !== outputJson){
                $(existingRow).replaceWith(getOutputRowElement(output, outputJson));
            }
            else if (!existingRow){

                var outputElement = getOutputRowElement(output, outputJson);
                $outputsRows.append(outputElement);
            }
			
        }
		
		updateText('outputs_count', document.querySelectorAll('#outputs_rows tr').length);
    }
	
	$(function() {
		$('[data-toggle="tooltip"]').tooltip();
	});
</script>