Updates README.md

Updates package.json
Creates ticker box componenet
Adds dashboard component
Updates dashboard to display components instead of it being the handler of all

web/src/app/app-routing.module.ts

@@ -1,6 +1,8 @@
 import { HomeComponent } from './pages/home/home.component';
 import { SettingsComponent } from './pages/settings/settings.component';
 import { AboutComponent } from './pages/about/about.component';
+import { DashboardComponent } from './pages/dashboard/dashboard.component';
+
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
@@ -12,6 +14,10 @@ const routes: Routes = [
     {
         path:'about',
         component: AboutComponent
+    },    
+    {
+        path:'dashboard',
+        component: DashboardComponent
     },
     {
         path: 'settings',

web/src/app/app.module.ts

@@ -24,9 +24,12 @@ import {
 import { AppComponent } from './app.component';
 import { HomeComponent } from './pages/home/home.component';
 import { AboutComponent } from './pages/about/about.component';
-import { NavbarComponent } from './shared/navbar/navbar.component';
-import { ChatbuttonComponent } from './shared/chatbutton/chatbutton.component';
 import { SettingsComponent } from './pages/settings/settings.component';
+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 { WebsocketService } from './services/websocket/websocket.service';
 import { WebsocketHandlerService } from './services/websocket-handler/websocket-handler.service';
@@ -43,8 +46,9 @@ import * as Rx from 'rxjs/Rx';
     HomeComponent,
     AboutComponent,
     NavbarComponent,
-    ChatbuttonComponent,
-    SettingsComponent
+    SettingsComponent,
+    DashboardComponent,
+    ExchangeCurrencyTickerComponent
   ],
   imports: [
     BrowserModule,

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

@@ -0,0 +1 @@
+<app-exchange-currency-ticker [exchange]="exchange" [currency]="currency"></app-exchange-currency-ticker>

web/src/app/pages/dashboard/dashboard.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ChatbuttonComponent } from './chatbutton.component';
+import { DashboardComponent } from './dashboard.component';
 
-describe('ChatbuttonComponent', () => {
-  let component: ChatbuttonComponent;
-  let fixture: ComponentFixture<ChatbuttonComponent>;
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ChatbuttonComponent ]
+      declarations: [ DashboardComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ChatbuttonComponent);
+    fixture = TestBed.createComponent(DashboardComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss'],
+})
+export class DashboardComponent implements OnInit {
+exchange:string = "LocalBitcoins";
+currency:string = "BTCUSD";
+  constructor() 
+  {
+   }
+
+  ngOnInit() {
+  }
+
+}
+
+

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

@@ -1,4 +1,2 @@
 <div class="container">
-</div>
-
-<app-chatbutton></app-chatbutton>
+</div>

web/src/app/pages/settings/settings.component.ts

@@ -9,14 +9,16 @@ import { WebsocketHandlerService } from './../../services/websocket-handler/webs
 
 
 export class SettingsComponent implements OnInit {
-  private settings: RootObject = null;
+  public settings: Config = null;
   private ws: WebsocketHandlerService;
   private failCount = 0;
   private timer: any;
 
   private getSettingsMessage = {
     Event: 'GetConfig',
-    data: null
+    data: null,
+    Exchange: null,
+    AssetType: null
   };
 
   constructor(private websocketHandler: WebsocketHandlerService) {
@@ -24,7 +26,7 @@ export class SettingsComponent implements OnInit {
     this.ws.messages.subscribe(msg => {
       if (msg.Event === 'GetConfig') {
         console.log('Data:' + JSON.stringify(msg.data));
-        this.settings = <RootObject>msg.data;
+        this.settings = <Config>msg.data;
         this.fixUpSettings();
       } else if (msg.Event === 'SaveConfig') {
         // something!
@@ -49,7 +51,10 @@ export class SettingsComponent implements OnInit {
     //Send the message
     var settingsSave = {
       Event: 'SaveConfig',
-      data: this.settings
+      data: this.settings,
+      
+    Exchange: null,
+    AssetType: null
     }
     this.ws.messages.next(settingsSave);
   }
@@ -135,7 +140,7 @@ export interface Exchange {
   ClientID: string;
 }
 
-export interface RootObject {
+export interface Config {
   Name: string;
   EncryptConfig?: number;
   Cryptocurrencies: string;

web/src/app/services/websocket-handler/websocket-handler.service.ts

@@ -6,7 +6,9 @@ const WEBSOCKET_URL = 'ws://localhost:9050/ws';
 
 export interface Message {
 	Event: string,
-	data:object,
+	data:any,
+	Exchange:string,
+	AssetType:string
 }
 
 @Injectable()
@@ -19,11 +21,15 @@ export class WebsocketHandlerService {
 			.map((response: MessageEvent): Message => {
 
 				let data = JSON.parse(response.data);
+
 				// debug only
-				// console.log('Recieved response from websocket. Event: ' + data.Event)
+				//console.log('Recieved response from websocket. Data: ' + JSON.stringify(data))
+				var dataData = data.Data === null ? data.data : data.Data;
 				return {
 					Event: data.Event,
-					data: data.data,
+					data: dataData,
+					Exchange: data.exchange,
+					AssetType: data.assetType
 				}
 			});
 		}

web/src/app/shared/chatbutton/chatbutton.component.html

@@ -1,3 +0,0 @@
-<button (click)="getSettings()">Get Settings</button>
-
-<p>{{settings?.Name}}</p>

web/src/app/shared/chatbutton/chatbutton.component.ts

@@ -1,35 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { WebsocketHandlerService } from './../../services/websocket-handler/websocket-handler.service';
-
-@Component({
-  selector: 'app-chatbutton',
-  templateUrl: './chatbutton.component.html',
-  styleUrls: ['./chatbutton.component.scss']
-})
-export class ChatbuttonComponent implements OnInit {
-
-    constructor(private chatService: WebsocketHandlerService) {
-      	chatService.messages.subscribe(msg => {
-          if(msg.Event == "GetConfig") {
-            this.settings = msg.data;
-          }
-        });
-	}
-
-  ngOnInit() {
-  }
-
-  private settings:any;
-
-  private getSettingsMessage = {
-    Event:'GetConfig',
-    data:null,
-  };
- 
-
-  getSettings():void {
-		console.log('new message from client to websocket: ', this.getSettingsMessage);
-		this.chatService.messages.next(this.getSettingsMessage);
-	}
-
-}

web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.html

@@ -0,0 +1,30 @@
+<md-card class="exchange-card">
+  <md-card-header>
+      <md-card-title>{{ticker?.Exchange}} {{ticker?.CurrencyPair}} Ticker update</md-card-title>
+  </md-card-header>
+  <md-card-content>
+      <md-grid-list cols="3" rowHeight="2:1" >
+          <md-grid-tile>
+              Last: {{ticker?.Last}}
+            </md-grid-tile>
+          <md-grid-tile>
+              Low: {{ticker?.Low}}
+          </md-grid-tile>
+          <md-grid-tile>
+            High: {{ticker?.High}}
+          </md-grid-tile>
+          
+          <md-grid-tile>
+              Bid: {{ticker?.Bid}}
+            </md-grid-tile>
+
+            <md-grid-tile>
+                Ask: {{ticker?.Ask}}
+              </md-grid-tile>
+
+              <md-grid-tile>
+                  Volume: {{ticker?.Volume}}
+                </md-grid-tile>
+      </md-grid-list>
+  </md-card-content>
+

web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.scss

@@ -0,0 +1,20 @@
+.example-form {
+    min-width: 150px;
+    width: 100%;
+}
+
+.example-full-width {
+    width: 100%;
+}
+
+.exchange-card {
+    margin-bottom: 20px;
+    width: 500px;
+}
+
+.md-fab {
+    margin: 0;
+    position: fixed;
+    bottom: 5%;
+    right: 2%;
+}

web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExchangeCurrencyTickerComponent } from './exchange-currency-ticker.component';
+
+describe('ExchangeCurrencyTickerComponent', () => {
+  let component: ExchangeCurrencyTickerComponent;
+  let fixture: ComponentFixture<ExchangeCurrencyTickerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ExchangeCurrencyTickerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExchangeCurrencyTickerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.ts

@@ -0,0 +1,57 @@
+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;
+  
+
+  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() {
+  }
+
+}
+
+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/navbar/navbar.component.html

@@ -4,7 +4,7 @@
   <a md-button class="docs-button" routerLink="/" aria-label="Angular Material">
     <span>Logo</span>
   </a>
-  <a md-button class="docs-button" routerLink="about">Dashboard</a>
+  <a md-button class="docs-button" routerLink="dashboard">Dashboard</a>
   <a md-button class="docs-button" routerLink="about">Wallet Summary</a>
   <a md-button class="docs-button" routerLink="settings">Settings</a>
   <a md-button class="docs-button" routerLink="about">Help</a>