From 23ffc3465640ba863fb9e7497bbb6f524c19116e Mon Sep 17 00:00:00 2001
From: Emil Abraham <emil.abraham@uconn.edu>
Date: Wed, 10 Apr 2019 13:22:25 -0400
Subject: [PATCH] Improved layout, better responsive design, label colors
 implemented for faults/statuses

---
 src/app/statistics/statistics.component.css  |  21 ++-
 src/app/statistics/statistics.component.html | 152 ++++++-------------
 2 files changed, 65 insertions(+), 108 deletions(-)

diff --git a/src/app/statistics/statistics.component.css b/src/app/statistics/statistics.component.css
index b721f9c..a16be29 100644
--- a/src/app/statistics/statistics.component.css
+++ b/src/app/statistics/statistics.component.css
@@ -21,11 +21,7 @@ mwl-gauge > .gauge > .value-text {
   font-weight: bold;
   font-size: 1em;
 }
-.fusioncharts
-{
-  position: relative;
-  padding: 5px;
-}
+
 h6
 {
   font-size: 13px;
@@ -38,3 +34,18 @@ h6
 {
   font-size: 14px;
 }
+.gauges
+{
+    display: flex;
+    justify-content: center;margin-right: auto;
+    margin-left: auto;
+}
+.badge
+{
+  display:inline-block; 
+  width:100%;
+  padding: 8px;
+  height: 100%;
+  height: 46px;
+}
+
diff --git a/src/app/statistics/statistics.component.html b/src/app/statistics/statistics.component.html
index 65d94df..21cda6b 100644
--- a/src/app/statistics/statistics.component.html
+++ b/src/app/statistics/statistics.component.html
@@ -25,18 +25,18 @@
 
   </div>
   <div class = "row mt-3">
-    <div class = "col-md-8">
+    <div class = "col-lg-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 class = "gauges"  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 *ngIf="pACurrent; else loggedOut"></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" max-value = '300' [value]="pBCurrent">
+            <radial-gauge class = "gauges"  width="200" units="Amps" title="Phase B Current" height="200" major-ticks="0,60,120,180,240,300" max-value = '300' [value]="pBCurrent">
             </radial-gauge>
           </div>
           <div *ngIf="pBCurrent; else loggedOut">          
@@ -44,7 +44,7 @@
         </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" max-value = '300' [value]="pCCurrent">
+            <radial-gauge class = "gauges"  width="200" units="Amps" title="Phase C Current" height="200" major-ticks="0,60,120,180,240,300" max-value = '300' [value]="pCCurrent">
             </radial-gauge>
           </div>
           <div *ngIf="pCCurrent; else loggedOut">          
@@ -52,7 +52,7 @@
         </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 class = "gauges"  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>
         </div>
         <div *ngIf="engineSpeed; else loggedOut">          
@@ -60,7 +60,7 @@
       </div>
       <div class="col-md-4 p-4">
         <div (click)= "goToGraphSpec('fuel.pressure')">
-          <radial-gauge width="200" units="%" title="Fuel Pressure" height="200" major-ticks="0,12.5,25,37.5,50,62.5,75,87.5,100" max-value = "100" [value]="fuelPressure">
+          <radial-gauge class = "gauges"  width="200" units="%" title="Fuel Pressure" height="200" major-ticks="0,12.5,25,37.5,50,62.5,75,87.5,100" max-value = "100" [value]="fuelPressure">
           </radial-gauge>
         </div>
         <div *ngIf="fuelPressure; else loggedOut">          
@@ -68,7 +68,7 @@
       </div>
       <div class="col-md-4 p-4">
         <div (click)= "goToGraphSpec('l1.l0.voltage')">
-          <radial-gauge width="200" units="Volts" title="Phase A Voltage" height="200" major-ticks="0,60,120,180,240,300" max-value = "300" [value]="pAVoltage">
+          <radial-gauge class = "gauges"  width="200" units="Volts" title="Phase A Voltage" height="200" major-ticks="0,60,120,180,240,300" max-value = "300" [value]="pAVoltage">
           </radial-gauge>
         </div>
         <div *ngIf="pAVoltage; else loggedOut">          
@@ -76,7 +76,7 @@
       </div>
       <div class="col-md-4 p-4">
         <div (click)= "goToGraphSpec('l2.l0.voltage')">
-          <radial-gauge width="200" units="Volts" title="Phase B Voltage" height="200" major-ticks="0,60,120,180,240,300" max-value = "300" [value]="pBVoltage">
+          <radial-gauge class = "gauges"  width="200" units="Volts" title="Phase B Voltage" height="200" major-ticks="0,60,120,180,240,300" max-value = "300" [value]="pBVoltage">
           </radial-gauge>
         </div>
         <div *ngIf="pBVoltage; else loggedOut">          
@@ -84,7 +84,7 @@
       </div>
       <div class="col-md-4 p-4">
         <div (click)= "goToGraphSpec('l3.l0.voltage')">
-          <radial-gauge width="200" units="Volts" title="Phase C Voltage" height="200" major-ticks="0,60,120,180,240,300" max-value = "300" [value]="pCVoltage">
+          <radial-gauge class = "gauges"  width="200" units="Volts" title="Phase C Voltage" height="200" major-ticks="0,60,120,180,240,300" max-value = "300" [value]="pCVoltage">
           </radial-gauge>
         </div>
         <div *ngIf="pCVoltage; else loggedOut">          
@@ -92,7 +92,7 @@
       </div>
       <div class="col-md-4 p-4">
         <div (click)= "goToGraphSpec('total.kw')">
-          <radial-gauge width="200" units="Volts" title="Total kiloWatt" height="200" major-ticks="0,125,250,375,500,625,750, 875, 1000" max-value = "1000" [value]="totalKw">
+          <radial-gauge  class = "gauges"  width="200" units="kW" title="Total kiloWatt" height="200" major-ticks="0,125,250,375,500,625,750, 875, 1000" max-value = "1000" [value]="totalKw">
           </radial-gauge>
         </div>
         <div *ngIf="totalKw; else loggedOut">          
@@ -101,118 +101,64 @@
       </div>
     </div>
 
-    <div class = "col-md-4 p-4 text-center">
-      <div class = "row faults">
+    <div class = "col-lg-4 p-4 text-center">
+      <div class = "row ">
         <div class = "col-md-12 ">
-          <h3>Faults</h3>
+          <h3 class = "p-3">Faults</h3>
         </div>
-        <div class = "col-md-3">
-          <p>Overcrank</p>
+        <div class = "col-md-6">
+          <h5><span class="badge badge-danger">Overcrank</span></h5>
         </div>
-        <div class = "col-md-3">  
-          <p>light</p>     
+        <div class = "col-md-6">  
+          <h5><span class="badge badge-danger">High Engine<br>Temperature</span></h5>   
         </div>
-        <div class = "col-md-3">
-          <p>High Engine Temperature</p>
+        <div class = "col-md-6">
+          <h5><span class="badge badge-danger">Low Oil<br>Pressure</span></h5>
         </div>
-        <div class = "col-md-3">  
-          <p>light</p>     
+        <div class = "col-md-6">  
+           <h5><span class="badge badge-danger">Overspeed</span></h5>  
         </div>
-        <div class = "col-md-3">
-          <p>Low Oil Pressure</p>
+        <div class = "col-md-6">
+           <h5><span class="badge badge-danger">Emergency Stop</span></h5>
         </div>
-        <div class = "col-md-3">  
-          <p>light</p>     
+        <div class = "col-md-6">  
+          <h5><span class="badge badge-danger">Low Fuel</span></h5>    
         </div>
-        <div class = "col-md-3">
-          <p>Overspeed</p>
+        <div class = "col-md-6">
+          <h5><span class="badge badge-danger">Low Coolant<br>Level/Aux</span></h5>
         </div>
-        <div class = "col-md-3">  
-          <p>light</p>     
+        <div class = "col-md-6">  
+          <h5><span class="badge badge-danger">Low Cranking<br>Voltage</span></h5> 
         </div>
-        <div class = "col-md-3">
-          <p>Emergency Stop</p>
+        <div class = "col-md-6">
+          <h5><span class="badge badge-danger">Battery Voltage<br>(Hi/Lo)</span></h5>
         </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 class = "col-md-6">  
+          <h5><span class="badge badge-danger">Battery Charger<br>Fail</span></h5>     
         </div>
+        <div class = "col-md-6">
+          <h5><span class="badge badge-danger">Common Fault</span></h5>
+        </div>        
       </div>
-      <div class = "row status">
+      <div class = "row status ">
         <div class = "col-md-12 ">
-          <h3>System Status</h3>
-        </div>
-        <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>     
+          <h3 class = "p-3">System Status</h3>
         </div>
-        <div class = "col-md-3">
-          <p>Generator Running</p>
+        <div class = "col-md-6">
+          <h5><span class="badge badge-success">EPS Supplying<br>Load</span></h5>
         </div>
-        <div class = "col-md-3">  
-          <p>light</p>     
+        <div class = "col-md-6">  
+          <h5><span class="badge badge-success">Not-In-Auto</span></h5>    
         </div>
-        <div class = "col-md-3">
-          <p>Comm. Status</p>
+        <div class = "col-md-6">
+          <h5><span class="badge badge-success">System Running</span></h5>  
         </div>
-        <div class = "col-md-3">  
-          <p>light</p>     
+        <div class = "col-md-6">  
+          <h5><span class="badge badge-success">Generator<br>Running</span></h5>   
         </div>
+        <div class = "col-md-6">
+          <h5><span class="badge badge-success">Communication<br>Status</span></h5> 
+        </div>        
       </div>
   </div>
 </div>