From d5adf90a9b84cf45eb4237e0f8263800c4102817 Mon Sep 17 00:00:00 2001
From: Darren Nelsen <darren@bitpay.com>
Date: Fri, 18 Aug 2017 17:08:58 -0400
Subject: [PATCH] added input parms for latest-blocks component; replaced block
 grid on blocks page with latest-blocks component

---
 .../latest-blocks/latest-blocks.html          | 16 ++++++++---
 .../components/latest-blocks/latest-blocks.ts |  9 ++++---
 app/src/pages/blocks/blocks.html              | 27 +------------------
 app/src/pages/blocks/blocks.module.ts         |  4 ++-
 app/src/pages/home/home.html                  |  2 +-
 5 files changed, 23 insertions(+), 35 deletions(-)

diff --git a/app/src/components/latest-blocks/latest-blocks.html b/app/src/components/latest-blocks/latest-blocks.html
index d453741..b269bdd 100644
--- a/app/src/components/latest-blocks/latest-blocks.html
+++ b/app/src/components/latest-blocks/latest-blocks.html
@@ -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>
diff --git a/app/src/components/latest-blocks/latest-blocks.ts b/app/src/components/latest-blocks/latest-blocks.ts
index cd1155a..21fc1e4 100644
--- a/app/src/components/latest-blocks/latest-blocks.ts
+++ b/app/src/components/latest-blocks/latest-blocks.ts
@@ -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 */
   }
 
diff --git a/app/src/pages/blocks/blocks.html b/app/src/pages/blocks/blocks.html
index 6f82937..54d52dc 100644
--- a/app/src/pages/blocks/blocks.html
+++ b/app/src/pages/blocks/blocks.html
@@ -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>
diff --git a/app/src/pages/blocks/blocks.module.ts b/app/src/pages/blocks/blocks.module.ts
index 0ec9cc7..521ae44 100644
--- a/app/src/pages/blocks/blocks.module.ts
+++ b/app/src/pages/blocks/blocks.module.ts
@@ -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
diff --git a/app/src/pages/home/home.html b/app/src/pages/home/home.html
index b29ea51..ad57d6d 100644
--- a/app/src/pages/home/home.html
+++ b/app/src/pages/home/home.html
@@ -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>