lukechilds
/
btc-rpc-explorer
mirror of https://github.com/lukechilds/btc-rpc-explorer.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

style tweaks for summary tables on block/tx pages

fix-133-memory-crash
Dan Janosik 7 years ago
parent
fd9cc6d232
commit
7207146879
3 changed files with 242 additions and 225 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      public/css/styling.css
  2. 283
      views/includes/block-content.pug
  3. 177
      views/transaction.pug

7
public/css/styling.css
View File

@ -20,9 +20,16 @@ code, .monospace {
font-family: "Source Code Pro", monospace;
}
.details-table td {
border-top: none;
padding: 0.4em;
padding-right: 0.6em;
}
.properties-header {
width: 190px;
text-align: right;
font-weight: bold;
}
pre {

283
views/includes/block-content.pug
View File

@ -1,15 +1,17 @@
ul(class='nav nav-tabs mb-3')
li(class="nav-item")
a(data-toggle="tab", href="#tab-summary", class="nav-link active", role="tab") Summary
a(data-toggle="tab", href="#tab-details", class="nav-link active", role="tab") Details
li(class="nav-item")
a(data-toggle="tab", href="#tab-raw", class="nav-link", role="tab") Raw
- var txCount = result.getblock.tx.length;
div(class="tab-content")
div(id="tab-summary", class="tab-pane active", role="tabpanel")
div(id="tab-details", class="tab-pane active", role="tabpanel")
if (global.specialBlocks && global.specialBlocks[result.getblock.hash])
div(class="alert alert-primary", style="padding-bottom: 0;")
div(class="float-left", style="width: 50px; height: 50px; font-size: 18px;")
i(class="fas fa-certificate fa-2x", style="margin-top: 10px;")
h4(class="alert-heading h5") #{coinConfig.name} Fun
// special transaction info
@ -30,143 +32,146 @@ div(class="tab-content")
span
a(href=sbInfo.referenceUrl) Read more
div(class="row")
div(class="col-md-6")
table(class="table")
tr
th(class="table-active properties-header") Previous Block
td(class="monospace word-wrap")
if (result.getblock.previousblockhash)
a(class="word-wrap", href=("/block/" + result.getblock.previousblockhash)) #{result.getblock.previousblockhash}
br
span(class="text-muted") ##{(result.getblock.height - 1).toLocaleString()}
else if (result.getblock.hash == genesisBlockHash)
span None
br
span(class="text-muted") (genesis block)
if (false)
tr
th(class="table-active properties-header") Block Height
td(class="monospace")
a(href=("/block-height/" + result.getblock.height)) #{result.getblock.height.toLocaleString()}
tr
th(class="table-active properties-header") Timestamp (utc)
- var timeAgo = moment.duration(moment.utc(new Date()).diff(moment.utc(new Date(parseInt(result.getblock.time) * 1000))));
td(class="monospace") #{moment.utc(new Date(result.getblock.time * 1000)).format("Y-MM-DD HH:mm:ss")}
br
span(class="text-muted") (age #{timeAgo.format()})
tr
th(class="table-active properties-header") Transaction Count
td(class="monospace") #{result.getblock.tx.length.toLocaleString()}
tr
th(class="table-active properties-header") Total Fees
td(class="monospace")
- var currencyValue = new Decimal(result.getblock.totalFees);
include ./value-display.pug
tr
th(class="table-active properties-header") Average Fee
td(class="monospace")
- var currencyValue = new Decimal(result.getblock.totalFees).dividedBy(result.getblock.tx.length);
include ./value-display.pug
tr
th(class="table-active properties-header") Size
td(class="monospace")
span #{result.getblock.size.toLocaleString()} bytes
if (result.getblock.weight)
tr
th(class="table-active properties-header") Weight
td(class="monospace")
span #{result.getblock.weight.toLocaleString()} wu
br
span(class="text-muted") (#{new Decimal(100 * result.getblock.weight / coinConfig.maxBlockWeight).toDecimalPlaces(2)}% full)
tr(class="border-bottom")
th(class="table-active properties-header") Confirmations
td(class="monospace")
if (result.getblock.confirmations < 6)
strong(class="text-warning") #{result.getblock.confirmations}
else
strong(class="text-success") #{result.getblock.confirmations.toLocaleString()}
div(class="col-md-6")
table(class="table")
tr
th(class="table-active properties-header") Next Block
td(class="monospace word-wrap")
if (result.getblock.nextblockhash)
a(href=("/block/" + result.getblock.nextblockhash)) #{result.getblock.nextblockhash}
br
span(class="text-muted") ##{(result.getblock.height + 1).toLocaleString()}
else
span None
br
span(class="text-muted") (latest block)
tr
- var scales = [ {val:1000000000000000, name:"quadrillion"}, {val:1000000000000, name:"trillion"}, {val:1000000000, name:"billion"}, {val:1000000, name:"million"} ];
- var scaleDone = false;
th(class="table-active properties-header") Difficulty
td(class="monospace")
- var difficultyData = utils.formatLargeNumber(result.getblock.difficulty, 3);
span(title=parseFloat(result.getblock.difficulty).toLocaleString(), data-toggle="tooltip")
span #{difficultyData[0]}
span x 10
sup #{difficultyData[1].exponent}
tr
th(class="table-active text-right") Version
td(class="monospace") 0x#{result.getblock.versionHex}
span(class="text-muted") (decimal: #{result.getblock.version})
tr
th(class="table-active text-right") Nonce
td(class="monospace") #{result.getblock.nonce}
tr
th(class="table-active text-right") Bits
td(class="monospace") #{result.getblock.bits}
tr
th(class="table-active text-right") Merkle Root
td(class="monospace word-wrap") #{result.getblock.merkleroot}
tr
th(class="table-active text-right") Chainwork
td(class="monospace word-wrap") #{result.getblock.chainwork.replace(/^0+/, '')}
br
- var chainworkData = utils.formatLargeNumber(parseInt("0x" + result.getblock.chainwork), 2);
span(class="text-muted")
span (~
span #{chainworkData[0]}
span x 10
sup #{chainworkData[1].exponent}
span hashes)
tr(class="border-bottom")
th(class="table-active text-right") Miner
td(class="monospace word-wrap")
if (result.getblock.miner)
span #{result.getblock.miner.name}
if (result.getblock.miner.identifiedBy)
a(href=coinConfig.miningPoolsConfigUrl, data-toggle="tooltip", title=("Identified by: " + result.getblock.miner.identifiedBy), target="_blank")
i(class="fas fa-info-circle")
else
span ?
a(href=coinConfig.miningPoolsConfigUrl, data-toggle="tooltip", title=("Unable to identify (click to see config)"), target="_blank")
i(class="fas fa-info-circle")
div(class="card mb-3")
div(class="card-header")
span(class="h6") Summary
div(class="card-body")
div(class="row")
div(class="col-md-6")
table(class="table details-table mb-0")
tr
td(class="properties-header") Previous Block
td(class="monospace word-wrap")
if (result.getblock.previousblockhash)
a(class="word-wrap", href=("/block/" + result.getblock.previousblockhash)) #{result.getblock.previousblockhash}
br
span(class="text-muted") ##{(result.getblock.height - 1).toLocaleString()}
else if (result.getblock.hash == genesisBlockHash)
span None
br
span(class="text-muted") (genesis block)
if (false)
tr
td(class="properties-header") Block Height
td(class="monospace")
a(href=("/block-height/" + result.getblock.height)) #{result.getblock.height.toLocaleString()}
tr
td(class="properties-header") Timestamp (utc)
- var timeAgo = moment.duration(moment.utc(new Date()).diff(moment.utc(new Date(parseInt(result.getblock.time) * 1000))));
td(class="monospace") #{moment.utc(new Date(result.getblock.time * 1000)).format("Y-MM-DD HH:mm:ss")}
br
span(class="text-muted") (age #{timeAgo.format()})
tr
td(class="properties-header") Transaction Count
td(class="monospace") #{result.getblock.tx.length.toLocaleString()}
tr
td(class="properties-header") Total Fees
td(class="monospace")
- var currencyValue = new Decimal(result.getblock.totalFees);
include ./value-display.pug
tr
td(class="properties-header") Average Fee
td(class="monospace")
- var currencyValue = new Decimal(result.getblock.totalFees).dividedBy(result.getblock.tx.length);
include ./value-display.pug
tr
td(class="properties-header") Size
td(class="monospace")
span #{result.getblock.size.toLocaleString()} bytes
if (result.getblock.weight)
tr
td(class="properties-header") Weight
td(class="monospace")
span #{result.getblock.weight.toLocaleString()} wu
br
span(class="text-muted") (#{new Decimal(100 * result.getblock.weight / coinConfig.maxBlockWeight).toDecimalPlaces(2)}% full)
tr
td(class="properties-header") Confirmations
td(class="monospace")
if (result.getblock.confirmations < 6)
strong(class="text-warning") #{result.getblock.confirmations}
else
strong(class="text-success") #{result.getblock.confirmations.toLocaleString()}
div(class="col-md-6")
table(class="table details-table mb-0")
tr
td(class="properties-header") Next Block
td(class="monospace word-wrap")
if (result.getblock.nextblockhash)
a(href=("/block/" + result.getblock.nextblockhash)) #{result.getblock.nextblockhash}
br
span(class="text-muted") ##{(result.getblock.height + 1).toLocaleString()}
else
span None
br
span(class="text-muted") (latest block)
tr
- var scales = [ {val:1000000000000000, name:"quadrillion"}, {val:1000000000000, name:"trillion"}, {val:1000000000, name:"billion"}, {val:1000000, name:"million"} ];
- var scaleDone = false;
td(class="properties-header") Difficulty
td(class="monospace")
- var difficultyData = utils.formatLargeNumber(result.getblock.difficulty, 3);
span(title=parseFloat(result.getblock.difficulty).toLocaleString(), data-toggle="tooltip")
span #{difficultyData[0]}
span x 10
sup #{difficultyData[1].exponent}
tr
td(class="properties-header") Version
td(class="monospace") 0x#{result.getblock.versionHex}
span(class="text-muted") (decimal: #{result.getblock.version})
tr
td(class="properties-header") Nonce
td(class="monospace") #{result.getblock.nonce}
tr
td(class="properties-header") Bits
td(class="monospace") #{result.getblock.bits}
tr
td(class="properties-header") Merkle Root
td(class="monospace word-wrap") #{result.getblock.merkleroot}
tr
td(class="properties-header") Chainwork
td(class="monospace word-wrap") #{result.getblock.chainwork.replace(/^0+/, '')}
br
- var chainworkData = utils.formatLargeNumber(parseInt("0x" + result.getblock.chainwork), 2);
span(class="text-muted")
span (~
span #{chainworkData[0]}
span x 10
sup #{chainworkData[1].exponent}
span hashes)
tr
td(class="properties-header") Miner
td(class="monospace word-wrap")
if (result.getblock.miner)
span #{result.getblock.miner.name}
if (result.getblock.miner.identifiedBy)
a(href=coinConfig.miningPoolsConfigUrl, data-toggle="tooltip", title=("Identified by: " + result.getblock.miner.identifiedBy), target="_blank")
i(class="fas fa-info-circle")
else
span ?
a(href=coinConfig.miningPoolsConfigUrl, data-toggle="tooltip", title=("Unable to identify (click to see config)"), target="_blank")
i(class="fas fa-info-circle")
div(class="card mb-3")
div(class="card-header")

177
views/transaction.pug
View File

@ -17,7 +17,7 @@ block content
ul(class='nav nav-tabs mb-3')
li(class="nav-item")
a(data-toggle="tab", href="#tab-summary", class="nav-link active", role="tab") Summary
a(data-toggle="tab", href="#tab-details", class="nav-link active", role="tab") Details
li(class="nav-item")
a(data-toggle="tab", href="#tab-scripts", class="nav-link", role="tab") Scripts
li(class="nav-item")
@ -39,9 +39,12 @@ block content
- totalOutputValue = totalOutputValue.plus(new Decimal(vout.value));
div(class="tab-content")
div(id="tab-summary", class="tab-pane active", role="tabpanel")
div(id="tab-details", class="tab-pane active", role="tabpanel")
if (global.specialTransactions && global.specialTransactions[txid])
div(class="alert alert-primary", style="padding-bottom: 0;")
div(class="float-left", style="width: 50px; height: 50px; font-size: 18px;")
i(class="fas fa-certificate fa-2x", style="margin-top: 10px;")
h4(class="alert-heading h5") #{coinConfig.name} Fun
// special transaction info
@ -61,93 +64,95 @@ block content
span
a(href=stInfo.referenceUrl) Read more
table(class="table mb-4")
tr
th(class="table-active properties-header") Included in Block
td(class="monospace word-wrap")
if (result.getblock)
a(href=("/block/" + result.getrawtransaction.blockhash)) #{result.getrawtransaction.blockhash}
if (result.getblock.height)
br
span(class="text-muted") (#{result.getblock.height.toLocaleString()})
else
span N/A
span(class="text-muted") (unconfirmed)
tr
th(class="table-active properties-header") Timestamp (utc)
if (result.getrawtransaction.time)
td(class="monospace") #{moment.utc(new Date(result.getrawtransaction["time"] * 1000)).format("Y-MM-DD HH:mm:ss")}
- var timeAgo = moment.duration(moment.utc(new Date()).diff(moment.utc(new Date(parseInt(result.getrawtransaction["time"]) * 1000))));
br
span(class="text-muted") (#{timeAgo.format()})
else
td(class="monospace") N/A
br
span(class="text-muted") (unconfirmed)
//tr
// th(class="table-active properties-header") Transaction ID
// td #{txid}
tr
th(class="table-active properties-header") Version
td(class="monospace") #{result.getrawtransaction.version}
tr
th(class="table-active properties-header") Size
td(class="monospace")
span #{result.getrawtransaction.size.toLocaleString()} bytes
if (result.getrawtransaction.vsize != result.getrawtransaction.size)
span (
a(href="https://github.com/bitcoin/bips/blob/master/bip-0141.mediawiki#Transaction_size_calculations") virtual size
span : #{result.getrawtransaction.vsize.toLocaleString()} bytes)
if (result.getrawtransaction.locktime > 0)
tr
th(class="table-active properties-header")
span Locktime
td(class="monospace")
if (result.getrawtransaction.locktime < 500000000)
span Spendable in block
a(href=("/block-height/" + result.getrawtransaction.locktime)) #{result.getrawtransaction.locktime}
span or later
a(href="https://bitcoin.org/en/developer-guide#locktime-and-sequence-number", data-toggle="tooltip", title="More info about locktime", target="_blank")
i(class="fas fa-info-circle")
div(class="card mb-3")
div(class="card-header")
span(class="h6") Summary
div(class="card-body")
table(class="table details-table mb-0")
tr
td(class="properties-header") Included in Block
td(class="monospace word-wrap")
if (result.getblock)
a(href=("/block/" + result.getrawtransaction.blockhash)) #{result.getrawtransaction.blockhash}
if (result.getblock.height)
br
span(class="text-muted") (#{result.getblock.height.toLocaleString()})
else
span N/A
span(class="text-muted") (unconfirmed)
tr
td(class="properties-header") Timestamp (utc)
if (result.getrawtransaction.time)
td(class="monospace") #{moment.utc(new Date(result.getrawtransaction["time"] * 1000)).format("Y-MM-DD HH:mm:ss")}
- var timeAgo = moment.duration(moment.utc(new Date()).diff(moment.utc(new Date(parseInt(result.getrawtransaction["time"]) * 1000))));
br
span(class="text-muted") (#{timeAgo.format()})
else
span Spendable after #{moment.utc(new Date(result.getrawtransaction.locktime * 1000)).format("Y-MM-DD HH:mm:ss")} (utc)
a(href="https://bitcoin.org/en/developer-guide#locktime-and-sequence-number", data-toggle="tooltip", title="More info about locktime", target="_blank")
i(class="fas fa-info-circle")
td(class="monospace") N/A
span(class="text-muted") (unconfirmed)
//tr
// th(class="table-active properties-header") Transaction ID
// td #{txid}
tr
td(class="properties-header") Version
td(class="monospace") #{result.getrawtransaction.version}
tr
td(class="properties-header") Size
td(class="monospace")
span #{result.getrawtransaction.size.toLocaleString()} bytes
if (result.getrawtransaction.vsize != result.getrawtransaction.size)
span (
a(href="https://github.com/bitcoin/bips/blob/master/bip-0141.mediawiki#Transaction_size_calculations") virtual size
span : #{result.getrawtransaction.vsize.toLocaleString()} bytes)
if (result.getrawtransaction.locktime > 0)
tr
td(class="properties-header") Locktime
td(class="monospace")
if (result.getrawtransaction.locktime < 500000000)
span Spendable in block
a(href=("/block-height/" + result.getrawtransaction.locktime)) #{result.getrawtransaction.locktime}
span or later
a(href="https://bitcoin.org/en/developer-guide#locktime-and-sequence-number", data-toggle="tooltip", title="More info about locktime", target="_blank")
i(class="fas fa-info-circle")
else
span Spendable after #{moment.utc(new Date(result.getrawtransaction.locktime * 1000)).format("Y-MM-DD HH:mm:ss")} (utc)
a(href="https://bitcoin.org/en/developer-guide#locktime-and-sequence-number", data-toggle="tooltip", title="More info about locktime", target="_blank")
i(class="fas fa-info-circle")
tr
th(class="table-active properties-header") Confirmations
td(class="monospace")
if (!result.getrawtransaction.confirmations || result.getrawtransaction.confirmations == 0)
strong(class="text-danger") 0 (unconfirmed)
else if (result.getrawtransaction.confirmations < 6)
strong(class="text-warning") #{result.getrawtransaction.confirmations}
else
strong(class="text-success") #{result.getrawtransaction.confirmations.toLocaleString()}
tr
td(class="properties-header") Confirmations
td(class="monospace")
if (!result.getrawtransaction.confirmations || result.getrawtransaction.confirmations == 0)
strong(class="text-danger") 0 (unconfirmed)
else if (result.getrawtransaction.confirmations < 6)
strong(class="text-warning") #{result.getrawtransaction.confirmations}
else
strong(class="text-success") #{result.getrawtransaction.confirmations.toLocaleString()}
if (result.getrawtransaction.vin[0].coinbase)
tr(class="border-bottom")
th(class="table-active properties-header") Network Fees Collected
td
- var currencyValue = new Decimal(totalOutputValue).minus(totalInputValue);
include includes/value-display.pug
else
tr(class="border-bottom")
th(class="table-active properties-header") Network Fee Paid
td(class="monospace")
strong
- var currencyValue = new Decimal(totalInputValue).minus(totalOutputValue);
include includes/value-display.pug
br
span(class="text-muted") (#{utils.formatCurrencyAmount(totalInputValue, currencyFormatType)} - #{utils.formatCurrencyAmount(totalOutputValue, currencyFormatType)})
br
span ~#{utils.addThousandsSeparators(new DecimalRounded(totalInputValue).minus(totalOutputValue).dividedBy(result.getrawtransaction.size).times(100000000))} sat/B
if (result.getrawtransaction.vin[0].coinbase)
tr
td(class="properties-header") Network Fees Collected
td
- var currencyValue = new Decimal(totalOutputValue).minus(totalInputValue);
include includes/value-display.pug
else
tr
td(class="properties-header") Network Fee Paid
td(class="monospace")
strong
- var currencyValue = new Decimal(totalInputValue).minus(totalOutputValue);
include includes/value-display.pug
br
span(class="text-muted") (#{utils.formatCurrencyAmount(totalInputValue, currencyFormatType)} - #{utils.formatCurrencyAmount(totalOutputValue, currencyFormatType)})
br
span ~#{utils.addThousandsSeparators(new DecimalRounded(totalInputValue).minus(totalOutputValue).dividedBy(result.getrawtransaction.size).times(100000000))} sat/B
if (result.getrawtransaction.vin[0].coinbase)
div(class="card mb-3")

Write Preview
Loading…
Cancel
Save