All files / src/app/components/modes-table modes-table.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
84x
 
 
168x
3x
 
84x
 
 
3x
3x
3x
3x
3x
3x
 
3x
 
513x
513x
513x
513x
9x
504x
168x
 
 
84x
 
9x
 
 
 
 
 
9x
 
3x
 
 
@if (!_device) {
  <app-loader></app-loader>
}
@if (_device) {
  <p-table [value]="_device.modes" [tableStyle]="{ 'min-width': '50rem' }" [paginator]="true" [rows]="10"
    [rowsPerPageOptions]="[10, 20, 50]" [showCurrentPageReport]="true"
    currentPageReportTemplate="{first} - {last} of {totalRecords} modes" [rowHover]="true">
    <ng-template pTemplate="header">
      <tr>
        <th pSortableColumn="device_id">id <p-sortIcon field="mode_id"></p-sortIcon></th>
        <th pSortableColumn="name">Mode name<p-sortIcon field="name"></p-sortIcon></th>
        <th pSortableColumn="frequency_multiplier">Frequency multiplier<p-sortIcon field="frequency_multiplier"></p-sortIcon></th>
        <th pSortableColumn="min_frequency">Min Frequency<p-sortIcon field="min_frequency"></p-sortIcon></th>
        <th>Actions</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-mode let-i="rowIndex">
      <tr>
        <td>{{ mode.mode_id }}</td>
        <td>{{ mode.name }}</td>
        <td>{{ mode.frequency_multiplier }}</td>
        <td>{{ mode.min_frequency }}</td>
        <td>
          @if (_device.status==='up' && _currentModeId !== mode.mode_id) {
            <button class="button" (click)="changeMode(mode)" [ngClass]="{'is-loading': isLoading}" >Switch mode</button>
          }
          @else if (_device.status==='up' && _currentModeId === mode.mode_id) {
          <button class="button is-link" [ngClass]="{'is-loading': isLoading}" disabled>Current mode</button>
        }
        @else {
        @if (_device.status==='down') {
          <button class="button is-link" disabled>Device down</button>
        }
      }
    </td>
  </tr>
</ng-template>
</p-table>
}