Commit 896fcfa5 authored by Pieterjan Vanhoof's avatar Pieterjan Vanhoof Committed by GitHub

Merge pull request #118 from stratisproject/ui

Add server polling
parents b48c9e77 7ba58952
...@@ -33,6 +33,9 @@ npm install -g @angular/cli ...@@ -33,6 +33,9 @@ npm install -g @angular/cli
## To build for development ## To build for development
- **in a terminal window** -> npm start - **in a terminal window** -> npm start
If you want to seperate the build process from the Electron process you can use:
- **in a terminal window** -> npm start:webpack
- **in another terminal window** -> npm run electron:serve - **in another terminal window** -> npm run electron:serve
## To build for production ## To build for production
......
...@@ -20,7 +20,8 @@ ...@@ -20,7 +20,8 @@
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
"lint": "ng lint", "lint": "ng lint",
"start": "webpack --watch", "start": "concurrently \"npm run start:webpack\" \"npm run electron:serve\"",
"start:webpack": "webpack --watch",
"start:web": "webpack-dev-server --content-base . --port 4200 --inline", "start:web": "webpack-dev-server --content-base . --port 4200 --inline",
"build:electron:main": "tsc main.ts --outDir dist && copyfiles package.json dist && cd dist && npm install --prod && cd ..", "build:electron:main": "tsc main.ts --outDir dist && copyfiles package.json dist && cd dist && npm install --prod && cd ..",
"build": "webpack --display-error-details && npm run build:electron:main", "build": "webpack --display-error-details && npm run build:electron:main",
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<select name="network" formControlName="selectNetwork"> <select name="network" formControlName="selectNetwork">
<!--<option value="main">Main</option>--> <!--<option value="main">Main</option>-->
<option value="test">Testnet</option> <option value="test">Testnet</option>
<option value="stratistest">StratisTest</option> <!--<option value="stratistest">StratisTest</option>-->
</select> </select>
</div> </div>
<div class="form-group"> <div class="form-group">
......
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
<select name="network" formControlName="selectNetwork"> <select name="network" formControlName="selectNetwork">
<!--<option value="main">Main</option>--> <!--<option value="main">Main</option>-->
<option value="test">Testnet</option> <option value="test">Testnet</option>
<option value="stratistest">StratisTest</option> <!--<option value="stratistest">StratisTest</option>-->
</select> </select>
</div> </div>
<div class="form-group"> <div class="form-group">
......
...@@ -2,7 +2,10 @@ import { Injectable } from '@angular/core'; ...@@ -2,7 +2,10 @@ import { Injectable } from '@angular/core';
import { Http, Headers, Response, RequestOptions, URLSearchParams} from '@angular/http'; import { Http, Headers, Response, RequestOptions, URLSearchParams} from '@angular/http';
import { Observable } from 'rxjs/Observable'; import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map'; import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/catch';
import "rxjs/add/observable/interval";
import 'rxjs/add/operator/startWith';
import { WalletCreation } from '../classes/wallet-creation'; import { WalletCreation } from '../classes/wallet-creation';
import { WalletRecovery } from '../classes/wallet-recovery'; import { WalletRecovery } from '../classes/wallet-recovery';
...@@ -22,6 +25,7 @@ export class ApiService { ...@@ -22,6 +25,7 @@ export class ApiService {
private mockApiUrl = 'http://localhost:3000/api'; private mockApiUrl = 'http://localhost:3000/api';
private webApiUrl = 'http://localhost:5000/api'; private webApiUrl = 'http://localhost:5000/api';
private headers = new Headers({'Content-Type': 'application/json'}); private headers = new Headers({'Content-Type': 'application/json'});
private pollingInterval = 3000;
/** /**
* Gets available wallets at the default path * Gets available wallets at the default path
...@@ -74,11 +78,16 @@ export class ApiService { ...@@ -74,11 +78,16 @@ export class ApiService {
getWalletBalance(data: WalletInfo): Observable<any> { getWalletBalance(data: WalletInfo): Observable<any> {
let params: URLSearchParams = new URLSearchParams(); let params: URLSearchParams = new URLSearchParams();
params.set('walletName', data.walletName); params.set('walletName', data.walletName);
params.set('coinType', data.coinType.toString());
return this.http return Observable
.get(this.webApiUrl + '/wallet/balance', new RequestOptions({headers: this.headers, search: params})) .interval(this.pollingInterval)
.startWith(0)
.switchMap(() => this.http.get(this.webApiUrl + '/wallet/balance', new RequestOptions({headers: this.headers, search: params})))
.map((response: Response) => response); .map((response: Response) => response);
// return this.http
// .get(this.webApiUrl + '/wallet/balance', new RequestOptions({headers: this.headers, search: params}))
// .map((response: Response) => response);
} }
/** /**
...@@ -87,11 +96,16 @@ export class ApiService { ...@@ -87,11 +96,16 @@ export class ApiService {
getWalletHistory(data: WalletInfo): Observable<any> { getWalletHistory(data: WalletInfo): Observable<any> {
let params: URLSearchParams = new URLSearchParams(); let params: URLSearchParams = new URLSearchParams();
params.set('walletName', data.walletName); params.set('walletName', data.walletName);
params.set('coinType', data.coinType.toString());
return this.http return Observable
.get(this.webApiUrl + '/wallet/history', new RequestOptions({headers: this.headers, search: params})) .interval(this.pollingInterval)
.startWith(0)
.switchMap(() => this.http.get(this.webApiUrl + '/wallet/history', new RequestOptions({headers: this.headers, search: params})))
.map((response: Response) => response); .map((response: Response) => response);
// return this.http
// .get(this.webApiUrl + '/wallet/history', new RequestOptions({headers: this.headers, search: params}))
// .map((response: Response) => response);
} }
/** /**
...@@ -100,7 +114,6 @@ export class ApiService { ...@@ -100,7 +114,6 @@ export class ApiService {
getUnusedReceiveAddress(data: WalletInfo): Observable<any> { getUnusedReceiveAddress(data: WalletInfo): Observable<any> {
let params: URLSearchParams = new URLSearchParams(); let params: URLSearchParams = new URLSearchParams();
params.set('walletName', data.walletName); params.set('walletName', data.walletName);
params.set('coinType', data.coinType.toString());
params.set('accountName', "account 0"); //temporary params.set('accountName', "account 0"); //temporary
return this.http return this.http
......
import { Component, OnInit, Input } from '@angular/core'; import { Component, OnInit, OnDestroy, Input } from '@angular/core';
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap'; import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ApiService } from '../../shared/services/api.service'; import { ApiService } from '../../shared/services/api.service';
import { GlobalService } from '../../shared/services/global.service'; import { GlobalService } from '../../shared/services/global.service';
...@@ -8,6 +8,10 @@ import { WalletInfo } from '../../shared/classes/wallet-info'; ...@@ -8,6 +8,10 @@ import { WalletInfo } from '../../shared/classes/wallet-info';
import { SendComponent } from '../send/send.component'; import { SendComponent } from '../send/send.component';
import { ReceiveComponent } from '../receive/receive.component'; import { ReceiveComponent } from '../receive/receive.component';
import { Observable } from 'rxjs/Rx';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/first';
@Component({ @Component({
selector: 'dashboard-component', selector: 'dashboard-component',
templateUrl: './dashboard.component.html', templateUrl: './dashboard.component.html',
...@@ -20,10 +24,17 @@ export class DashboardComponent { ...@@ -20,10 +24,17 @@ export class DashboardComponent {
private confirmedBalance: number; private confirmedBalance: number;
private unconfirmedBalance: number; private unconfirmedBalance: number;
private transactions: any; private transactions: any;
private walletBalanceSubscription: Subscription;
private walletHistorySubscription: Subscription;
ngOnInit() { ngOnInit() {
this.getWalletBalance(); this.getWalletBalance();
this.getHistory(); this.getHistory();
};
ngOnDestroy() {
this.walletBalanceSubscription.unsubscribe();
this.walletHistorySubscription.unsubscribe();
}; };
private openSendDialog() { private openSendDialog() {
...@@ -36,8 +47,8 @@ export class DashboardComponent { ...@@ -36,8 +47,8 @@ export class DashboardComponent {
private getWalletBalance() { private getWalletBalance() {
let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType()) let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
this.apiService.getWalletBalance(walletInfo) this.walletBalanceSubscription = this.apiService.getWalletBalance(walletInfo)
.subscribe( .subscribe(
response => { response => {
if (response.status >= 200 && response.status < 400) { if (response.status >= 200 && response.status < 400) {
let balanceResponse = response.json(); let balanceResponse = response.json();
...@@ -56,7 +67,7 @@ export class DashboardComponent { ...@@ -56,7 +67,7 @@ export class DashboardComponent {
private getHistory() { private getHistory() {
let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType()) let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
this.apiService.getWalletHistory(walletInfo) this.walletHistorySubscription = this.apiService.getWalletHistory(walletInfo)
.subscribe( .subscribe(
response => { response => {
if (response.status >= 200 && response.status < 400) { if (response.status >= 200 && response.status < 400) {
......
import { Component, OnInit } from '@angular/core'; import { Component, OnInit, OnDestroy } from '@angular/core';
import { ApiService } from '../../shared/services/api.service'; import { ApiService } from '../../shared/services/api.service';
import { GlobalService } from '../../shared/services/global.service'; import { GlobalService } from '../../shared/services/global.service';
import { WalletInfo } from '../../shared/classes/wallet-info'; import { WalletInfo } from '../../shared/classes/wallet-info';
import { Observable } from 'rxjs/Rx';
import { Subscription } from 'rxjs/Subscription';
@Component({ @Component({
selector: 'history-component', selector: 'history-component',
templateUrl: './history.component.html', templateUrl: './history.component.html',
...@@ -16,14 +19,19 @@ export class HistoryComponent { ...@@ -16,14 +19,19 @@ export class HistoryComponent {
private transactions: any; private transactions: any;
private errorMessage: string; private errorMessage: string;
private walletHistorySubscription: Subscription;
ngOnInit() { ngOnInit() {
this.getHistory(); this.getHistory();
} }
ngOnDestroy() {
this.walletHistorySubscription.unsubscribe();
}
private getHistory() { private getHistory() {
let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType()) let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
this.apiService.getWalletHistory(walletInfo) this.walletHistorySubscription = this.apiService.getWalletHistory(walletInfo)
.subscribe( .subscribe(
response => { response => {
if (response.status >= 200 && response.status < 400) { if (response.status >= 200 && response.status < 400) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment