add currency conversion button and action sheet

This commit is contained in:
Darren Nelsen 2017-08-10 17:19:31 -04:00
parent 1fc35956cb
commit 5a551a5e3b
5 changed files with 56 additions and 4 deletions

View File

@ -8,6 +8,7 @@ import { InsightApp } from './app.component';
import { PagesModule, BlocksPage, BroadcastTxPage, NodeStatusPage, VerifyMessagePage } from '../pages'; import { PagesModule, BlocksPage, BroadcastTxPage, NodeStatusPage, VerifyMessagePage } from '../pages';
import { BlocksService, StorageService } from '../services'; import { BlocksService, StorageService } from '../services';
import { ApiProvider } from '../providers/api/api'; import { ApiProvider } from '../providers/api/api';
import { CurrencyProvider } from '../providers/currency/currency';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -33,7 +34,8 @@ import { ApiProvider } from '../providers/api/api';
StorageService, StorageService,
BlocksService, BlocksService,
{provide: ErrorHandler, useClass: IonicErrorHandler}, {provide: ErrorHandler, useClass: IonicErrorHandler},
ApiProvider ApiProvider,
CurrencyProvider
] ]
}) })

View File

@ -4,6 +4,9 @@
</button> </button>
<ion-title>{{title}}</ion-title> <ion-title>{{title}}</ion-title>
<ion-buttons end> <ion-buttons end>
<button ion-button (click)="changeCurrency()">
<ion-icon name="logo-bitcoin" *ngIf="currency.currencySymbol !== 'USD'"></ion-icon><ion-icon name="logo-usd" *ngIf="currency.currencySymbol === 'USD'"></ion-icon>&nbsp;{{ currency.currencySymbol }}
</button>
<button ion-button icon-only> <button ion-button icon-only>
<ion-icon name="search"></ion-icon> <ion-icon name="search"></ion-icon>
</button> </button>

View File

@ -3,6 +3,8 @@ import { Input } from '@angular/core';
import { NavController } from 'ionic-angular'; import { NavController } from 'ionic-angular';
import { Http } from '@angular/http'; import { Http } from '@angular/http';
import { ApiProvider } from '../../providers/api/api'; import { ApiProvider } from '../../providers/api/api';
import { CurrencyProvider } from '../../providers/currency/currency';
import { ActionSheetController } from 'ionic-angular';
/** /**
* Generated class for the HeadNavComponent component. * Generated class for the HeadNavComponent component.
@ -21,7 +23,7 @@ export class HeadNavComponent {
public q: string; public q: string;
public badQuery: boolean = false; public badQuery: boolean = false;
constructor(private navCtrl: NavController, private http: Http, private api: ApiProvider) { constructor(private navCtrl: NavController, private http: Http, private api: ApiProvider, public currency: CurrencyProvider, public actionSheetCtrl: ActionSheetController) {
} }
private resetSearch(): void { private resetSearch(): void {
@ -98,4 +100,48 @@ export class HeadNavComponent {
}; };
/* tslint:enable:no-unused-variable */ /* tslint:enable:no-unused-variable */
public changeCurrency() {
console.log('changeCurrency');
this.presentActionSheet();
}
presentActionSheet() {
let actionSheet = this.actionSheetCtrl.create({
title: 'Change Currency',
buttons: [
{
text: 'USD',
handler: () => {
this.currency.setCurrency('USD');
}
},
{
text: 'BTC',
handler: () => {
this.currency.setCurrency('BTC');
}
},
{
text: 'mBTC',
handler: () => {
this.currency.setCurrency('mBTC');
}
},
{
text: 'bits',
handler: () => {
this.currency.setCurrency('bits');
}
},
{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}
]
});
actionSheet.present();
}
} }

View File

@ -24,7 +24,7 @@
<ion-item> <ion-item>
Block Reward Block Reward
<span item-end> <span item-end>
{{ block.reward + ' BTC' }} {{ currency.getConversion(block.reward) }}
</span> </span>
</ion-item> </ion-item>
<ion-item> <ion-item>

View File

@ -2,6 +2,7 @@ import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Http } from '@angular/http'; import { Http } from '@angular/http';
import { ApiProvider } from '../../providers/api/api'; import { ApiProvider } from '../../providers/api/api';
import { CurrencyProvider } from '../../providers/currency/currency';
/** /**
* Generated class for the BlockDetailPage page. * Generated class for the BlockDetailPage page.
@ -25,7 +26,7 @@ export class BlockDetailPage {
tx: [] tx: []
}; };
constructor(public navCtrl: NavController, private http: Http, public navParams: NavParams, private api: ApiProvider) { constructor(public navCtrl: NavController, private http: Http, public navParams: NavParams, private api: ApiProvider, public currency: CurrencyProvider) {
this.blockHash = navParams.get('blockHash'); this.blockHash = navParams.get('blockHash');
this.http.get(this.api.apiPrefix + 'block/' + this.blockHash).subscribe( this.http.get(this.api.apiPrefix + 'block/' + this.blockHash).subscribe(