From 5262b6e2b4de6746a9bb3aba6518e88afd15c40b Mon Sep 17 00:00:00 2001 From: Christopher Koch Date: Mon, 10 Sep 2018 22:25:08 -0400 Subject: [PATCH] started clean up of code. --- src/app/_helpers/alert.component.html | 13 --- src/app/_helpers/alert.component.ts | 51 ----------- src/app/_services/alert.service.ts | 59 ------------- src/app/_services/login.service.ts | 6 +- src/app/app.component.html | 1 - src/app/app.module.ts | 12 +-- src/app/home/home.component.ts | 3 + src/app/login/login.component.ts | 36 +++++--- .../search-view/search-view.component.html | 22 +++-- src/app/search-view/search-view.component.ts | 38 ++++---- src/app/stock-view/stock-view.component.ts | 88 +++++++------------ 11 files changed, 93 insertions(+), 236 deletions(-) delete mode 100644 src/app/_helpers/alert.component.html delete mode 100644 src/app/_helpers/alert.component.ts delete mode 100644 src/app/_services/alert.service.ts diff --git a/src/app/_helpers/alert.component.html b/src/app/_helpers/alert.component.html deleted file mode 100644 index 77fd3b9..0000000 --- a/src/app/_helpers/alert.component.html +++ /dev/null @@ -1,13 +0,0 @@ -
- -
-

{{alert.message}}

-

- - - -

