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
 
48x
 
48x
 
26x
 
24x
 
 
2x
2x
2x
2x
2x
2x
2x
 
2x
72x
150x
150x
6x
144x
78x
 
6x
6x
144x
350x
14x
6x
6x
144x
78x
 
6x
 
6x
6x
6x
72x
 
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>