From 743c060463167495e731dd51725aafa9ea3b2d87 Mon Sep 17 00:00:00 2001 From: Darren Nelsen Date: Mon, 21 Aug 2017 18:00:39 -0400 Subject: [PATCH 1/6] added ion-grid to latest-transactions component --- app/package.json | 4 +-- .../latest-transactions.html | 25 +++++++++++++++++-- .../latest-transactions.ts | 25 ++++++++++++++----- 3 files changed, 43 insertions(+), 11 deletions(-) diff --git a/app/package.json b/app/package.json index bb7407e..00d8da9 100644 --- a/app/package.json +++ b/app/package.json @@ -38,12 +38,10 @@ "devDependencies": { "@angular/cli": "1.1.2", "@ionic/app-scripts": "1.3.7", - "@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", "codecov": "2.2.0", - "ionic": "3.9.1", + "ionic": "3.9.2", "jasmine-core": "2.5.2", "jasmine-spec-reporter": "3.2.0", "karma": "1.4.1", diff --git a/app/src/components/latest-transactions/latest-transactions.html b/app/src/components/latest-transactions/latest-transactions.html index 948536e..e9fe1b1 100644 --- a/app/src/components/latest-transactions/latest-transactions.html +++ b/app/src/components/latest-transactions/latest-transactions.html @@ -1,4 +1,25 @@ -
- {{text}} +
+ +
+ +
+ + + + Hash + Value Out + + + + + {{ tx.hash }} + + + {{ currency.getConversion(tx.out) }} + + + + +
diff --git a/app/src/components/latest-transactions/latest-transactions.ts b/app/src/components/latest-transactions/latest-transactions.ts index 4650fff..5b65217 100644 --- a/app/src/components/latest-transactions/latest-transactions.ts +++ b/app/src/components/latest-transactions/latest-transactions.ts @@ -1,6 +1,7 @@ import { Component } from '@angular/core'; // import { Http } from '@angular/http'; // import { ApiProvider } from '../../providers/api/api'; +import { CurrencyProvider } from '../../providers/currency/currency'; /** * Generated class for the LatestTransactionsComponent component. @@ -14,15 +15,23 @@ import { Component } from '@angular/core'; }) export class LatestTransactionsComponent { - private text: string; + // private loading: boolean = true; + private transactions: Array = [ + { + hash: '12345', + out: 0.001 + }, + { + hash: '22345', + out: 0.002 + } + ]; - constructor(/*private http: Http, private api: ApiProvider*/) { - console.log('Hello LatestTransactionsComponent Component'); - this.text = 'Hello Latest Transactions'; + constructor(/*private http: Http, private api: ApiProvider*/ public currency: CurrencyProvider) { + + // let url: string = this.api.apiPrefix + 'txs'; /* - let url: string = this.api.apiPrefix + 'txs?' + this.queryType + '=' + this.queryValue; - this.http.get(url).subscribe( (data) => { this.transactions = JSON.parse(data['_body']); @@ -49,4 +58,8 @@ export class LatestTransactionsComponent { */ } + public getTransactions(): Array { + return this.transactions; + } + } From 8a1d8e6df214bb6dec00f1a0c571d593d04fbd5b Mon Sep 17 00:00:00 2001 From: Darren Nelsen Date: Tue, 22 Aug 2017 13:30:01 -0400 Subject: [PATCH 2/6] pull in transactions from new endpoint --- .../latest-transactions.ts | 37 ++++--------------- 1 file changed, 7 insertions(+), 30 deletions(-) diff --git a/app/src/components/latest-transactions/latest-transactions.ts b/app/src/components/latest-transactions/latest-transactions.ts index 5b65217..6740f72 100644 --- a/app/src/components/latest-transactions/latest-transactions.ts +++ b/app/src/components/latest-transactions/latest-transactions.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -// import { Http } from '@angular/http'; -// import { ApiProvider } from '../../providers/api/api'; +import { Http } from '@angular/http'; +import { ApiProvider } from '../../providers/api/api'; import { CurrencyProvider } from '../../providers/currency/currency'; /** @@ -15,26 +15,17 @@ import { CurrencyProvider } from '../../providers/currency/currency'; }) export class LatestTransactionsComponent { - // private loading: boolean = true; - private transactions: Array = [ - { - hash: '12345', - out: 0.001 - }, - { - hash: '22345', - out: 0.002 - } - ]; + private loading: boolean = true; + private transactions: Array = []; - constructor(/*private http: Http, private api: ApiProvider*/ public currency: CurrencyProvider) { + constructor(private http: Http, private api: ApiProvider, public currency: CurrencyProvider) { - // let url: string = this.api.apiPrefix + 'txs'; + let url: string = this.api.apiPrefix + 'txs'; - /* this.http.get(url).subscribe( (data) => { this.transactions = JSON.parse(data['_body']); + console.log('this.transactions', this.transactions); this.loading = false; }, (err) => { @@ -42,20 +33,6 @@ export class LatestTransactionsComponent { this.loading = false; } ); - */ - - /* - this.http.get(this.api.apiPrefix + 'tx/' + this.txId).subscribe( - (data) => { - this.tx = JSON.parse(data['_body']); - this.loading = false; - }, - (err) => { - console.log('err is', err); - this.loading = false; - } - ); - */ } public getTransactions(): Array { From 9848b17fc1e6fd4de7f266d52ac4a437044647ca Mon Sep 17 00:00:00 2001 From: Darren Nelsen Date: Tue, 22 Aug 2017 14:34:24 -0400 Subject: [PATCH 3/6] added call to new txs endpoint; changed html to reflect txid and valueOut in transactions grid --- .../latest-transactions/latest-transactions.html | 6 +++--- .../latest-transactions/latest-transactions.ts | 10 ++++++---- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/app/src/components/latest-transactions/latest-transactions.html b/app/src/components/latest-transactions/latest-transactions.html index e9fe1b1..7fa05ff 100644 --- a/app/src/components/latest-transactions/latest-transactions.html +++ b/app/src/components/latest-transactions/latest-transactions.html @@ -11,12 +11,12 @@ Value Out - + - {{ tx.hash }} + {{ tx.txid }} - {{ currency.getConversion(tx.out) }} + {{ currency.getConversion(tx.valueOut) }} diff --git a/app/src/components/latest-transactions/latest-transactions.ts b/app/src/components/latest-transactions/latest-transactions.ts index 6740f72..536d89a 100644 --- a/app/src/components/latest-transactions/latest-transactions.ts +++ b/app/src/components/latest-transactions/latest-transactions.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { Http } from '@angular/http'; +import { NavController } from 'ionic-angular'; import { ApiProvider } from '../../providers/api/api'; import { CurrencyProvider } from '../../providers/currency/currency'; @@ -18,7 +19,7 @@ export class LatestTransactionsComponent { private loading: boolean = true; private transactions: Array = []; - constructor(private http: Http, private api: ApiProvider, public currency: CurrencyProvider) { + constructor(private http: Http, private navCtrl: NavController, private api: ApiProvider, public currency: CurrencyProvider) { let url: string = this.api.apiPrefix + 'txs'; @@ -35,8 +36,9 @@ export class LatestTransactionsComponent { ); } - public getTransactions(): Array { - return this.transactions; + public goToTx(txId: string): void { + this.navCtrl.push('transaction', { + 'txId': txId + }); } - } From 07cd0cbd8fdcf2ad74ccf869a10988a9ef266d40 Mon Sep 17 00:00:00 2001 From: Darren Nelsen Date: Tue, 22 Aug 2017 17:17:13 -0400 Subject: [PATCH 4/6] added refresh timer to latest transactions; styled latest transactions grid --- .../latest-transactions.html | 8 +++++--- .../latest-transactions.scss | 20 +++++++++++++++++++ .../latest-transactions.ts | 18 ++++++++++++++--- 3 files changed, 40 insertions(+), 6 deletions(-) diff --git a/app/src/components/latest-transactions/latest-transactions.html b/app/src/components/latest-transactions/latest-transactions.html index 7fa05ff..55e5084 100644 --- a/app/src/components/latest-transactions/latest-transactions.html +++ b/app/src/components/latest-transactions/latest-transactions.html @@ -12,10 +12,12 @@ - - {{ tx.txid }} + +
+ {{ tx.txid }} +
- + {{ currency.getConversion(tx.valueOut) }} diff --git a/app/src/components/latest-transactions/latest-transactions.scss b/app/src/components/latest-transactions/latest-transactions.scss index 570ea96..1b68322 100644 --- a/app/src/components/latest-transactions/latest-transactions.scss +++ b/app/src/components/latest-transactions/latest-transactions.scss @@ -1,3 +1,23 @@ latest-transactions { + 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; + } + } } diff --git a/app/src/components/latest-transactions/latest-transactions.ts b/app/src/components/latest-transactions/latest-transactions.ts index 536d89a..5757e91 100644 --- a/app/src/components/latest-transactions/latest-transactions.ts +++ b/app/src/components/latest-transactions/latest-transactions.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, NgZone } from '@angular/core'; import { Http } from '@angular/http'; import { NavController } from 'ionic-angular'; import { ApiProvider } from '../../providers/api/api'; @@ -19,14 +19,26 @@ export class LatestTransactionsComponent { private loading: boolean = true; private transactions: Array = []; - constructor(private http: Http, private navCtrl: NavController, private api: ApiProvider, public currency: CurrencyProvider) { + constructor(private http: Http, private navCtrl: NavController, private api: ApiProvider, public currency: CurrencyProvider, ngZone: NgZone) { + this.loadTransactions(); + ngZone.runOutsideAngular(() => { + setInterval( + function (): void { + ngZone.run(function (): void { + this.loadTransactions.call(this); + }.bind(this)); + }.bind(this), + 1000 * 10 + ); + }); + } + private loadTransactions(): void { let url: string = this.api.apiPrefix + 'txs'; this.http.get(url).subscribe( (data) => { this.transactions = JSON.parse(data['_body']); - console.log('this.transactions', this.transactions); this.loading = false; }, (err) => { From 2ac282225776b3b87b4dd2f31fd0d251a8b1c7cf Mon Sep 17 00:00:00 2001 From: Darren Nelsen Date: Wed, 23 Aug 2017 10:41:10 -0400 Subject: [PATCH 5/6] removed console logs; added a seconds var for latest transactions refresh --- app/src/components/latest-transactions/latest-transactions.ts | 3 ++- app/src/pages/home/home.ts | 4 ---- app/src/providers/blocks/blocks.ts | 1 - 3 files changed, 2 insertions(+), 6 deletions(-) diff --git a/app/src/components/latest-transactions/latest-transactions.ts b/app/src/components/latest-transactions/latest-transactions.ts index 5757e91..559e6cc 100644 --- a/app/src/components/latest-transactions/latest-transactions.ts +++ b/app/src/components/latest-transactions/latest-transactions.ts @@ -18,6 +18,7 @@ export class LatestTransactionsComponent { private loading: boolean = true; private transactions: Array = []; + private seconds: number = 10; constructor(private http: Http, private navCtrl: NavController, private api: ApiProvider, public currency: CurrencyProvider, ngZone: NgZone) { this.loadTransactions(); @@ -28,7 +29,7 @@ export class LatestTransactionsComponent { this.loadTransactions.call(this); }.bind(this)); }.bind(this), - 1000 * 10 + 1000 * this.seconds ); }); } diff --git a/app/src/pages/home/home.ts b/app/src/pages/home/home.ts index 5880022..c556b4f 100644 --- a/app/src/pages/home/home.ts +++ b/app/src/pages/home/home.ts @@ -20,8 +20,4 @@ export class HomePage { constructor(public navCtrl: NavController, public navParams: NavParams) { } - public ionViewDidLoad(): void { - console.log('ionViewDidLoad HomePage'); - } - } diff --git a/app/src/providers/blocks/blocks.ts b/app/src/providers/blocks/blocks.ts index 6ab163c..bdccdd1 100644 --- a/app/src/providers/blocks/blocks.ts +++ b/app/src/providers/blocks/blocks.ts @@ -13,7 +13,6 @@ import { ApiProvider } from '../../providers/api/api'; export class BlocksProvider { constructor(public http: Http, private api: ApiProvider) { - console.log('Hello BlocksProvider Provider'); } public getBlocks(): any { From ccf681dda7561fef30d5f06747906dcddc812040 Mon Sep 17 00:00:00 2001 From: Darren Nelsen Date: Wed, 23 Aug 2017 11:42:38 -0400 Subject: [PATCH 6/6] added input parm for refresh timer seconds on latest-transactions component --- .../latest-transactions.ts | 22 ++++--- app/src/pages/home/home.html | 2 +- app/yarn.lock | 59 +++---------------- 3 files changed, 23 insertions(+), 60 deletions(-) diff --git a/app/src/components/latest-transactions/latest-transactions.ts b/app/src/components/latest-transactions/latest-transactions.ts index 559e6cc..5facbe4 100644 --- a/app/src/components/latest-transactions/latest-transactions.ts +++ b/app/src/components/latest-transactions/latest-transactions.ts @@ -1,4 +1,4 @@ -import { Component, NgZone } from '@angular/core'; +import { Component, NgZone, Input } from '@angular/core'; import { Http } from '@angular/http'; import { NavController } from 'ionic-angular'; import { ApiProvider } from '../../providers/api/api'; @@ -18,18 +18,26 @@ export class LatestTransactionsComponent { private loading: boolean = true; private transactions: Array = []; - private seconds: number = 10; + @Input() public refreshSeconds: number = 10; + private timer: number; - constructor(private http: Http, private navCtrl: NavController, private api: ApiProvider, public currency: CurrencyProvider, ngZone: NgZone) { + constructor(private http: Http, private navCtrl: NavController, private api: ApiProvider, public currency: CurrencyProvider, private ngZone: NgZone) { this.loadTransactions(); - ngZone.runOutsideAngular(() => { - setInterval( + } + + public ngOnChanges(): void { + if (this.timer) { + clearInterval(this.timer); + } + + this.ngZone.runOutsideAngular(() => { + this.timer = setInterval( function (): void { - ngZone.run(function (): void { + this.ngZone.run(function (): void { this.loadTransactions.call(this); }.bind(this)); }.bind(this), - 1000 * this.seconds + 1000 * this.refreshSeconds ); }); } diff --git a/app/src/pages/home/home.html b/app/src/pages/home/home.html index ad57d6d..2449c40 100644 --- a/app/src/pages/home/home.html +++ b/app/src/pages/home/home.html @@ -18,7 +18,7 @@

Latest Transactions

- +
diff --git a/app/yarn.lock b/app/yarn.lock index 575bfc5..f01060f 100644 --- a/app/yarn.lock +++ b/app/yarn.lock @@ -159,50 +159,9 @@ ws "1.1.1" xml2js "^0.4.17" -"@ionic/cli-plugin-cordova@1.6.2": - version "1.6.2" - resolved "https://registry.yarnpkg.com/@ionic/cli-plugin-cordova/-/cli-plugin-cordova-1.6.2.tgz#f71d10641df8b522f54f8274e0d5bc4dbb8b5208" - dependencies: - "@ionic/cli-utils" "1.7.0" - chalk "^2.0.0" - elementtree "^0.1.7" - tslib "^1.7.1" - -"@ionic/cli-plugin-ionic-angular@1.4.1": - version "1.4.1" - resolved "https://registry.yarnpkg.com/@ionic/cli-plugin-ionic-angular/-/cli-plugin-ionic-angular-1.4.1.tgz#bb94b7ad61c2f79757b2dff041c0b7e2151777ec" - dependencies: - "@ionic/cli-utils" "1.7.0" - chalk "^2.0.0" - tslib "^1.7.1" - -"@ionic/cli-utils@1.7.0": - version "1.7.0" - resolved "https://registry.yarnpkg.com/@ionic/cli-utils/-/cli-utils-1.7.0.tgz#05bdbf3e7533eeeee27d58f3adbfe26bf2bf0d1d" - dependencies: - archiver "^2.0.0" - chalk "^2.0.0" - ci-info "^1.0.0" - cross-spawn "^5.1.0" - dargs "^5.1.0" - dev-null "^0.1.1" - inquirer "^3.2.1" - leek "0.0.24" - lodash "^4.17.4" - minimist "^1.2.0" - ncp "^2.0.0" - semver "^5.4.1" - slice-ansi "^1.0.0" - string-width "^2.1.1" - strip-ansi "^4.0.0" - superagent "^3.5.2" - tslib "^1.7.1" - uuid "^3.0.1" - wrap-ansi "^3.0.1" - -"@ionic/cli-utils@1.9.1": - version "1.9.1" - resolved "https://registry.yarnpkg.com/@ionic/cli-utils/-/cli-utils-1.9.1.tgz#a0118819cb8de1f3bc4bc5b401e5b61d7f41d5b5" +"@ionic/cli-utils@1.9.2": + version "1.9.2" + resolved "https://registry.yarnpkg.com/@ionic/cli-utils/-/cli-utils-1.9.2.tgz#9916d8bb6ec696b948b6be1c05fbec46c87ddc0b" dependencies: "@types/gulp" "^3.8.33" archiver "^2.0.0" @@ -1973,10 +1932,6 @@ detect-node@^2.0.3: version "2.0.3" resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.3.tgz#a2033c09cc8e158d37748fbde7507832bd6ce127" -dev-null@^0.1.1: - version "0.1.1" - resolved "https://registry.yarnpkg.com/dev-null/-/dev-null-0.1.1.tgz#5a205ce3c2b2ef77b6238d6ba179eb74c6a0e818" - di@^0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/di/-/di-0.0.1.tgz#806649326ceaa7caa3306d75d985ea2748ba913c" @@ -3223,11 +3178,11 @@ ionic-angular@3.4.2: version "3.4.2" resolved "https://registry.yarnpkg.com/ionic-angular/-/ionic-angular-3.4.2.tgz#762631f1af78a5ae1c0aa0f4d23b31435142abe1" -ionic@3.9.1: - version "3.9.1" - resolved "https://registry.yarnpkg.com/ionic/-/ionic-3.9.1.tgz#be50eea2f55bad40574772ecaeaf5a460fd16330" +ionic@3.9.2: + version "3.9.2" + resolved "https://registry.yarnpkg.com/ionic/-/ionic-3.9.2.tgz#d958069ce29d9dbb8b9c1638b59995ce005ce845" dependencies: - "@ionic/cli-utils" "1.9.1" + "@ionic/cli-utils" "1.9.2" chalk "^2.0.0" opn "^5.1.0" os-name "^2.0.1"