Added HeadNavComponent to use on all pages

app/package.json

@@ -37,7 +37,7 @@
   "devDependencies": {
     "@angular/cli": "1.1.2",
     "@ionic/app-scripts": "1.3.7",
-    "@ionic/cli-plugin-cordova": "1.6.1",
+    "@ionic/cli-plugin-cordova": "1.6.2",
     "@ionic/cli-plugin-ionic-angular": "1.4.1",
     "@types/jasmine": "2.5.41",
     "@types/node": "7.0.4",

app/src/components/head-nav/head-nav.html

@@ -0,0 +1,12 @@
+<ion-navbar color="primary">
+  <button ion-button menuToggle>
+    <ion-icon name="menu"></ion-icon>
+  </button>
+  <ion-title>{{title}}</ion-title>
+  <ion-buttons end>
+    <button ion-button icon-only>
+      <ion-icon name="search"></ion-icon>
+    </button>
+  </ion-buttons>
+</ion-navbar>
+<ion-searchbar (ionInput)="search($event)" placeholder="{{ 'Search for block, transaction or address' }}" [(ngModel)]="q" [debounce]="1000"></ion-searchbar>

app/src/components/head-nav/head-nav.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { IonicModule } from 'ionic-angular';
+import { HeadNavComponent } from './head-nav';
+
+@NgModule({
+  declarations: [
+    HeadNavComponent,
+  ],
+  imports: [
+    IonicModule,
+  ],
+  exports: [
+    HeadNavComponent
+  ]
+})
+export class HeadNavComponentModule {}

app/src/components/head-nav/head-nav.scss

@@ -0,0 +1,3 @@
+head-nav {
+
+}

app/src/components/head-nav/head-nav.ts

@@ -0,0 +1,101 @@
+import { Component } from '@angular/core';
+import { Input } from '@angular/core';
+import { NavController } from 'ionic-angular';
+import { Http } from '@angular/http';
+import { ApiProvider } from '../../providers/api/api';
+
+/**
+ * Generated class for the HeadNavComponent component.
+ *
+ * See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html
+ * for more info on Angular Components.
+ */
+@Component({
+  selector: 'head-nav',
+  templateUrl: 'head-nav.html'
+})
+export class HeadNavComponent {
+
+  public loading: boolean;
+  @Input() public title: string;
+  public q: string;
+  public badQuery: boolean = false;
+
+  constructor(private navCtrl: NavController, private http: Http, private api: ApiProvider) {
+  }
+
+  private resetSearch(): void {
+    this.q = '';
+    this.loading = false;
+  }
+
+  public search(): void {
+    let apiPrefix: string = this.api.apiPrefix;
+
+    this.http.get(apiPrefix + 'block/' + this.q).subscribe(
+      function (data: any) {
+        this.resetSearch();
+        console.log('block', data);
+        let parsedData: any = JSON.parse(data._body);
+        this.navCtrl.push('block-detail', {
+          'blockHash': parsedData.hash
+        });
+      }.bind(this),
+      () => {
+        this.http.get(apiPrefix + 'tx/' + this.q).subscribe(
+          function (data: any) {
+            this.resetSearch();
+            console.log('tx', data);
+            let parsedData: any = JSON.parse(data._body);
+            this.navCtrl.push('transaction', {
+              'txId': parsedData.txid
+            });
+          }.bind(this),
+          () => {
+            this.http.get(apiPrefix + 'addr/' + this.q).subscribe(
+              function (data: any) {
+                this.resetSearch();
+                console.log('addr', data);
+                let parsedData: any = JSON.parse(data._body);
+                this.navCtrl.push('address', {
+                  'addrStr': parsedData.addrStr
+                });
+              }.bind(this),
+              () => {
+                this.http.get(apiPrefix + 'block-index/' + this.q).subscribe(
+                  function (data: any): void {
+                    this.resetSearch();
+                    let parsedData: any = JSON.parse(data._body);
+                    this.navCtrl.push('block-detail', {
+                      'blockHash': parsedData.blockHash
+                    });
+                  }.bind(this),
+                  function (): void {
+                    this.loading = false;
+                    this.reportBadQuery();
+                  }.bind(this)
+                );
+              }
+            );
+          }
+        );
+      }
+    );
+  }
+
+  /* tslint:disable:no-unused-variable */
+  private reportBadQuery(): void {
+    this.badQuery = true;
+    console.log('badQuery', this.badQuery);
+
+    setTimeout(
+      function (): void {
+        this.badQuery = false;
+        console.log('badQuery', this.badQuery);
+      }.bind(this),
+      2000
+    );
+  };
+  /* tslint:enable:no-unused-variable */
+
+}

app/src/pages/address/address.html

@@ -1,18 +1,7 @@
-<!--
-  Generated template for the AddressPage page.
-
-  See http://ionicframework.com/docs/components/#navigation for more info on
-  Ionic pages and navigation.
--->
 <ion-header>
-
+  <head-nav [title]="'Address'"></head-nav>
-  <ion-navbar>
-    <ion-title>Address</ion-title>
-  </ion-navbar>
-
 </ion-header>
 
-
 <ion-content padding>
   <ion-grid>
     <ion-row>

app/src/pages/address/address.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { IonicPageModule } from 'ionic-angular';
 import { AddressPage } from './address';
 import { TransactionListComponentModule } from '../../components/transaction-list/transaction-list.module';
+import { HeadNavComponentModule } from '../../components/head-nav/head-nav.module';
 
 @NgModule({
   declarations: [
@@ -9,7 +10,8 @@ import { TransactionListComponentModule } from '../../components/transaction-lis
   ],
   imports: [
     IonicPageModule.forChild(AddressPage),
-    TransactionListComponentModule
+    TransactionListComponentModule,
+    HeadNavComponentModule
   ],
   exports: [
     AddressPage

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

@@ -1,18 +1,7 @@
-<!--
-  Generated template for the BlockDetailPage page.
-
-  See http://ionicframework.com/docs/components/#navigation for more info on
-  Ionic pages and navigation.
--->
 <ion-header>
-
+  <head-nav [title]="'Block'"></head-nav>
-  <ion-navbar color="primary">
-    <ion-title>Block Detail</ion-title>
-  </ion-navbar>
-
 </ion-header>
 
-
 <ion-content padding>
   <h1>Block # {{ block.height }}</h1>
   <p>BlockHash {{ block.hash }}</p>

app/src/pages/block-detail/block-detail.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { IonicPageModule } from 'ionic-angular';
 import { BlockDetailPage } from './block-detail';
 import { TransactionListComponentModule } from '../../components/transaction-list/transaction-list.module';
+import { HeadNavComponentModule } from '../../components/head-nav/head-nav.module';
 
 @NgModule({
   declarations: [
@@ -9,7 +10,8 @@ import { TransactionListComponentModule } from '../../components/transaction-lis
   ],
   imports: [
     IonicPageModule.forChild(BlockDetailPage),
-    TransactionListComponentModule
+    TransactionListComponentModule,
+    HeadNavComponentModule
   ],
   exports: [
     BlockDetailPage

app/src/pages/blocksPage/blocksPage.html

@@ -1,16 +1,5 @@
 <ion-header>
-  <ion-navbar color="primary">
+  <head-nav [title]="'Blocks'"></head-nav>
-    <button ion-button menuToggle>
-      <ion-icon name="menu"></ion-icon>
-    </button>
-    <ion-title>{{title}}</ion-title>
-    <ion-buttons end>
-      <button ion-button icon-only>
-        <ion-icon name="search"></ion-icon>
-      </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>

app/src/pages/blocksPage/blocksPage.spec.ts

@@ -21,9 +21,11 @@ describe('Blocks', () => {
     expect(instance).toBeTruthy();
   });
 
+  /*
   it('has a search method', () => {
     spyOn(instance, 'search');
     instance.search();
     expect(instance.search).toHaveBeenCalled();
   });
+   */
 });

app/src/pages/blocksPage/blocksPage.ts

@@ -3,8 +3,6 @@ import { NavController } from 'ionic-angular';
 import { Observable } from 'rxjs';
 import { Block } from '../../models';
 import { BlocksService } from '../../services';
-import { Http } from '@angular/http';
-import { ApiProvider } from '../../providers/api/api';
 
 @Component({
   templateUrl: './blocksPage.html'
@@ -12,13 +10,10 @@ import { ApiProvider } from '../../providers/api/api';
 
 export class BlocksPage {
 
-  public loading: boolean;
   public title: string;
   public blocks: Observable<Block[]>;
-  public q: string;
-  public badQuery: boolean = false;
 
-  constructor(private navCtrl: NavController, private http: Http, private blocksService: BlocksService, private api: ApiProvider) {
+  constructor(private navCtrl: NavController, private blocksService: BlocksService) {
     this.title = 'Blocks';
     this.blocks = blocksService.latestBlocks;
     this.blocks.subscribe((blocks) => {
@@ -27,80 +22,6 @@ export class BlocksPage {
     blocksService.getLatestBlocks();
   }
 
-  public search(): void {
-    let apiPrefix: string = this.api.apiPrefix;
-
-    this.http.get(apiPrefix + 'block/' + this.q).subscribe(
-      function (data: any) {
-        this.resetSearch();
-        console.log('block', data);
-        let parsedData: any = JSON.parse(data._body);
-        this.navCtrl.push('block-detail', {
-          'blockHash': parsedData.hash
-        });
-      }.bind(this),
-      () => {
-        this.http.get(apiPrefix + 'tx/' + this.q).subscribe(
-          function (data: any) {
-            this.resetSearch();
-            console.log('tx', data);
-            let parsedData: any = JSON.parse(data._body);
-            this.navCtrl.push('transaction', {
-              'txId': parsedData.txid
-            });
-          }.bind(this),
-          () => {
-            this.http.get(apiPrefix + 'addr/' + this.q).subscribe(
-              function (data: any) {
-                this.resetSearch();
-                console.log('addr', data);
-                let parsedData: any = JSON.parse(data._body);
-                this.navCtrl.push('address', {
-                  'addrStr': parsedData.addrStr
-                });
-              }.bind(this),
-              () => {
-                this.http.get(apiPrefix + 'block-index/' + this.q).subscribe(
-                  function (data: any): void {
-                    this.resetSearch();
-                    let parsedData: any = JSON.parse(data._body);
-                    this.navCtrl.push('block-detail', {
-                      'blockHash': parsedData.blockHash
-                    });
-                  }.bind(this),
-                  function (): void {
-                    this.loading = false;
-                    this.reportBadQuery();
-                  }.bind(this)
-                );
-              }
-            );
-          }
-        );
-      }
-    );
-  }
-
-  private resetSearch(): void {
-    this.q = '';
-    this.loading = false;
-  }
-
-  /* tslint:disable:no-unused-variable */
-  private reportBadQuery(): void {
-    this.badQuery = true;
-    console.log('badQuery', this.badQuery);
-
-    setTimeout(
-      function (): void {
-        this.badQuery = false;
-        console.log('badQuery', this.badQuery);
-      }.bind(this),
-      2000
-    );
-  };
-  /* tslint:enable:no-unused-variable */
-
   public goToBlock(blockHash: string): void {
     this.navCtrl.push('block-detail', {
       'blockHash': blockHash

app/src/pages/pages.module.ts

@@ -1,6 +1,7 @@
 import { NgModule }         from '@angular/core';
 import { IonicModule }      from 'ionic-angular';
 import { ComponentsModule } from '../components';
+import { HeadNavComponentModule } from '../components/head-nav/head-nav.module';
 import {
   BlocksPage,
   BroadcastTxPage,
@@ -15,7 +16,7 @@ import {
     NodeStatusPage,
     VerifyMessagePage
   ],
-  imports: [ IonicModule, ComponentsModule ],
+  imports: [ IonicModule, ComponentsModule, HeadNavComponentModule ],
   exports: [
     // CustomComponent,
   ],

app/src/pages/transaction/transaction.html

@@ -1,18 +1,7 @@
-<!--
-  Generated template for the TransactionPage page.
-
-  See http://ionicframework.com/docs/components/#navigation for more info on
-  Ionic pages and navigation.
--->
 <ion-header>
-
+  <head-nav [title]="'Transaction'"></head-nav>
-  <ion-navbar>
-    <ion-title>Transaction</ion-title>
-  </ion-navbar>
-
 </ion-header>
 
-
 <ion-content padding>
   <ion-grid>
     <ion-row>

app/src/pages/transaction/transaction.module.ts

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

app/src/test.ts

@@ -17,6 +17,7 @@ import { ConfigMock, PlatformMock } from './mocks';
 import { BlocksServiceMock } from './services/mocks';
 import { BlocksService } from './services';
 import { ApiProvider } from './providers/api/api';
+import { HeadNavComponentModule } from './components/head-nav/head-nav.module';
 
 // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
 declare var __karma__: any;
@@ -68,7 +69,8 @@ export class TestUtils {
         FormsModule,
         IonicModule,
         ReactiveFormsModule,
-        HttpModule
+        HttpModule,
+        HeadNavComponentModule
       ]
     });
   }