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

91.76% Statements 78/85
70% Branches 7/10
40% Functions 2/5
95.65% Lines 44/46

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 86 87 88256x 24x     512x       466x 466x   2x     2x 2x 2x         234x 464x 2x 2x   2x 464x 1x     6x 188x     1x 1x   1x       1x 1x 1x     1x 8x       1x   1x   3810x 3810x 3810x   50x 3810x 1880x 50x   1880x 3810x 50x         50x   1x   2x 2x 2x             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 lazy 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">
        <ng-template #content>
          <app-signals-graphs [inputZoomTime]="currentDate" [showLegend]="true" [showSignals]="false" [inputIsLive]="false"
            [displayCommandCenter]="false"></app-signals-graphs>
        </ng-template>
      </p-tabpanel>
    </p-tabpanels>
  </p-tabs>
</div>
}