All files / src/app/components/device-states device-states.component.html

94.11% Statements 80/85
70% Branches 7/10
40% Functions 2/5
100% Lines 45/45

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 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86433x 54x     866x       760x 760x   2x     2x 2x 2x         381x 758x 2x 2x   2x 758x 1x     6x 292x     1x 1x   1x       1x 1x 1x     1x 8x       1x   1x   5890x 5890x 5890x   50x 5890x 2920x 50x   2920x 5890x 50x         50x   1x   2x 2x 379x 379x       2x    
@if (error) {
<app-error [error]="error"></app-error>
}
 
@if (!error) {
<div>
  <div>
    <section class="section">
      <h1>{{ deviceName }}</h1>
      <h2 class="subtitle is-5">device #{{ deviceId.slice(8) }}</h2>
    </section>
  </div>
  <p-tabs value="0">
    <p-tablist>
      <p-tab value="0">State</p-tab>
      <p-tab value="1">Status</p-tab>
    </p-tablist>
    <p-tabpanels>
      <p-tabpanel value="0">
        <div class="property-selector">
          <p-floatlabel>
            <p-multiselect display="chip" [options]="deviceProperties" [(ngModel)]="selectedProperties"
              optionLabel="label" [style]="{ 'min-width': '200px' }"
              (onChange)="onModifiedPropertiesChanged($event.value)" id="modifiedProperties" />
            <label for="modifiedProperties">Modified properties</label>
          </p-floatlabel>
        </div>
        @if (versions) {
        <p-table [value]="versions.items" [tableStyle]="{ 'min-width': '50rem' }" [paginator]="true" [rows]="rows"
          [rowsPerPageOptions]="filteredRowsPerPageOptions" [showCurrentPageReport]="true" [first]="offset"
          [totalRecords]="versions.total" [lazy]=true
          currentPageReportTemplate="Showing {first} - {last} of {totalRecords} entries" (onPage)="onTableEvent($event)"
          (onLazyLoad)="loadEvents($event)" sortField="timestamp" [sortOrder]="-1">
          <ng-template pTemplate="caption">
            <div class="columns">
              <div class="column">
                Last changes
              </div>
            </div>
          </ng-template>
          <ng-template pTemplate="header">
            <tr>
              <th pSortableColumn="timestamp">Date <p-sortIcon field="timestamp"></p-sortIcon></th>
              <th>Mode</th>
              <th>Load</th>
              <th>
                <div class="places-header">
                  <span>Logic states</span>
                  <input class="input places-filter" type="text" (input)="onFilterPlaces($event.target.value)"
                    placeholder="Filter" id="placesFilter" />
                </div>
              </th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-version>
            <tr>
              <td>{{ version.timestamp * 1000 | date:'yyyy/MM/dd - HH:mm:ss' }}</td>
              <td>{{ version.mode }}</td>
              <td>{{ version.load*100 | number: '1.0-0' }}%</td>
              <td>
                <div class="tags">
                  @for (placeName of version.places; track placeName) {
                  @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>
            </tr>
          </ng-template>
        </p-table>
        }
      </p-tabpanel>
      <p-tabpanel value="1">
        <app-signals-graphs [showLegend]="true" [showSignals]="false" [inputIsLive]="false"
          [displayCommandCenter]="false"></app-signals-graphs>
      </p-tabpanel>
    </p-tabpanels>
  </p-tabs>
</div>
}