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   48x       48x   26x   24x     2x 2x 2x 2x 2x 2x 2x   2x 96x 200x 200x 8x 192x 104x   8x 8x 192x 8x 200x 168x 182x 336x 14x     168x 350x 14x       8x   8x 192x 104x   8x   8x 8x 8x 96x   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>
}