Cleaning code

Implementing new material card layout with status of generators
Implemented better token management with server validation
Created actual generator interfaces to ensure types and such
Added bunch of material modules for use in dashboard

angular.json

@@ -130,4 +130,4 @@
     }
   },
   "defaultProject": "frontend"
-}
+}

src/app/app.module.ts

@@ -41,15 +41,15 @@ import { VisualizeOneComponent } from './visualize-one/visualize-one.component';
     GaugesModule,
     RouterModule.forRoot([
 
-    {path: 'dashboard', component: FrontpageComponent},
-    {path: '', component: AuthenticationComponent},
-    {path: 'generator-search', component: GeneratorSearchComponent},
-    {path: 'statistics', component: StatisticsComponent},
-    {path: 'warnings', component: WarningsComponent},
-    {path: 'history', component: HistoryComponent},
-    {path: 'sign_up', component: SignUpComponent},
-    {path: 'visualize-all', component: VisualizeAllComponent},
-    {path: 'visualize-one', component: VisualizeOneComponent},
+      {path: 'dashboard', component: FrontpageComponent},
+      {path: '', component: AuthenticationComponent},
+      {path: 'generator-search', component: GeneratorSearchComponent},
+      {path: 'statistics', component: StatisticsComponent},
+      {path: 'warnings', component: WarningsComponent},
+      {path: 'history', component: HistoryComponent},
+      {path: 'sign_up', component: SignUpComponent},
+      {path: 'visualize-all', component: VisualizeAllComponent},
+      {path: 'visualize-one', component: VisualizeOneComponent},
 
     ]),
 

src/app/authentication/authentication.component.ts

@@ -48,7 +48,7 @@ export class AuthenticationComponent implements OnInit {
 
   }
 
-  ngOnInit() { 
+  ngOnInit() {
     localStorage.removeItem('gen_id');
     localStorage.removeItem('org_id');
     localStorage.removeItem('gen_name');

src/app/generator-object.ts

@@ -0,0 +1,17 @@
+export interface GeneratorObject {
+  gen_id: number;
+  gen_name: string;
+  org_id: number;
+  zip: number;
+  state: GeneratorState | null;
+}
+
+export interface GeneratorState {
+  online: boolean;
+  status: string;
+  status_code: number;
+  fault_count: number | null;
+  fault_codes: Array<number> | null;
+  ip: string;
+}
+

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

@@ -11,4 +11,9 @@ a#genLink {
     margin: 10px;
     display: inline-block;
     text-decoration: none;
-} */
+} */
+
+mat-card.generator-card {
+  width: calc(100% - 70px);
+  height: calc(100% - 70px);
+}

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

@@ -1,23 +1,32 @@
-<div class="container ">
+<div class="container">
     <div class="row">
         <div class="col-md-12 mx-auto mt-4">
-            <h4 class="text-center mb-3">Your Generators</h4>
-
-            <form id="visToolbar">
-                <div class="text-center mb3">
-                    <br>
-                    <a>
-                        <a class="text-center"*ngFor="let generator of generators$">
-                            <a class="btn btn-primary" style="color:white" (click)="goToGenerator(generator.gen_id, generator.org_id, generator.gen_name)">{{ generator.gen_name }}</a>
-                            <p id="genInfo">
-                                zipcode: {{ generator.zip }} <br>
-                                (insert statistics preview here)
-                            </p>
-                            <br>
-                        </a>
-                    </a>
-                </div>
-            </form>
+          <h4 class="text-center mb-3">Your Generators</h4>
+          <mat-spinner *ngIf="loading$"></mat-spinner>
+          <mat-grid-list cols="3" rowHeight="1:1">
+            <mat-grid-tile *ngFor="let generator of generators$">
+              <mat-card mat-ripple class="generator-card" (click)="goToGenerator(generator)">
+                <mat-card-header>
+                  <mat-card-title>{{ generator.gen_name }}</mat-card-title>
+                  <mat-card-subtitle>{{ generator.state.status }}</mat-card-subtitle>
+                </mat-card-header>
+                <mat-list *ngIf="generator.state.online">
+                  <mat-list-item>
+                    <mat-icon matListIcon>error</mat-icon>
+                    <p matLine>
+                      <span> Active Faults: {{ generator.state.fault_count }} </span>
+                    </p>
+                  </mat-list-item>
+                  <mat-list-item>
+                    <mat-icon matListIcon>settings_ethernet</mat-icon>
+                    <p matLine>
+                      <span> IP Address: {{ generator.state.ip }} </span>
+                    </p>
+                  </mat-list-item>
+                </mat-list>
+              </mat-card>
+            </mat-grid-tile>
+          </mat-grid-list>
         </div>
     </div>
