130 lines
5.2 KiB
HTML
130 lines
5.2 KiB
HTML
<div class="container">
|
|
<div class ="viewer">
|
|
<div class="container" fxLayout="row wrap" fxLayoutGap="30px">
|
|
Total Flow Rate {{ totalFlowRate }}
|
|
|
|
<div class="flex-spacer"></div>
|
|
|
|
<mat-menu #appMenu="matMenu">
|
|
<ng-container *ngFor="let item of groups; let i = index">
|
|
<button mat-menu-item (click)="setRole(i)"> {{ item }}</button>
|
|
</ng-container>
|
|
</mat-menu>
|
|
|
|
<button mat-icon-button [matMenuTriggerFor]="appMenu">
|
|
<mat-icon>more_vert</mat-icon>
|
|
</button>
|
|
</div>
|
|
|
|
|
|
|
|
<mat-divider ></mat-divider>
|
|
<mat-form-field>
|
|
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
|
|
</mat-form-field>
|
|
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
|
|
|
|
|
|
<ng-container matColumnDef="location">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Location </th>
|
|
<td mat-cell *matCellDef="let element"> {{element.location}} </td>
|
|
</ng-container>
|
|
|
|
|
|
<ng-container matColumnDef="company">
|
|
<th mat-header-cell *matHeaderCellDef> Company </th>
|
|
<td mat-cell *matCellDef="let element"> {{element.company}} </td>
|
|
</ng-container>
|
|
|
|
|
|
<ng-container matColumnDef="field">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Field </th>
|
|
<td mat-cell *matCellDef="let element"> {{element.field}} </td>
|
|
</ng-container>
|
|
|
|
|
|
<ng-container matColumnDef="volumeflow">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Flow Rate </th>
|
|
<td mat-cell *matCellDef="let element"> {{element.volumeflow}} </td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="intakepressure">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Intake Pressure </th>
|
|
<td mat-cell *matCellDef="let element"> {{element.intakepressure}} </td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="current">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Current </th>
|
|
<td mat-cell *matCellDef="let element"> {{element.current}} </td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="frequency">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Frequency </th>
|
|
<td mat-cell *matCellDef="let element"> {{element.frequency}} </td>
|
|
</ng-container>
|
|
|
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
|
</table>
|
|
<!-- <div class="container" fxLayout="row wrap" fxLayoutGap="10px">
|
|
<mat-accordion>
|
|
<mat-expansion-panel *ngFor="let message of serverMessages">
|
|
<mat-expansion-panel-header>
|
|
<mat-panel-title>
|
|
{{ message.location }}
|
|
</mat-panel-title>
|
|
<mat-panel-description>
|
|
{{ message.company }}
|
|
</mat-panel-description>
|
|
<mat-panel-description>
|
|
{{ message.field }}
|
|
</mat-panel-description>
|
|
<mat-panel-description>
|
|
Flow Rate: {{ message.volumeflow }}
|
|
</mat-panel-description>
|
|
</mat-expansion-panel-header>
|
|
<ngx-gauge
|
|
[type] = "gaugeType"
|
|
[cap] = "gaugeCap"
|
|
[value] = "message.volumeflow"
|
|
[label] = "gaugeLabel"
|
|
[append] = "gaugeAppendText"
|
|
[thick] = "gaugeThick"
|
|
[min] = "gaugeMin"
|
|
[max] = "gaugeMax"
|
|
[thresholds] = "gaugeThresholds">
|
|
</ngx-gauge>
|
|
<ngx-gauge
|
|
[type] = "gaugeType"
|
|
[cap] = "gaugeCap"
|
|
[value] = "message.current"
|
|
[label] = "gaugeLabel"
|
|
[append] = "gaugeAppendText"
|
|
[thick] = "gaugeThick"
|
|
[min] = "gaugeMin"
|
|
[max] = "gaugeMax"
|
|
[thresholds] = "gaugeThresholds">
|
|
<ngx-gauge-label>Current</ngx-gauge-label>
|
|
<ngx-gauge-append>A</ngx-gauge-append>
|
|
</ngx-gauge>
|
|
<ngx-gauge
|
|
[type] = "gaugeType"
|
|
[cap] = "gaugeCap"
|
|
[value] = "message.intakepressure"
|
|
[label] = "gaugeLabel"
|
|
[append] = "gaugeAppendText"
|
|
[thick] = "gaugeThick"
|
|
[min] = "gaugeMin"
|
|
[max] = "gaugeMax"
|
|
[thresholds] = "gaugeThresholds">
|
|
<ngx-gauge-label>Intake Pressure</ngx-gauge-label>
|
|
<ngx-gauge-append>PSI</ngx-gauge-append>
|
|
</ngx-gauge>
|
|
</mat-expansion-panel>
|
|
</mat-accordion>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
|
|
<!--style="float:left;display:inline-block;height:50px;"-->
|
|
<!-- [ngStyle]="{'width': 'calc(100% /' + serverMessages.length + ')'}"--> |