All files / src/app/components/devices devices.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
41
42
43
44
45
46
47
48
49
2x
 
44x
 
44x
 
24x
 
22x
 
 
2x
2x
2x
2x
2x
2x
2x
 
2x
88x
184x
184x
8x
176x
96x
 
8x
8x
176x
322x
14x
8x
8x
176x
96x
 
8x
 
8x
8x
8x
88x
 
8x
 
 
2x
 
<h1 class="title">Devices</h1>
 
<app-loader *ngIf="!devices"></app-loader>
 
<div class="container" *ngIf="devices">
 
    <p-table [value]="displayedDevices" [tableStyle]="{ 'min-width': '50rem' }" [paginator]="true" [(rows)]="rows"
        [rowsPerPageOptions]="filteredRowsPerPageOptions" [showCurrentPageReport]="true" [first]="offset"
        currentPageReportTemplate="{first} - {last} of {totalRecords} devices" [rowHover]="true">
        <ng-template pTemplate="header">
            <tr>
                <th pSortableColumn="name">Device <p-sortIcon field="name"></p-sortIcon></th>
                <th pSortableColumn="device_id">Device id <p-sortIcon field="device_id"></p-sortIcon></th>
                <th>Current mode</th>
                <th>Actions</th>
                <th pSortableColumn="load">Load <p-sortIcon field="load"></p-sortIcon></th>
                <th pSortableColumn="status">Status <p-sortIcon field="status"></p-sortIcon></th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-device>
            <tr [routerLink]="['/devices', device.device_id]">
                <td>{{ device.name }}</td>
                <td>#{{ device.device_id.slice(8) }}</td>
                <td>
                    @if (device.status === 'up' && device.modes[device.current_mode_id-1] !== undefined) {
                        {{ device.modes[device.current_mode_id-1].name }}
                    }
                </td>
                <td>
                    <div class="tags" *ngIf="device.status === 'up'">
                        <div class="tag" *ngFor="let token of device.tokens">{{ device.petri_network.places[token].name
                            }}</div>
                    </div>
                </td>
                <td>@if (device.status === 'up') {
                        {{ device.load*100 | number: '1.0-0' }}
                    }
                    @else {
                        {{ '--' }}
                    }%
                </td>
                <td>
                    <p-badge [value]="device.status" [severity]="device.status === 'up' ? 'success' : 'danger' " />
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>