Adds a new component to render all enabled currency tickers. Will sor…

…t 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

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

web/src/app/pages/dashboard/dashboard.component.html

@@ -1 +1 @@
-<app-exchange-currency-ticker [exchange]="exchange" [currency]="currency"></app-exchange-currency-ticker>
+<app-all-enabled-currency-tickers></app-all-enabled-currency-tickers>

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() 
   {
    }

web/src/app/shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component.html

@@ -0,0 +1,7 @@
+<div style="width:1000px">
+<md-grid-list cols="3" rowHeight="2:1" >
+    <md-grid-tile *ngFor="let ticker of tickerCards">
+  <app-exchange-currency-ticker  [ticker]="ticker" ></app-exchange-currency-ticker>
+  </md-grid-tile>
+</md-grid-list>
+</div>

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;
+}

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<AllEnabledCurrencyTickersComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AllEnabledCurrencyTickersComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AllEnabledCurrencyTickersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

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 = <ExchangeCurrency[]>[];
+    this.tickerCards = <TickerUpdate[]>[];
+    this.ws.messages.subscribe(msg => {
+      if (msg.Event === 'ticker_update') {
+        var modal = <ExchangeCurrency>{};
+        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 = <TickerUpdate>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 = <TickerUpdate>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;
+}

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 {

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 = <TickerUpdate>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;
 }
+