anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

add modal in Tx history

Browse source
This commit is contained in:
Matias Alejo Garcia 2014-12-04 13:42:50 -03:00
commit 7642e524d6
4 changed files with 192 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

173
views/history.html
View file

@ -1,141 +1,82 @@
<div class="transactions" data-ng-controller="HistoryController" data-ng-init="update()">
<div class="row">
<div class="large-12 medium-12 small-12 columns">
<h1 class="hide-for-large-up">{{$root.title}}</h1>
<div ng-if="loading" class="m20b">
<i class="fi-bitcoin-circle icon-rotate spinner"></i>
<span translate>Loading...</span>
</div>
<div ng-if="!blockchain_txs[0].txid && !loading">
<em><strong translate>No transactions yet.</strong></em>
</div>
<div class="row">
<div class="large-12 medium-12 small-12 columns">
<h1 class="hide-for-large-up">{{$root.title}}</h1>
<div ng-if="loading" class="m20b">
<i class="fi-bitcoin-circle icon-rotate spinner"></i>
<span translate>Loading...</span>
</div>
<div ng-if="!blockchain_txs[0].txid && !loading">
<em><strong translate>No transactions yet.</strong></em>
</div>
</div>
<div class="row" ng-if="blockchain_txs[0].txid">
<div class="large-12 columns">
<div class="panel"
ng-repeat="btx in blockchain_txs | orderBy:'-ts'">
<div class="row size-14">
<div class="large-2 medium-2 small-12 columns" ng-click="btx.showDetails = !btx.showDetails">
<div class="tx-date oh">
<div class="right hide-for-large-only">
<span ng-show="!btx.showDetails">
<i class="icon-arrow-down2"></i>
</span>
<span ng-show="btx.showDetails">
<i class="icon-arrow-up2"></i>
</span>
</div>
<time
class="hastip"
ng-if="btx.ts"
data-options="disable_for_touch:true"
tooltip-popup-delay='500'
tooltip-placement="top"
tooltip="{{btx.ts | amCalendar}}"
tooltip-placement="left">{{btx.ts | amTimeAgo}}</time>
<span class="label alert" ng-show="!btx.ts && (!btx.confirmations || btx.confirmations == 0)">
<span translate>Unconfirmed</span>
</span>
</div>
</div>
</div>
<div class="row" ng-if="blockchain_txs[0].txid">
<div class="large-12 columns">
<div class="panel" ng-repeat="btx in blockchain_txs | orderBy:'-ts'">
<div class="row size-14" ng-click="openTxModal(btx)">
<div class="large-3 medium-3 small-5 columns text-right">
<div class="tx-amount" ng-class="{
<div class="large-2 medium-3 small-4 columns">
<div class="tx-date oh">
<time ng-if="btx.ts">{{btx.ts | amTimeAgo}}</time>
<span class="label alert" ng-show="!btx.ts && (!btx.confirmations || btx.confirmations == 0)">
<span translate>Unconfirmed</span>
</span>
</div>
</div>
<div class="large-3 medium-9 small-8 columns text-right">
<div class="tx-amount left" ng-class="{
'text-primary' : btx.action == 'received',
'text-warning': btx.action == 'sent',
'text-gray': btx.action == 'moved'}">
<b>{{btx.amount}} {{$root.wallet.settings.unitName}}</b>
<span class="alt-currency" ng-class="{
<b>{{btx.amount}} {{$root.wallet.settings.unitName}}</b>
<span class="alt-currency" ng-class="{
'green' : btx.action == 'received',
'red': btx.action == 'sent',
'gray': btx.action == 'moved'}" ng-show="btx.alternativeAmount != null">
{{btx.alternativeAmount}} {{$root.wallet.settings.alternativeIsoCode}}
</span>
</div>
</div>
<div class="large-1 medium-1 small-2 columns text-center">
<div ng-class="{
<div ng-class="{
'text-primary' : btx.action == 'received',
'text-warning': btx.action == 'sent',
'text-gray': btx.action == 'moved'}">
<i class="m15h"
ng-class="{
<i class="m15h" ng-class="{
'fi-arrow-left' : btx.action == 'received',
'fi-arrow-right': btx.action == 'sent',
'fi-loop': btx.action == 'moved'}"></i>
</div>
</div>
<div class="large-3 medium-3 small-5 columns text-gray">
<span class="ellipsis">{{btx.labelTo || btx.addressTo}}</span>
</div>
<div class="large-2 medium-2 small-12 columns text-gray">
<div class="tx-comment" ng-show="btx.comment">
<i class="fi-comment-quotes"></i> {{btx.comment}}</div>
</div>
<div class="large-1 columns show-for-large-up text-gray text-right" ng-init="btx.showDetails = false">
<a ng-click="btx.showDetails = !btx.showDetails">
<i ng-if="!btx.showDetails" class="icon-arrow-down4"></i>
<i ng-if="btx.showDetails" class="icon-arrow-up4"></i>
</a>
</div>
</div>
<div ng-show="btx.showDetails" class="m10t">
<div class="send-note" ng-show="!!btx.merchant">
<p>
<b>{{btx.merchant.pr.pd.memo}}</b>
<p>
<b>{{btx.paymentAckMemo}}</b>
<span ng-show="tx.merchant.domain">[{{btx.merchant.domain}}]</span>
</div>
<table class="last-transactions-content" ng-if="btx.actionList[0]">
<tbody>
<tr ng-repeat="c in btx.actionList">
<td>
<i ng-if="c.actions.rejected" class="fi-x icon-status icon-active-x"></i>
<i ng-if="c.actions.sign" class="fi-check icon-status icon-active-check"></i>
</td>
<td>
<i ng-if="c.actions.create" class="fi-crown icon-status icon-active"></i>
</td>
<td class="copayer-name text-gray" width="100%">{{c.cId === $root.wallet.getMyCopayerId() ? 'Me' : $root.wallet.publicKeyRing.nicknameForCopayer(c.cId)}}
</td>
</tr>
</tbody>
</table>
<div class="line"></div>
<div class="size-12 text-gray text-right">
<a href="http://{{getShortNetworkName()}}.insight.is/tx/{{btx.txid}}" target="_blank"> More details <i class="icon-arrow-right2 vm"></i></a>
<span class="left hide-for-small-only">Transaction ID: {{btx.txid}} </span>
</div>
</div>
<div class="large-7 medium-12 small-12 columns text-gray">
<div class="tx-comment" ng-show="btx.comment">
<i class="fi-comment-quotes"></i> {{btx.comment}}
</div>
</div>
</div>
</div>
</div>
</div>
<div ng-show="blockchain_txs[0].txid">
<div class="line-white"></div>
<div class="row">
<div class="large-9 columns">
<pagination page="currentPage" total-items="totalItems" items-per-page="itemsPerPage" on-select-page="selectPage(page)" max-size="10" />
</div>
<div class="large-3 columns m5t text-right size-12 show-for-large-up">
<div ng-if="generating">
<i class="fi-bitcoin-circle icon-rotate spinner"></i>
<span translate>Generating file...</span>
</div>
<div ng-if="!generating">
<a class="text-gray" href="#!/history" ng-click="downloadHistory();">
<i class="fi-page-export-csv"></i>
<span translate>Download CSV file</span>
</a>
</div>
</div>
</div>
<div ng-show="blockchain_txs[0].txid">
<div class="line-white"></div>
<div class="row">
<div class="large-9 columns">
<pagination page="currentPage" total-items="totalItems" items-per-page="itemsPerPage" on-select-page="selectPage(page)" max-size="10" />
</div>
<div class="large-3 columns m5t text-right size-12 show-for-large-up">
<div ng-if="generating">
<i class="fi-bitcoin-circle icon-rotate spinner"></i>
<span translate>Generating file...</span>
</div>
<div ng-if="!generating">
<a class="text-gray" href="#!/history" ng-click="downloadHistory();">
<i class="fi-page-export-csv"></i>
<span translate>Download CSV file</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>