-
-
- -
\ No newline at end of file diff --git a/src/app/_helpers/alert.component.ts b/src/app/_helpers/alert.component.ts deleted file mode 100644 index 59bc797..0000000 --- a/src/app/_helpers/alert.component.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -import { Alert } from '../_classes/alert'; -import { AlertType } from '../_classes/alertType'; -import { AlertService } from '../_services/alert.service'; - -@Component({ - selector: 'alert', - templateUrl: 'alert.component.html' -}) - -export class AlertComponent { - alerts: Alert[] = []; - - constructor(private alertService: AlertService) { } - - ngOnInit() { - this.alertService.getAlert().subscribe((alert: Alert) => { - if (!alert) { - // clear alerts when an empty alert is received - this.alerts = []; - return; - } - - // add alert to array - this.alerts.push(alert); - }); - } - - removeAlert(alert: Alert) { - this.alerts = this.alerts.filter(x => x !== alert); - } - - cssClass(alert: Alert) { - if (!alert) { - return; - } - - // return css class based on alert type - switch (alert.type) { - case AlertType.Success: - return 'alert alert-success'; - case AlertType.Error: - return 'alert alert-danger'; - case AlertType.Info: - return 'alert alert-info'; - case AlertType.Warning: - return 'alert alert-warning'; - } - } -} \ No newline at end of file diff --git a/src/app/_services/alert.service.ts b/src/app/_services/alert.service.ts deleted file mode 100644 index 72d8eb2..0000000 --- a/src/app/_services/alert.service.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { Injectable } from '@angular/core'; -import { Router, NavigationStart } from '@angular/router'; -import { Observable } from 'rxjs'; -import { Subject } from 'rxjs/Subject'; - -import { Alert } from '../_classes/alert'; -import { AlertType } from '../_classes/alertType'; - -@Injectable() -export class AlertService { - private subject = new Subject(); - private keepAfterRouteChange = false; - - constructor(private router: Router) { - // clear alert messages on route change unless 'keepAfterRouteChange' flag is true - router.events.subscribe(event => { - if (event instanceof NavigationStart) { - if (this.keepAfterRouteChange) { - // only keep for a single route change - this.keepAfterRouteChange = false; - } else { - // clear alert messages - this.clear(); - } - } - }); - } - - getAlert(): Observable { - return this.subject.asObservable(); - } - - success(message: string, keepAfterRouteChange = false) { - this.alert(AlertType.Success, message, keepAfterRouteChange); - } - - error(message: string, keepAfterRouteChange = false) { - this.alert(AlertType.Error, message, keepAfterRouteChange); - } - - info(message: string, keepAfterRouteChange = false) { - this.alert(AlertType.Info, message, keepAfterRouteChange); - } - - warn(message: string, keepAfterRouteChange = false) { - this.alert(AlertType.Warning, message, keepAfterRouteChange); - } - - alert(type: AlertType, message: string, keepAfterRouteChange = false) { - this.clear(); - this.keepAfterRouteChange = keepAfterRouteChange; - this.subject.next({ type: type, message: message }); - } - - clear() { - // clear alerts - this.subject.next(); - } -} \ No newline at end of file diff --git a/src/app/_services/login.service.ts b/src/app/_services/login.service.ts index 7f2d7b3..4a20de8 100644 --- a/src/app/_services/login.service.ts +++ b/src/app/_services/login.service.ts @@ -1,9 +1,6 @@ import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; - -import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map' - import { User } from '../_classes/user'; @Injectable({ @@ -12,6 +9,7 @@ import { User } from '../_classes/user'; export class LoginService { + /* URL to the mock DB to be intercepted by the web-api in memory data service */ private loginUrl = "api/users"; constructor( @@ -19,7 +17,9 @@ export class LoginService { ) { } 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 + '$' ; + /* Run the request expecting a user class back */ return this.http.get(url) .map(user => { return user; diff --git a/src/app/app.component.html b/src/app/app.component.html index c76698b..90c6b64 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,2 +1 @@ - \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 5f6d922..d1e2208 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -13,8 +13,7 @@ import { JsonpModule } from '@angular/http'; import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api'; import { InMemoryDataService } from './_mockdata/mock-data-nasdaq'; -import { AlertComponent } from './_helpers/alert.component'; -import { AlertService } from './_services/alert.service'; + import { EmitcomService } from './_services/emitcom.service'; import { AuthGuard } from './_guards/auth.guard'; @@ -30,7 +29,8 @@ import { MatIconRegistry } from "@angular/material"; import { MatDividerModule } from '@angular/material/divider'; import { MatListModule } from '@angular/material/list'; import { WatcherViewComponent } from './watcher-view/watcher-view.component'; -import {MatMenuModule} from '@angular/material/menu'; +import { MatMenuModule } from '@angular/material/menu'; +import { MatSnackBarModule } from '@angular/material/snack-bar'; @NgModule({ @@ -39,7 +39,6 @@ import {MatMenuModule} from '@angular/material/menu'; LoginComponent, HomeComponent, UserAdminComponent, - AlertComponent, SearchViewComponent, StockViewComponent, WatcherViewComponent, @@ -61,10 +60,11 @@ import {MatMenuModule} from '@angular/material/menu'; MatDividerModule, MatListModule, JsonpModule, - MatMenuModule + MatMenuModule, + MatSnackBarModule ], providers: [ - AlertService, + EmitcomService, MatIconRegistry, AuthGuard diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 4bda111..f73ba83 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -11,6 +11,9 @@ export class HomeComponent implements OnInit { constructor() { } ngOnInit() { + + /* So much more can be done here however I'm really just using the home component as a shell/container for the others to live within. */ + } } diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts index 5fe68fd..72704e6 100644 --- a/src/app/login/login.component.ts +++ b/src/app/login/login.component.ts @@ -1,36 +1,41 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; -import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms'; - +import { FormGroup, FormControl, Validators } from '@angular/forms'; import { LoginService } from '../_services/login.service'; -import { AlertService } from '../_services/alert.service'; +import { MatSnackBar } from '@angular/material'; + @Component({ - selector: 'app-login', - templateUrl: './login.component.html', - styleUrls: ['./login.component.css'] + selector: 'app-login', + templateUrl: './login.component.html', + styleUrls: ['./login.component.css'] }) + export class LoginComponent implements OnInit { public form: any; + private snackBar: MatSnackBar; constructor( private loginService: LoginService, - private alertService: AlertService, - private router: Router - ) { } + private router: Router, + private matSnackBar: MatSnackBar + ) { } ngOnInit() { this.loginService.logout(); this.buildForm(); + this.snackBar = this.matSnackBar; } buildForm(){ const formGroup = {}; + /* Create form controls with a method to map custom validation with Angular provided ones. */ formGroup["userName"] = new FormControl( "", this.mapValidators({ required: true }) ); formGroup["password"] = new FormControl( "", this.mapValidators({ required: true }) ); + /* Pass form entitie object to create a FormGroup to be used by the template */ this.form = new FormGroup(formGroup); } @@ -49,24 +54,27 @@ export class LoginComponent implements OnInit { login( form ) { - this.alertService.clear(); + /* Reset for values */ this.form.controls.userName.setValue("", false); this.form.controls.password.setValue("", false); + /* Hit up the login service for verification of credentials */ this.loginService.login( form ) .subscribe( data => { + /* Reason for checking keys is simple, i'm not great at writing regular expressions and thats what i'm using for the mock DB. */ if( Object.keys(data).length === 0 ){ - this.alertService.error( "Bad username or password" ); + /* Bad login, show message */ + this.snackBar.open('Yeah No... Try again?'); }else{ - //console.log(data[0].userName); + /* Good login! set user object and redirect */ localStorage.setItem('currentUser', JSON.stringify(data[0])); this.router.navigate(["home"]); } }, error => { - //console.log(error) - this.alertService.error( "Bad username or password" ); + /* Bad login, show message */ + this.snackBar.open('Yeah No... Try again?'); }); } diff --git a/src/app/search-view/search-view.component.html b/src/app/search-view/search-view.component.html index 275b234..f3a39d4 100644 --- a/src/app/search-view/search-view.component.html +++ b/src/app/search-view/search-view.component.html @@ -1,23 +1,26 @@
+

Search IPO's

 -
- - + +
+ + - - + + -
+
+ -
+
@@ -40,5 +43,6 @@
+
\ No newline at end of file diff --git a/src/app/search-view/search-view.component.ts b/src/app/search-view/search-view.component.ts index fdaa680..8b0e073 100644 --- a/src/app/search-view/search-view.component.ts +++ b/src/app/search-view/search-view.component.ts @@ -1,10 +1,10 @@ import { Component, OnInit, HostListener } from '@angular/core'; - +import { Router } from '@angular/router'; import { EmitcomService } from '../_services/emitcom.service'; import { NasdaqSearchService } from '../_services/nasdaq-search.service'; import { StockService } from '../_services/stock.service'; import { WatcherService } from '../_services/watcher.service'; -import { AlertService } from '../_services/alert.service'; + @Component({ selector: 'app-search-view', @@ -20,8 +20,8 @@ export class SearchViewComponent implements OnInit { private emitcomService: EmitcomService, private nasdaqSearchService: NasdaqSearchService, private stockService: StockService, - private alertService: AlertService, - private watcherService: WatcherService + private watcherService: WatcherService, + private router: Router ) { } ngOnInit() { @@ -31,15 +31,13 @@ export class SearchViewComponent implements OnInit { searchCompany( searchData ){ /* clear out IPO list at each key press */ this.clearIpoList(); - this.alertService.clear(); - + if( searchData.length >= 3 ){ this.nasdaqSearchService.query( searchData ) .subscribe( data => { if( Object.keys(data).length === 0 ){ /* We only need this here becasue i'm not great at regular expressions */ - this.alertService.error( "No IPO's Found" ); }else{ if( data.length > 0 ){ /* Data found in mock DB slice out the first six results and call method for logos. */ @@ -48,10 +46,10 @@ export class SearchViewComponent implements OnInit { } }, error => { - /* 404 not found in mock DB send alert to user. */ - this.alertService.error( "No IPO's Found" ); + /* 404 not found in mock DB. */ }); }else if( searchData.length === 0 ){ + /* Emit event to clear chart when search bar is empty*/ this.emitcomService.destroyChart(); } } @@ -71,11 +69,12 @@ export class SearchViewComponent implements OnInit { } }, error => { - /* in this circumstance we don't care about error as the logo return is static from the service. We will find another way to validate images. */ + /* in this circumstance we don't care about error as the logo return is static from the service. We have another way to validate images. */ }); } + /* Move to helper class? */ imgError( event ){ event.target.src = "http://www.lazypug.net/img/pug.jpg"; } @@ -89,20 +88,11 @@ export class SearchViewComponent implements OnInit { this.watcherService.addWatching( symbol ) .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 ) - this.emitcomService.updateWatcher(); - } + /* send update to Watching componet to refresh list */ + this.emitcomService.updateWatcher(); }, error => { - console.log( error ); - /* in this circumstance we don't care about error as the logo return is static from the service. We will find another way to validate images. */ + /* We could alert the user something went south but as this is a mock DB it won't fail :/ */ }); } @@ -110,4 +100,8 @@ export class SearchViewComponent implements OnInit { this.searchResults = null; } + logout(){ + this.router.navigate(["login"]); + } + } diff --git a/src/app/stock-view/stock-view.component.ts b/src/app/stock-view/stock-view.component.ts index 265a967..19a9f54 100644 --- a/src/app/stock-view/stock-view.component.ts +++ b/src/app/stock-view/stock-view.component.ts @@ -7,69 +7,53 @@ import * as Chart from 'chart.js' selector: 'app-stock-view', templateUrl: './stock-view.component.html', styleUrls: ['./stock-view.component.css'], - + }) export class StockViewComponent implements OnInit { + + /* Grab the eleiment for the chart */ @ViewChild('chartView') private chartRef; chart: any; - + constructor( - private emitcomService: EmitcomService, + private emitcomService: EmitcomService, private stockService: StockService - ) { } + ) { } ngOnInit() { - + this.emitcomService.change.subscribe(data => { - if( data.type == "action" && data.data == "destroyChart" ){ - if( this.chart !== undefined ){ - this.chart.destroy(); - } - }else if( data.type == "ipo" ){ - this.getStockByChart( data.data, "1m" ); + /* check com's sent by other components and apply actions as needed */ + if (data.type == "action" && data.data == "destroyChart") { + if (this.chart !== undefined) { + this.chart.destroy(); + } + } else if (data.type == "ipo") { + this.getStockByChart(data.data, "1m"); } - }); - - } + getStockByChart(symbol, timeFrame) { - - getStockByChart( symbol, timeFrame ){ - - this.stockService.getCharByTime( symbol, timeFrame ) + this.stockService.getCharByTime(symbol, timeFrame) .subscribe( data => { - if( Object.keys(data).length === 0 ){ - //this.alertService.error( "Bad username or password" ); - }else{ - //console.log(data[0].userName); - //localStorage.setItem('currentUser', JSON.stringify(data[0])); - //this.router.navigate(["home"]); - - //console.log( data ); - //this.searchResults = data; - if( data.length > 0 ){ - console.log( data ); - //[n].close - //[n].date + if (data.length > 0) { + let date = data.map(data => data.date); let close = data.map(data => data.close); - // console.log(date); - // console.log(close); - - if( this.chart !== undefined ){ - this.chart.destroy(); + if (this.chart !== undefined) { + this.chart.destroy(); } - + this.chart = new Chart(this.chartRef.nativeElement, { type: 'line', - data:{ + data: { labels: date, datasets: [{ data: close, @@ -77,40 +61,28 @@ export class StockViewComponent implements OnInit { fill: false }] }, - options:{ - legend:{ + options: { + legend: { display: false }, - scales:{ - xAxes:[{ + scales: { + xAxes: [{ display: true }], - yAxes:[{ + yAxes: [{ display: true }] } } }); - - /* - let dates = []; - dates.forEach((res) =>{ - let jsdate = new Date(res * 1000) - dates.push( jsdate.toLocalTimeString('en') ) - }) - */ - - - } - } + }, error => { - //console.log(error) - //this.alertService.error( "Bad username or password" ); + /* Something went south send notification */ }); - + }