Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Merge remote-tracking branch 'remotes/origin/faults' into development
  • Loading branch information
Evan Langlais committed Apr 15, 2019
2 parents 5ca36ea + 800a3d6 commit 3e33091
Show file tree
Hide file tree
Showing 3 changed files with 184 additions and 92 deletions.
29 changes: 26 additions & 3 deletions src/app/statistics/statistics.component.css
View file
Expand Up @@ -21,8 +21,31 @@ mwl-gauge > .gauge > .value-text {
font-weight: bold; font-weight: bold;
font-size: 1em; font-size: 1em;
} }
.fusioncharts
h6
{ {
position: relative; font-size: 13px;
padding: 5px;
} }
.faults
{
font-size: 14px;
}
.status
{
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;
}

184 changes: 140 additions & 44 deletions src/app/statistics/statistics.component.html
View file
Expand Up @@ -24,99 +24,185 @@
<button class="btn btn-primary btn-block m-1" (click) = "goToGraphGen()">Graph</button> <button class="btn btn-primary btn-block m-1" (click) = "goToGraphGen()">Graph</button>


</div> </div>
<div class="row mt-3 text-center " *ngIf = "isRecent"> <div class = "row mt-3">

<div class = "col-lg-8">
<div class="col-md-4 p-4"> <div class = "row">
<div (click)= "goToGraphSpec('l1.current')"> <div class="col-md-4 p-4">
<radial-gauge width="200" units="Amps" title="Phase A Current" height="200" major-ticks="0,60,120,180,240,300" [value]="pACurrent" > <div (click)= "goToGraphSpec('l1.current')">
</radial-gauge> <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' highlights = '[{"from": 0, "to": 0, "color": black}]' [value]="pACurrent" >
</div> </radial-gauge>
<div *ngIf="pACurrent; else loggedOut">
</div> </div>
</div> <div *ngIf="pACurrent; else loggedOut"></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> </div>
<div *ngIf="pBCurrent; else loggedOut"> <div class="col-md-4 p-4">
<div (click)= "goToGraphSpec('l2.current')">
<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' highlights = '[{"from": 0, "to": 0, "color": black}]' [value]="pBCurrent">
</radial-gauge>
</div> </div>
</div> <div *ngIf="pBCurrent; else loggedOut">
<div class="col-md-4 p-4"> </div>
<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> </div>
<div *ngIf="pCCurrent; else loggedOut"> <div class="col-md-4 p-4">
<div (click)= "goToGraphSpec('l3.current')">
<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' highlights = '[{"from": 0, "to": 0, "color": black}]' [value]="pCCurrent">
</radial-gauge>
</div> </div>
</div> <div *ngIf="pCCurrent; else loggedOut">
<div class="col-md-4 p-4"> </div>
</div>
<div class="col-md-4 p-4">
<div (click)= "goToGraphSpec('engine.rpm')"> <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" highlights = '[{"from": 0, "to": 0, "color": black}]' [value]="engineSpeed">
</radial-gauge> </radial-gauge>
</div> </div>
<div *ngIf="engineSpeed; else loggedOut"> <div *ngIf="engineSpeed; else loggedOut">
</div> </div>
</div> </div>
<div class="col-md-4 p-4"> <div class="col-md-4 p-4">
<div (click)= "goToGraphSpec('fuel.pressure')"> <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="kPa/psi" title="Fuel Pressure" height="200" major-ticks="0,12.5,25,37.5,50,62.5,75,87.5,100" max-value = "100" highlights = '[{"from": 0, "to": 0, "color": black}]' [value]="fuelPressure">
</radial-gauge> </radial-gauge>
</div> </div>
<div *ngIf="fuelPressure; else loggedOut"> <div *ngIf="fuelPressure; else loggedOut">
</div> </div>
</div> </div>
<div class="col-md-4 p-4"> <div class="col-md-4 p-4">
<div (click)= "goToGraphSpec('l1.l0.voltage')"> <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" highlights = '[{"from": 0, "to": 0, "color": black}]' [value]="pAVoltage">
</radial-gauge> </radial-gauge>
</div> </div>
<div *ngIf="pAVoltage; else loggedOut"> <div *ngIf="pAVoltage; else loggedOut">
</div> </div>
</div> </div>
<div class="col-md-4 p-4"> <div class="col-md-4 p-4">
<div (click)= "goToGraphSpec('l2.l0.voltage')"> <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" highlights = '[{"from": 0, "to": 0, "color": black}]' [value]="pBVoltage">
</radial-gauge> </radial-gauge>
</div> </div>
<div *ngIf="pBVoltage; else loggedOut"> <div *ngIf="pBVoltage; else loggedOut">
</div> </div>
</div> </div>
<div class="col-md-4 p-4"> <div class="col-md-4 p-4">
<div (click)= "goToGraphSpec('l3.l0.voltage')"> <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" highlights = '[{"from": 0, "to": 0, "color": black}]' [value]="pCVoltage">
</radial-gauge> </radial-gauge>
</div> </div>
<div *ngIf="pCVoltage; else loggedOut"> <div *ngIf="pCVoltage; else loggedOut">
</div> </div>
</div> </div>
<div class="col-md-4 p-4"> <div class="col-md-4 p-4">
<div (click)= "goToGraphSpec('total.kw')"> <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" highlights = '[{"from": 0, "to": 0, "color": black}]' [value]="totalKw">
</radial-gauge> </radial-gauge>
</div> </div>
<div *ngIf="totalKw; else loggedOut"> <div *ngIf="totalKw; else loggedOut">
</div> </div>
</div>
</div> </div>
<!--<div class="col-md-4"> </div>
<div class = "fusioncharts">
<fusioncharts class = "fusioncharts" type="angulargauge" dataFormat="json" width= "100%" height = "230" [dataSource]="fuelTempGraphData" >


