Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Modiefied layout of statistics page to integrate faults/system status
  • Loading branch information
@ema14006
ema14006 committed Apr 9, 2019
1 parent b97a27a commit c17a3cb
Show file tree
Hide file tree
Showing 2 changed files with 159 additions and 34 deletions.
12 changes: 12 additions & 0 deletions src/app/statistics/statistics.component.css
View file
Expand Up @@ -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;
}
181 changes: 147 additions & 34 deletions src/app/statistics/statistics.component.html
View file
Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down

0 comments on commit c17a3cb

Please sign in to comment.