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
 
56x
 
56x
 
30x
 
28x
 
 
2x
2x
2x
2x
2x
2x
2x
 
2x
84x
177x
177x
9x
168x
93x
 
9x
9x
168x
413x
21x
9x
9x
168x
93x
 
9x
 
9x
9x
9x
84x
 
9x
 
 
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="config_name">Configuration <p-sortIcon field="config_name"></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 }} (#{{ device.device_id.slice(8) }})</td>
                <td>{{ device.config_name }}</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>