work on watcher list

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

@@ -36,6 +36,15 @@ export class InMemoryDataService implements InMemoryDbService {
       }
   ];
 
+  let watching = [
+    {
+      symbol: "MSFT"
+    },
+    {
+      symbol: "GOOGL"
+    }
+  ];
+
     let nasdaq = [
        {
     "Symbol": "PIH",
@@ -13599,6 +13608,6 @@ export class InMemoryDataService implements InMemoryDbService {
   }
     ];
 
-    return {nasdaq, users};
+    return {nasdaq, users, watching};
   }
 }

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

@@ -1,85 +0,0 @@
-import { InMemoryDbService } from 'angular-in-memory-web-api';
-
-/*
-In no real application would I ever create and store a token in the DB but as I want to make this example without the need for BE calls, real DB's, etc...etc
-
-KEY: waters
-
-{
-    "iss": "lazypug.net",
-    "iat": 1536187501,
-    "exp": 1567723501,
-    "aud": "www.lazypug.net",
-    "sub": "ckoch@lazypug.net",
-    "firstName": "Christopher",
-    "LastName": "Koch",
-    "email": "ckoch@lazypug.net",
-    "role": "B5",
-    "id": "11"
-}
-
-{
-    "iss": "lazypug.net",
-    "iat": 1536187501,
-    "exp": 1567723501,
-    "aud": "www.lazypug.net",
-    "sub": "rkoch@lazypug.net",
-    "firstName": "Rebecca",
-    "LastName": "Koch",
-    "email": "rkoch@lazypug.net",
-    "role": "B4",
-    "id": "12"
-}
-
-{
-    "iss": "lazypug.net",
-    "iat": 1536187501,
-    "exp": 1567723501,
-    "aud": "www.lazypug.net",
-    "sub": "hkoch@lazypug.net",
-    "firstName": "Henry",
-    "LastName": "Koch",
-    "email": "hkoch@lazypug.net",
-    "role": "B2",
-    "id": "13"
-}
-
-*/
-
-export class InMemoryDataService implements InMemoryDbService {
-  createDb() {
-    const users = [
-      {
-        id: 11,
-        firstName: "Christopher",
-        lastName: "Koch",
-        role: "B5",
-        email: "ckochXlazypug.net",
-        userName: "ckoch",
-        password: "test",
-        token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJsYXp5cHVnLm5ldCIsImlhdCI6MTUzNjE4NzUwMSwiZXhwIjoxNTY3NzIzNTAxLCJhdWQiOiJ3d3cubGF6eXB1Zy5uZXQiLCJzdWIiOiJja29jaEBsYXp5cHVnLm5ldCIsImZpcnN0TmFtZSI6IkNocmlzdG9waGVyIiwiTGFzdE5hbWUiOiJLb2NoIiwiZW1haWwiOiJja29jaEBsYXp5cHVnLm5ldCIsInJvbGUiOiJCNSIsImlkIjoiMTEifQ.UcIStKvZdYqWKho1I1tVta8zNLQD7KpP4n8l93wStEI"
-      },
-      {
-        id: 12,
-        firstName: "Rebecca",
-        lastName: "Koch",
-        role: "B4",
-        email: "rkoch@lazypug.net",
-        userName: "rkoch",
-        password: "test2",
-        token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJsYXp5cHVnLm5ldCIsImlhdCI6MTUzNjE4NzUwMSwiZXhwIjoxNTY3NzIzNTAxLCJhdWQiOiJ3d3cubGF6eXB1Zy5uZXQiLCJzdWIiOiJya29jaEBsYXp5cHVnLm5ldCIsImZpcnN0TmFtZSI6IlJlYmVjY2EiLCJMYXN0TmFtZSI6IktvY2giLCJlbWFpbCI6InJrb2NoQGxhenlwdWcubmV0Iiwicm9sZSI6IkI0IiwiaWQiOiIxMiJ9.baXMibtXAEUbbm1Nf4VP0yefFovR2-QHpRqzLQO7CtM"
-      },
-      {
-        id: 13,
-        firstName: "Henry",
-        lastName: "Koch",
-        role: "B2",
-        email: "hkoch@lazypug.net",
-        userName: "hkoch",
-        password: "test3",
-        token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJsYXp5cHVnLm5ldCIsImlhdCI6MTUzNjE4NzUwMSwiZXhwIjoxNTY3NzIzNTAxLCJhdWQiOiJ3d3cubGF6eXB1Zy5uZXQiLCJzdWIiOiJoa29jaEBsYXp5cHVnLm5ldCIsImZpcnN0TmFtZSI6IkhlbnJ5IiwiTGFzdE5hbWUiOiJLb2NoIiwiZW1haWwiOiJoa29jaEBsYXp5cHVnLm5ldCIsInJvbGUiOiJCMiIsImlkIjoiMTMifQ.Y6g9h4knKoawHmQEqT9A0UGOwYr4fKENyJ1O3MP6H5g"
-      }
-    ];
-    return {users};
-  }
-}

