From e0921a89469a9303945670c5f640f08d9ad24e48 Mon Sep 17 00:00:00 2001 From: GloriousCode Date: Sun, 24 Sep 2017 20:38:47 +1000 Subject: [PATCH] Adds a new component to render all enabled currency tickers. Will sort out later. Reduces currency ticker to accept a ticker object so that it doesn't need to listen to events --- web/src/app/app.module.ts | 9 +- .../pages/dashboard/dashboard.component.html | 2 +- .../pages/dashboard/dashboard.component.ts | 2 - ...ll-enabled-currency-tickers.component.html | 7 ++ ...ll-enabled-currency-tickers.component.scss | 18 ++++ ...enabled-currency-tickers.component.spec.ts | 25 ++++++ .../all-enabled-currency-tickers.component.ts | 82 +++++++++++++++++++ .../exchange-currency-ticker.component.scss | 2 +- .../exchange-currency-ticker.component.ts | 32 ++------ 9 files changed, 144 insertions(+), 35 deletions(-) create mode 100644 web/src/app/shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component.html create mode 100644 web/src/app/shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component.scss create mode 100644 web/src/app/shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component.spec.ts create mode 100644 web/src/app/shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component.ts diff --git a/web/src/app/app.module.ts b/web/src/app/app.module.ts index 57f9b8e1..441af8fb 100644 --- a/web/src/app/app.module.ts +++ b/web/src/app/app.module.ts @@ -29,12 +29,12 @@ import { DashboardComponent } from './pages/dashboard/dashboard.component'; import { NavbarComponent } from './shared/navbar/navbar.component'; import { ExchangeCurrencyTickerComponent } from './shared/exchange-currency-ticker/exchange-currency-ticker.component'; - - +import { AllEnabledCurrencyTickersComponent } from './shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component'; +//services import { WebsocketService } from './services/websocket/websocket.service'; import { WebsocketHandlerService } from './services/websocket-handler/websocket-handler.service'; import { ElectronService } from './providers/electron.service'; - +//Routing import { AppRoutingModule } from './app-routing.module'; import * as Rx from 'rxjs/Rx'; @@ -48,7 +48,8 @@ import * as Rx from 'rxjs/Rx'; NavbarComponent, SettingsComponent, DashboardComponent, - ExchangeCurrencyTickerComponent + ExchangeCurrencyTickerComponent, + AllEnabledCurrencyTickersComponent ], imports: [ BrowserModule, diff --git a/web/src/app/pages/dashboard/dashboard.component.html b/web/src/app/pages/dashboard/dashboard.component.html index 7e189c34..f19d6c27 100644 --- a/web/src/app/pages/dashboard/dashboard.component.html +++ b/web/src/app/pages/dashboard/dashboard.component.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/web/src/app/pages/dashboard/dashboard.component.ts b/web/src/app/pages/dashboard/dashboard.component.ts index b00b4903..121dc821 100644 --- a/web/src/app/pages/dashboard/dashboard.component.ts +++ b/web/src/app/pages/dashboard/dashboard.component.ts @@ -6,8 +6,6 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./dashboard.component.scss'], }) export class DashboardComponent implements OnInit { -exchange:string = "LocalBitcoins"; -currency:string = "BTCUSD"; constructor() { } diff --git a/web/src/app/shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component.html b/web/src/app/shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component.html new file mode 100644 index 00000000..5d9c3b3c --- /dev/null +++ b/web/src/app/shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component.html @@ -0,0 +1,7 @@ +
+ + + + + +
\ No newline at end of file diff --git a/web/src/app/shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component.scss b/web/src/app/shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component.scss new file mode 100644 index 00000000..5dfbae0f --- /dev/null +++ b/web/src/app/shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component.scss @@ -0,0 +1,18 @@ +.example-form { + min-width: 150px; + width: 100%; +} + +.example-full-width { + width: 100%; +} + +.exchange-card { + margin-bottom: 20px; + width: 300px; +} + +md-grid-tile { + width:300px; + padding:10px; +} \ No newline at end of file diff --git a/web/src/app/shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component.spec.ts b/web/src/app/shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component.spec.ts new file mode 100644 index 00000000..3d9bf4a5 --- /dev/null +++ b/web/src/app/shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AllEnabledCurrencyTickersComponent } from './all-enabled-currency-tickers.component'; + +describe('AllEnabledCurrencyTickersComponent', () => { + let component: AllEnabledCurrencyTickersComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AllEnabledCurrencyTickersComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AllEnabledCurrencyTickersComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/web/src/app/shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component.ts b/web/src/app/shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component.ts new file mode 100644 index 00000000..9c4b15f0 --- /dev/null +++ b/web/src/app/shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component.ts @@ -0,0 +1,82 @@ +import { Component, OnInit } from '@angular/core'; +import { WebsocketHandlerService } from './../../services/websocket-handler/websocket-handler.service'; + +@Component({ + selector: 'app-all-enabled-currency-tickers', + templateUrl: './all-enabled-currency-tickers.component.html', + styleUrls: ['./all-enabled-currency-tickers.component.scss'] +}) +export class AllEnabledCurrencyTickersComponent implements OnInit { + private ws: WebsocketHandlerService; + allCurrencies:ExchangeCurrency[]; + tickerCards: TickerUpdate[]; + + + + constructor(private websocketHandler: WebsocketHandlerService) { + this.ws = websocketHandler; + this.allCurrencies = []; + this.tickerCards = []; + this.ws.messages.subscribe(msg => { + if (msg.Event === 'ticker_update') { + var modal = {}; + modal.currencyPair = msg.data.CurrencyPair; + modal.exchangeName = msg.Exchange; + var found = false; + + for(var i = 0; i< this.allCurrencies.length; i++) { + if(this.allCurrencies[i].currencyPair === msg.data.CurrencyPair && + this.allCurrencies[i].exchangeName === msg.Exchange) { + found = true; + } + } + if(!found) { + //time to add + var ticker = msg.data; + ticker.Exchange = msg.Exchange; + this.tickerCards.push(ticker); + this.allCurrencies.push(modal); + console.log(JSON.stringify(this.allCurrencies)); + } else { + console.log('deleting'); + for(var i = 0; i< this.tickerCards.length; i++) { + if(this.tickerCards[i].Exchange === msg.Exchange + && this.tickerCards[i].CurrencyPair === msg.data.CurrencyPair) { + this.tickerCards.slice(this.tickerCards.indexOf(this.tickerCards[i])); + var ticker = msg.data; + this.tickerCards.splice(i,0,ticker); + } + } + } + } + }); + } + + ngOnInit() { + } + +} + +export interface ExchangeCurrency { + currencyPair: string; + exchangeName:string; +} + +export interface CurrencyPair { + delimiter: string; + first_currency: string; + second_currency: string; +} + +export interface TickerUpdate { + Pair: CurrencyPair; + CurrencyPair: string; + Last: number; + High: number; + Low: number; + Bid: number; + Ask: number; + Volume: number; + PriceATH: number; + Exchange:string; +} \ No newline at end of file diff --git a/web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.scss b/web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.scss index c7ee63c6..d30dbd17 100644 --- a/web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.scss +++ b/web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.scss @@ -9,7 +9,7 @@ .exchange-card { margin-bottom: 20px; - width: 500px; + width: 300px; } .md-fab { diff --git a/web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.ts b/web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.ts index 215b0868..e9f09e02 100644 --- a/web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.ts +++ b/web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.ts @@ -1,42 +1,19 @@ import { Component, OnInit, Input } from '@angular/core'; -import { WebsocketHandlerService } from './../../services/websocket-handler/websocket-handler.service'; - - @Component({ selector: 'app-exchange-currency-ticker', templateUrl: './exchange-currency-ticker.component.html', styleUrls: ['./exchange-currency-ticker.component.scss'], }) export class ExchangeCurrencyTickerComponent implements OnInit { - @Input('exchange') exchange: string; - @Input('currency') currency: string; - ticker: TickerUpdate; - private ws: WebsocketHandlerService; + @Input('ticker') ticker: TickerUpdate; + constructor() {} - constructor(private websocketHandler: WebsocketHandlerService) { - this.ws = websocketHandler; - this.ws.messages.subscribe(msg => { - if (msg.Event === 'ticker_update') { - if(msg.Exchange !== this.exchange || msg.data.CurrencyPair !== this.currency) { - console.log('Exg1:' + msg.Exchange + ' exg2:' + this.exchange); - console.log('Cur1:' + msg.data.CurrencyPair + ' Cur2:' + this.currency); - return; - } - console.log(msg); - console.log('Data:' + JSON.stringify(msg)); - this.ticker = msg.data; - - this.ticker.Exchange = msg.Exchange; - } - }); - } - - ngOnInit() { - } + ngOnInit() { } } + export interface CurrencyPair { delimiter: string; first_currency: string; @@ -55,3 +32,4 @@ export interface TickerUpdate { PriceATH: number; Exchange:string; } +