ckoch/waters
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

started clean up of code.

Browse Source
This commit is contained in:
Christopher Koch
2018-09-10 22:25:08 -04:00
parent 4bcc4aceaa
commit 5262b6e2b4
11 changed files with 93 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/_helpers/alert.component.html
View File

@@ -1,13 +0,0 @@
<div *ngFor="let alert of alerts" class="{{ cssClass(alert) }} alert-dismissable" >
<mat-card class="lrCard">
<div>
<p class="alignleft"><b>{{alert.message}}</b></p>
<p class="alignright">
<a class="close" (click)="removeAlert(alert)">
<mat-icon class="alert-icon" fontSet="fa" fontIcon="fa-times" ></mat-icon>
</a>
</p>
<div style="clear: both;"></div>
</div>
</mat-card>
</div>

51
src/app/_helpers/alert.component.ts
View File

@@ -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';
}
}
}

59
src/app/_services/alert.service.ts
View File

@@ -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<Alert>();
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<any> {
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(<Alert>{ type: type, message: message });
}
clear() {
// clear alerts
this.subject.next();
}
}

6
src/app/_services/login.service.ts
View File

@@ -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<User>(url)
.map(user => {
return user;

1
src/app/app.component.html
View File

@@ -1,2 +1 @@
<alert></alert>
<router-outlet></router-outlet>

12
src/app/app.module.ts
View File

@@ -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

3
src/app/home/home.component.ts
View File

@@ -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. */
}
}

36
src/app/login/login.component.ts
View File

@@ -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?');
});
}

20
src/app/search-view/search-view.component.html
View File

@@ -1,23 +1,26 @@
<div class="cardContainer">
<mat-card id="searchCard">
<mat-card-header class="fullWidth">
<div class="ipoContainer">
<mat-card-title>
<h2>Search IPO's</h2>
</mat-card-title>
<div class="spacer"></div>
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon class="addWatchListIcon" fontSet="fa" fontIcon="fa-bars" ></mat-icon>
</button>
<div class="spacer"></div>
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon class="addWatchListIcon" fontSet="fa" fontIcon="fa-bars" ></mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
<button mat-menu-item [routerLink]="['/about']">About</button>
<button mat-menu-item (click)="logout();" >Logout</button>
</mat-menu>
</div>
</div>
</mat-card-header>
<mat-form-field class="fullWidth">
<input matInput placeholder="Company"
[id]="'company'"
@@ -28,7 +31,7 @@
<mat-divider></mat-divider>
<div>
<div class="listContainer" >
<mat-nav-list>
<mat-list-item *ngFor="let company of searchResults">
<div class="ipoContainer">
@@ -40,5 +43,6 @@
</mat-list-item>
</mat-nav-list>
</div>
</mat-card>
</div>

36
src/app/search-view/search-view.component.ts
View File

@@ -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,7 +31,6 @@ 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 )
@@ -39,7 +38,6 @@ export class SearchViewComponent implements OnInit {
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"]);
}
}

76
src/app/stock-view/stock-view.component.ts
View File

@@ -10,66 +10,50 @@ import * as Chart from 'chart.js'
})
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"]);
if (data.length > 0) {
//console.log( data );
//this.searchResults = data;
if( data.length > 0 ){
console.log( data );
//[n].close
//[n].date
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,38 +61,26 @@ 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 */
});
}