All files / src/app/components/devices devices.component.html

96.15% Statements 75/78
55% Branches 11/20
0% Functions 0/1
95.45% Lines 42/44

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 57 58 59 60 61 62 63 64 653x   96x       96x   51x   48x     3x 3x 3x 3x 3x 3x 3x   3x 128x 268x 268x 12x 256x 140x   12x 12x 256x 12x 268x 224x 245x 448x 21x     224x 469x 21x       12x   12x 256x 140x   12x   12x 12x 12x 128x   12x     3x    
<h1 class="title">Devices</h1>
 
@if (!devices) {
  <app-loader elementName="devices"></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) {
                  @if (device.petri_network && device.petri_network.places.length >= token + 1) {
                    @let placeName = device.petri_network.places[token].name ?? "";
                    @if (placeName !== "") {
                      <div class="tag"
                      [class.is-warning-dark]="placeName.toLowerCase().includes('warning')"
                      [class.is-info]="placeName.toLowerCase().includes('info')"
                      [class.is-danger]="placeName.toLowerCase().includes('error')">
                        {{ placeName }}
                      </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>
}