finished visualize all and visualize one pages

SeniorDesignGroup5 · Apr 3, 2019 · bf13c98 · bf13c98
1 parent 2cffc02
commit bf13c98
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 16 deletions.
diff --git a/src/app/visualize-all/visualize-all.component.html b/src/app/visualize-all/visualize-all.component.html
@@ -11,7 +11,6 @@
         Function: {{function$}}<br>
       </p>
       <form id="visToolbar">
-        <h4 class="text-center mb3" style="color:red" *ngIf="signal">Invalid Entry</h4>
         <div class="text-center mb3" style="background-color: black;">
           <br>
           <p id="visMessage">Ctrl/Comm+Click to select multiple generators <br> Please select a maximum of 5 generators
@@ -45,6 +44,7 @@
               {{generator.gen_name}}</option>
           </select>
           <br>
+          <h4 class="text-center mb3" style="color:red" *ngIf="signal">Invalid Entry<br></h4>
           <a class="btn btn-primary" style="color:white" (click)="resetAndRemakeChart()">Visualize</a>
           <br>
           <br>

diff --git a/src/app/visualize-one/visualize-one.component.html b/src/app/visualize-one/visualize-one.component.html
@@ -3,16 +3,19 @@
     <div class="col-md-12 mx-auto mt-4">
       <h4 class="text-center mb-3">Visualization for {{genName$}}</h4>
       <h5 class="text-center" *ngIf="!dataSig$">Data Type: {{dataType$}}</h5>
-      <p class="text-center"  *ngIf="dataSig$">{{laymanDataVal$}} Graph</p>
+      <p class="text-center" *ngIf="dataSig$">{{laymanDataVal$}} Graph</p>
       <canvas id="canvas">{{chart}}</canvas>
 
       <p id="graphInfo" class="text-left">
         Dates: {{startTime$}} - {{endTime$}}<br>
         Units: {{unit$}}<br>
         Function: {{function$}}<br>
       </p>
+      <div class="text-center">
+          <a class="btn btn-primary" style="color:white" routerLink="/statistics">Return to Statistics</a>
+      </div>
+      <br>
       <form id="visToolbar">
-        <h4 class="text-center mb3" style="color:red" *ngIf="signal">Invalid Entry</h4>
         <div class="text-center mb3" style="background-color: black;">
           <br>
           <!-- <br><br> -->
@@ -40,7 +43,8 @@
             End Time:
             <input #end_time type="date" name="exampleEndTime">
           </form>
-          <br><br>
+          <br>
+          <h4 class="text-center mb3" style="color:red" *ngIf="signal$">Invalid Entry<br></h4>
           <a class="btn btn-primary" style="color:white" (click)="resetAndRemakeChart()">Visualize</a>
           <br>
           <br>

diff --git a/src/app/visualize-one/visualize-one.component.ts b/src/app/visualize-one/visualize-one.component.ts
@@ -29,7 +29,7 @@ export class VisualizeOneComponent implements OnInit {
   public dataNames$;
   public laymanDataVal$: any = null;
   public chart: any = null;
-  public signal = false;
+  public signal$ = false;
   events: string[] = [];
   @ViewChild('time_span') timeSpan: ElementRef;
   @ViewChild('start_time') startTime: ElementRef;
@@ -41,7 +41,7 @@ export class VisualizeOneComponent implements OnInit {
   resetAndRemakeChart() {
     const genVal = localStorage.getItem('gen_id');
     const genCount = 1;
-
+    this.signal$ = false;
     const funcVals = Array.prototype.slice.call(document.querySelectorAll('#func_select option:checked'), 0).map(function (v, i, a) {
       return v.value;
     });
@@ -50,7 +50,7 @@ export class VisualizeOneComponent implements OnInit {
       funcVal = funcVals[0] + '';
     } else {
       funcVal = 'invalid';
-      this.signal = true;
+      this.signal$ = true;
     }
 
     const dataType = localStorage.getItem('data_type');
@@ -64,7 +64,7 @@ export class VisualizeOneComponent implements OnInit {
         dataVal = this.data.convertNames(dataVal, 'metric');
       } else {
         dataVal = 'invalid';
-        this.signal = true;
+        this.signal$ = true;
       }
     } else {
       dataVal = dataType;
@@ -77,10 +77,10 @@ export class VisualizeOneComponent implements OnInit {
     let timeEnd;
     if (startTime === '') {
       timeStart = 'invalid';
-      this.signal = true;
+      this.signal$ = true;
     } else if (endTime === '') {
       timeEnd = 'invalid';
-      this.signal = true;
+      this.signal$ = true;
     }
     const startArray = startTime.split('-');
     const endArray = endTime.split('-');
@@ -96,28 +96,28 @@ export class VisualizeOneComponent implements OnInit {
             timeEnd = endArray[0] + '/' + endArray[1] + '/' + endArray[2] + '-23:59:59';
           } else {
             timeStart = 'invalid';
-            this.signal = true;
+            this.signal$ = true;
           }
         } else if (startNumArray[1] < endNumArray[1]) { // if start month is less
           timeStart = startArray[0] + '/' + startArray[1] + '/' + startArray[2];
           timeEnd = endArray[0] + '/' + endArray[1] + '/' + endArray[2];
         } else {
           timeStart = 'invalid';
-          this.signal = true;
+          this.signal$ = true;
         }
       } else if (startNumArray[0] < endNumArray[0]) { // if start year is less
         timeStart = startArray[0] + '/' + startArray[1] + '/' + startArray[2];
         timeEnd = endArray[0] + '/' + endArray[1] + '/' + endArray[2];
       } else {
         timeStart = 'invalid';
-        this.signal = true;
+        this.signal$ = true;
       }
     } else {
       timeStart = 'invalid';
-      this.signal = true;
+      this.signal$ = true;
     }
 
-    if (this.signal === false) {
+    if (this.signal$ === false) {
       const jsonToken = localStorage.getItem('auth_token');
       const labels = [];
       const data = [];
@@ -157,7 +157,7 @@ export class VisualizeOneComponent implements OnInit {
       } catch (err) {
         return err;
       }
-    } else if (this.signal === true) {
+    } else if (this.signal$ === true) {
       console.log('invalid entry');
     }
   }