Finished all main functions

src/app/_guards/auth.guard.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+
+@Injectable()
+export class AuthGuard implements CanActivate {
+
+    constructor(private router: Router) { }
+
+    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+        if (localStorage.getItem('currentUser')) {
+            return true;
+        }
+
+        this.router.navigate( ['login'] );
+        return false;
+    }
+}

src/app/_mockdata/mock-data-nasdaq.ts

@@ -38,9 +38,11 @@ export class InMemoryDataService implements InMemoryDbService {
 
   let watching = [
     {
+      id:3,
       symbol: "MSFT"
     },
     {
+      id:4,
       symbol: "GOOGL"
     }
   ];

src/app/_services/emitcom.service.ts

@@ -21,10 +21,10 @@ export class EmitcomService {
 		this.change.emit( sendData );
 	}
 
-	addToWatcher( data: string ){
+	updateWatcher( ){
 		let sendData ={
-			type: "watcher",
-			data: data
+			type: "action",
+			data: "updateWatcher"
 		};
 		this.change.emit( sendData );
 	}

src/app/_services/watcher.service.ts

@@ -1,11 +1,14 @@
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/operator/map'
+import 'rxjs/add/operator/map';
 
 @Injectable({
   providedIn: 'root'
 })
+
+
+
 export class WatcherService {
   
   private apiUrl = "api/watching/";
@@ -22,7 +25,36 @@ export class WatcherService {
 		    .map(data => {
 				return data;
             });
-	}
+  }
+  
+  addWatching( symbol ){
+    let newWatchingSymbol = {
+      symbol: symbol
+    }
+
+    const httpOptions = {
+      headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+    };
+
+    return this.http.post<any>(this.apiUrl, newWatchingSymbol, httpOptions )
+		    .map(data => {
+				return data;
+            });
+
+  }
+
+  removeFromWatching( id ){
+    let apiUrl = "api/watching/" + id;
+    const httpOptions = {
+      headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+    };
+    
+    return this.http.delete<any>(apiUrl, httpOptions )
+		    .map(data => {
+				return data;
+            });
+            
+  }
 
 }
 

src/app/app-routing.module.ts

@@ -4,14 +4,15 @@ import { RouterModule, Routes } from '@angular/router';
 import { LoginComponent } from './login/login.component';
 import { HomeComponent } from './home/home.component';
 import { UserAdminComponent } from './user-admin/user-admin.component';
+import { AuthGuard } from './_guards/auth.guard';
 
 const routes: Routes = [
 	/* default path sends users to login */
 	{ path: '', redirectTo: '/login', pathMatch: 'full' },
 	/* component paths */
 	{ path: 'login', component: LoginComponent },
-	{ path: 'home', component: HomeComponent },
-	{ path: 'user-admin', component: UserAdminComponent }
+	{ path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
+	{ path: 'user-admin', component: UserAdminComponent, canActivate: [AuthGuard] }
 ];
 
 

src/app/app.module.ts

@@ -16,6 +16,7 @@ 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';
 
 import { AppRoutingModule } from './/app-routing.module';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -29,6 +30,7 @@ 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';
 
 
 @NgModule({
@@ -58,12 +60,14 @@ import { WatcherViewComponent } from './watcher-view/watcher-view.component';
     MatIconModule,
     MatDividerModule,
     MatListModule,
-    JsonpModule
+    JsonpModule,
+    MatMenuModule
   ],
   providers: [
     AlertService,
     EmitcomService,
-    MatIconRegistry
+    MatIconRegistry,
+    AuthGuard
   ],
   bootstrap: [AppComponent]
 })

src/app/search-view/search-view.component.css

@@ -31,4 +31,13 @@
 	display: flex;
 	align-items:center;
 	color: #018786;
+}
+
+.card-header{
+	font-size: 21px;
+	font-weight: 700;
+}
+
+.mat-card-title{
+	margin: 0px;
 }

src/app/search-view/search-view.component.html

@@ -1,9 +1,22 @@
 <div class="cardContainer">
 	<mat-card id="searchCard">
-		<mat-card-header>
-			<mat-card-title>
-				<h2>Search IPO's</h2>
-			</mat-card-title>
+		<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>
+
+				<mat-menu #menu="matMenu">
+				  <button mat-menu-item>Item 1</button>
+				  <button mat-menu-item>Item 2</button>
+				</mat-menu>
+					</div>
+					
 		</mat-card-header>
 		<mat-form-field class="fullWidth">
 			<input matInput placeholder="Company"
@@ -22,7 +35,7 @@
 						<img class="ipoMiniLogo" src="{{searchResultLogos[company.Symbol].logo.url}}"  (error)="imgError($event)">
 						<span (click)="onSelect(company.Symbol)" >{{company.Name}}</span>
 						<div class="spacer"></div>
-						<mat-icon class="addWatchListIcon" fontSet="fa" fontIcon="fa-plus-circle" ></mat-icon>
+						<mat-icon (click)="addToWatching(company.Symbol)" class="addWatchListIcon" fontSet="fa" fontIcon="fa-plus-circle" ></mat-icon>
 					</div>
 				</mat-list-item>
 			</mat-nav-list>

