mirror of https://github.com/BTCPrivate/copay.git
add modal in Tx history
This commit is contained in:
Matias Alejo Garcia
parent
db429a3dc5
commit
7642e524d6
|
|
@ -229,12 +229,6 @@
|
|||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.tx-date {
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.tx-comment {
|
||||
border-top: 1px solid #eee;
|
||||
padding-top: 10px;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
var bitcore = require('bitcore');
|
||||
|
||||
angular.module('copayApp.controllers').controller('HistoryController',
|
||||
function($scope, $rootScope, $filter, $timeout, rateService, notification) {
|
||||
function($scope, $rootScope, $filter, $timeout, $modal, rateService, notification) {
|
||||
var w = $rootScope.wallet;
|
||||
|
||||
$rootScope.title = 'History';
|
||||
|
|
@ -28,14 +28,27 @@ angular.module('copayApp.controllers').controller('HistoryController',
|
|||
|
||||
var filename = "copay_history.csv";
|
||||
var descriptor = {
|
||||
columns: [
|
||||
{ label: 'Date', property: 'ts', type: 'date' },
|
||||
{ label: 'Amount (' + w.settings.unitName + ')', property: 'amount', type: 'number' },
|
||||
{ label: 'Amount (' + w.settings.alternativeIsoCode + ')', property: 'alternativeAmount' },
|
||||
{ label: 'Action', property: 'action' },
|
||||
{ label: 'AddressTo', property: 'addressTo' },
|
||||
{ label: 'Comment', property: 'comment' },
|
||||
],
|
||||
columns: [{
|
||||
label: 'Date',
|
||||
property: 'ts',
|
||||
type: 'date'
|
||||
}, {
|
||||
label: 'Amount (' + w.settings.unitName + ')',
|
||||
property: 'amount',
|
||||
type: 'number'
|
||||
}, {
|
||||
label: 'Amount (' + w.settings.alternativeIsoCode + ')',
|
||||
property: 'alternativeAmount'
|
||||
}, {
|
||||
label: 'Action',
|
||||
property: 'action'
|
||||
}, {
|
||||
label: 'AddressTo',
|
||||
property: 'addressTo'
|
||||
}, {
|
||||
label: 'Comment',
|
||||
property: 'comment'
|
||||
}, ],
|
||||
};
|
||||
if (w.isShared()) {
|
||||
descriptor.columns.push({
|
||||
|
|
@ -58,8 +71,8 @@ angular.module('copayApp.controllers').controller('HistoryController',
|
|||
notification.error('Could not get transaction history');
|
||||
return;
|
||||
}
|
||||
$scope._addRates(w, res.items, function (err) {
|
||||
copay.csv.toCsv(res.items, descriptor, function (err, res) {
|
||||
$scope._addRates(w, res.items, function(err) {
|
||||
copay.csv.toCsv(res.items, descriptor, function(err, res) {
|
||||
if (err) {
|
||||
$scope.generating = false;
|
||||
logger.error(err);
|
||||
|
|
@ -91,7 +104,7 @@ angular.module('copayApp.controllers').controller('HistoryController',
|
|||
}, 1);
|
||||
};
|
||||
|
||||
$scope._getTransactions = function (w, opts, cb) {
|
||||
$scope._getTransactions = function(w, opts, cb) {
|
||||
w.getTransactionHistory(opts, function(err, res) {
|
||||
if (err) return cb(err);
|
||||
if (!res) return cb();
|
||||
|
|
@ -107,7 +120,7 @@ angular.module('copayApp.controllers').controller('HistoryController',
|
|||
});
|
||||
};
|
||||
|
||||
$scope._addRates = function (w, txs, cb) {
|
||||
$scope._addRates = function(w, txs, cb) {
|
||||
if (!txs || txs.length == 0) return cb();
|
||||
var index = _.indexBy(txs, 'rateTs');
|
||||
rateService.getHistoricRates(w.settings.alternativeIsoCode, _.keys(index), function(err, res) {
|
||||
|
|
@ -122,6 +135,29 @@ angular.module('copayApp.controllers').controller('HistoryController',
|
|||
});
|
||||
};
|
||||
|
||||
|
||||
$scope.openTxModal = function(btx) {
|
||||
var ModalInstanceCtrl = function($scope, $modalInstance) {
|
||||
$scope.btx = btx;
|
||||
|
||||
$scope.getShortNetworkName = function() {
|
||||
var w = $rootScope.wallet;
|
||||
return w.getNetworkName().substring(0, 4);
|
||||
};
|
||||
|
||||
|
||||
$scope.cancel = function() {
|
||||
$modalInstance.dismiss('cancel');
|
||||
};
|
||||
};
|
||||
|
||||
$modal.open({
|
||||
templateUrl: 'views/modals/tx-details.html',
|
||||
windowClass: 'tiny',
|
||||
controller: ModalInstanceCtrl,
|
||||
});
|
||||
};
|
||||
|
||||
$scope.getTransactions = function() {
|
||||
var w = $rootScope.wallet;
|
||||
if (!w) return;
|
||||
|
|
@ -142,10 +178,10 @@ angular.module('copayApp.controllers').controller('HistoryController',
|
|||
}
|
||||
|
||||
var items = res.items;
|
||||
$scope._addRates(w, items, function (err) {
|
||||
$timeout(function() {
|
||||
$scope.$digest();
|
||||
}, 1);
|
||||
$scope._addRates(w, items, function(err) {
|
||||
$timeout(function() {
|
||||
$scope.$digest();
|
||||
}, 1);
|
||||
})
|
||||
|
||||
$scope.blockchain_txs = w.cached_txs = items;
|
||||
|
|
@ -164,9 +200,4 @@ angular.module('copayApp.controllers').controller('HistoryController',
|
|||
return actions.hasOwnProperty('create');
|
||||
};
|
||||
|
||||
$scope.getShortNetworkName = function() {
|
||||
var w = $rootScope.wallet;
|
||||
return w.getNetworkName().substring(0, 4);
|
||||
};
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,91 @@
|
|||
|
||||
<a class="close-reveal-modal" ng-click="cancel()">×</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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue