add loading indication

This commit is contained in:
Darren Nelsen 2017-07-26 16:05:10 -04:00
parent 2bc629cac5
commit ccc5f8868a
2 changed files with 28 additions and 16 deletions

View File

@ -17,17 +17,22 @@
<h1>Block # {{ block.height }}</h1>
<p>BlockHash {{ block.hash }}</p>
<h2>Summary</h2>
<p>Number of Transactions {{ block.tx.length }}</p>
<p>Height {{ block.height }}</p>
<p>Block Reward {{ block.reward }}</p>
<p>Timestamp {{ block.time }}</p>
<p>Mined by</p>
<p>Merkle Root {{ block.merkleroot }}</p>
<p>Previous Block <a (click)="goToPreviousBlock()">{{ block.height - 1 }}</a></p>
<p>Difficulty {{ block.difficulty }}</p>
<p>Bits {{ block.bits }}</p>
<p>Size (bytes) {{ block.size }}</p>
<p>Version {{ block.version }}</p>
<p>Nonce {{ block.nonce }}</p>
<p>Next Block <a (click)="goToNextBlock()">{{ block.height + 1 }}</a></p>
<div *ngIf="!loading">
<p>Number of Transactions {{ block.tx.length }}</p>
<p>Height {{ block.height }}</p>
<p>Block Reward {{ block.reward }}</p>
<p>Timestamp {{ block.time }}</p>
<p>Mined by</p>
<p>Merkle Root {{ block.merkleroot }}</p>
<p>Previous Block <a (click)="goToPreviousBlock()">{{ block.height - 1 }}</a></p>
<p>Difficulty {{ block.difficulty }}</p>
<p>Bits {{ block.bits }}</p>
<p>Size (bytes) {{ block.size }}</p>
<p>Version {{ block.version }}</p>
<p>Nonce {{ block.nonce }}</p>
<p>Next Block <a (click)="goToNextBlock()">{{ block.height + 1 }}</a></p>
</div>
<div *ngIf="loading">
<p>Loading...</p>
</div>
</ion-content>

View File

@ -18,6 +18,7 @@ import { Http } from '@angular/http';
})
export class BlockDetailPage {
public loading: boolean = true;
private blockHash: string;
public block: any = {
tx: []
@ -25,7 +26,6 @@ export class BlockDetailPage {
constructor(public navCtrl: NavController, private http: Http, public navParams: NavParams) {
this.blockHash = navParams.get('blockHash');
console.log('blockHash is', this.blockHash);
let apiPrefix: string = 'http://localhost:3001/insight-api/';
@ -37,6 +37,9 @@ export class BlockDetailPage {
},
(err) => {
console.log('err is', err);
},
() => {
this.loading = false;
}
);
}
@ -45,13 +48,17 @@ export class BlockDetailPage {
console.log('ionViewDidLoad BlockDetailPage');
}
public goToPreviousBlock() {
public ionViewWillLeave(): void {
this.loading = true;
}
public goToPreviousBlock(): void {
this.navCtrl.push('block-detail', {
'blockHash': this.block.previousblockhash
});
}
public goToNextBlock() {
public goToNextBlock(): void {
this.navCtrl.push('block-detail', {
'blockHash': this.block.nextblockhash
});