Skip to content
Permalink
800a3d696b
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?
Go to file
 
 
Cannot retrieve contributors at this time
318 lines (304 sloc) 14.4 KB
<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-lg-8">
<div class = "row">
<div class="col-md-4 p-4">
<div (click)= "goToGraphSpec('l1.current')">
<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" >
</radial-gauge>
</div>
<div *ngIf="pACurrent; else loggedOut"></div>
</div>
<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 *ngIf="pBCurrent; else loggedOut">
</div>
</div>
<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 *ngIf="pCCurrent; else loggedOut">
</div>
</div>
<div class="col-md-4 p-4">
<div (click)= "goToGraphSpec('engine.rpm')">
<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>
</div>
<div *ngIf="engineSpeed; else loggedOut">
</div>
</div>
<div class="col-md-4 p-4">
<div (click)= "goToGraphSpec('fuel.pressure')">
<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>
</div>
<div *ngIf="fuelPressure; else loggedOut">
</div>
</div>
<div class="col-md-4 p-4">
<div (click)= "goToGraphSpec('l1.l0.voltage')">
<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>
</div>
<div *ngIf="pAVoltage; else loggedOut">
</div>
</div>
<div class="col-md-4 p-4">
<div (click)= "goToGraphSpec('l2.l0.voltage')">
<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>
</div>
<div *ngIf="pBVoltage; else loggedOut">
</div>
</div>
<div class="col-md-4 p-4">
<div (click)= "goToGraphSpec('l3.l0.voltage')">
<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>
</div>
<div *ngIf="pCVoltage; else loggedOut">
</div>
</div>
<div class="col-md-4 p-4">
<div (click)= "goToGraphSpec('total.kw')">
<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>
</div>
<div *ngIf="totalKw; else loggedOut">
</div>
</div>
</div>
</div>
<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 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 class = "row status ">
<div class = "col-md-12 ">
<h3 class = "p-3">System Status</h3>
</div>
<div class = "col-md-6">
<h5 *ngIf = "this.generator.status_codes.includes('status.eps'); 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 *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 (click)= "goToGraphSpec('coolant.temp')">
<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>
</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" units = "kPa/psi" max-value = "200" height="350" highlights = '[{"from": 0, "to": 0, "color": black}]' [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" units = "°F" max-value = "200" height="350" highlights = '[{"from": 0, "to": 0, "color": black}]' [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" units = "°F" max-value = "200" height="350" highlights = '[{"from": 0, "to": 0, "color": black}]' [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> -->