zcash-hackworks
/
insight-ui-zcash
mirror of https://github.com/zcash-hackworks/insight-ui-zcash.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #378 from cmgustavo/bug/01performance-txs-list 

Bug/01performance txs list
This commit is contained in:
Mario Colque 2014-02-19 11:16:43 -02:00
parent 467629bc70 0f7ad7b948
commit b53b2f0f5c
9 changed files with 276 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/views/layouts/default.jade
View File

@ -1,5 +1,5 @@
doctype
html(lang='en', data-ng-app='insight')
html(lang='en', data-ng-app='insight' data-ng-csp)
include ../includes/head
body
#wrap

8
public/src/css/common.css
View File

@ -1,5 +1,7 @@
/* Sticky footer styles
-------------------------------------------------- */
@charset "UTF-8";
html,
body {
color: #373D42;
@ -13,6 +15,12 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: 'Ubuntu', sans-serif;
}
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],
.ng-cloak, .x-ng-cloak,
.ng-hide {
display: none !important;
}
/* Styling for the ngProgress itself */
#ngProgress {
background-color: #6C9032 !important;

10
public/src/js/filters.js
View File

@ -1 +1,9 @@
'use strict';
'use strict';
angular.module('insight')
.filter('startFrom', function() {
return function(input, start) {
start = +start; //parse to int
return input.slice(start);
}
});

90
public/views/address.html
View File

@ -3,55 +3,60 @@
<div class="row">
<div class="col-xs-12 col-gray col-gray-fixed">
<h1 class="text-center">Address</h1>
<div class="text-center">
<qrcode size="160" data="{{address.addrStr}}"></qrcode>
<h4>{{$root.currency.getConvertion(address.balance)}}</h4>
</div>
<div class="m10v">
<button class="pull-right btn-copy" clip-copy="address.addrStr"></button>
<a class="ellipsis" href="/address/{{address.addrStr}}">{{address.addrStr}}</a>
</div>
<div class="m20v">
<h4>Summary</h4>
<h5>Confirmed</h5>
<table class="table">
<tbody>
<tr>
<td class="small">Total Received</td>
<td class="address ellipsis text-right">{{$root.currency.getConvertion(address.totalReceived)}}</td>
</tr>
<tr>
<td class="small">Total Sent</td>
<td class="address ellipsis text-right">{{$root.currency.getConvertion(address.totalSent)}}</td>
</tr>
<tr>
<td class="small">Final Balance</td>
<td class="address ellipsis text-right">{{$root.currency.getConvertion(address.balance)}}</td>
</tr>
<tr>
<td class="small">No. Transactions</td>
<td class="address ellipsis text-right">{{address.txApperances}}</td>
</tr>
</tbody>
</table>
<div data-ng-show="address.unconfirmedTxApperances">
<h5>Unconfirmed</h5>
<table class="table">
<div class="m20v text-center text-muted" data-ng-if="!address.addrStr">
<span>Loading Address Information...</span>
</div>
<div class="ng-cloak" data-ng-cloak data-ng-if="address.addrStr">
<div class="text-center">
<qrcode size="160" data="{{address.addrStr}}"></qrcode>
<h4>{{$root.currency.getConvertion(address.balance)}}</h4>
</div>
<div class="m10v">
<button class="pull-right btn-copy" clip-copy="address.addrStr"></button>
<a class="ellipsis" href="/address/{{address.addrStr}}">{{address.addrStr}}</a>
</div>
<div class="m20v">
<h4>Summary</h4>
<h5>Confirmed</h5>
<table class="table ng-cloak" data-ng-hide="!address.addrStr" data-ng-cloak>
<tbody>
<tr>
<td class="small">Unconfirmed Txs Balance</td>
<td class="address ellipsis text-right">{{$root.currency.getConvertion(address.unconfirmedBalance)}}</td>
<td class="small">Total Received</td>
<td class="address ellipsis text-right">{{$root.currency.getConvertion(address.totalReceived)}}</td>
</tr>
<tr>
<td class="small">Total Sent</td>
<td class="address ellipsis text-right">{{$root.currency.getConvertion(address.totalSent)}}</td>
</tr>
<tr>
<td class="small">Final Balance</td>
<td class="address ellipsis text-right">{{$root.currency.getConvertion(address.balance)}}</td>
</tr>
<tr>
<td class="small">No. Transactions</td>
<td class="address ellipsis text-right">{{address.unconfirmedTxApperances}}</td>
<td class="address ellipsis text-right">{{address.txApperances}}</td>
</tr>
</tbody>
</tbody>
</table>
</div>
</div> <!-- END OF TRANSACTIONS TABLE -->
<div data-ng-show="address.unconfirmedTxApperances">
<h5>Unconfirmed</h5>
<table class="table">
<tbody>
<tr>
<td class="small">Unconfirmed Txs Balance</td>
<td class="address ellipsis text-right">{{$root.currency.getConvertion(address.unconfirmedBalance)}}</td>
</tr>
<tr>
<td class="small">No. Transactions</td>
<td class="address ellipsis text-right">{{address.unconfirmedTxApperances}}</td>
</tr>
</tbody>
</table>
</div>
</div> <!-- END OF TRANSACTIONS TABLE -->
</div>
<div data-ng-include src="'/views/includes/currency.html'"></div>
</div> <!-- END OF COL-MD-3 -->
<div class="col-xs-12 col-md-9 col-md-offset-3">
@ -62,3 +67,4 @@
</div>
</div> <!-- END OF ROW -->
</section>