-</div>
+</div>

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

@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { GeneratorService } from '../services/generator.service';
 import { Router } from '@angular/router';
+import { GeneratorObject } from '../generator-object';
+import {LoginService} from '../services/login.service';
 
 @Component({
   selector: 'app-generator-search',
@@ -10,35 +12,39 @@ import { Router } from '@angular/router';
 
 export class GeneratorSearchComponent implements OnInit {
 
-  constructor(public data: GeneratorService, private router: Router) { }
+  constructor(public data: GeneratorService, private router: Router, private login: LoginService) { }
 
-  public generators$: Object;
+  public generators$: Array<GeneratorObject>;
+  private loading$: boolean;
 
-  goToGenerator(gen_id, org_id, gen_name) {
+  goToGenerator(gen: GeneratorObject) {
     this.router.navigateByUrl('/statistics');
     // console.log(gen_id);
     // console.log(org_id);
-    localStorage.setItem('gen_id', gen_id);
-    localStorage.setItem('org_id', org_id);
-    localStorage.setItem('gen_name', gen_name);
+    localStorage.setItem('gen_id', gen.gen_id.toString());
+    localStorage.setItem('org_id', gen.org_id.toString());
+    localStorage.setItem('gen_name', gen.gen_name);
   }
 
-  ngOnInit() {
+  async ngOnInit() {
+    this.loading$ = true;
     localStorage.removeItem('gen_id');
     localStorage.removeItem('org_id');
     localStorage.removeItem('gen_name');
     localStorage.removeItem('data_type');
     localStorage.removeItem('fault_type');
-    const jsonToken = localStorage.getItem('auth_token');
-    try {
-      this.data.getGenerators(jsonToken).subscribe((data) => {
+    const auth_token: string = await this.login.getToken();
+    this.generators$ = await this.data.getGenerators(auth_token);
+    this.loading$ = false;
+    /*try {
+      this.data.getGenerators(jsonToken).subscribe((data: Array<GeneratorObject>) => {
         // console.log(data);
         this.generators$ = data;
         return this.generators$;
       });
     } catch (err) {
       return err;
-    }
+    }*/
     // this.generators$ = this.getGeneratorName();
   }
 

src/app/header/header.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import {LoginService} from '../services/login.service';
 
 @Component({
   selector: 'app-header',
@@ -8,37 +9,32 @@ import { Router } from '@angular/router';
 })
 export class HeaderComponent implements OnInit {
 
-  constructor(private router: Router) { }
+  constructor(private router: Router, private login: LoginService) { }
 
   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');
-      localStorage.removeItem('gen_name');
-      localStorage.removeItem('data_type');
-    } else {
-      console.log('You need to log in');
-      this.router.navigateByUrl('#');
-    }
+    this.resetAndRedirect('/generator-search');
   }
 
   resetGenAndVisualize() {
-    if (localStorage.getItem('auth_token') != null) {
-      this.router.navigateByUrl('/visualize-all');
+    this.resetAndRedirect('/visualize-all');
+  }
+
+  resetAndRedirect(url: string) {
+    this.login.getToken().then(() => {
+      this.router.navigateByUrl(url);
       localStorage.removeItem('gen_id');
       localStorage.removeItem('org_id');
       localStorage.removeItem('gen_name');
       localStorage.removeItem('data_type');
-    } else {
+    }, () => {
       console.log('You need to log in');
       this.router.navigateByUrl('#');
-    }
+    });
   }
 
   ngOnInit() {

src/app/material.module.ts

@@ -4,7 +4,15 @@ import { NgModule } from '@angular/core';
 import { MatDatepickerModule,
         MatNativeDateModule,
         MatFormFieldModule,
-        MatInputModule } from '@angular/material';
+        MatInputModule,
+        MatCardModule,
+        MatButtonModule,
+        MatGridListModule,
+        MatRippleModule,
+        MatProgressSpinnerModule,
+        MatIconModule,
+        MatListModule,
+} from '@angular/material';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
@@ -20,9 +28,16 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
     MatFormFieldModule,
     MatNativeDateModule,
     MatInputModule,
-    BrowserAnimationsModule
+    BrowserAnimationsModule,
+    MatCardModule,
+    MatButtonModule,
+    MatGridListModule,
+    MatRippleModule,
+    MatProgressSpinnerModule,
+    MatIconModule,
+    MatListModule,
   ],
   providers: [ MatDatepickerModule ],
 })
 
-export class MaterialModule {}
+export class MaterialModule {}

src/app/services/generator.service.ts

@@ -1,18 +1,50 @@
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import {HttpClient, HttpResponse} from '@angular/common/http';
+import {GeneratorObject, GeneratorState} from '../generator-object';
+import {LoginService} from './login.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class GeneratorService {
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient, private login: LoginService) { }
 
-  getGenerators(token) {
-    return this.http.get('http://sd5-backend.engr.uconn.edu/user/generators', {
-      headers: {
-        Authorization: 'Bearer ' + token
-      }
+  getGenerators(token: string): Promise<Array<GeneratorObject>> {
+    return new Promise<Array<GeneratorObject>>((resolve, reject) => {
+      this.http.get('http://sd5-backend.engr.uconn.edu/user/generators', {
+        headers: {
+          Authorization: 'Bearer ' + token
+        }
+      }).subscribe(async (raw_generators: Array<GeneratorObject>) => {
+        const generators: Array<GeneratorObject> = [];
+        for (const generator of raw_generators) {
+          await this.getGeneratorStatus(generator.gen_id, token).then((state: GeneratorState) => {
+            generator.state = state;
+            generators.push(generator);
+          }, (error) => {
+            reject(error);
+          });
+        }
+        resolve(generators);
+      }, (error) => {
+        reject(error);
+      });
     });
   }
+
+  getGeneratorStatus(gen_id: number, token: string): Promise<GeneratorState> {
+    return new Promise<GeneratorState>((resolve, reject) => {
+      this.http.get('http://sd5-backend.engr.uconn.edu/generator/' + gen_id + '/status', {
+        headers: {
+          Authorization: 'Bearer ' + token
+        }
+      }).subscribe((state: GeneratorState) => {
+        resolve(state);
+      }, (error) => {
+        reject(error);
+      });
+    });
+  }
+
 }

src/app/services/login.service.ts

@@ -3,7 +3,6 @@ import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/observable/throw';
 import 'rxjs/add/operator/catch';
-import { ReplaySubject } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
@@ -30,4 +29,23 @@ export class LoginService {
       }
     });
   }
+
+  getToken(): Promise<string> {
+    return new Promise<string>((resolve, reject) => {
+      const token = localStorage.getItem('auth_token');
+      if (!token) { reject('No Token'); }
+      this.http.get('http://sd5-backend.engr.uconn.edu/auth/verify', {
+        headers: {
+          Authorization: 'Bearer ' + token
+        },
+        observe: 'response'
+      }).subscribe((response) => {
+        if (response.status === 200) {
+          resolve(token);
+        } else {
+          reject('Invalid Token');
+        }
+      });
+    });
+  }
 }

src/app/statistics/statistics.component.ts

@@ -2,6 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {MetricsService} from '../services/metrics.service';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
 import { Router } from '@angular/router';
+import {LoginService} from '../services/login.service';
 
 @Component({
   selector: 'app-statistics',
@@ -11,7 +12,7 @@ import { Router } from '@angular/router';
 export class StatisticsComponent implements OnInit {
 
 
-  constructor(public data: MetricsService, private http: HttpClient, private router: Router) {
+  constructor(public data: MetricsService, private http: HttpClient, private router: Router, private login: LoginService) {
 
 
 
@@ -98,11 +99,11 @@ export class StatisticsComponent implements OnInit {
   }
 
 
-  ngOnInit() {
+  async ngOnInit() {
 
     localStorage.removeItem('data_type');
     localStorage.removeItem('fault_type');
-    const jsonToken = localStorage.getItem('auth_token');
+    const jsonToken = await this.login.getToken();