Projekt

Obecné

Profil

« Předchozí | Další » 

Revize a9363970

Přidáno uživatelem Martin Lácha před téměř 4 roky(ů)

Re #8805 - Rozložení komponent senzoru

- Setting components layout in senzor graph view

Zobrazit rozdíly:

src/app/sensor/components/sensor.component.html
1 1
<app-nav-bar></app-nav-bar>
2 2

  
3
Sensor ID {{sensorId}}
4
<br>
5
Unit ID {{unitId}}
6
<br>
7

  
8
<div class="col">
9
  <div class="input-group form-group">
10
    <div class="input-group-prepend">
11
      <span class="input-group-text">From</span>
3
<div class="container graph">
4
  <div class="row-2">
5
    <div class="col-xs-3">
6
      <h5>Sensor ID {{sensorId}}</h5>
7
    </div>
8
    <div class="col-1"></div>
9
    <div class="col-xs-3">
10
      <h5>Unit ID {{unitId}}</h5>
12 11
    </div>
13
    <p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="from" [showTime]="true" (onSelect)="showGraph()" [maxDate]="today"></p-calendar>
12
    <div class="col-1"></div>
13

  
14 14
  </div>
15
</div>
16
<div class="col">
17
  <div class="input-group form-group">
18
    <div class="input-group-prepend">
19
      <span class="input-group-text">To</span>
15
  <div class="row">
16
    <div class="col-xs-3">
17
      <div class="input-group form-group">
18
        <div class="input-group-prepend">
19
          <span class="input-group-text">From</span>
20
        </div>
21
        <p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="from" [showTime]="true" (onSelect)="showGraph()" [maxDate]="today"></p-calendar>
22
      </div>
23
    </div>
24
    <div class="col-1"></div>
25
    <div class="col-xs-3">
26
      <div class="input-group form-group">
27
        <div class="input-group-prepend">
28
          <span class="input-group-text">To</span>
29
        </div>
30
        <p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="to" [showTime]="true" (onSelect)="showGraph()" [maxDate]="today"></p-calendar>
31
      </div>
32
    </div>
33
    <div class="col-1"></div>
34
    <div *ngIf="showAggregation" class="col-xs-3">
35
      <div class="input-group form-group">
36
        <!--<div class="input-group-prepend">
37
          <span class="input-group-text">Aggregation</span>
38
        </div>-->
39
        <p-listbox [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code" (onClick)="showGraph()" ></p-listbox>
40
      </div>
20 41
    </div>
21
    <p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="to" [showTime]="true" (onSelect)="showGraph()" [maxDate]="today"></p-calendar>
22 42
  </div>
23
</div>
24
<div *ngIf="showAggregation" class="col">
25
  <div class="input-group form-group">
26
    <div class="input-group-prepend">
27
      <span class="input-group-text">Aggregation</span>
43
  <div class="row">
44
    <div class="col-10">
45
      <div id="view"></div>
28 46
    </div>
29
    <p-listbox [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code" (onClick)="showGraph()" ></p-listbox>
47
    <!--<div class="col">
48
      <div *ngIf="showAggregation" class="col">
49
        <div class="input-group form-group">
50
          <div class="input-group-prepend">
51
            <span class="input-group-text">Aggregation</span>
52
          </div>
53
          <p-listbox [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code" (onClick)="showGraph()" ></p-listbox>
54
        </div>
55
      </div>
56
    </div>-->
30 57
  </div>
31 58
</div>
32

  
33
<div id="view"></div>
src/assets/scss/_graph.scss
1
.graph {
2
  button {
3
  }
4
}
src/assets/scss/_navbar.scss
37 37
.navbar-logo {
38 38
  width: 200px;
39 39
}
40

  
41
.nav-link {
42
  cursor: pointer;
43
}
src/assets/scss/styles.scss
41 41
@import "login";
42 42
@import "navbar";
43 43
@import "dashboard";
44
@import "graph";

Také k dispozici: Unified diff