copay/www/views/bitpayCard.html

111 lines
4.2 KiB
HTML

<ion-view id="bitpayCard">
<ion-nav-bar class="bar-royal">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-title>BitPay Visa<sup>&reg;</sup> Card ({{bitpayCard.lastFourDigits}})</ion-nav-title>
</ion-nav-bar>
<ion-content>
<div class="box-notification warning m0" ng-show="network == 'testnet'">
Sandbox version. Only for testing purpose
</div>
<div class="amount-wrapper" ng-show="!error">
<div class="amount-bg"></div>
<div class="amount">
<div ng-if="bitpayCard.balance" ng-click="bitpayCard.update()">
<div class="amount__balance">${{bitpayCard.balance}}</div>
<div class="size-12 m5r" ng-if="bitpayCard.updatedOn">
{{bitpayCard.updatedOn * 1000 | amTimeAgo}}
</div>
<a class="button button-primary button-small m5t size-14"
style="padding: 0.5em 1em;"
ui-sref="tabs.bitpayCard.amount({nextStep: 'tabs.bitpayCard.topup'})">
<i class="icon ion-plus m10r" style="vertical-align: baseline;"></i>
{{'Add Funds'|translate}}
</a>
</div>
<div ng-if="!bitpayCard.balance" class="m10t">
<strong class="size-36">...</strong>
</div>
</div>
<div class="wallet-details-wallet-info">
<ion-spinner class="spinner-dark recent right" icon="crescent" ng-show="loadingHistory" ></ion-spinner>
</div>
</div>
<div ng-show="error" class="text-center m10t assertive">
{{error}}
</div>
<div
class="text-center padding get-started"
ng-show="bitpayCard.getStarted">
<i class="icon ion-ios-arrow-thin-up get-started__arrow"></i>
<h1>Get started</h1>
<div class="get-started__text">
Your BitPay Card is ready. Add funds to your card to start using your card at stores and ATMs worldwide.
</div>
</div>
<div class="list" ng-show="!bitpayCard.getStarted">
<label class="item item-input item-select">
<div class="input-label" translate>
Activity
</div>
<select ng-model="dateRange.value" ng-change="bitpayCard.update()">
<option value="last30Days" selected translate>Recent</option>
<option value="lastMonth" translate>Last Month</option>
<option value="all" translate>All</option>
</select>
</label>
<div ng-if="bitpayCard.bitpayCardTransactionHistory[0]"
ng-repeat="tx in bitpayCard.bitpayCardTransactionHistory"
class="item row">
<div class="col col-10 text-center">
<div class="tu size-12">{{tx.timestamp | amDateFormat:'MMM'}}</div>
<div class="text-light">{{tx.timestamp | amDateFormat:'DD'}}</div>
</div>
<div class="col col-10">
<img class="m15t" ng-src="img/mcc-icons/{{tx.icon}}.svg" width="24">
</div>
<div class="col col-50">
<div class="size-12 text-bold">
{{tx.merchant.name || 'Unknown Merchant'}}
</div>
<div class="size-12 text-gray">
<span ng-show="tx.merchant.city && tx.merchant.state">{{tx.merchant.city}}, {{tx.merchant.state}}</span>
<span ng-class="{'m5l':tx.merchant.city && tx.merchant.state}">
{{tx.timestamp | amDateFormat:'h:mm A'}}
</span>
</div>
</div>
<!--
<div class="col size-12">
{{tx.desc}}
</div>
<div class="col col-10 text-center p10t">
<img ng-show="!tx.pending" ng-src="img/check.svg" width="14">
<img ng-show="tx.pending" ng-src="img/sync.svg" width="14">
</div>
-->
<div class="col text-right">
<div ng-class="{
'balanced': tx.price.toString().indexOf('-') == -1 && !tx.pending,
'stable': tx.price.toString().indexOf('-') == -1 && tx.pending}">
<span ng-show="tx.price.toString().indexOf('-') == -1 && !tx.pending">+ </span>
{{tx.price | currency:'$':2 }}
</div>
<time class="size-12 text-gray" ng-if="!tx.pending">{{tx.runningBalance | currency:'$':2}}</time>
<span class="size-12 text-gray text-italic" ng-if="tx.pending" class="tu" translate>Pending</span>
</div>
</div>
</div>
</ion-content>
</ion-view>