src/app/_services/stock.service.ts

@@ -49,4 +49,24 @@ export class StockService {
 				return chartData["_body"];
 			});
 	}
+
+	getIpoBulkData( symbols ){
+		var symbolsComma = "";
+		var commaCheck = false;
+
+		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 => {
+				return logos["_body"];
+            });
+	}
 }

src/app/_services/watcher.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { WatcherService } from './watcher.service';
+
+describe('WatcherService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [WatcherService]
+    });
+  });
+
+  it('should be created', inject([WatcherService], (service: WatcherService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/_services/watcher.service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/map'
+
+@Injectable({
+  providedIn: 'root'
+})
+export class WatcherService {
+  
+  private apiUrl = "api/watching/";
+
+  constructor(
+    private http: HttpClient
+
+  ) { }
+
+
+  getWatching() {
+		const url = this.apiUrl
+		return this.http.get<any>(url)
+		    .map(data => {
+				return data;
+            });
+	}
+
+}
+

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

@@ -7,37 +7,22 @@
     </mat-card-header>
     <div>
 
-<!--
-        <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
 
-            
+  <div>
-            <ng-container matColumnDef="position">
+      <mat-nav-list>
-              <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
+          <mat-list-item *ngFor="let symbol of watchingSymbols">
-              <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+            <div class="ipoContainer">
-            </ng-container>
+              
-          
+              <span>{{watchingIpos[symbol].quote.companyName}}</span>
-            
+              <div class="spacer"></div>
-            <ng-container matColumnDef="name">
+              
-              <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+            </div>
-              <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+          </mat-list-item>
-            </ng-container>
+        </mat-nav-list>
-          
+      </div>
-            
+
-            <ng-container matColumnDef="weight">
+
-              <th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th>
+
-              <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
-            </ng-container>
-          
-            
-            <ng-container matColumnDef="symbol">
-              <th mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </th>
-              <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
-            </ng-container>
-          
-            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-          </table>
-        -->
 
     </div>
 

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

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { EmitcomService } from '../_services/emitcom.service';
+import { WatcherService } from '../_services/watcher.service';
+import { StockService } from '../_services/stock.service';
 
 @Component({
   selector: 'app-watcher-view',
@@ -7,9 +10,67 @@ import { Component, OnInit } from '@angular/core';
 })
 export class WatcherViewComponent implements OnInit {
 
-  constructor() { }
+  watchingSymbols;
+  watchingIpos;
+
+  constructor(
+    private emitcomService: EmitcomService,
+    private watcherService: WatcherService,
+    private stockService: StockService
+  ) { }
 
   ngOnInit() {
+
+    this.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);
+            console.log( symbols )
+
+					}
+				},
+				error => {
+					console.log( "error" );
+				});
+
+  }
+  
+  getIpoBulkData( symbols ){
+    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 )
+          this.watchingIpos = data;
+          this.watchingSymbols = symbols;
+          //let symbols = data.map(data => data.symbol);
+          //this.ipoBulkData(symbols);
+
+        }
+      },
+      error => {
+        console.log( "error" );
+      });
   }
 
 }