91
views/modals/tx-details.html Normal file
View file

@ -0,0 +1,91 @@
<a class="close-reveal-modal" ng-click="cancel()">&#215;</a>
<h3>Transaction Details</h3>
<div class="size-14">
<div>
<span class="ellipsis"> ID: {{btx.txid}}</span>
</div>
<div ng-if="btx.ts" class="m10v">
<time>{{btx.ts | amTimeAgo}}</time>
:
<time>{{btx.ts | amCalendar}}</time>
</div>
<div class="m30v">
<div class="text-center size-72">
<div ng-class="{
'text-primary' : btx.action == 'received',
'text-warning': btx.action == 'sent',
'text-gray': btx.action == 'moved'}">
<i ng-class="{
'fi-arrow-left' : btx.action == 'received',
'fi-arrow-right': btx.action == 'sent',
'fi-loop': btx.action == 'moved'}"></i>
</div>
</div>
<div class="text-center" class="m10v">
<div class="tx-amount" ng-class="{
'text-primary' : btx.action == 'received',
'text-warning': btx.action == 'sent',
'text-gray': btx.action == 'moved'}">
<b>{{btx.amount}} {{$root.wallet.settings.unitName}}</b>
<span class="alt-currency" ng-class="{
'green' : btx.action == 'received',
'red': btx.action == 'sent',
'gray': btx.action == 'moved'}" ng-show="btx.alternativeAmount != null">
{{btx.alternativeAmount}} {{$root.wallet.settings.alternativeIsoCode}}
</span>
</div>
</div>
</div>
<div class="m10v" class="m10v">
<span class="label alert" ng-show="!btx.ts && (!btx.confirmations || btx.confirmations == 0)">
<span translate>Unconfirmed</span>
</span>
<span ng-show="btx.confirmations>0" class="m10v">
<span translate>Confirmations:</span>{{btx.confirmations}}
</span>
</div>
<div ng-if="btx.addressTo" class="m10v">
<span class="ellipsis">To: {{btx.labelTo || btx.addressTo}}</span>
</div>
<div ng-if="!!btx.merchant" class="m10v">
Payment Protocol Information:
<br>{{btx.merchant.pr.pd.memo}}</b>
<br>{{btx.paymentAckMemo}}
<span ng-show="tx.merchant.domain">[{{btx.merchant.domain}}]</span>
</div>
<div ng-if="btx.actionList[0]" class="m10v">
Copayers Actions
<table class="last-transactions-content" ng-if="btx.actionList[0]">
<tbody>
<tr ng-repeat="c in btx.actionList">
<td>
<i ng-if="c.actions.rejected" class="fi-x icon-status icon-active-x"></i>
<i ng-if="c.actions.sign" class="fi-check icon-status icon-active-check"></i>
</td>
<td>
<i ng-if="c.actions.create" class="fi-crown icon-status icon-active"></i>
</td>
<td class="copayer-name text-gray" width="100%">{{c.cId === $root.wallet.getMyCopayerId() ? 'Me' : $root.wallet.publicKeyRing.nicknameForCopayer(c.cId)}}
</td>
</tr>
</tbody>
</table>
</div>
<div class="m10v">
<a href="http://{{getShortNetworkName()}}.insight.is/tx/{{btx.txid}}" target="_blank"> See it on the blockchain <i class="icon-arrow-right2 vm"></i></a>
</p>
</div>
</div>