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/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.spec.ts

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

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>