RanchiMall/flosight-api
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added loading spinner and links to block detail

Browse Source
This commit is contained in:
Darren Nelsen 2017-08-17 16:42:09 -04:00
parent f2196bc297
commit cdbc84e93a
2 changed files with 37 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
app/src/components/latest-blocks/latest-blocks.html
View File

@ -1,27 +1,32 @@
<!-- Generated template for the LatestBlocksComponent component --> <!-- Generated template for the LatestBlocksComponent component -->
<div> <div>
{{text}} <div *ngIf="loading">
<ion-grid> <ion-spinner name="crescent"></ion-spinner>
</div>
<ion-row> <div *ngIf="!loading">
<ion-col><b>Height</b></ion-col> <ion-grid>
<ion-col><b>Age</b></ion-col>
<ion-col text-right><b>Transactions</b></ion-col> <ion-row>
<ion-col text-right><b>Size</b></ion-col> <ion-col><b>Height</b></ion-col>
</ion-row> <ion-col><b>Age</b></ion-col>
<ion-row *ngFor="let block of getBlocks(8)"> <ion-col text-right><b>Transactions</b></ion-col>
<ion-col> <ion-col text-right><b>Size</b></ion-col>
<a (click)="goToBlock(block.hash)">{{block.height}}</a> </ion-row>
</ion-col> <ion-row *ngFor="let block of getBlocks(6)">
<ion-col> <ion-col>
{{ block.time | amFromUnix | amTimeAgo }} <a (click)="goToBlock(block.hash)">{{block.height}}</a>
</ion-col> </ion-col>
<ion-col text-right> <ion-col>
{{block.txlength}} {{ block.time | amFromUnix | amTimeAgo }}
</ion-col> </ion-col>
<ion-col text-right> <ion-col text-right>
{{ block.size }} {{block.txlength}}
</ion-col> </ion-col>
</ion-row> <ion-col text-right>
</ion-grid> {{ block.size }}
</ion-col>
</ion-row>
</ion-grid>
</div>
</div> </div>

16
app/src/components/latest-blocks/latest-blocks.ts
View File

@ -1,5 +1,6 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { BlocksProvider } from '../../providers/blocks/blocks'; import { BlocksProvider } from '../../providers/blocks/blocks';
import { NavController } from 'ionic-angular';
/** /**
* Generated class for the LatestBlocksComponent component. * Generated class for the LatestBlocksComponent component.
@ -13,25 +14,26 @@ import { BlocksProvider } from '../../providers/blocks/blocks';
}) })
export class LatestBlocksComponent { export class LatestBlocksComponent {
private text: string; public loading: boolean = true;
public blocks: Array<any> = []; public blocks: Array<any> = [];
constructor(private blocksProvider: BlocksProvider) { constructor(private blocksProvider: BlocksProvider, private navCtrl: NavController) {
this.text = 'Hello Latest Blocks';
blocksProvider.getBlocks().subscribe( blocksProvider.getBlocks().subscribe(
(data) => { (data) => {
this.blocks = JSON.parse(data['_body']).blocks; this.blocks = JSON.parse(data['_body']).blocks;
console.log('blocks', this.blocks); this.loading = false;
}, },
(err) => { (err) => {
console.log('err', err); console.log('err', err);
this.loading = false;
} }
); );
} }
public goToBlock(hash: string): void { public goToBlock(blockHash: string): void {
console.log('go to', hash); this.navCtrl.push('block-detail', {
'blockHash': blockHash
});
} }
public getBlocks(num: number = 10): Array<any> { public getBlocks(num: number = 10): Array<any> {