From d7f47d245e8f9afdfb65fa8c9c5219711b267b53 Mon Sep 17 00:00:00 2001 From: Christopher Koch Date: Tue, 11 Sep 2018 08:20:53 -0400 Subject: [PATCH] more clean up --- src/app/_classes/alert.ts | 6 - src/app/_classes/alertType.ts | 6 - src/app/_classes/stock.ts | 4 - src/app/_classes/stockPortfolio.ts | 7 -- src/app/_guards/auth.guard.ts | 5 + src/app/_services/emitcom.service.ts | 16 +-- src/app/_services/login.service.ts | 10 +- src/app/_services/nasdaq-search.service.ts | 11 +- src/app/_services/stock.service.ts | 39 +++---- src/app/_services/watcher.service.ts | 40 +++---- src/app/stock-view/stock-view.component.ts | 74 ++++++------ .../watcher-view/watcher-view.component.html | 34 +++--- .../watcher-view/watcher-view.component.ts | 107 ++++++++---------- 13 files changed, 158 insertions(+), 201 deletions(-) delete mode 100644 src/app/_classes/alert.ts delete mode 100644 src/app/_classes/alertType.ts delete mode 100644 src/app/_classes/stock.ts delete mode 100644 src/app/_classes/stockPortfolio.ts diff --git a/src/app/_classes/alert.ts b/src/app/_classes/alert.ts deleted file mode 100644 index 8596164..0000000 --- a/src/app/_classes/alert.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { AlertType } from '../_classes/alertType'; - -export class Alert { - type: AlertType; - message: string; -} \ No newline at end of file diff --git a/src/app/_classes/alertType.ts b/src/app/_classes/alertType.ts deleted file mode 100644 index a5898a6..0000000 --- a/src/app/_classes/alertType.ts +++ /dev/null @@ -1,6 +0,0 @@ -export enum AlertType { - Success, - Error, - Info, - Warning -} \ No newline at end of file diff --git a/src/app/_classes/stock.ts b/src/app/_classes/stock.ts deleted file mode 100644 index 98689dc..0000000 --- a/src/app/_classes/stock.ts +++ /dev/null @@ -1,4 +0,0 @@ -export class Stock { - Symbol: string; - Name: string; -} \ No newline at end of file diff --git a/src/app/_classes/stockPortfolio.ts b/src/app/_classes/stockPortfolio.ts deleted file mode 100644 index 614e8f1..0000000 --- a/src/app/_classes/stockPortfolio.ts +++ /dev/null @@ -1,7 +0,0 @@ -//import { stock } from './stock'; - -export class stockPortfolio{ - bought: number; - sold: number; - shares: number; -} \ No newline at end of file diff --git a/src/app/_guards/auth.guard.ts b/src/app/_guards/auth.guard.ts index 0d6bc04..15c9737 100644 --- a/src/app/_guards/auth.guard.ts +++ b/src/app/_guards/auth.guard.ts @@ -6,11 +6,16 @@ export class AuthGuard implements CanActivate { constructor(private router: Router) { } + /* + Using CanActivate as route guard and simply checking if the currentUser object is inplace. + This can and should be expanded to validating the token via a service to ensure validity + */ canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { if (localStorage.getItem('currentUser')) { return true; } + /* If not then kick them back to the login page */ this.router.navigate( ['login'] ); return false; } diff --git a/src/app/_services/emitcom.service.ts b/src/app/_services/emitcom.service.ts index 8f33f3b..34a57bf 100644 --- a/src/app/_services/emitcom.service.ts +++ b/src/app/_services/emitcom.service.ts @@ -5,28 +5,28 @@ export class EmitcomService { @Output() change: EventEmitter = new EventEmitter(); - sendData( data: string ) { - let sendData ={ + sendData(data: string) { + let sendData = { type: "ipo", data: data }; - this.change.emit( sendData ); + this.change.emit(sendData); } destroyChart() { - let sendData ={ + let sendData = { type: "action", data: "destroyChart" }; - this.change.emit( sendData ); + this.change.emit(sendData); } - updateWatcher( ){ - let sendData ={ + updateWatcher() { + let sendData = { type: "action", data: "updateWatcher" }; - this.change.emit( sendData ); + this.change.emit(sendData); } constructor() { } diff --git a/src/app/_services/login.service.ts b/src/app/_services/login.service.ts index 4a20de8..ad8c67b 100644 --- a/src/app/_services/login.service.ts +++ b/src/app/_services/login.service.ts @@ -4,7 +4,7 @@ import 'rxjs/add/operator/map' import { User } from '../_classes/user'; @Injectable({ - providedIn: 'root' + providedIn: 'root' }) export class LoginService { @@ -16,14 +16,14 @@ export class LoginService { private http: HttpClient ) { } - login(userData : any) { + login(userData: any) { /* Look at that god like RegEX... We got a ^ AND a ?. /s */ - const url = this.loginUrl + '/?userName=^' + userData.userName + '$&password=^' + userData.password + '$' ; + const url = this.loginUrl + '/?userName=^' + userData.userName + '$&password=^' + userData.password + '$'; /* Run the request expecting a user class back */ return this.http.get(url) - .map(user => { + .map(user => { return user; - }); + }); } logout() { diff --git a/src/app/_services/nasdaq-search.service.ts b/src/app/_services/nasdaq-search.service.ts index ab6ad43..58a9acc 100644 --- a/src/app/_services/nasdaq-search.service.ts +++ b/src/app/_services/nasdaq-search.service.ts @@ -1,27 +1,24 @@ import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; -import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map' -//import { Stock } from '../_classes/stock'; - @Injectable({ - providedIn: 'root' + providedIn: 'root' }) export class NasdaqSearchService { private loginUrl = "api/nasdaq"; constructor( - private http: HttpClient + private http: HttpClient ) { } query(companyName: string) { const url = this.loginUrl + '/?Name=^' + companyName; return this.http.get(url) - .map(stock => { + .map(stock => { return stock; - }); + }); } diff --git a/src/app/_services/stock.service.ts b/src/app/_services/stock.service.ts index 4ec39eb..da66726 100644 --- a/src/app/_services/stock.service.ts +++ b/src/app/_services/stock.service.ts @@ -1,17 +1,14 @@ import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; -import {JsonpModule, Jsonp, Response} from '@angular/http'; - - -import { Observable } from 'rxjs/Observable'; +import { Jsonp } from '@angular/http'; import 'rxjs/add/operator/map' const httpOptions = { - headers: new HttpHeaders({ 'Content-Type': 'text/html' }) + headers: new HttpHeaders({ 'Content-Type': 'text/html' }) } @Injectable({ - providedIn: 'root' + providedIn: 'root' }) export class StockService { @@ -20,29 +17,29 @@ export class StockService { private jsonp: Jsonp ) { } - getLogos( symbols ) { + getLogos(symbols) { var symbolsComma = ""; var commaCheck = false; - for( var symbol in symbols ){ - if( commaCheck ){ + for (var symbol in symbols) { + if (commaCheck) { symbolsComma += ","; } commaCheck = true; symbolsComma += symbols[symbol].Symbol; - + } - + const url = "https://api.iextrading.com/1.0/stock/market/batch?symbols=" + symbolsComma + "&types=logo&callback=JSONP_CALLBACK"; return this.jsonp.request(url) - .map(logos => { + .map(logos => { return logos["_body"]; - }); + }); } - getCharByTime( symbol, timeFrame ){ + getCharByTime(symbol, timeFrame) { const url2 = "https://api.iextrading.com/1.0/stock/" + symbol + "/chart/1m?callback=JSONP_CALLBACK"; return this.jsonp.request(url2) .map(chartData => { @@ -50,23 +47,23 @@ export class StockService { }); } - getIpoBulkData( symbols ){ + getIpoBulkData(symbols) { var symbolsComma = ""; var commaCheck = false; - for( var symbol in symbols ){ - if( commaCheck ){ + for (var symbol in symbols) { + if (commaCheck) { symbolsComma += ","; } commaCheck = true; symbolsComma += symbols[symbol]; - + } - + const url = "https://api.iextrading.com/1.0/stock/market/batch?symbols=" + symbolsComma + "&types=quote,logo&callback=JSONP_CALLBACK"; return this.jsonp.request(url) - .map(logos => { + .map(logos => { return logos["_body"]; - }); + }); } } diff --git a/src/app/_services/watcher.service.ts b/src/app/_services/watcher.service.ts index cf4ae4b..4d1cbb6 100644 --- a/src/app/_services/watcher.service.ts +++ b/src/app/_services/watcher.service.ts @@ -1,6 +1,6 @@ import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; -import { Observable } from 'rxjs/Observable'; + import 'rxjs/add/operator/map'; @Injectable({ @@ -10,7 +10,7 @@ import 'rxjs/add/operator/map'; export class WatcherService { - + private apiUrl = "api/watching/"; constructor( @@ -20,14 +20,14 @@ export class WatcherService { getWatching() { - const url = this.apiUrl - return this.http.get(url) - .map(data => { - return data; - }); + const url = this.apiUrl + return this.http.get(url) + .map(data => { + return data; + }); } - - addWatching( symbol ){ + + addWatching(symbol) { let newWatchingSymbol = { symbol: symbol } @@ -36,24 +36,24 @@ export class WatcherService { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) }; - return this.http.post(this.apiUrl, newWatchingSymbol, httpOptions ) - .map(data => { - return data; - }); + return this.http.post(this.apiUrl, newWatchingSymbol, httpOptions) + .map(data => { + return data; + }); } - removeFromWatching( id ){ + removeFromWatching(id) { let apiUrl = "api/watching/" + id; const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) }; - - return this.http.delete(apiUrl, httpOptions ) - .map(data => { - return data; - }); - + + return this.http.delete(apiUrl, httpOptions) + .map(data => { + return data; + }); + } } diff --git a/src/app/stock-view/stock-view.component.ts b/src/app/stock-view/stock-view.component.ts index 19a9f54..71ebdc4 100644 --- a/src/app/stock-view/stock-view.component.ts +++ b/src/app/stock-view/stock-view.component.ts @@ -26,10 +26,12 @@ export class StockViewComponent implements OnInit { this.emitcomService.change.subscribe(data => { /* check com's sent by other components and apply actions as needed */ if (data.type == "action" && data.data == "destroyChart") { + /* destory the chart, could update maybe i'll change it when the time comes up */ if (this.chart !== undefined) { this.chart.destroy(); } } else if (data.type == "ipo") { + /* local method for service call for the IEX API passing the symbol and time frame (one month for now) */ this.getStockByChart(data.data, "1m"); } }); @@ -38,49 +40,51 @@ export class StockViewComponent implements OnInit { getStockByChart(symbol, timeFrame) { + /* As called above this is just the service call for the IEX API*/ this.stockService.getCharByTime(symbol, timeFrame) .subscribe( data => { - if (data.length > 0) { - - let date = data.map(data => data.date); - let close = data.map(data => data.close); - if (this.chart !== undefined) { - this.chart.destroy(); + /* map out arrays for the x and y axis ( day closing date and IPO value ) */ + let date = data.map(data => data.date); + let close = data.map(data => data.close); + + /* just to be on the save side check the status of the chart and destory as needed. */ + if (this.chart !== undefined) { + this.chart.destroy(); + } + + /* Create new chart with basic configuration passing the chart reference defind above */ + this.chart = new Chart(this.chartRef.nativeElement, { + type: 'line', + data: { + labels: date, + datasets: [{ + data: close, + borderColor: '#0097A7', + fill: false + }] + }, + options: { + legend: { + display: false + }, + scales: { + xAxes: [{ + display: true + }], + yAxes: [{ + display: true + }] } - - - this.chart = new Chart(this.chartRef.nativeElement, { - type: 'line', - data: { - labels: date, - datasets: [{ - data: close, - borderColor: '#0097A7', - fill: false - }] - }, - options: { - legend: { - display: false - }, - scales: { - xAxes: [{ - display: true - }], - yAxes: [{ - display: true - }] - } - } - }); - } - + }); + + + }, error => { - /* Something went south send notification */ + /* Something went south, send notification? maybe modal or snack bar */ }); } diff --git a/src/app/watcher-view/watcher-view.component.html b/src/app/watcher-view/watcher-view.component.html index 11654f6..3d78443 100644 --- a/src/app/watcher-view/watcher-view.component.html +++ b/src/app/watcher-view/watcher-view.component.html @@ -5,28 +5,22 @@