43
public/views/block.html
View File

@ -3,18 +3,22 @@
<div class="row">
<div class="col-xs-12 col-gray col-gray-fixed">
<h1 class="text-center">Block</h1>
<div class="block-id">
<span class="glyphicon glyphicon-th"></span>
<h2 data-ng-if="block">#{{block.height}}</h2>
</div>
<div class="m10v">
<button class="pull-right btn-copy" clip-copy="block.hash"></button>
<a class="ellipsis" href="/block/{{block.hash}}">{{block.hash}}</a>
</div>
<div class="m20v" data-ng-show="!tx.isCoinBase">
<h4>Hashes</h4>
<table class="table" style="table-layout: fixed">
<tbody class="small">
<div class="m20v text-center text-muted" data-ng-if="!block.hash">
<span>Loading Block...</span>
</div>
<div class="ng-cloak" data-ng-cloak data-ng-if="block.hash">
<div class="block-id">
<span class="glyphicon glyphicon-list-alt"></span>
<h2 data-ng-if="block">#{{block.height}}</h2>
</div>
<div class="m10v">
<button class="pull-right btn-copy" clip-copy="block.hash"></button>
<a class="ellipsis" href="/block/{{block.hash}}">{{block.hash}}</a>
</div>
<div class="m20v" data-ng-show="!tx.isCoinBase">
<h4>Hashes</h4>
<table class="table" style="table-layout: fixed">
<tbody class="small">
<tr data-ng-show="block.previousblockhash">
<td> Previous Block</td>
<td class="text-right"><a href="/block/{{block.previousblockhash}}">{{block.height-1}}</a></td>
@ -23,15 +27,21 @@
<td> Next Block</td>
<td class="text-right"><a href="/block/{{block.nextblockhash}}">{{block.height+1}}</a></td>
</tr>
</tbody>
</table>
</div> <!-- END OF TRANSACTIONS TABLE -->
</tbody>
</table>
</div> <!-- END OF TRANSACTIONS TABLE -->
</div>
<div data-ng-include src="'/views/includes/currency.html'"></div>
</div> <!-- END OF COL-GRAY -->
<div class="col-xs-12 col-md-9 col-md-offset-3">
<h2>Summary</h2>
<div class="row">
<div class="progress progress-striped active" data-ng-if="!block.hash">
<div class="progress-bar progress-bar-info" style="width: 100%">
<span>Loading Block Details...</span>
</div>
</div>
<div class="row ng-cloak" data-ng-cloak data-ng-if="block.hash">
<div class="col-md-6">
<table class="table">
<tbody>
@ -106,3 +116,4 @@
</div>
</section>

25
public/views/block_list.html
View File

