added spinners to transaction and address pages and transaction list component

This commit is contained in:
Darren Nelsen 2017-08-16 12:46:08 -04:00
parent 90379522fe
commit c9a1b6b153
4 changed files with 93 additions and 74 deletions

View File

@ -139,7 +139,7 @@ export class HeadNavComponent {
actionSheet.present();
}
public toggleSearch() {
public toggleSearch(): void {
this.showSearch = !this.showSearch;
}
}

View File

@ -1,7 +1,14 @@
<ion-grid>
<ion-row *ngFor="let tx of transactions.txs">
<ion-col col-12>
<transaction [tx]="tx"></transaction>
</ion-col>
</ion-row>
</ion-grid>
<div *ngIf="loading">
<ion-spinner name="crescent"></ion-spinner>
</div>
<div *ngIf="!loading">
<ion-grid>
<ion-row *ngFor="let tx of transactions.txs">
<ion-col col-12>
<transaction [tx]="tx"></transaction>
</ion-col>
</ion-row>
</ion-grid>
</div>

View File

@ -3,45 +3,51 @@
</ion-header>
<ion-content padding>
<h1>Address</h1>
<p class="ellipsis"><b>Address</b> {{ address.addrStr }}</p>
<p>{{ currency.getConversion(address.balance) }}</p>
<div *ngIf="loading">
<ion-spinner name="crescent"></ion-spinner>
</div>
<h2>Summary</h2>
<div *ngIf="!loading">
<h1>Address</h1>
<p class="ellipsis"><b>Address</b> {{ address.addrStr }}</p>
<p>{{ currency.getConversion(address.balance) }}</p>
<ion-list class="summary">
<ion-item>
Total Received
<span item-end>
{{ currency.getConversion(address.totalReceived) }}
</span>
</ion-item>
<ion-item>
Total Sent
<span item-end>
{{ currency.getConversion(address.totalSent) }}
</span>
</ion-item>
<ion-item>
Final Balance
<span item-end>
{{ currency.getConversion(address.balance) }}
</span>
</ion-item>
<ion-item>
No. Transactions
<span item-end>
{{ address.txApperances }}
</span>
</ion-item>
</ion-list>
<h2>Summary</h2>
<p text-center>
<qr-code [value]="address.addrStr" [size]="160"></qr-code>
<p>
<ion-list class="summary">
<ion-item>
Total Received
<span item-end>
{{ currency.getConversion(address.totalReceived) }}
</span>
</ion-item>
<ion-item>
Total Sent
<span item-end>
{{ currency.getConversion(address.totalSent) }}
</span>
</ion-item>
<ion-item>
Final Balance
<span item-end>
{{ currency.getConversion(address.balance) }}
</span>
</ion-item>
<ion-item>
No. Transactions
<span item-end>
{{ address.txApperances }}
</span>
</ion-item>
</ion-list>
<h2>Transactions</h2>
<p text-center>
<qr-code [value]="address.addrStr" [size]="160"></qr-code>
<p>
<transaction-list [queryType]="'address'" [queryValue]="addrStr"></transaction-list>
<h2>Transactions</h2>
<transaction-list [queryType]="'address'" [queryValue]="addrStr"></transaction-list>
</div>
</ion-content>

View File

@ -3,40 +3,46 @@
</ion-header>
<ion-content padding>
<h1>Transaction</h1>
<p class="ellipsis"><b>Transaction</b> {{ tx.txid }}</p>
<div *ngIf="loading">
<ion-spinner name="crescent"></ion-spinner>
</div>
<h2>Summary</h2>
<div *ngIf="!loading">
<h1>Transaction</h1>
<p class="ellipsis"><b>Transaction</b> {{ tx.txid }}</p>
<ion-list class="summary">
<ion-item>
Size
<span item-end>
{{ tx.size }} (bytes)
</span>
</ion-item>
<ion-item>
Received Time
<span item-end>
{{ tx.time * 1000 | date:'medium' }}
</span>
</ion-item>
<ion-item>
Mined Time
<span item-end>
{{ tx.blocktime * 1000 | date:'medium' }}
</span>
</ion-item>
<ion-item>
Included in Block
<span item-end>
<a (click)="goToBlock(tx.blockhash)">{{ tx.blockhash }}</a>
</span>
</ion-item>
</ion-list>
<h2>Summary</h2>
<h2>Details</h2>
<ion-list class="summary">
<ion-item>
Size
<span item-end>
{{ tx.size }} (bytes)
</span>
</ion-item>
<ion-item>
Received Time
<span item-end>
{{ tx.time * 1000 | date:'medium' }}
</span>
</ion-item>
<ion-item>
Mined Time
<span item-end>
{{ tx.blocktime * 1000 | date:'medium' }}
</span>
</ion-item>
<ion-item>
Included in Block
<span item-end>
<a (click)="goToBlock(tx.blockhash)">{{ tx.blockhash }}</a>
</span>
</ion-item>
</ion-list>
<transaction [tx]="tx"></transaction>
<h2>Details</h2>
<transaction [tx]="tx"></transaction>
</div>
</ion-content>