statistics.component.html

<div class="container">
  <div class="row mt-3">
    <button mat-raised-button (click)="goToGraphGen()" class = "mx-auto">Graph</button>
  </div>

  <ng-template #timedOut>
    Data is not available within the last 24 hours
  </ng-template>
  <ng-template #loading>
    <mat-spinner></mat-spinner>
  </ng-template>
  <ng-template #offline>
    <div class="row mt-3 justify-content-center">
      <div class="col text-center">
        <h2>Generator Offline</h2>
        <h3>To view statistics ensure generator can communicate with the PowerPanel system and check back later.</h3>
      </div>
    </div>
  </ng-template>
  <div *ngIf="generator_state && generator_state.online; else offline">
  <div class="row mt-3">
    <div class="col-lg-8">
      <div class="row" *ngIf="generator_statistics; else loading">
        <div *ngFor="let metric of radial_metrics" class="col-md-4 p-4">
          <div (click)="goToGraphSpec(getMetric(metric).id)">
            <radial-gauge [attr.max-value]="getMetric(metric).max"
                          [attr.title]="getMetric(metric).title"
                          [attr.units]="getMetric(metric).units"
                          [attr.min-value]="getMetric(metric).min"
                          [attr.major-ticks]="getMajorTicks(getMetric(metric))"
                          class="gauges"
                          height="200"
                          width="200"
                          highlights='[{"from": 0, "to": 0, "color": black}]'
                          value="{{ getMetric(metric).value }}">
            </radial-gauge>
          </div>
          <div *ngIf="getMetric(metric).value; else timedOut"></div>
        </div>
      </div>
    </div>
    <div class="col-lg-4 p-4 text-center">
      <div class="row" *ngIf="generator_state; else loading">
        <div class="col-md-12 ">
          <h3 class="p-3">Faults</h3>
        </div>
        <div class="col-md-6">
          <h5 *ngIf="generator_state.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="generator_state.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="generator_state.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="generator_state.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="generator_state.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="generator_state.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="generator_state.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="generator_state.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="generator_state.fault_codes.includes('fault.batt.volt.low') || generator_state.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="generator_state.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 " *ngIf="generator_state; else loading">
        <div class="col-md-12 ">
          <h3 class="p-3">System Status</h3>
        </div>
        <div class="col-md-6">
          <h5 *ngIf="generator_state.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="generator_state.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="generator_state.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="generator_state.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" *ngIf="generator_statistics; else loading">
    <div class="col-md-3 p-4" *ngFor="let metric of slide_metrics">
      <div (click)="goToGraphSpec(getMetric(metric).id)">
        <linear-gauge [attr.max-value]="getMetric(metric).max"
                      [attr.title]="getMetric(metric).title"
                      [attr.units]="getMetric(metric).units"
                      [attr.min-value]="getMetric(metric).min"
                      [attr.major-ticks]="getMajorTicks(getMetric(metric))"
                      height="350"
                      width="150"
                      highlights='[{"from": 0, "to": 0, "color": black}]'
                      value="{{ getMetric(metric).value }}">
        </linear-gauge>
      </div>
      <div *ngIf="getMetric(metric).value; else timedOut"></div>
    </div>
  </div>
</div>
</div>