@ -8,18 +8,22 @@
<h3>Blocks <br> mined on:</h3>
</div>
</div>
<p class="lead text-center m20v">
<div class="m20v text-center text-muted" data-ng-if="!pagination.current">
<span>Loading Selected Date...</span>
</div>
<div class="ng-cloak" data-ng-cloak data-ng-if="pagination.current">
<p class="lead text-center m20v">
{{pagination.current}} UTC
<a href="#" class="btn btn-primary btn-xs" datepicker-popup show-button-bar="false" data-ng-click="openCalendar($event)" data-ng-model="dt" is-open="opened" data-ng-required="true"><span class="glyphicon glyphicon-calendar"></span></a>
</p>
<p class="lead text-center m20v" data-ng-show="loading">&nbsp;</p>
<p class="text-center m20v" data-ng-show="pagination.isToday && !loading">Today</p>
<p class="text-center m20v" data-ng-show="!pagination.isToday && !loading">{{humanSince(pagination.currentTs)}}</p>
<p class="text-center m20v" data-ng-show="loading">&nbsp;</p>
<div class="m50v text-center">
<a class="btn btn-primary" href="/blocks-date/{{pagination.prev}}"><small>&larr; {{pagination.prev}}</small></a>
<a class="btn btn-primary" href="/blocks-date/{{pagination.next}}" data-ng-show="!pagination.isToday"><small>{{pagination.next}} &rarr;</small></a>
</p>
<p class="lead text-center m20v" data-ng-show="loading">&nbsp;</p>
<p class="text-center m20v" data-ng-show="pagination.isToday && !loading">Today</p>
<p class="text-center m20v" data-ng-show="!pagination.isToday && !loading">{{humanSince(pagination.currentTs)}}
<p class="text-center m20v" data-ng-show="loading">&nbsp;</p>
<div class="m50v text-center">
<a class="btn btn-primary" href="/blocks-date/{{pagination.prev}}"><small>&larr; {{pagination.prev}}</small></a>
<a class="btn btn-primary" href="/blocks-date/{{pagination.next}}" data-ng-show="!pagination.isToday"><small>{{pagination.next}} &rarr;</small></a>
</div>
</div>
</div>
<div class="col-xs-12 col-md-9 col-md-offset-3">
@ -56,3 +60,4 @@
</div>
<h2 class="text-center text-muted" data-ng-show="!blocks.length && !loading">No blocks yet.</h2>
</section>

97
public/views/transaction.html
View File

@ -1,49 +1,60 @@
<div data-ng-include src="'/views/includes/connection.html'"></div>
<section data-ng-controller="transactionsController" data-ng-init="findThis()">
<div class="row">
<div class="col-xs-12 col-gray col-gray-fixed">
<h1 class="text-center">Transaction</h1>
<div class="tx-id">
<span class="glyphicon glyphicon-transfer"></span>
</div>
<div class="m10v">
<button class="btn-copy pull-right" clip-copy="tx.txid"></button>
<div class="ellipsis">
<a class="txid" href="/tx/{{tx.txid}}">{{tx.txid}}</a>
<div class="row ng-cloak" data-ng-cloak data-ng-if="tx.txid">
<div class="col-xs-12 col-gray col-gray-fixed">
<h1 class="text-center">Transaction</h1>
<div class="m20v text-center text-muted" data-ng-if="!tx.txid">
<span>Loading Transaction...</span>
</div>
<div class="ng-cloak" data-ng-cloak data-ng-if="tx.txid">
<div class="tx-id">
<span class="glyphicon glyphicon-retweet"></span>
</div>
<div class="m10v">
<button class="btn-copy pull-right" clip-copy="tx.txid"></button>
<div class="ellipsis">
<a class="txid" href="/tx/{{tx.txid}}">{{tx.txid}}</a>
</div>
</div>
<h4>Summary</h4>
<table class="table" style="table-layout: fixed">
<tbody>
<tr>
<td><strong> Size </strong></td>
<td class="text-muted text-right">{{tx.size}} (bytes)</td>
</tr>
<tr>
<td><strong>Received Time </strong></td>
<td data-ng-show="tx.firstSeenTs" class="text-muted text-right">{{tx.firstSeenTs * 1000|date:'medium'}}</td>
<td data-ng-show="!tx.firstSeenTs" class="text-muted text-right">N/A</td>
</tr>
<tr>
<td><strong>Mined Time </strong></td>
<td data-ng-show="tx.time" class="text-muted text-right">{{tx.time * 1000|date:'medium'}}</td>
<td data-ng-show="!tx.time" class="text-muted text-right">N/A</td>
</tr>
</tbody>
</table>
</div>
<div data-ng-include src="'/views/includes/currency.html'"></div>
</div>
<h4>Summary</h4>
<table class="table" style="table-layout: fixed">
<tbody>
<tr>
<td><strong> Size </strong></td>
<td class="text-muted text-right">{{tx.size}} (bytes)</td>
</tr>
<tr>
<td><strong>Received Time </strong></td>
<td data-ng-show="tx.firstSeenTs" class="text-muted text-right">{{tx.firstSeenTs * 1000|date:'medium'}}</td>
<td data-ng-show="!tx.firstSeenTs" class="text-muted text-right">N/A</td>
</tr>
<tr>
<td><strong>Mined Time </strong></td>
<td data-ng-show="tx.time" class="text-muted text-right">{{tx.time * 1000|date:'medium'}}</td>
<td data-ng-show="!tx.time" class="text-muted text-right">N/A</td>
</tr>
</tbody>
</table>
<div data-ng-include src="'/views/includes/currency.html'"></div>
</div>
<div class="col-xs-12 col-md-9 col-md-offset-3">
<h2>
Details
<small>View information about a bitcoin transaction</small>
</h2>
<div class="block-tx">
<div data-ng-include src="'/views/transaction/tx.html'"></div>
</div>
<div data-ng-show="!tx.isCoinBase">
<h2>Inputs and Outputs</h2>
<div class="col-xs-12 col-md-9 col-md-offset-3">
<h2>
Details
<small>View information about a bitcoin transaction</small>
</h2>
<div class="progress progress-striped active" data-ng-if="!tx.txid">
<div class="progress-bar progress-bar-info" style="width: 100%">
<span>Loading Transaction Details...</span>
</div>
</div>
<div class="block-tx ng-cloak" data-ng-cloak data-ng-if="tx.txid">
<div data-ng-include src="'/views/transaction/tx.html'"></div>
</div>
<div class="ng-cloak" data-ng-cloak data-ng-if="tx.txid && !tx.isCoinBase">
<h2>Inputs and Outputs</h2>
<table class="table">
<tbody>
<tr>
@ -60,6 +71,8 @@
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>

