blockchain_payment_id.html

<h2><i class="fa fa-tag fa-fw" aria-hidden="true"></i> Payment ID <small id="paymend_id" style="word-break: break-all;"></small></h2>

<h3><i class="fa fa-exchange fa-fw" aria-hidden="true"></i> Transactions with this Payment ID</h3>
<div class="table-responsive">
    <table class="table table-hover">
        <thead>
        <tr>
            <th><i class="fa fa-paw"></i> Hash</th>
            <th><i class="fa fa-percent"></i> Fee</th>
            <th><i class="fa fa-money"></i> Total Amount</th>
            <th><i class="fa fa-arrows"></i> Size</th>
        </tr>
        </thead>
        <tbody id="transactions_rows">

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

<script>
    var paymentId, xhrGetTsx, txsByPaymentId;
	
	paymentId = urlParam('hash');
	updateText('paymend_id', paymentId);
	
    currentPage = {
        destroy: function(){
            if (xhrGetTsx) xhrGetTsx.abort();
        },
        init: function(){
            getTransactions();
        },
        update: function(){
        }
    };

    function getTransactions(){
        if (xhrGetTsx) xhrGetTsx.abort();
		txsByPaymentId = $.parseJSON(sessionStorage.getItem('txsByPaymentId'));
        if (txsByPaymentId) {
			renderTransactions(txsByPaymentId);
		} else {
			xhrGetTsx = $.ajax({
				url: api + '/json_rpc',
				method: "POST",
				data: JSON.stringify({
					jsonrpc:"2.0",
					id: "test",
					method:"k_transactions_by_payment_id",
					params: {
						payment_id: paymentId
					}
				}),
				dataType: 'json',
				cache: 'false',
				success: function(data){
					var txs = data.result.transactions;
					renderTransactions(txs);
				}
			});
		}
		sessionStorage.removeItem('txsByPaymentId');
	}

    function getTransactionCells(transaction){
        return '<td>' + formatPaymentLink(transaction.hash) + '</td>' +
               '<td>' + getReadableCoins(transaction.fee, 6, true) + '</td>' +
               '<td>' + getReadableCoins(transaction.amount_out, 6, true)  + '</td>' +
               '<td>' + transaction.size + '</td>';
    }

    function getTransactionRowElement(transaction, jsonString){

        var 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){

        var $transactionsRows = $('#transactions_rows');

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

            var transaction = transactionResults[i];

            var transactionJson = JSON.stringify(transaction);

            var existingRow = document.getElementById('transactionRow' + transaction.hash);

            if (existingRow && existingRow.getAttribute('data-json') !== transactionJson){
                $(existingRow).replaceWith(getTransactionRowElement(transaction, transactionJson));
            }
            else if (!existingRow){

                var transactionElement = getTransactionRowElement(transaction, transactionJson);
                $transactionsRows.append(transactionElement);
            }

        }
    }

	$(function() {
		$('[data-toggle="tooltip"]').tooltip();
	});
	
</script>