Projekt

Obecné

Profil

« Předchozí | Další » 

Revize c5edcbf5

Přidáno uživatelem Lukáš Moučka před téměř 4 roky(ů)

Re #8875 - Stylování sekce s grafy
+ Add styles for charts

Zobrazit rozdíly:

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

  
3
<div class="container">
4
  <div class="row-2">
5
    <h5><span class="text-color-sensor-unit">Unit description: {{unitDescription}}</span></h5>
3
<div class="container graph">
4
  <div class="row graph-desc">
5
    <div class="col-12">
6
      <span class="graph-attr-heading">Unit description: </span>
7
      {{unitDescription}}
8
    </div>
6 9
  </div>
7
  <div class="row">
8
    <div class="col">
10
  <div class="row graph-range-dates">
11
    <div>
9 12
      <div class="input-group form-group">
10 13
        <div class="input-group-prepend">
11
          <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i>From</span>
14
          <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
12 15
        </div>
13 16
        <p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="from" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>
14 17
      </div>
15 18
    </div>
16
    <div class="col">
19
    <div class="graph-range-dates-separator"></div>
20
    <div>
17 21
      <div class="input-group form-group">
18 22
        <div class="input-group-prepend">
19
          <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i>To</span>
23
          <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
20 24
        </div>
21 25
        <p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="to" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>
22 26
      </div>
23 27
    </div>
24
    <div class="col">
28
    <div>
25 29
      <div class="input-group form-group">
26 30
        <div class="input-group form-group">
27 31
          <p-listbox *ngIf="showAggregation" [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code"></p-listbox>
28 32
        </div>
29 33
      </div>
30 34
    </div>
31
    <div class="col-xs-3">
32
      <p-button *ngIf="dateChanged" label="Get data" icon="pi pi-cog" styleClass="p-button-success" (click)="showGraph()"></p-button>
35
    <div>
36
      <p-button *ngIf="dateChanged" label="Get data" icon="pi pi-cog" styleClass="p-button" (click)="showGraph()"></p-button>
33 37
    </div>
34 38
  </div>
35 39

  
36 40
  <ng-container *ngFor="let group of sensorGroups">
37 41
    <div class="row">
38
    Group of
39
    <ng-container *ngFor="let sensorType of sensorTypes">
40
      <ng-container *ngIf="sensorType.sensorId.toString().slice(0, 5) === group">
41
        {{sensorType.sensorType}}
42
      </ng-container>
43
    </ng-container>
44
      sensors:
42
      <div class="graph-group-heading">
43
        Group of
44
        <ng-container *ngFor="let sensorType of sensorTypes">
45
          <ng-container *ngIf="sensorType.sensorId.toString().slice(0, 5) === group">
46
            {{sensorType.sensorType}}
47
          </ng-container>
48
        </ng-container>
49
        sensors:
50
      </div>
45 51
      <ng-container *ngFor="let sensor of sensors">
46 52
          <div *ngIf="sensor.sensorId.toString().slice(0, 5) === group" class="p-field-checkbox">
47 53
            <p-checkbox name="{{group}}" [value]="sensor.sensorId.toString()" [(ngModel)]="selectedSensors" [inputId]="sensor.sensorId.toString()" (onChange)="addSensorToGraph(sensor.sensorId.toString(), $event)"></p-checkbox>

Také k dispozici: Unified diff