added visualize-all component and fixed header and dashboard to route…

… properly and display correct info

src/app/app.module.ts

@@ -13,6 +13,7 @@ import { AuthenticationComponent } from './authentication/authentication.compone
 import { FrontpageComponent } from './frontpage/frontpage.component';
 import { GeneratorSearchComponent } from './generator-search/generator-search.component';
 import { SignUpComponent } from './sign-up/sign-up.component';
+import { VisualizeAllComponent } from './visualize-all/visualize-all.component';
 
 @NgModule({
   declarations: [
@@ -24,7 +25,8 @@ import { SignUpComponent } from './sign-up/sign-up.component';
     AuthenticationComponent,
     FrontpageComponent,
     GeneratorSearchComponent,
-    SignUpComponent
+    SignUpComponent,
+    VisualizeAllComponent
   ],
   imports: [
     BrowserModule,
@@ -39,6 +41,7 @@ import { SignUpComponent } from './sign-up/sign-up.component';
     {path: 'warnings', component: WarningsComponent},
     {path: 'history', component: HistoryComponent},
     {path: 'sign_up', component: SignUpComponent},
+    {path: 'visualize-all', component: VisualizeAllComponent},
 
     ]),
 

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

@@ -1,6 +1,14 @@
-/* div {
-    position: absolute;
-    top:  40%;
-    left: 50%;
-    transform: translate(-50%,-50%);
-} */
+h4#header {
+    margin-left: 110px;
+}
+
+p#genInfo {
+    margin-left: 20px;
+}
+
+a#genLink {
+    padding: 14px 25px;
+    margin: 10px;
+    display: inline-block;
+    text-decoration: none;
+}

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

@@ -1,25 +1,18 @@
 <div class="generator-main" id="findGenerator">
     <div class="col-md-6 mx-auto mt-4">
-        <h4 class="text-center mb-3">Search for a Generator</h4>
-        <form>
-            <div class="form-group">
-                <label for="exampleInputGenerator1"></label>
-                <input type="generator" class="form-control" id="exampleInputGenerator1" aria-describedby="emailHelp"
-                    placeholder="Enter generator">
-            </div>
-            <a routerLink="/generator-search"><button type="submit" class="btn btn-primary">Search</button></a>
-        </form>
+        <h4 id="header">
+            Your Generators
+        </h4>
+        <br>
         <ul>
-            <li *ngFor="let generator of generators$">
-                <a routerLink="/statistics/{{generator.gen_id}}">
-                    {{ generator.gen_name }}
-                </a>
-            </li>
+            <ol *ngFor="let generator of generators$">
+                <a id="genLink" class="btn btn-primary" (click)="goToGenerator(generator.gen_id, generator.org_id)">{{ generator.gen_name }}</a>
+                <p id="genInfo">
+                    Organization ID: {{ generator.org_id }} <br>
+                    Generator ID: {{ generator.gen_id }} <br>
+                    zipcode: {{ generator.zip }}
+                </p>
+            </ol>
         </ul>
-
-
-
     </div>
-
-
 </div>

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

@@ -14,6 +14,14 @@ export class GeneratorSearchComponent implements OnInit {
 
   public generators$: Object;
 
+  goToGenerator(gen_id, org_id) {
+    this.router.navigateByUrl('/statistics');
+    // console.log(gen_id);
+    // console.log(org_id);
+    localStorage.setItem('gen_id', gen_id);
+    localStorage.setItem('org_id', org_id);
+  }
+
   ngOnInit() {
     const jsonToken = localStorage.getItem('auth_token');
     try {

src/app/header/header.component.html

@@ -5,34 +5,27 @@
 			aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 			<span class="navbar-toggler-icon"></span>
 		</button>
+
 		<div class="collapse navbar-collapse" id="navbarSupportedContent">
+
 			<ul class="navbar-nav mr-auto">
 				<li class="nav-item">
-					<a class="nav-image" routerLink="/generator-search"><img src="assets/images/home.png"
+						<a class="nav-image" id="dash-image" (click)="resetGenerator()"><img src="assets/images/home.png"
 							class=" d-block img-fluid py-3 pl-3" alt="Dashboard Image" height="42" width="42"></a>
 				</li>
 				<li class="nav-item ">
-					<a class="nav-link" routerLink="/visualization">Visualization</a>
+					<a class="nav-link" id="visualize-link" (click)="resetGenAndVisualize()">Visualization</a>
 				</li>
-				<!-- <li class="nav-item ">
-	        <a class="nav-link" routerLink="/statistics">Statistics</a>
-	      </li>
-	      <li class="nav-item">
-	        <a class="nav-link" routerLink="/warnings">Warnings</a>
-	      </li>
-	      <li class="nav-item">
-	        <a class="nav-link" routerLink="/history">History</a>
-	      </li> -->
-
 			</ul>
+
 			<form class="form-inline my-2 my-lg-0">
-				<!-- <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
-				<button class="btn btn-light my-2 my-sm-0" type="submit">Search</button> -->
-				<a class="nav-left-image" routerLink="/"><img src="assets/images/logout.png"
+				<a class="nav-left-image" id="logout-image" (click)="resetAndClear()"><img src="assets/images/logout.png"
 						class=" d-block img-fluid py-3 pl-3" alt="Logout Image" height="42" width="42"></a>
 			</form>
+
 		</div>
 	</nav>
+
 	<div class="clearfix">
 		<a class="logo" routerLink="/generator-search"><img src="assets/images/logo2.png" class=" d-block img-fluid py-3 pl-3"
 				alt="Kinsley image"></a>

src/app/header/header.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-header',
@@ -7,7 +8,34 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HeaderComponent implements OnInit {
 
-  constructor() { }
+  constructor(private router: Router) { }
+
+  resetAndClear() {
+    this.router.navigateByUrl('#');
+    localStorage.clear();
+  }
+
+  resetGenerator() {
+    if (localStorage.getItem('auth_token') != null) {
+      this.router.navigateByUrl('/generator-search');
+      localStorage.removeItem('gen_id');
+      localStorage.removeItem('org_id');
+    } else {
+      console.log('You need to log in');
+      this.router.navigateByUrl('#');
+    }
+  }
+
+  resetGenAndVisualize() {
+    if (localStorage.getItem('auth_token') != null) {
+      this.router.navigateByUrl('/visualize-all');
+      localStorage.removeItem('gen_id');
+      localStorage.removeItem('org_id');
+    } else {
+      console.log('You need to log in');
+      this.router.navigateByUrl('#');
+    }
+  }
 
   ngOnInit() {
   }

src/app/visualize-all/visualize-all.component.html

@@ -0,0 +1,3 @@
+<p>
+  visualize-all works!
+</p>

src/app/visualize-all/visualize-all.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VisualizeAllComponent } from './visualize-all.component';
+
+describe('VisualizeAllComponent', () => {
+  let component: VisualizeAllComponent;
+  let fixture: ComponentFixture<VisualizeAllComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ VisualizeAllComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VisualizeAllComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/visualize-all/visualize-all.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-visualize-all',
+  templateUrl: './visualize-all.component.html',
+  styleUrls: ['./visualize-all.component.css']
+})
+export class VisualizeAllComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}