diff --git a/web/explorer/explorer-server/code/txs.js b/web/explorer/explorer-server/code/txs.js index 8aa877b8b..12b3f3864 100644 --- a/web/explorer/explorer-server/code/txs.js +++ b/web/explorer/explorer-server/code/txs.js @@ -1,221 +1,221 @@ const renderHash = data => { let minifiedHash = minifyBlockID(data.txHash); if (data.blockHeight === 0) { return ( '' + minifiedHash + '' ); } else { return '' + minifiedHash + ''; } }; var today = Date.now() / 1000; var fiveYearsAgo = today - 157800000; var xecDate = 1605441600; var bchDate = 1502193600; const renderSize = size => formatByteSize(size); const renderInput = data => { const txDate = data.timestamp; let xecIcon = ''; let bchIcon = ''; let fiveIcon = ''; if (txDate < xecDate) { xecIcon = '
Pre-XEC
(Nov 15, 2020)
'; } if (txDate < bchDate) { bchIcon = '
Pre-BCH
(Aug 8, 2017)
'; } if (txDate < fiveYearsAgo) { fiveIcon = '
Over Five
Years Old
'; } return ( '
' + xecIcon + fiveIcon + bchIcon + `
${data.numInputs}
` ); }; const renderOutput = (satsOutput, _type, row) => { if (row.token) { var ticker = ''; return renderAmount(row.stats.tokenOutput, row.token.decimals) + ticker; } return ( '
' + renderSats(row.stats.satsOutput) + '
' ); }; const updateLoading = status => { if (status) { $('#txs-table > tbody').addClass('blur'); $('.loader__container--fullpage').removeClass('hidden'); $('#pagination').addClass('hidden'); $('#footer').addClass('hidden'); } else { $('#txs-table > tbody').removeClass('blur'); $('.loader__container--fullpage').addClass('hidden'); $('#pagination').removeClass('hidden'); $('#footer').removeClass('hidden'); } }; // UI actions const goToPage = (event, page) => { event.preventDefault(); reRenderPage({ page }); }; // UI presentation elements const datatable = () => { const blockHash = $('#block-hash').text(); $('#txs-table').DataTable({ searching: false, - lengthMenu: [50, 100, 250, 500, 1000], + lengthMenu: [25, 50, 100, 200], pageLength: DEFAULT_ROWS_PER_PAGE, language: { loadingRecords: '', zeroRecords: '', emptyTable: '', }, ajax: `/api/block/${blockHash}/transactions`, order: [], responsive: { details: { type: 'column', target: -1, }, }, columnDefs: [ { className: 'dtr-control', orderable: false, targets: -1, }, ], columns: [ { data: { txHash: 'txHash', blockHeight: 'blockHeight' }, title: 'ID', className: 'hash', render: renderHash, orderable: false, }, { data: 'size', title: 'Size', render: renderSize, className: 'text-right', orderSequence: ['desc', 'asc'], type: 'file-size', targets: 0, }, { name: 'fee', title: 'Fee', css: 'fee', render: renderFee, className: 'text-right', orderSequence: ['desc', 'asc'], type: 'html-num-fmt', }, { data: { numInputs: 'numInputs' }, title: 'Inputs', className: 'text-right', render: renderInput, orderSequence: ['desc', 'asc'], }, { data: 'numOutputs', title: 'Outputs', className: 'text-right', orderSequence: ['desc', 'asc'], }, { data: 'satsOutput', title: 'Output Amount', render: renderOutput, className: 'text-right', orderSequence: ['desc', 'asc'], }, { name: 'responsive', render: () => '' }, ], }); params = window.state.getParameters(); $('#txs-table').dataTable().api().page.len(params.rows); }; // events $(window).resize(() => { const { currentPage, pageArray } = window.pagination.generatePaginationUIParams(); window.pagination.generatePaginationUI(currentPage, pageArray); $('#blocks-table').DataTable().responsive.rebuild(); $('#blocks-table').DataTable().responsive.recalc(); }); $('#txs-table').on('init.dt', () => { $('.datatable__length-placeholder').remove(); }); $('#txs-table').on('length.dt', (e, settings, rows) => { params = window.state.getParameters(); if (params.rows !== rows) { reRenderPage({ rows }); } }); $('#txs-table').on('xhr.dt', () => { updateLoading(false); }); // Basically a fake refresh, dynamically updates everything // according to new params // updates: URL, table and pagination const reRenderPage = params => { if (params) { window.state.updateParameters(params); if (params.page) { // DataTable pages start at index 0, so we oblige $('#txs-table') .DataTable() .page(params.page - 1) .draw(false); } } const { currentPage, pageArray } = window.pagination.generatePaginationUIParams(); window.pagination.generatePaginationUI(currentPage, pageArray); }; // main $(document).ready(() => { // init all UI elements datatable(); // global state update reRenderPage(); });