</fusioncharts> <div class = "col-lg-4 p-4 text-center">
<div class = "row ">
<div class = "col-md-12 ">
<h3 class = "p-3">Faults</h3>
</div>
<div class = "col-md-6">
<h5 *ngIf = "this.generator.fault_codes.includes('fault.overcrank'); 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 *ngIf = "this.generator.fault_codes.includes('fault.engine.temp.high'); 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 *ngIf = "this.generator.fault_codes.includes('fault.oil.pressure.low'); 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 *ngIf = "this.generator.fault_codes.includes('fault.overspeed'); 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 *ngIf = "this.generator.fault_codes.includes('fault.emstop'); 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>
<div class = "col-md-6">
<h5 *ngIf = "this.generator.fault_codes.includes('fault.fuel.low'); 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 *ngIf = "this.generator.fault_codes.includes('fault.coolant.level.low'); 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 *ngIf = "this.generator.fault_codes.includes('fault.crank.volt.low'); 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 *ngIf = "this.generator.fault_codes.includes('fault.batt.volt.low') || this.generator.fault_codes.includes('fault.batt.volt.high'); 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 *ngIf = "this.generator.fault_codes.includes('fault.common'); 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>
<div class="col-md-4"> <div class = "row status ">
<div class = "fusioncharts"> <div class = "col-md-12 ">
<fusioncharts class = "fusioncharts" type="angulargauge" dataFormat="json" width= "100%" height = "230" [dataSource]="fuelTempGraphData" > <h3 class = "p-3">System Status</h3>
</fusioncharts>
</div> </div>
</div> --> <div class = "col-md-6">
</div> <h5 *ngIf = "this.generator.status_codes.includes('status.eps'); else emptyEPS"><span class="badge badge-success">EPS Supplying<br>Load</span></h5>
<div class="row mt-3 text-center" *ngIf = "isRecent"> <ng-template #emptyEPS>
<h5><span class="badge badge-secondary">EPS Supplying<br>Load</span></h5>
</ng-template>
</div>
<div class = "col-md-6">
<h5 *ngIf = "this.generator.status_codes.includes('status.notinauto'); 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 *ngIf = "this.generator.status_codes.includes('status.system.ready'); else emptySystem"><span class="badge badge-success">System Ready</span></h5>
<ng-template #emptySystem>
<h5><span class="badge badge-secondary">System Running</span></h5>
</ng-template>
</div>
<div class = "col-md-6">
<h5 *ngIf = "this.generator.status_codes.includes('status.gen.running'); 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>
</div>
</div>
<div class="row mt-3 text-center">
<div class="col-md-3 p-4"> <div class="col-md-3 p-4">
<div (click)= "goToGraphSpec('coolant.temp')"> <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"> <linear-gauge width="150" title = "Coolant Temperature" major-ticks = "0,30,60,90,120" units = "°F" max-value = "120" height="350" highlights = '[{"from": 0, "to": 0, "color": black}]' [value] = "coolantTemp">


