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 86431x 54x     862x       756x 756x   2x     2x 2x 2x         379x 754x 2x 2x   2x 754x 1x     6x 292x     1x 1x   1x       1x 1x 1x     1x 8x       1x   1x   5890x 5890x 5890x   50x 5890x 2854x 49x   2854x 5757x 49x         50x   1x   2x 2x 377x 377x       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>
}