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
50
51
52
53
54
55
56
2x
 
72x
 
 
 
72x
 
38x
 
36x
 
 
2x
2x
2x
2x
2x
2x
2x
 
2x
144x
296x
296x
8x
288x
152x
 
8x
8x
288x
8x
296x
518x
14x
 
8x
 
8x
288x
152x
 
8x
 
8x
8x
8x
144x
 
8x
 
 
2x
 
 
<h1 class="title">Devices</h1>
 
@if (!devices) {
  <app-loader></app-loader>
}
 
@if (devices) {
  <div class="container">
    <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>
            @if (device.status === 'up') {
              <div class="tags">
                @for (token of device.tokens; track token) {
                  <div class="tag">{{ 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>
}