</linear-gauge> </linear-gauge>
</div> </div>
Expand All @@ -129,7 +215,7 @@
<div class="col-md-3 p-4"> <div class="col-md-3 p-4">
<!--<radial-gauge width="200" units="°C" title="Fuel Temperature" height="200" [value]="fuelTemp"></radial-gauge> --> <!--<radial-gauge width="200" units="°C" title="Fuel Temperature" height="200" [value]="fuelTemp"></radial-gauge> -->
<div (click)= "goToGraphSpec('oil.pressure')"> <div (click)= "goToGraphSpec('oil.pressure')">
<linear-gauge width="150" title = "Oil Pressure" major-ticks = "0,50,100,150,200" max-value = "200" height="350" [value] = "oilPressure"> <linear-gauge width="150" title = "Oil Pressure" major-ticks = "0,50,100,150,200" units = "kPa/psi" max-value = "200" height="350" highlights = '[{"from": 0, "to": 0, "color": black}]' [value] = "oilPressure">
</linear-gauge> </linear-gauge>
</div> </div>
<div *ngIf="oilPressure; else loggedOut"> <div *ngIf="oilPressure; else loggedOut">
Expand All @@ -138,25 +224,35 @@
<div class="col-md-3 p-4"> <div class="col-md-3 p-4">
<!--<radial-gauge width="200" units="°C" title="Fuel Temperature" height="200" [value]="fuelTemp"></radial-gauge> --> <!--<radial-gauge width="200" units="°C" title="Fuel Temperature" height="200" [value]="fuelTemp"></radial-gauge> -->
<div (click)= "goToGraphSpec('oil.temp')"> <div (click)= "goToGraphSpec('oil.temp')">
<linear-gauge width="150" title = "Oil Temperature" major-ticks = "0,50,100,150,200" max-value = "200" height="350" [value]="oilTemp"></linear-gauge> <linear-gauge width="150" title = "Oil Temperature" major-ticks = "0,50,100,150,200" units = "°F" max-value = "200" height="350" highlights = '[{"from": 0, "to": 0, "color": black}]' [value]="oilTemp"></linear-gauge>
</div> </div>
<div *ngIf="oilTemp; else loggedOut"> <div *ngIf="oilTemp; else loggedOut">
</div> </div>
</div> </div>
<div class="col-md-3 p-4"> <div class="col-md-3 p-4">
<!--<radial-gauge width="200" units="°C" title="Fuel Temperature" height="200" [value]="fuelTemp"></radial-gauge> --> <!--<radial-gauge width="200" units="°C" title="Fuel Temperature" height="200" [value]="fuelTemp"></radial-gauge> -->
<div (click)= "goToGraphSpec('fuel.temp')"> <div (click)= "goToGraphSpec('fuel.temp')">
<linear-gauge width="150" title = "Fuel Temperature" major-ticks = "0,50,100,150,200" max-value = "200" height="350" [value]= "fuelTemp" > <linear-gauge width="150" title = "Fuel Temperature" major-ticks = "0,50,100,150,200" units = "°F" max-value = "200" height="350" highlights = '[{"from": 0, "to": 0, "color": black}]' [value]= "fuelTemp" >


</linear-gauge> </linear-gauge>
</div> </div>
<div *ngIf="fuelTemp; else loggedOut"> <div *ngIf="fuelTemp; else loggedOut">
</div> </div>
</div> </div>
</div> </div>







<ng-template #loggedOut> <ng-template #loggedOut>
Data is not available within the last 24 hours Data is not available within the last 24 hours
</ng-template> </ng-template>

</div>

<!-- <!--
<div class="row mt-3 text-center" *ngIf = "isHour"> <div class="row mt-3 text-center" *ngIf = "isHour">
<div class="col-md-4"> <div class="col-md-4">
Expand Down

0 comments on commit 3e33091

Please sign in to comment.