Skip to content
Permalink
c17a3cbeb3
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

PowerPanel-Frontend/src/app/statistics/statistics.component.html

Go to file
 
 
Cannot retrieve contributors at this time
335 lines (322 sloc) 11.1 KB
Raw Blame
<div class="container ">
<!--
<div class ="row mt-3">
<div class = "col-md-2">
<button class="btn btn-primary btn-block m-1" (click)="viewRecent()">Recent</button>
</div>
<div class = "col-md-2">
<button class="btn btn-primary btn-block m-1" (click)="viewHour()">Last Hour</button>
</div>
<div class = "col-md-2">
<button class="btn btn-primary btn-block m-1" (click)="viewDay()">Last Day</button>
</div>
<div class = "col-md-2">
<button class="btn btn-primary btn-block m-1" (click)="viewWeek()">Last Week</button>
</div>
<div class = "col-md-2">
<button class="btn btn-primary btn-block m-1" (click)="viewMonth()">Last Month</button>
</div>
<div class = "col-md-2">
<button class="btn btn-primary btn-block m-1" (click)="viewYear()">Last Year</button>
</div>
</div> -->
<div class = "row mt-3">
<button class="btn btn-primary btn-block m-1" (click) = "goToGraphGen()">Graph</button>
</div>
<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 *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>
</div>
<div *ngIf="pBCurrent; else loggedOut">
</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" max-value = '300' [value]="pCCurrent">
</radial-gauge>
</div>
<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>
</div>
<div *ngIf="engineSpeed; else loggedOut">
</div>
</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>
</div>
<div *ngIf="fuelPressure; else loggedOut">
</div>
</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>
</div>
<div *ngIf="pAVoltage; else loggedOut">
</div>
</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>
</div>
<div *ngIf="pBVoltage; else loggedOut">
</div>
</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>
</div>
<div *ngIf="pCVoltage; else loggedOut">
</div>
</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>
</div>
<div *ngIf="totalKw; else loggedOut">
</div>
</div>
</div>
</div>
<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 = "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>
</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">
</linear-gauge>
</div>
<div *ngIf="oilPressure; else loggedOut">
</div>
<!--<radial-gauge width="200" units="°C" title="Oil Temperature" height="200" max-value = "220" major-ticks="0,20,40,60,80,100,120,140,160,180,200,220" highlights='[{"from": 160, "to": 220, "color": "rgba(200, 50, 50, .75)"}
]' [value]="oilTemp">
</radial-gauge> -->
</div>
<div class="col-md-3 p-4">
<!--<radial-gauge width="200" units="°C" title="Fuel Temperature" height="200" [value]="fuelTemp"></radial-gauge> -->
<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>
</div>
<div *ngIf="oilPressure; else loggedOut">
</div>
</div>
<div class="col-md-3 p-4">
<!--<radial-gauge width="200" units="°C" title="Fuel Temperature" height="200" [value]="fuelTemp"></radial-gauge> -->
<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>
</div>
<div *ngIf="oilTemp; else loggedOut">
</div>
</div>
<div class="col-md-3 p-4">
<!--<radial-gauge width="200" units="°C" title="Fuel Temperature" height="200" [value]="fuelTemp"></radial-gauge> -->
<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>
</div>
<div *ngIf="fuelTemp; else loggedOut">
</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">
hour
</div>
<div class="col-md-4">
check
</div>
<div class="col-md-4">
1
</div>
</div>
<div class="row mt-3 text-center" *ngIf = "isDay">
<div class="col-md-4">
day
</div>
<div class="col-md-4">
check
</div>
<div class="col-md-4">
1
</div>
</div>
<div class="row mt-3 text-center" *ngIf = "isWeek">
<div class="col-md-4">
week
</div>
<div class="col-md-4">
check
</div>
<div class="col-md-4">
1
</div>
</div>
<div class="row mt-3 text-center" *ngIf = "isMonth">
<div class="col-md-4">
month
</div>
<div class="col-md-4">
check
</div>
<div class="col-md-4">
1
</div>
</div>
<div class="row mt-3 text-center" *ngIf = "isYear">
<div class="col-md-4">
year
</div>
<div class="col-md-4">
check
</div>
<div class="col-md-4">
1
</div>
</div>
</div>
-->
<!-- <div class="stat-temp" id="temp">
<form class="bubble">
<input type="number" name="quantity" min="30" max="100" placeholder="65">
</form>
</div> -->