added See All Blocks button to latest-blocks component; created new BlocksPage with ionic convention; deprecated previous BlocksPage; fixed e2e tests

app/e2e/app.e2e-spec.ts

@@ -7,17 +7,13 @@ describe('InsightApp', () => {
   });
 
   it('should have a title', () => {
-    expect(browser.getTitle()).toEqual('Blocks');
+    expect(browser.getTitle()).toEqual('Home');
   });
 
   it('should have {nav}', () => {
     expect(element(by.css('ion-navbar')).isPresent()).toEqual(true);
   });
 
-  it('should have correct nav text for Home', () => {
-    expect(element(by.css('ion-navbar:first-child')).getText()).toContain('Blocks');
-  });
-
   it('has a menu button that displays the left menu', () => {
     element(by.css('.bar-button-menutoggle')).click()
       .then(() => {

app/src/components/latest-blocks/latest-blocks.html

@@ -27,6 +27,11 @@
           {{ block.size }}
         </ion-col>
       </ion-row>
+      <ion-row>
+        <ion-col text-center>
+          <button ion-button (click)="goToBlocks()">See all blocks</button>
+        </ion-col>
+      </ion-row>
     </ion-grid>
   </div>
 </div>

app/src/components/latest-blocks/latest-blocks.scss

@@ -15,5 +15,9 @@ latest-blocks {
       background-color: white;
       border-top: none;
     }
+
+    ion-row:last-child {
+      background-color: white;
+    }
   }
 }

app/src/components/latest-blocks/latest-blocks.ts

@@ -19,12 +19,14 @@ export class LatestBlocksComponent {
 
   constructor(private blocksProvider: BlocksProvider, private navCtrl: NavController) {
     this.loadBlocks();
+    /*
     setInterval(
       function (): void {
         this.loadBlocks.call(this);
       }.bind(this),
       1000 * 30
     );
+     */
   }
 
   private loadBlocks(): void {
@@ -51,4 +53,8 @@ export class LatestBlocksComponent {
     return this.blocks.filter((block, index) => index < num);
     /* tslint:enable:no-unused-variable */
   }
+
+  public goToBlocks(): void {
+    this.navCtrl.push('blocks');
+  }
 }

app/src/components/latest-transactions/latest-transactions.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
-import { Http } from '@angular/http';
+// import { Http } from '@angular/http';
-import { ApiProvider } from '../../providers/api/api';
+// import { ApiProvider } from '../../providers/api/api';
 
 /**
  * Generated class for the LatestTransactionsComponent component.
@@ -16,7 +16,7 @@ export class LatestTransactionsComponent {
 
   private text: string;
 
-  constructor(private http: Http, private api: ApiProvider) {
+  constructor(/*private http: Http, private api: ApiProvider*/) {
     console.log('Hello LatestTransactionsComponent Component');
     this.text = 'Hello Latest Transactions';
 

app/src/pages/blocks/blocks.html

@@ -0,0 +1,39 @@
+<ion-header>
+  <head-nav [title]="'Blocks'"></head-nav>
+</ion-header>
+
+<ion-content padding>
+  <div *ngIf="loading">
+    <ion-spinner name="crescent"></ion-spinner>
+  </div>
+
+  <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>
+  </div>
+</ion-content>

app/src/pages/blocks/blocks.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { BlocksPage } from './blocks';
+import { HeadNavComponentModule } from '../../components/head-nav/head-nav.module';
+
+@NgModule({
+  declarations: [
+    BlocksPage
+  ],
+  imports: [
+    IonicPageModule.forChild(BlocksPage),
+    HeadNavComponentModule
+  ],
+  exports: [
+    BlocksPage
+  ]
+})
+export class BlocksPageModule {}

app/src/pages/blocks/blocks.scss

@@ -0,0 +1,23 @@
+page-blocks {
+  ion-grid {
+    // border: 2px solid green;
+    margin: 10px 0 20px;
+
+    ion-row {
+      border-top: 1px solid #ccc;
+    }
+
+    ion-row:nth-child(even) {
+      background-color: #f4f4f4;
+    }
+
+    ion-row:first-child {
+      background-color: white;
+      border-top: none;
+    }
+
+    ion-row:last-child {
+      background-color: white;
+    }
+  }
+}

app/src/pages/blocks/blocks.ts

@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
+import { BlocksProvider } from '../../providers/blocks/blocks';
+
+/**
+ * Generated class for the BlocksPage page.
+ *
+ * See http://ionicframework.com/docs/components/#navigation for more info
+ * on Ionic pages and navigation.
+ */
+@IonicPage({
+  name: 'blocks',
+  segment: 'blocks/'
+})
+@Component({
+  selector: 'page-blocks',
+  templateUrl: 'blocks.html'
+})
+export class BlocksPage {
+
+  public loading: boolean = true;
+  public blocks: Array<any> = [];
+
+  constructor(public navCtrl: NavController, public navParams: NavParams, private blocksProvider: BlocksProvider) {
+    this.blocksProvider.getBlocks().subscribe(
+      (data) => {
+        this.blocks = JSON.parse(data['_body']).blocks;
+        console.log('this.blocks', this.blocks);
+        this.loading = false;
+      },
+      (err) => {
+        console.log('err', err);
+        this.loading = false;
+      }
+    );
+  }
+}

app/src/pages/blocksPage/blocksPage.ts

@@ -4,10 +4,12 @@ import { Observable } from 'rxjs';
 import { Block } from '../../models';
 import { BlocksService } from '../../services';
 
+/**
+ * @deprecated Use BlocksPage from ../blocks/blocks
+ */
 @Component({
   templateUrl: './blocksPage.html'
 })
-
 export class BlocksPage {
 
   public title: string;

app/src/pages/index.ts

@@ -1,6 +1,6 @@
-export * from './blocksPage/blocksPage';
 export * from './broadcastTxPage/broadcastTxPage';
 export * from './nodeStatusPage/nodeStatusPage';
 export * from './verifyMessagePage/verifyMessagePage';
 export * from './home/home';
+export * from './blocks/blocks';
 export * from './pages.module';

app/src/pages/pages.module.ts

@@ -1,12 +1,12 @@
 import { NgModule }         from '@angular/core';
 import { IonicModule }      from 'ionic-angular';
 import { ComponentsModule } from '../components';
+import { BlocksPageModule } from '../pages/blocks/blocks.module';
 import { HeadNavComponentModule } from '../components/head-nav/head-nav.module';
 import { LatestTransactionsComponentModule } from '../components/latest-transactions/latest-transactions.module';
 import { LatestBlocksComponentModule } from '../components/latest-blocks/latest-blocks.module';
 import {
   HomePage,
-  BlocksPage,
   BroadcastTxPage,
   NodeStatusPage,
   VerifyMessagePage
@@ -15,7 +15,6 @@ import {
 @NgModule({
   declarations: [
     HomePage,
-    BlocksPage,
     BroadcastTxPage,
     NodeStatusPage,
     VerifyMessagePage
@@ -23,6 +22,7 @@ import {
   imports: [
     IonicModule,
     ComponentsModule,
+    BlocksPageModule,
     HeadNavComponentModule,
     LatestTransactionsComponentModule,
     LatestBlocksComponentModule