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
 
40x
 
40x
 
22x
 
20x
 
 
2x
2x
2x
2x
2x
2x
2x
 
2x
60x
126x
126x
6x
120x
66x
 
6x
6x
120x
294x
14x
6x
6x
120x
66x
 
6x
 
6x
6x
6x
60x
 
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>