RanchiMall/flosight-api
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added HeadNavComponent to use on all pages

Browse Source
This commit is contained in:
Darren Nelsen 2017-08-04 14:04:20 -04:00
parent aac27ff520
commit 0c7bb4d1f6
16 changed files with 154 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/package.json
View File

@ -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",

12
app/src/components/head-nav/head-nav.html Normal file
View File

@ -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>

16
app/src/components/head-nav/head-nav.module.ts Normal file
View File

@ -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 {}

3
app/src/components/head-nav/head-nav.scss Normal file
View File

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

101
app/src/components/head-nav/head-nav.ts Normal file
View File

@ -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 */
}

13
app/src/pages/address/address.html
View File

@ -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>
<ion-navbar>
<ion-title>Address</ion-title>
</ion-navbar>
<head-nav [title]="'Address'"></head-nav>
</ion-header>
<ion-content padding>
<ion-grid>
<ion-row>

4
app/src/pages/address/address.module.ts
View File

@ -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

13
app/src/pages/block-detail/block-detail.html
View File

@ -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>
<ion-navbar color="primary">
<ion-title>Block Detail</ion-title>
</ion-navbar>
<head-nav [title]="'Block'"></head-nav>
</ion-header>
<ion-content padding>
<h1>Block # {{ block.height }}</h1>
<p>BlockHash {{ block.hash }}</p>

4
app/src/pages/block-detail/block-detail.module.ts
View File

@ -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

13
app/src/pages/blocksPage/blocksPage.html
View File

@ -1,16 +1,5 @@
<ion-header>
<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>
<head-nav [title]="'Blocks'"></head-nav>
</ion-header>
<ion-content padding>

2
app/src/pages/blocksPage/blocksPage.spec.ts
View File

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

81
app/src/pages/blocksPage/blocksPage.ts
View File

@ -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

3
app/src/pages/pages.module.ts
View File

@ -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,
],

13
app/src/pages/transaction/transaction.html
View File

@ -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>
<ion-navbar>
<ion-title>Transaction</ion-title>
</ion-navbar>
<head-nav [title]="'Transaction'"></head-nav>
</ion-header>
<ion-content padding>
<ion-grid>
<ion-row>

4
app/src/pages/transaction/transaction.module.ts
View File

@ -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

4
app/src/test.ts
View File

@ -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
]
});
}