From c17a3cbeb37d90f1143d3b92b2398630b798f514 Mon Sep 17 00:00:00 2001
From: Emil Abraham <emil.abraham@uconn.edu>
Date: Mon, 8 Apr 2019 22:03:38 -0400
Subject: [PATCH] Modiefied layout of statistics page to integrate
 faults/system status

---
 src/app/statistics/statistics.component.css  |  12 ++
 src/app/statistics/statistics.component.html | 181 +++++++++++++++----
 2 files changed, 159 insertions(+), 34 deletions(-)

diff --git a/src/app/statistics/statistics.component.css b/src/app/statistics/statistics.component.css
index a2248be..b721f9c 100644
--- a/src/app/statistics/statistics.component.css
+++ b/src/app/statistics/statistics.component.css
@@ -26,3 +26,15 @@ mwl-gauge > .gauge > .value-text {
   position: relative;
   padding: 5px;
 }
+h6
+{
+  font-size: 13px;
+}
+.faults
+{
+  font-size: 14px;
+}
+.status
+{
+  font-size: 14px;
+}
diff --git a/src/app/statistics/statistics.component.html b/src/app/statistics/statistics.component.html
index 26e1388..65d94df 100644
--- a/src/app/statistics/statistics.component.html
+++ b/src/app/statistics/statistics.component.html
@@ -24,33 +24,33 @@
     <button class="btn btn-primary btn-block m-1" (click) = "goToGraphGen()">Graph</button>
 
   </div>
-    <div class="row mt-3 text-center " *ngIf = "isRecent">
-      
-      <div class="col-md-4 p-4">
-        <div (click)= "goToGraphSpec('l1.current')">
-          <radial-gauge  width="200" units="Amps" title="Phase A Current" height="200" major-ticks="0,60,120,180,240,300" [value]="pACurrent" >
-          </radial-gauge>
-        </div>
-        <div *ngIf="pACurrent; else loggedOut">          
+  <div class = "row mt-3">
+    <div class = "col-md-8">
+      <div class = "row">
+        <div class="col-md-4 p-4">
+          <div (click)= "goToGraphSpec('l1.current')">
+            <radial-gauge  width="200" units="Amps" title="Phase A Current" height="200" major-ticks="0,60,120,180,240,300" max-value = '300' [value]="pACurrent" >
+            </radial-gauge>
           </div>
-      </div>
-      <div class="col-md-4 p-4">
-        <div (click)= "goToGraphSpec('l2.current')">
-          <radial-gauge width="200" units="°C" title="Phase B Current" height="200" major-ticks="0,60,120,180,240,300" [value]="pBCurrent">
-          </radial-gauge>
+          <div *ngIf="pACurrent; else loggedOut"></div>
         </div>
-        <div *ngIf="pBCurrent; else loggedOut">          
+        <div class="col-md-4 p-4">
+          <div (click)= "goToGraphSpec('l2.current')">
+            <radial-gauge width="200" units="°C" title="Phase B Current" height="200" major-ticks="0,60,120,180,240,300" max-value = '300' [value]="pBCurrent">
+            </radial-gauge>
           </div>
-      </div>
-      <div class="col-md-4 p-4">
-        <div (click)= "goToGraphSpec('l3.current')">
-          <radial-gauge width="200" units="°C" title="Phase C Current" height="200" major-ticks="0,60,120,180,240,300" [value]="pCCurrent">
-          </radial-gauge>
+          <div *ngIf="pBCurrent; else loggedOut">          
+            </div>
         </div>
-        <div *ngIf="pCCurrent; else loggedOut">          
+        <div class="col-md-4 p-4">
+          <div (click)= "goToGraphSpec('l3.current')">
+            <radial-gauge width="200" units="°C" title="Phase C Current" height="200" major-ticks="0,60,120,180,240,300" max-value = '300' [value]="pCCurrent">
+            </radial-gauge>
           </div>
-      </div>
-      <div class="col-md-4 p-4">
+          <div *ngIf="pCCurrent; else loggedOut">          
+            </div>
+        </div>
+        <div class="col-md-4 p-4">
         <div (click)= "goToGraphSpec('engine.rpm')">
           <radial-gauge width="200" units="RPM" title="Engine Speed" height="200" major-ticks="0,375,750,1125,1500,1875, 2250, 2625,3000" max-value = "3000" [value]="engineSpeed">
           </radial-gauge>
@@ -97,23 +97,126 @@
         </div>
         <div *ngIf="totalKw; else loggedOut">          
           </div>
+      </div>  
       </div>
