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

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
72x
 
 
147x
147x
 
 
 
3x
147x
 
3x
144x
 
 
3x
147x
 
3x
 
144x
 
 
3x
144x
 
 
144x
147x
 
 
3x
 
 
3x
 
144x
3x
3x
3x
3x
3x
144x
3x
3x
3x
3x
3x
144x
3x
3x
3x
3x
3x
144x
3x
147x
147x
 
3x
 
 
3x
 
 
@if (device) {
  <div class="columns">
    <div class="column is-two-thirds">
      <h1 class="title">{{device.name}}</h1>
      <h2 class="subtitle is-5">device #{{device.device_id.slice(8)}}</h2>
      <div class="field is-grouped is-grouped-multiline">
        <div class="control">
          <div class="tags has-addons">
            <span class="tag is-dark">Status</span>
            <span class="tag " [ngClass]="{'is-success': device.status === 'up', 'is-danger': device.status === 'down'}">{{device.status}}</span>
          </div>
        </div>
        @if (device.status === 'up' && currentMode) {
          <div class="control">
            <div class="tags has-addons">
              <span class="tag is-dark">Current mode</span>
              <span class="tag is-info" >{{currentMode.name}}</span>
            </div>
          </div>
        }
        @if (device.status === 'up') {
          <div class="control">
            <div class="tags has-addons">
              <span class="tag is-dark">Load</span>
              @if (device.load === undefined) {
                <span class="tag is-danger">No load info</span>
              }
              @if (device.load !== undefined) {
                <span class="tag " [ngClass]="{'is-success': device.load < 0.2, 'is-danger': device.load >= 0.2}">{{device.load*100 | number: '1.0-0'}} %</span>
              }
            </div>
          </div>
        }
      </div>
    </div>
    <div class="column">
      <button class="button" [routerLink]="['/devices', deviceId, 'petri-network']" id="petri-network">
        <span class="icon">
          <i class="iconoir-network-reverse"></i>
        </span>
        <span>Logic</span>
      </button>
      <button class="button" [routerLink]="['/devices', deviceId, 'pid']" id="pid">
        <span class="icon is-small">
          <i class="iconoir-temperature-high"></i>
        </span>
        <span>PID</span>
      </button>
      <button class="button" [routerLink]="['/devices', deviceId, 'states']" id="device-states">
        <span class="icon is-small">
          <i class="pi pi-history"></i>
        </span>
        <span>History</span>
      </button>
      @if (device.status === 'up') {
        <div class="tags places">
          @for (place of places; track place) {
            <span class="tag">{{place}}</span>
          }
        </div>
      }
    </div>
  </div>
}