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/README.md

@@ -14,8 +14,6 @@ Install dependencies with npm :
 npm install
 ```
 
-There is an issue with `yarn` and `node_modules` that are only used in electron on the backend when the application is built by the packager. Please use `npm` as dependencies manager.
-
 If you want to generate Angular components with Angular-cli , you **MUST** install `@angular/cli` in npm global context.  
 Please follow [Angular-cli documentation](https://github.com/angular/angular-cli) if you had installed a previous version of `angular-cli`.
 
@@ -24,15 +22,10 @@ npm install -g @angular/cli
 ```
 
 ## To build for development
+npm run web:start
 
-- **in a terminal window** -> npm start  
-- **in another terminal window** -> npm run electron:serve
+Voila! You can use GoCryptoTrader web app in a local development environment with webpack watching!
 
-Voila! You can use your Angular + Electron app in a local development environment with hot reload !
-
-The application code is managed by `main.ts`. In this sample, the app runs with a simple Electron window and "Developer Tools" is open.  
-The Angular component contains an example of Electron and NodeJS native lib import. See [Use NodeJS Native libraries](#use-nodejs-native-libraries) charpter if you want to import other native libraries in your project.  
-You can desactivate "Developer Tools" by commenting `win.webContents.openDevTools();` in `main.ts`.
 
 ## To build for production
 
@@ -51,11 +44,6 @@ Your built files are in the /dist folder.
 |`npm run electron:mac`|  On a MAC OS, builds your application and generates a `.app` file of your application that can be run on Ma |
 
 
-## Browser mode
-
-Maybe you want to execute the application in the browser (WITHOUT HOT RELOAD ACTUALLY...) ? You can do it with `npm run start:web`.  
-Note that you can't use Electron or NodeJS native libraries in this case. Please check `providers/electron.service.ts` to watch how conditional import of electron/Native libraries is done.
-
 ## Execute E2E tests
 
 You can find end-to-end tests in /e2e folder.
@@ -66,8 +54,9 @@ You can run tests with the command lines below :
 
 # Contributors 
 |[GloriousCode](https://github.com/gloriouscode)|
-|[Shazbot](https://github.com/shazbert)|
 |[Maxime GRIS](https://github.com/maximegris)|
+|[Shazbot](https://github.com/shazbert)|
+
 
 
 

web/package.json

@@ -1,17 +1,26 @@
 {
-    "name": "angular-electron",
-    "version": "1.6.1",
-    "description": "Angular 4 with Electron (Typescript + SASS + Hot Reload)",
-    "homepage": "https://github.com/maximegris/angular-electron",
+    "name": "gocryptotrader-web",
+    "version": "0.1.0",
+    "description": "Front-end interface for GoCryptoTrader",
+    "homepage": "https://github.com/thrasher-/gocryptotrader",
     "author": {
-        "name": "Maxime GRIS",
-        "email": "maxime.gris@gmail.com"
+        "name": "Scott",
+        "email": "scott@gloriousedge.com",
+        "github":"https://github.com/gloriousCode/",
+        "website":"https://www.gloriousedge.com"
     },
+	"contributers": [{
+		"name": "Maxime GRIS",
+        "email": "maxime.gris@gmail.com",
+        "github": "https://github.com/maximegris/"
+	}],
     "keywords": [
         "angular",
         "electron",
         "typescript",
-        "sass"
+        "sass",
+        "bitcoin",
+        "exchange"
     ],
     "main": "main.js",
     "private": true,
@@ -103,4 +112,4 @@
         "webpack-dev-server": "2.5.0"
     },
     "license": "SEE LICENSE IN LICENSE.md"
-}
+}

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>