2
public/views/transaction/list.html
View File

@ -4,6 +4,6 @@
</div>
<div class="progress progress-striped active" data-ng-show="loading">
<div class="progress-bar progress-bar-info" style="width: 100%">
<span>Loading...</span>
<span>Loading Transactions...</span>
</div>
</div>

202
public/views/transaction/tx.html
View File

@ -1,4 +1,4 @@
<div class="line-bot row">
<div class="line-bot row ng-cloak" data-ng-hide="!tx" data-ng-cloak>
<div class="col-xs-12 col-md-6">
<button class="btn-expand pull-left" data-ng-click="itemsExpanded = !itemsExpanded"><span class="glyphicon glyphicon-plus" data-ng-class="{'glyphicon-minus': itemsExpanded}" tooltip="Show/Hide items details" tooltip-placement="right"></span></button>
<button class="btn-copy pull-right" clip-copy="tx.txid"></button>
@ -18,59 +18,70 @@
</div>
<div class="row line-mid">
<div class="col-md-5">
<div class="row" data-ng-show="tx.isCoinBase">
<div class="row" data-ng-if="tx.isCoinBase">
<div class="col-md-12 transaction-vin-vout" data-ng-repeat="vin in tx.vin">
<div class="ellipsis">
<span>No Inputs (Newly Generated Coins)</span>
</div>
</div>
</div>
<div class="row" data-ng-show="!tx.isCoinBase">
<div data-ng-if="!itemsExpanded">
<div data-ng-repeat="vin in tx.vinSimple">
<div class="col-md-12 transaction-vin-vout">
<div class="text-muted pull-right btc-value" data-ng-class="{'text-danger': $root.currentAddr == vin.addr}"><small>{{$root.currency.getConvertion(vin.value)}}</small></div>
<div class="ellipsis">
<span data-ng-show="vin.notAddr">{{vin.addr}}</span>
<span class="text-muted" title="Current Bitcoin Address" data-ng-show="vin.addr == $root.currentAddr">{{vin.addr}}</span>
<a href="/address/{{vin.addr}}" data-ng-show="!vin.notAddr && vin.addr != $root.currentAddr">{{vin.addr}}</a>
</div>
<div data-ng-show="vin.unconfirmedInput" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> (Input unconfirmed)</div>
<div data-ng-show="vin.dbError" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> Incoherence in levelDB detected, please resync</div>
<div data-ng-show="vin.doubleSpentTxID" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> Double spent attempt detected. From tx:
<a href="/tx/{{vin.doubleSpentTxID}}">{{vin.doubleSpentTxID}},{{vin.doubleSpentIndex}}</a>
</div>
</div>
</div>
</div><!-- if -->
<div
<div data-ng-if="itemsExpanded">
<div data-ng-repeat="vin in tx.vin">
<div class="col-md-12 transaction-vin-vout">
<div class="text-muted pull-right btc-value"><small>{{$root.currency.getConvertion(vin.value)}}</small></div>
<div class="ellipsis">
<a class="glyphicon glyphicon-chevron-right" href="/#!/tx/{{vin.txid}}" title="Outpoint: {{vin.txid}},{{vin.vout}}"></a>&nbsp;&nbsp;
<span data-ng-show="vin.notAddr">{{vin.addr}}</span>
<a href="/address/{{vin.addr}}" data-ng-show="!vin.notAddr">{{vin.addr}}</a>
</div>
<div data-ng-show="vin.unconfirmedInput" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> (Input unconfirmed)</div>
<div data-ng-show="vin.dbError" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> Incoherence in levelDB detected, please resync</div>
<div data-ng-show="vin.doubleSpentTxID" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> Double spent attempt detected. From tx:
<a href="/tx/{{vin.doubleSpentTxID}}">{{vin.doubleSpentTxID}},{{vin.doubleSpentIndex}}</a>
</div>
<div class="row" data-ng-if="!tx.isCoinBase">
</div>
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body" style="word-wrap:break-word">
<small>
<strong>scriptSig</strong>
{{vin.scriptSig.asm}}
</small>
<!-- Simple view -->
<div data-ng-if="!itemsExpanded" data-ng-init="currentInNoExpanded=0; sizeInNoExpanded=5">
<div data-ng-repeat="vin in tx.vinSimple| startFrom:currentInNoExpanded*sizeInNoExpanded | limitTo:sizeInNoExpanded">
<div class="col-md-12 transaction-vin-vout">
<div class="text-muted pull-right btc-value" data-ng-class="{'text-danger': $root.currentAddr == vin.addr}"><small>{{$root.currency.getConvertion(vin.value)}}</small></div>
<div class="ellipsis">
<span data-ng-show="vin.notAddr">{{vin.addr}}</span>
<span class="text-muted" title="Current Bitcoin Address" data-ng-show="vin.addr == $root.currentAddr">{{vin.addr}}</span>
<a href="/address/{{vin.addr}}" data-ng-show="!vin.notAddr && vin.addr != $root.currentAddr">{{vin.addr}}</a>
</div>
<div data-ng-show="vin.unconfirmedInput" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> (Input unconfirmed)</div>
<div data-ng-show="vin.dbError" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> Incoherence in levelDB detected, please resync</div>
<div data-ng-show="vin.doubleSpentTxID" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> Double spent attempt detected. From tx:
<a href="/tx/{{vin.doubleSpentTxID}}">{{vin.doubleSpentTxID}},{{vin.doubleSpentIndex}}</a>
</div>
</div>
</div>
<div class="showmore_collapse text-center" data-ng-show="tx.vinSimple.length > 5" data-ng-class="{ 'hidden': itemsExpanded}">
<a href="#" ng-hide="sizeInNoExpanded != tx.vinSimple.length" ng-click="currentInNoExpanded=0; sizeInNoExpanded=5">...less</a>
<a href="#" ng-hide="currentInNoExpanded >= tx.vinSimple.length/sizeInNoExpanded - 1" ng-click="currentInNoExpanded=0; sizeInNoExpanded=tx.vinSimple.length">more...</a>
</div>
</div>
<!-- Full view -->
<div data-ng-if="itemsExpanded" data-ng-init="currentInExpanded=0; sizeInExpanded=5">
<div data-ng-repeat="vin in tx.vin| startFrom:currentInExpanded*sizeInExpanded | limitTo:sizeInExpanded">
<div class="col-md-12 transaction-vin-vout">
<div class="text-muted pull-right btc-value"><small>{{$root.currency.getConvertion(vin.value)}}</small></div>
<div class="ellipsis">
<a class="glyphicon glyphicon-chevron-right" href="/tx/{{vin.txid}}" title="Outpoint: {{vin.txid}},{{vin.vout}}"></a>&nbsp;&nbsp;
<span data-ng-show="vin.notAddr">{{vin.addr}}</span>
<a href="/address/{{vin.addr}}" data-ng-show="!vin.notAddr">{{vin.addr}}</a>
</div>
<div data-ng-show="vin.unconfirmedInput" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> (Input unconfirmed)</div>
<div data-ng-show="vin.dbError" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> Incoherence in levelDB detected, please resync</div>
<div data-ng-show="vin.doubleSpentTxID" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> Double spent attempt detected. From tx:
<a href="/tx/{{vin.doubleSpentTxID}}">{{vin.doubleSpentTxID}},{{vin.doubleSpentIndex}}</a>
</div>
</div>
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body" style="word-wrap:break-word">
<small>
<strong>scriptSig</strong>
{{vin.scriptSig.asm}}
</small>
</div>
</div>
</div>
</div>
<div class="showmore_collapse text-center" data-ng-show="tx.vin.length > 5" data-ng-class="{ 'hidden': !itemsExpanded}">
<a href="#" ng-hide="sizeInExpanded != tx.vin.length" ng-click="currentInExpanded=0; sizeInExpanded=5">...less</a>
<a href="#" ng-hide="currentInExpanded >= tx.vin.length/sizeInExpanded - 1" ng-click="currentInExpanded=0; sizeInExpanded=tx.vin.length">more...</a>
</div>
</div>
</div>
</div>
@ -82,63 +93,73 @@
</div>
<div class="col-md-6">
<div class="row">
<div data-ng-if="!itemsExpanded">
<div data-ng-repeat="vout in tx.voutSimple">
<div class="col-md-12 transaction-vin-vout">
<div class="text-muted pull-right btc-value" data-ng-class="{'text-success': $root.currentAddr == vout.addr}">
<small>
{{$root.currency.getConvertion(vout.value)}}
<span class="text-danger" data-ng-show="vout.isSpent" tooltip="Output is spent" tooltip-placement="left">(S)</span>
<span class="text-success" data-ng-show="!vout.isSpent" tooltip="Output is unspent" tooltip-placement="left">(U)</span>
</small>
</div>
<!-- Simple view -->
<div data-ng-if="!itemsExpanded" data-ng-init="currentOutNoExpanded=0; sizeOutNoExpanded=5">
<div data-ng-repeat="vout in tx.voutSimple| startFrom:currentOutNoExpanded*sizeOutNoExpanded | limitTo:sizeOutNoExpanded">
<div class="col-md-12 transaction-vin-vout">
<div class="text-muted pull-right btc-value" data-ng-class="{'text-success': $root.currentAddr == vout.addr}">
<div class="ellipsis">
<span data-ng-show="vout.notAddr">{{vout.addr}}</span>
<span class="text-muted" title="Current Bitcoin Address" data-ng-show="address == $root.currentAddr" data-ng-repeat="address in vout.addr.split(',')">{{vout.addr}}</span>
<a href="/address/{{address}}" data-ng-show="!vout.notAddr && address != $root.currentAddr" data-ng-repeat="address in vout.addr.split(',')">{{address}}</a>
</div>
</div>
</div>
</div><!-- if -->
<div data-ng-if="itemsExpanded">
<div data-ng-repeat="vout in tx.vout">
<div class="col-md-12 transaction-vin-vout">
<div class="text-muted pull-right btc-value"><small>{{$root.currency.getConvertion(vout.value)}}
<span class="text-success" data-ng-show="!vout.spentTxId" tooltip="Output is unspent" tooltip-placement="left">(U)</span>
<a class="glyphicon glyphicon-chevron-right" data-ng-show="vout.spentTxId" href="/#!/tx/{{vout.spentTxId}}" title="Spent at: {{vout.spentTxId}},{{vout.spentIndex}}"></a>&nbsp;&nbsp;
</small>
</div>
<div class="ellipsis">
<a href="/address/{{address}}" data-ng-repeat="address in vout.scriptPubKey.addresses">{{address}}</a>
</div>
</div>
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body" style="word-wrap:break-word">
<small>
<p>
<strong>Type</strong>
{{vout.scriptPubKey.type}}
</p>
<p>
<strong>scriptPubKey</strong>
{{vout.scriptPubKey.asm}}
</p>
{{$root.currency.getConvertion(vout.value)}}
<span class="text-danger" data-ng-show="vout.isSpent" tooltip="Output is spent" tooltip-placement="left">(S)</span>
<span class="text-success" data-ng-show="!vout.isSpent" tooltip="Output is unspent" tooltip-placement="left">(U)</span>
</small>
</div>
<div class="ellipsis">
<span data-ng-show="vout.notAddr">{{vout.addr}}</span>
<span class="text-muted" title="Current Bitcoin Address" data-ng-show="address == $root.currentAddr" data-ng-repeat="address in vout.addr.split(',')">{{vout.addr}}</span>
<a href="/address/{{address}}" data-ng-show="!vout.notAddr && address != $root.currentAddr" data-ng-repeat="address in vout.addr.split(',')">{{address}}</a>
</div>
</div>
</div>
<div class="showmore_collapse text-center" data-ng-show="tx.voutSimple.length > 5" data-ng-class="{ 'hidden': itemsExpanded}">
<a href="#" ng-hide="sizeOutNoExpanded != tx.voutSimple.length" ng-click="currentOutNoExpanded=0; sizeOutNoExpanded=5">...less</a>
<a href="#" ng-hide="currentOutNoExpanded >= tx.voutSimple.length/sizeOutNoExpanded - 1" ng-click="currentOutNoExpanded=0; sizeOutNoExpanded=tx.voutSimple.length">more...</a>
</div>
</div>
<!-- Full view -->
<div data-ng-if="itemsExpanded" data-ng-init="currentOutExpanded=0; sizeOutExpanded=5">
<div data-ng-repeat="vout in tx.vout| startFrom:currentOutExpanded*sizeOutExpanded | limitTo:sizeOutExpanded">
<div class="col-md-12 transaction-vin-vout">
<div class="text-muted pull-right btc-value">
<small>{{$root.currency.getConvertion(vout.value)}}
<span class="text-success" data-ng-show="!vout.spendTxId" tooltip="Output is unspent" tooltip-placement="left">(U)</span>
<a class="glyphicon glyphicon-chevron-right" data-ng-show="vout.spendTxId" href="/tx/{{vout.spendTxId}}" title="Spent at: {{vout.spendTxId}},{{vout.spendIndex}}"></a>&nbsp;&nbsp;
</small>
</div>
<div class="ellipsis">
<a href="/address/{{address}}" data-ng-repeat="address in vout.scriptPubKey.addresses">{{address}}</a>
</div>
</div>
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body" style="word-wrap:break-word">
<small>
<p>
<strong>Type</strong>
{{vout.scriptPubKey.type}}
</p>
<p>
<strong>scriptPubKey</strong>
{{vout.scriptPubKey.asm}}
</p>
</small>
</div>
</div>
</div>
</div>
<div class="showmore_collapse text-center" data-ng-show="tx.vout.length > 5" data-ng-class="{ 'hidden': !itemsExpanded}">
<a href="#" ng-hide="sizeOutExpanded != tx.vout.length" ng-click="currentOutExpanded=0; sizeOutExpanded=5">...less</a>
<a href="#" ng-hide="currentOutExpanded >= tx.vout.length/sizeOutExpanded - 1" ng-click="currentOutExpanded=0; sizeOutExpanded=tx.vout.length">more...</a>
</div>
</div>
</div> <!-- if-->
</div>
</div>
</div>
<div class="panel panel-default" data-ng-show="itemsExpanded && tx.blockhash">
<div class="panel panel-default" data-ng-class="{ 'hidden': !itemsExpanded && !tx.blockhash}">
<div class="panel-body" style="word-wrap:break-word">
<small>
<strong>BlockHash</strong>
@ -147,7 +168,8 @@
</small>
</div>
</div>
<div class="line-top row">
<div class="line-top row ng-cloak" data-ng-hide="!tx" data-ng-cloak>
<div class="col-xs-12 col-sm-4 col-md-4">
<span data-ng-show="!tx.isCoinBase && !isNaN(parseFloat(tx.fees))" class="txvalues txvalues-default">Fees: {{$root.currency.getConvertion(tx.fees)}} </span>
</div>