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
66x
138x
138x
6x
132x
72x
 
6x
6x
132x
322x
14x
6x
6x
132x
72x
 
6x
 
6x
6x
6x
66x
 
6x
 
 
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>