src/app/search-view/search-view.component.ts

@@ -3,6 +3,7 @@ import { Component, OnInit, HostListener  } from '@angular/core';
 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({
@@ -19,7 +20,8 @@ export class SearchViewComponent implements OnInit {
   		private emitcomService: EmitcomService,
   		private nasdaqSearchService: NasdaqSearchService,
   		private stockService: StockService,
-  		private alertService: AlertService
+		private alertService: AlertService,
+		private watcherService: WatcherService
   	) { }
 
 	ngOnInit() {
@@ -83,6 +85,27 @@ export class SearchViewComponent implements OnInit {
 		this.emitcomService.sendData( selectedSymbol );
 	}
 
+	addToWatching( symbol ){
+		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();
+					}
+				},
+				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. */
+				});
+	}
+
 	clearIpoList(){
 		this.searchResults = null;
 	}

src/app/watcher-view/watcher-view.component.css

@@ -1,18 +1,6 @@
-@media only screen and (min-width : 600px){
+@media only screen and (min-width : 600px) and (max-width: 1199px){
     #watcherCard{
-        width: 400px;
-    }
-}
-
-@media only screen and (min-width : 800px){
-    #watcherCard{
-        width: 600px;
-    }
-}
-
-@media only screen and (min-width : 1000px) {
-    #watcherCard{
-        width: 900px;
+        display: none;
     }
 }
 
@@ -26,4 +14,35 @@
     #watcherCard{
         width: 1200px;
     }
+}
+
+.mat-nav-list .mat-list-item {
+    height:45px;
+}
+
+.watchingContainer{
+	width:100%;
+	display: flex;
+	align-items:center;
+}
+
+.ipoMiniLogo{
+	width:35px;
+	height: auto;
+	border-radius: 50%;
+	text-align: right;
+	margin-right: 5px;
+}
+
+.mockTable{
+    width:200px;
+    margin: 0px 10px;
+}
+
+.removeFromWatchListIcon{
+	width:auto;
+	font-size: 25px;
+	display: flex;
+	align-items:center;
+	color: #018786;
 }

src/app/watcher-view/watcher-view.component.html

@@ -11,11 +11,14 @@
   <div>
       <mat-nav-list>
           <mat-list-item *ngFor="let symbol of watchingSymbols">
-            <div class="ipoContainer">
-              
-              <span>{{watchingIpos[symbol].quote.companyName}}</span>
-              <div class="spacer"></div>
-              
+            <div class="watchingContainer">
+              <img class="ipoMiniLogo" src="{{watchingIpos[symbol.symbol].logo.url}}"  (error)="imgError($event)">
+              <span class="mockTable" (click)="onSelect(watchingIpos[symbol.symbol].quote.symbol)" >{{watchingIpos[symbol.symbol].quote.companyName}}</span>
+              <span class="mockTable" >Symbol:<br />{{watchingIpos[symbol.symbol].quote.symbol}}</span>
+              <span class="mockTable" >Updated:<br />{{watchingIpos[symbol.symbol].quote.latestTime}}</span>
+              <span class="mockTable" >Day High:<br />{{watchingIpos[symbol.symbol].quote.high | currency }}</span>
+              <span class="mockTable" >Day Low:<br />{{watchingIpos[symbol.symbol].quote.low | currency }}</span>
+              <mat-icon (click)="removeFromWatching(symbol.id)" class="removeFromWatchListIcon" fontSet="fa" fontIcon="fa-minus-circle" ></mat-icon>
             </div>
           </mat-list-item>
         </mat-nav-list>

src/app/watcher-view/watcher-view.component.ts

@@ -22,6 +22,13 @@ export class WatcherViewComponent implements OnInit {
   ngOnInit() {
 
     this.getwatcherList();
+
+    this.emitcomService.change.subscribe(data => {
+      if( data.type == "action" && data.data == "updateWatcher" ){
+        this.getwatcherList();
+      }
+      
+    });
   }
 
   getwatcherList(  ){
@@ -38,7 +45,7 @@ export class WatcherViewComponent implements OnInit {
             //this.searchResultLogos = data;
             console.log( data )
             let symbols = data.map(data => data.symbol);
-            this.getIpoBulkData(symbols);
+            this.getIpoBulkData(symbols, data);
             console.log( symbols )
 
 					}
@@ -49,7 +56,7 @@ export class WatcherViewComponent implements OnInit {
 
   }
   
-  getIpoBulkData( symbols ){
+  getIpoBulkData( symbols, rawData ){
     this.stockService.getIpoBulkData( symbols  )
     .subscribe(
       data => {
@@ -62,7 +69,8 @@ export class WatcherViewComponent implements OnInit {
           //this.searchResultLogos = data;
           console.log( data )
           this.watchingIpos = data;
-          this.watchingSymbols = symbols;
+          this.watchingSymbols = rawData;
+          console.log( symbols )
           //let symbols = data.map(data => data.symbol);
           //this.ipoBulkData(symbols);
 
@@ -73,4 +81,25 @@ export class WatcherViewComponent implements OnInit {
       });
   }
 
+  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" );
+      });
+  }
+  
+	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 );
+	}
+
 }