From f37f56adca3316437e5e74f7019406ab2a7bff75 Mon Sep 17 00:00:00 2001
From: Emil Abraham <emil.abraham@uconn.edu>
Date: Wed, 10 Apr 2019 14:00:46 -0400
Subject: [PATCH] added placeholder statechanges for faults/statuses

---
 src/app/statistics/statistics.component.html | 82 ++++++++++++++++----
 1 file changed, 65 insertions(+), 17 deletions(-)

diff --git a/src/app/statistics/statistics.component.html b/src/app/statistics/statistics.component.html
index 21cda6b..5b62f25 100644
--- a/src/app/statistics/statistics.component.html
+++ b/src/app/statistics/statistics.component.html
@@ -107,57 +107,105 @@
           <h3 class = "p-3">Faults</h3>
         </div>
         <div class = "col-md-6">
-          <h5><span class="badge badge-danger">Overcrank</span></h5>
+          <h5 *ngIf = "1 == 2; else emptyOvercrank"><span class="badge badge-danger">Overcrank</span></h5>
+          <ng-template #emptyOvercrank>
+             <h5><span class="badge badge-secondary">Overcrank</span></h5> 
+          </ng-template>
         </div>
         <div class = "col-md-6">  
-          <h5><span class="badge badge-danger">High Engine<br>Temperature</span></h5>   
+          <h5 *ngIf = "1 == 2; else emptyEngine"><span class="badge badge-danger">High Engine<br>Temperature</span></h5>
+          <ng-template #emptyEngine>
+             <h5><span class="badge badge-secondary">High Engine<br>Temperature</span></h5> 
+          </ng-template>   
         </div>
         <div class = "col-md-6">
-          <h5><span class="badge badge-danger">Low Oil<br>Pressure</span></h5>
+          <h5 *ngIf = "1 == 2; else emptyOil"><span class="badge badge-danger">Low Oil<br>Pressure</span></h5>
+          <ng-template #emptyOil>
+             <h5><span class="badge badge-secondary">Low Oil<br>Pressure</span></h5> 
+          </ng-template> 
         </div>
         <div class = "col-md-6">  
-           <h5><span class="badge badge-danger">Overspeed</span></h5>  
+           <h5 *ngIf = "1 == 2; else emptyOverspeed"><span class="badge badge-danger">Overspeed</span></h5> 
+           <ng-template #emptyOverspeed>
+             <h5><span class="badge badge-secondary">Overspeed</span></h5> 
+          </ng-template>  
         </div>
         <div class = "col-md-6">
-           <h5><span class="badge badge-danger">Emergency Stop</span></h5>
+           <h5 *ngIf = "1 == 2; else emptyEmergency"><span class="badge badge-danger">Emergency Stop</span></h5>
+           <ng-template #emptyEmergency>
+             <h5><span class="badge badge-secondary">Emergency Stop</span></h5> 
+          </ng-template> 
         </div>
         <div class = "col-md-6">  
-          <h5><span class="badge badge-danger">Low Fuel</span></h5>    
+          <h5 *ngIf = "1 == 1; else emptyLowFuel"><span class="badge badge-danger">Low Fuel</span></h5>
+          <ng-template #emptyLowFuel>
+             <h5><span class="badge badge-secondary">Low Fuel</span></h5> 
+          </ng-template>     
         </div>
         <div class = "col-md-6">
-          <h5><span class="badge badge-danger">Low Coolant<br>Level/Aux</span></h5>
+          <h5 *ngIf = "1 == 2; else emptyLowCoolant"><span class="badge badge-danger">Low Coolant<br>Level/Aux</span></h5>
+          <ng-template #emptyLowCoolant>
+             <h5><span class="badge badge-secondary">Low Coolant<br>Level/Aux</span></h5> 
+          </ng-template> 
         </div>
         <div class = "col-md-6">  
