add more fields to blocksPage; add link to block

app/src/pages/block-detail/block-detail.html

@@ -6,7 +6,7 @@
 -->
 <ion-header>
 
-  <ion-navbar>
+  <ion-navbar color="primary">
     <ion-title>Block Detail</ion-title>
   </ion-navbar>
 

app/src/pages/blocksPage/blocksPage.html

@@ -10,32 +10,34 @@
       </button>
     </ion-buttons>
   </ion-navbar>
+  <ion-searchbar (ionInput)="search($event)" placeholder="{{ 'Search for block, transaction or address' }}" [(ngModel)]="q" [debounce]="1000"></ion-searchbar>
 </ion-header>
 
 <ion-content padding>
-  <ion-list>
+  <ion-grid>
     <ion-row>
-      <ion-searchbar (ionInput)="search($event)" placeholder="{{ 'Search for block, transaction or address' }}" [(ngModel)]="q"></ion-searchbar>
+      <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-item>
-      <ion-row>
-        <ion-col>Height</ion-col>
-        <ion-col>Transactions</ion-col>
-        <ion-col>Mined By</ion-col>
-      </ion-row>
-    </ion-item>
-    <ion-item *ngFor="let block of blocks | async">
-      <ion-row>
-        <ion-col>
-          #{{block.height}}
-        </ion-col>
-        <ion-col>
-          {{block.transactionCount}} transactions
-        </ion-col>
-        <ion-col>
-          <a *ngIf="block.poolName" href="{{block.url}}">{{block.poolName}}</a>
-        </ion-col>
-      </ion-row>
-    </ion-item>
-  </ion-list>
+    <ion-row *ngFor="let block of blocks | async">
+      <ion-col>
+        <a (click)="goToBlock(block.hash)">{{block.height}}</a>
+      </ion-col>
+      <ion-col>
+        {{ block.timestamp * 1000 | date:'medium' }}
+      </ion-col>
+      <ion-col text-right>
+        {{block.transactionCount}}
+      </ion-col>
+      <ion-col>
+        <a *ngIf="block.poolName" href="{{block.url}}">{{block.poolName}}</a>
+      </ion-col>
+      <ion-col text-right>
+        {{ block.size }}
+      </ion-col>
+    </ion-row>
+  </ion-grid>
 </ion-content>

app/src/pages/blocksPage/blocksPage.ts

@@ -21,9 +21,9 @@ export class BlocksPage {
   constructor(private navCtrl: NavController, private http: Http, private blocksService: BlocksService, private api: ApiProvider) {
     this.title = 'Blocks';
     this.blocks = blocksService.latestBlocks;
-    // this.blocks.subscribe((blocks) => {
-    //   console.log(blocks);
-    // });
+    this.blocks.subscribe((blocks) => {
+      console.log('blocks', blocks);
+    });
     blocksService.getLatestBlocks();
   }
 
@@ -101,4 +101,10 @@ export class BlocksPage {
   };
   /* tslint:enable:no-unused-variable */
 
+  public goToBlock(blockHash: string): void {
+    this.navCtrl.push('block-detail', {
+      'blockHash': blockHash
+    });
+  }
+
 }