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
66
67
78x
 
 
 
159x
159x
 
 
 
3x
159x
 
3x
156x
 
3x
159x
 
3x
156x
 
 
3x
159x
 
3x
 
156x
 
 
3x
156x
 
 
3x
159x
 
 
3x
 
 
3x
 
156x
3x
3x
3x
3x
3x
156x
3x
3x
3x
3x
3x
156x
3x
3x
3x
3x
 
 
3x
78x
3x
 
 
@if (device) {
  <div class="rows">
    <div class="columns">
      <div class="column">
        <h1 class="title">{{device.name}} ({{device.config_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>
          <div class="control clickable" [routerLink]="['/configurations', device.config_id]">
            <div class="tags has-addons">
              <span class="tag is-dark">Configuration</span>
              <span class="tag is-info">#{{device.config_id.slice(8)}}</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>
                }
                @else {
                  <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>
        <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>
      </div>
    </div>
    <app-device-card-logic [deviceId]="deviceId" [displayDeviceInfo]="false"></app-device-card-logic>
  </div>
}