-          <h5><span class="badge badge-danger">Low Cranking<br>Voltage</span></h5> 
+          <h5 *ngIf = "1 == 1; else emptyLowCranking"><span class="badge badge-danger">Low Cranking<br>Voltage</span></h5>
+          <ng-template #emptyLowCranking>
+             <h5><span class="badge badge-secondary">Low Cranking<br>Voltage</span></h5> 
+          </ng-template>  
         </div>
         <div class = "col-md-6">
-          <h5><span class="badge badge-danger">Battery Voltage<br>(Hi/Lo)</span></h5>
+          <h5 *ngIf = "1 == 2; else emptyBatteryVolt"><span class="badge badge-danger">Battery Voltage<br>(Hi/Lo)</span></h5>
+          <ng-template #emptyBatteryVolt>
+             <h5><span class="badge badge-secondary">Battery Voltage<br>(Hi/Lo)</span></h5> 
+          </ng-template> 
         </div>
         <div class = "col-md-6">  
-          <h5><span class="badge badge-danger">Battery Charger<br>Fail</span></h5>     
+          <h5 *ngIf = "1 == 2; else emptyBatteryCharger"><span class="badge badge-danger">Battery Charger<br>Fail</span></h5>
+          <ng-template #emptyBatteryCharger>
+             <h5><span class="badge badge-secondary">Battery Charger<br>Fail</span></h5> 
+          </ng-template>      
         </div>
         <div class = "col-md-6">
-          <h5><span class="badge badge-danger">Common Fault</span></h5>
+          <h5 *ngIf = "1 == 1; else emptyCommon"><span class="badge badge-danger">Common Fault</span></h5>
+          <ng-template #emptyCommon>
+             <h5><span class="badge badge-secondary">Common Fault</span></h5> 
+          </ng-template> 
         </div>        
       </div>
       <div class = "row status ">
         <div class = "col-md-12 ">
-          <h3 class = "p-3">System Status</h3>
+          <h3 class = "p-3">System Status</h3>          
         </div>
         <div class = "col-md-6">
-          <h5><span class="badge badge-success">EPS Supplying<br>Load</span></h5>
+          <h5 *ngIf = "1 == 2; else emptyEPS"><span class="badge badge-success">EPS Supplying<br>Load</span></h5>
+          <ng-template #emptyEPS>
+             <h5><span class="badge badge-secondary">EPS Supplying<br>Load</span></h5> 
+          </ng-template> 
         </div>
         <div class = "col-md-6">  
-          <h5><span class="badge badge-success">Not-In-Auto</span></h5>    
+          <h5 *ngIf = "1 == 2; else emptyAuto"><span class="badge badge-success">Not-In-Auto</span></h5>
+          <ng-template #emptyAuto>
+             <h5><span class="badge badge-secondary">Not-In-Auto</span></h5> 
+          </ng-template>     
         </div>
         <div class = "col-md-6">
-          <h5><span class="badge badge-success">System Running</span></h5>  
+          <h5 *ngIf = "1 == 1; else emptySystem"><span class="badge badge-success">System Running</span></h5>
+          <ng-template #emptySystem>
+             <h5><span class="badge badge-secondary">System Running</span></h5> 
+          </ng-template>   
         </div>
         <div class = "col-md-6">  
-          <h5><span class="badge badge-success">Generator<br>Running</span></h5>   
+          <h5 *ngIf = "1 == 1; else emptyGenerator"><span class="badge badge-success">Generator<br>Running</span></h5>
+          <ng-template #emptyGenerator>
+             <h5><span class="badge badge-secondary">Generator<br>Running</span></h5> 
+          </ng-template>    
         </div>
         <div class = "col-md-6">
-          <h5><span class="badge badge-success">Communication<br>Status</span></h5> 
+          <h5 *ngIf = "1 == 2; else emptyCommunication"><span class="badge badge-success">Communication<br>Status</span></h5>
+          <ng-template #emptyCommunication>
+             <h5><span class="badge badge-secondary">Communication<br>Status</span></h5> 
+          </ng-template>  
         </div>        
       </div>
   </div>