-       <!--<div class="col-md-4">
-        <div class = "fusioncharts">
-          <fusioncharts class = "fusioncharts"  type="angulargauge"  dataFormat="json" width= "100%" height = "230" [dataSource]="fuelTempGraphData" >
+    </div>
 
-          </fusioncharts>
+    <div class = "col-md-4 p-4 text-center">
+      <div class = "row faults">
+        <div class = "col-md-12 ">
+          <h3>Faults</h3>
+        </div>
+        <div class = "col-md-3">
+          <p>Overcrank</p>
+        </div>
+        <div class = "col-md-3">  
+          <p>light</p>     
+        </div>
+        <div class = "col-md-3">
+          <p>High Engine Temperature</p>
+        </div>
+        <div class = "col-md-3">  
+          <p>light</p>     
+        </div>
+        <div class = "col-md-3">
+          <p>Low Oil Pressure</p>
+        </div>
+        <div class = "col-md-3">  
+          <p>light</p>     
+        </div>
+        <div class = "col-md-3">
+          <p>Overspeed</p>
+        </div>
+        <div class = "col-md-3">  
+          <p>light</p>     
+        </div>
+        <div class = "col-md-3">
+          <p>Emergency Stop</p>
+        </div>
+        <div class = "col-md-3">  
+          <p>light</p>     
+        </div>
+        <div class = "col-md-3">
+          <p>Low Fuel</p>
+        </div>
+        <div class = "col-md-3">  
+          <p>light</p>     
+        </div>
+        <div class = "col-md-3">
+          <p>Low Coolant Level/Aux</p>
+        </div>
+        <div class = "col-md-3">  
+          <p>light</p>     
+        </div>
+        <div class = "col-md-3">
+          <p>Low Coolant Temperature</p>
+        </div>
+        <div class = "col-md-3">  
+          <p>light</p>     
+        </div>
+        <div class = "col-md-3">
+          <p>Low Cranking Voltage</p>
+        </div>
+        <div class = "col-md-3">  
+          <p>light</p>     
+        </div>
+        <div class = "col-md-3">
+          <p>Battery Voltage (Hi/Lo)</p>
+        </div>
+        <div class = "col-md-3">  
+          <p>light</p>     
+        </div>
+        <div class = "col-md-3">
+          <p>Battery Charger Fail</p>
+        </div>
+        <div class = "col-md-3">  
+          <p>light</p>     
+        </div>
+        <div class = "col-md-3">
+          <p>Common Fault</p>
+        </div>
+        <div class = "col-md-3">  
+          <p>light</p>     
         </div>
       </div>
-       <div class="col-md-4">
-        <div class = "fusioncharts">
-          <fusioncharts class = "fusioncharts"  type="angulargauge"  dataFormat="json" width= "100%" height = "230" [dataSource]="fuelTempGraphData" >
-
-          </fusioncharts>
+      <div class = "row status">
+        <div class = "col-md-12 ">
+          <h3>System Status</h3>
         </div>
-      </div>   -->
-    </div>
-    <div class="row mt-3 text-center" *ngIf = "isRecent">
+        <div class = "col-md-3">
+          <p>EPS Supplying Load</p>
+        </div>
+        <div class = "col-md-3">  
+          <p>light</p>     
+        </div>
+        <div class = "col-md-3">
+          <p>Not-In-Auto</p>
+        </div>
+        <div class = "col-md-3">  
+          <p>light</p>     
+        </div>
+        <div class = "col-md-3">
+          <p>System Ready</p>
+        </div>
+        <div class = "col-md-3">  
+          <p>light</p>     
+        </div>
+        <div class = "col-md-3">
+          <p>Generator Running</p>
+        </div>
+        <div class = "col-md-3">  
+          <p>light</p>     
+        </div>
+        <div class = "col-md-3">
+          <p>Comm. Status</p>
+        </div>
+        <div class = "col-md-3">  
+          <p>light</p>     
+        </div>
+      </div>
+  </div>
+</div>
+  <div class="row mt-3 text-center" *ngIf = "isRecent">
        <div class="col-md-3 p-4">
         <div (click)= "goToGraphSpec('coolant.temp')">
           <linear-gauge width="150" title = "Coolant Temperature" major-ticks = "0,30,60,90,120" max-value = "120" height="350" [value] = "coolantTemp">
@@ -154,9 +257,19 @@
           </div>
       </div>
     </div>
+
+
+
+   
+      
+      
+    
     <ng-template #loggedOut>
       Data is not available within the last 24 hours 
     </ng-template>
+    
+  </div>
+
 <!--   
     <div class="row mt-3 text-center" *ngIf = "isHour">
       <div class="col-md-4">