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 652x   52x       52x   28x   26x     2x 2x 2x 2x 2x 2x 2x   2x 104x 216x 216x 8x 208x 112x   8x 8x 208x 8x 216x 182x 196x 364x 14x     182x 378x 14x       8x   8x 208x 112x   8x   8x 8x 8x 104x   8x     2x    
<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>
}