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
78x
156x
 
78x
 
 
3x
3x
3x
3x
3x
3x
 
3x
 
477x
477x
477x
477x
9x
468x
156x
 
 
78x
 
9x
 
 
 
9x
 
3x
 
<app-loader *ngIf="!_device"></app-loader>
<p-table *ngIf="_device" [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 {
                    <button *ngIf="_device.status==='down'" class="button is-link" disabled>Device down</button>
                }
            </td>
        </tr>
    </ng-template>
</p-table>