diff --git a/web/README.md b/web/README.md index 70eef727..95048ede 100644 --- a/web/README.md +++ b/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)| + diff --git a/web/package.json b/web/package.json index c88896a6..464d751a 100644 --- a/web/package.json +++ b/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" -} \ No newline at end of file +} diff --git a/web/src/app/app-routing.module.ts b/web/src/app/app-routing.module.ts index cf1f0779..7b4eee36 100644 --- a/web/src/app/app-routing.module.ts +++ b/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', diff --git a/web/src/app/app.module.ts b/web/src/app/app.module.ts index c04becbf..57f9b8e1 100644 --- a/web/src/app/app.module.ts +++ b/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, diff --git a/web/src/app/pages/dashboard/dashboard.component.html b/web/src/app/pages/dashboard/dashboard.component.html new file mode 100644 index 00000000..7e189c34 --- /dev/null +++ b/web/src/app/pages/dashboard/dashboard.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/src/app/shared/chatbutton/chatbutton.component.scss b/web/src/app/pages/dashboard/dashboard.component.scss similarity index 100% rename from web/src/app/shared/chatbutton/chatbutton.component.scss rename to web/src/app/pages/dashboard/dashboard.component.scss diff --git a/web/src/app/shared/chatbutton/chatbutton.component.spec.ts b/web/src/app/pages/dashboard/dashboard.component.spec.ts similarity index 54% rename from web/src/app/shared/chatbutton/chatbutton.component.spec.ts rename to web/src/app/pages/dashboard/dashboard.component.spec.ts index 1fbf84ae..fea6bfb4 100644 --- a/web/src/app/shared/chatbutton/chatbutton.component.spec.ts +++ b/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; +describe('DashboardComponent', () => { + let component: DashboardComponent; + let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ ChatbuttonComponent ] + declarations: [ DashboardComponent ] }) .compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(ChatbuttonComponent); + fixture = TestBed.createComponent(DashboardComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/web/src/app/pages/dashboard/dashboard.component.ts b/web/src/app/pages/dashboard/dashboard.component.ts new file mode 100644 index 00000000..b00b4903 --- /dev/null +++ b/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() { + } + +} + + diff --git a/web/src/app/pages/home/home.component.html b/web/src/app/pages/home/home.component.html index f6dc8465..e610791e 100644 --- a/web/src/app/pages/home/home.component.html +++ b/web/src/app/pages/home/home.component.html @@ -1,4 +1,2 @@
-
- - \ No newline at end of file + \ No newline at end of file diff --git a/web/src/app/pages/settings/settings.component.ts b/web/src/app/pages/settings/settings.component.ts index e9b70c2c..b144b61c 100644 --- a/web/src/app/pages/settings/settings.component.ts +++ b/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 = msg.data; + this.settings = 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; diff --git a/web/src/app/services/websocket-handler/websocket-handler.service.ts b/web/src/app/services/websocket-handler/websocket-handler.service.ts index c8120dd6..a14783c8 100644 --- a/web/src/app/services/websocket-handler/websocket-handler.service.ts +++ b/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 } }); } diff --git a/web/src/app/shared/chatbutton/chatbutton.component.html b/web/src/app/shared/chatbutton/chatbutton.component.html deleted file mode 100644 index fb0aad19..00000000 --- a/web/src/app/shared/chatbutton/chatbutton.component.html +++ /dev/null @@ -1,3 +0,0 @@ - - -

{{settings?.Name}}

\ No newline at end of file diff --git a/web/src/app/shared/chatbutton/chatbutton.component.ts b/web/src/app/shared/chatbutton/chatbutton.component.ts deleted file mode 100644 index 7009dc47..00000000 --- a/web/src/app/shared/chatbutton/chatbutton.component.ts +++ /dev/null @@ -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); - } - -} diff --git a/web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.html b/web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.html new file mode 100644 index 00000000..42012c60 --- /dev/null +++ b/web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.html @@ -0,0 +1,30 @@ + + + {{ticker?.Exchange}} {{ticker?.CurrencyPair}} Ticker update + + + + + Last: {{ticker?.Last}} + + + Low: {{ticker?.Low}} + + + High: {{ticker?.High}} + + + + Bid: {{ticker?.Bid}} + + + + Ask: {{ticker?.Ask}} + + + + Volume: {{ticker?.Volume}} + + + + 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 new file mode 100644 index 00000000..c7ee63c6 --- /dev/null +++ b/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%; +} \ No newline at end of file diff --git a/web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.spec.ts b/web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.spec.ts new file mode 100644 index 00000000..ea5f06f9 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ExchangeCurrencyTickerComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ExchangeCurrencyTickerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 00000000..215b0868 --- /dev/null +++ b/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 = 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; +} diff --git a/web/src/app/shared/navbar/navbar.component.html b/web/src/app/shared/navbar/navbar.component.html index c4496028..c9a9d1f4 100644 --- a/web/src/app/shared/navbar/navbar.component.html +++ b/web/src/app/shared/navbar/navbar.component.html @@ -4,7 +4,7 @@ Logo - Dashboard + Dashboard Wallet Summary Settings Help