Watch List

+ +
- - -
- -
- - {{watchingIpos[symbol.symbol].quote.companyName}} - Symbol:
{{watchingIpos[symbol.symbol].quote.symbol}} - Updated:
{{watchingIpos[symbol.symbol].quote.latestTime}} - Day High:
{{watchingIpos[symbol.symbol].quote.high | currency }} - Day Low:
{{watchingIpos[symbol.symbol].quote.low | currency }} - -
- - -
- - - - + +
+ + {{watchingIpos[symbol.symbol].quote.companyName}} + Symbol:
{{watchingIpos[symbol.symbol].quote.symbol}} + Updated:
{{watchingIpos[symbol.symbol].quote.latestTime}} + Day High:
{{watchingIpos[symbol.symbol].quote.high | currency }} + Day Low:
{{watchingIpos[symbol.symbol].quote.low | currency }} + +
+ +
diff --git a/src/app/watcher-view/watcher-view.component.ts b/src/app/watcher-view/watcher-view.component.ts index 70a45ed..50458a7 100644 --- a/src/app/watcher-view/watcher-view.component.ts +++ b/src/app/watcher-view/watcher-view.component.ts @@ -23,83 +23,66 @@ export class WatcherViewComponent implements OnInit { this.getwatcherList(); + /* Just like in the other component we are going to subscribe to the same service and listen for events. */ this.emitcomService.change.subscribe(data => { - if( data.type == "action" && data.data == "updateWatcher" ){ + /* This will update the watch list */ + if (data.type == "action" && data.data == "updateWatcher") { this.getwatcherList(); } - + }); } - getwatcherList( ){ + getwatcherList() { - this.watcherService.getWatching( ) - .subscribe( - data => { - if( Object.keys(data).length === 0 ){ - /* We only have to check for the object key becasue i'm not great with regex... */ - /* If nothing is found do nothing */ - }else{ - /* Now that we have the search results and company IPO logos to match we can set the data and let the template take over. */ - //this.searchResults = companySearchResults; - //this.searchResultLogos = data; - console.log( data ) - let symbols = data.map(data => data.symbol); - this.getIpoBulkData(symbols, data); - console.log( symbols ) - - } - }, - error => { - console.log( "error" ); - }); + this.watcherService.getWatching() + .subscribe( + data => { + /* We are going to map out the symbols for the next service call but still pass the raw return so we can use the ID'd later for remvoing items from the DB */ + let symbols = data.map(data => data.symbol); + this.getIpoBulkData(symbols, data); + }, + error => { + /* A 404 can happen if nothing is returned and thats ok, it would be possible that the watcher DB is empty */ + }); } - - getIpoBulkData( symbols, rawData ){ - this.stockService.getIpoBulkData( symbols ) - .subscribe( - data => { - if( Object.keys(data).length === 0 ){ - /* We only have to check for the object key becasue i'm not great with regex... */ - /* If nothing is found do nothing */ - }else{ - /* Now that we have the search results and company IPO logos to match we can set the data and let the template take over. */ - //this.searchResults = companySearchResults; - //this.searchResultLogos = data; - console.log( data ) + + getIpoBulkData(symbols, rawData) { + this.stockService.getIpoBulkData(symbols) + .subscribe( + data => { + /* Now that we have data we can pass the rest to the template and do done! */ this.watchingIpos = data; this.watchingSymbols = rawData; - console.log( symbols ) - //let symbols = data.map(data => data.symbol); - //this.ipoBulkData(symbols); - - } - }, - error => { - console.log( "error" ); - }); + }, + error => { + /* Something went wrong with the API, alert user and do something or notrhing? */ + }); } - imgError( event ){ - event.target.src = "http://www.lazypug.net/img/pug.jpg"; + /* Now I need to move this to a helper class as it's used more than once */ + imgError(event) { + event.target.src = "http://www.lazypug.net/img/pug.jpg"; } - removeFromWatching( id ){ - - this.watcherService.removeFromWatching( id ) - .subscribe( - data => { - this.getwatcherList(); - }, - error => { - console.log( "error" ); - }); + removeFromWatching(id) { + + /* Does an out of the box http delete call on the mock DB */ + this.watcherService.removeFromWatching(id) + .subscribe( + data => { + /* Once complete rebuild the list */ + this.getwatcherList(); + }, + error => { + /* Something went wrong, alert user and do something or notrhing? */ + }); + } + + onSelect(selectedSymbol) { + /* On user click call sendData method on the service to emit an event to be picked up on the stock-view componet for the chart */ + this.emitcomService.sendData(selectedSymbol); } - - onSelect( selectedSymbol ){ - /* On user click call sendData method on the service to emit an event to be picked up on the stock-view componet */ - this.emitcomService.sendData( selectedSymbol ); - } }