added input parms for latest-blocks component; replaced block grid on blocks page with latest-blocks component

This commit is contained in:
Darren Nelsen 2017-08-18 17:08:58 -04:00
parent 5e79d1d4f3
commit d5adf90a9b
5 changed files with 23 additions and 35 deletions

View File

@ -9,25 +9,33 @@
<ion-row>
<ion-col><b>Height</b></ion-col>
<ion-col><b>Age</b></ion-col>
<ion-col *ngIf="showTimeAs === 'age'"><b>Age</b></ion-col>
<ion-col *ngIf="showTimeAs === 'timestamp'"><b>Timestamp</b></ion-col>
<ion-col text-right><b>Transactions</b></ion-col>
<ion-col><b>Mined By</b></ion-col>
<ion-col text-right><b>Size</b></ion-col>
</ion-row>
<ion-row *ngFor="let block of getBlocks(6)">
<ion-row *ngFor="let block of getBlocks()">
<ion-col>
<a (click)="goToBlock(block.hash)">{{block.height}}</a>
</ion-col>
<ion-col>
<ion-col *ngIf="showTimeAs === 'age'">
{{ block.time | amFromUnix | amTimeAgo }}
</ion-col>
<ion-col *ngIf="showTimeAs === 'timestamp'">
{{ block.time * 1000 | date:'medium' }}
</ion-col>
<ion-col text-right>
{{block.txlength}}
</ion-col>
<ion-col>
<a *ngIf="block.poolInfo.poolName" href="{{block.poolInfo.url}}">{{block.poolInfo.poolName}}</a>
</ion-col>
<ion-col text-right>
{{ block.size }}
</ion-col>
</ion-row>
<ion-row>
<ion-row *ngIf="showAllBlocksButton">
<ion-col text-center>
<button ion-button (click)="goToBlocks()">See all blocks</button>
</ion-col>

View File

@ -1,4 +1,4 @@
import { Component, NgZone } from '@angular/core';
import { Component, NgZone, Input } from '@angular/core';
import { BlocksProvider } from '../../providers/blocks/blocks';
import { NavController } from 'ionic-angular';
@ -16,6 +16,9 @@ export class LatestBlocksComponent {
public loading: boolean = true;
public blocks: Array<any> = [];
@Input() public numBlocks: number;
@Input() public showAllBlocksButton: boolean;
@Input() public showTimeAs: string;
constructor(private blocksProvider: BlocksProvider, private navCtrl: NavController, ngZone: NgZone) {
this.loadBlocks();
@ -50,9 +53,9 @@ export class LatestBlocksComponent {
});
}
public getBlocks(num: number = 10): Array<any> {
public getBlocks(): Array<any> {
/* tslint:disable:no-unused-variable */
return this.blocks.filter((block, index) => index < num);
return this.blocks.filter((block, index) => index < this.numBlocks);
/* tslint:enable:no-unused-variable */
}

View File

@ -9,31 +9,6 @@
<div *ngIf="!loading">
<h1>Blocks</h1>
<ion-grid>
<ion-row>
<ion-col><b>Height</b></ion-col>
<ion-col><b>Timestamp</b></ion-col>
<ion-col text-right><b>Transactions</b></ion-col>
<ion-col><b>Mined By</b></ion-col>
<ion-col text-right><b>Size</b></ion-col>
</ion-row>
<ion-row *ngFor="let block of blocks">
<ion-col>
<a (click)="goToBlock(block.hash)">{{block.height}}</a>
</ion-col>
<ion-col>
{{ block.time * 1000 | date:'medium' }}
</ion-col>
<ion-col text-right>
{{ block.txlength }}
</ion-col>
<ion-col>
<a *ngIf="block.poolInfo.poolName" href="{{block.poolInfo.url}}">{{block.poolInfo.poolName}}</a>
</ion-col>
<ion-col text-right>
{{ block.size }}
</ion-col>
</ion-row>
</ion-grid>
<latest-blocks [numBlocks]="100" [showTimeAs]="'timestamp'" [showAllBlocksButton]="false"></latest-blocks>
</div>
</ion-content>

View File

@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { BlocksPage } from './blocks';
import { HeadNavComponentModule } from '../../components/head-nav/head-nav.module';
import { LatestBlocksComponentModule } from '../../components/latest-blocks/latest-blocks.module';
@NgModule({
declarations: [
@ -9,7 +10,8 @@ import { HeadNavComponentModule } from '../../components/head-nav/head-nav.modul
],
imports: [
IonicPageModule.forChild(BlocksPage),
HeadNavComponentModule
HeadNavComponentModule,
LatestBlocksComponentModule
],
exports: [
BlocksPage

View File

@ -13,7 +13,7 @@
<div>
<h1>Latest Blocks</h1>
<latest-blocks></latest-blocks>
<latest-blocks [numBlocks]="6" [showTimeAs]="'age'" [showAllBlocksButton]="true"></latest-blocks>
</div>
<div>