Projekt

Obecné

Profil

« Předchozí | Další » 

Revize a28c9b6e

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

Re #8972 - Ladění frontendu
+ Add styles for responsive charts
  • Improve charts layout

Zobrazit rozdíly:

src/app/dashboard/components/dashboard.component.ts
123 123
  deleteUnit($event: any, unit: Unit) {
124 124
    this.confirmationService.confirm({
125 125
      message: 'Do you want to delete this unit?',
126
      header: 'Delete Unit Confirmation',
126
      header: 'Delete unit confirmation',
127 127
      icon: 'pi pi-info-circle',
128 128
      accept: () => {
129 129
        this.processUnitDeletion(unit);
src/app/dashboard/components/sensor-insert-popup/sensor-insert-popup.component.html
1 1
<p-dialog [visible]="isVisible" [modal]="true" [closable]="false" [draggable]="false" header="Add sensor to unit&nbsp;&ndash;&nbsp;{{unit?.unitId}}"
2 2
          [baseZIndex]="10000" (onShow)="clearFormArray()" [className]="'popup-form'">
3

  
4 3
  <form [formGroup]="insertForm">
5 4
  <div class="input-group form-group popup-sensors-wrapper">
6 5
    <div formArrayName="sensors" *ngFor="let item of insertForm.get('sensors')['controls']; let i = index;">
src/app/dashboard/components/sensor-popup/sensor-popup.component.html
1
<p-dialog [visible]="isVisible" [closable]="false" [modal]="true" [draggable]="false" header="Sensor {{sensor?.sensorId}} editation!" [style]="{width: '50vw'}" [baseZIndex]="10000">
1
<p-dialog [visible]="isVisible" [closable]="false" [modal]="true" [draggable]="false" header="Sensor {{sensor?.sensorId}} editation" [baseZIndex]="10000" [className]="'popup-form'">
2 2
  <form [formGroup]="insertForm">
3
      <div class="input-group form-group">
3
      <div class="input-group form-group popup-sensors-wrapper">
4 4
        <div class="input-group-prepend">
5
          <span class="input-group-text">Sensor name</span>
5
          <span class="input-group-text"><i class="fas fa-file-signature"></i></span>
6 6
        </div>
7 7
        <input type="text" formControlName="sensorName" class="form-control" id="sensorName"
8 8
               placeholder="{{sensor.sensorName}}"/>
9 9
      </div>
10 10
      <div class="input-group form-group">
11 11
        <div class="input-group-prepend">
12
          <span class="input-group-text">Sensor type</span>
12
          <span class="input-group-text"><i class="fas fa-file-signature"></i></span>
13 13
        </div>
14 14
        <select formControlName="sensorType" id="sensorType">
15 15
          <option *ngFor="let sensorType of sensorTypes; let i = index" [value]="sensorTypes[i].sensorType">
......
19 19
      </div>
20 20
      <div class="input-group form-group">
21 21
        <div class="input-group-prepend">
22
          <span class="input-group-text">Sensor phenomen</span>
22
          <span class="input-group-text"><i class="fas fa-tint"></i></span>
23 23
        </div>
24 24
        <select formControlName="phenomenon" id="phenomenon">
25 25
          <ng-container *ngFor="let phenomenon of phenomenons; let i = index">
......
32 32
  </form>
33 33
  <p-footer>
34 34
      <div>
35
        <p-button icon="pi pi-times" (click)="close()" label="Close" class="pr-2"></p-button>
36
        <p-button icon="pi pi-check" (click)="processSensorEdition()" type="submit" label="Save" class="pr-2"></p-button>
35
        <button pButton label="Close" class="p-button-primary dark" icon="pi pi-times" (click)="close()"></button>
36
        <button pButton label="Save" class="p-button-primary dark" icon="pi pi-check" (click)="processSensorEdition()" type="submit"></button>
37 37
      </div>
38 38
  </p-footer>
39 39
</p-dialog>
src/app/dashboard/components/sensors/sensors.component.ts
71 71
  deleteSensor($event: any, sensor: Sensor) {
72 72
    this.confirmationService.confirm({
73 73
      message: 'Do you want to delete this sensor?',
74
      header: 'Delete Sensor Confirmation',
74
      header: 'Delete sensor confirmation',
75 75
      icon: 'pi pi-info-circle',
76 76
      accept: () => {
77 77
        this.processSensorDeletion(sensor);
src/app/dashboard/components/unit-popup/unit-popup.component.html
1 1
<p-dialog [visible]="isVisible" [modal]="true" [closable]="false" [draggable]="false" header="Edit unit - {{ unit?.unitId}}" [baseZIndex]="10000" [className]="'popup-form'">
2

  
3 2
  <form [formGroup]="insertForm">
4 3
    <div class="input-group form-group">
5 4
      <div class="input-group-prepend">
......
8 7
      <input type="text" formControlName="unitDescription" class="form-control" id="unitDescription" placeholder="{{unit?.description}}"/>
9 8
    </div>
10 9
  </form>
11

  
12 10
  <p-footer>
13 11
    <div class="pupup-buttons">
14 12
      <button pButton type="button" label="Close" class="p-button-primary dark" icon="pi pi-times" (click)="close()"></button>
src/app/sensor/components/sensor.component.html
25 25
      </div>
26 26
    </div>
27 27
    <div class="graph-range-dates">
28
      <div>
29
        <div class="input-group form-group">
30
          <div class="input-group-prepend">
31
            <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
32
          </div>
33
          <p-calendar id="from" [(ngModel)]="from" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>
28
      <div class="input-group form-group">
29
        <div class="input-group-prepend">
30
          <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
34 31
        </div>
32
        <p-calendar id="from" [(ngModel)]="from" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>
35 33
      </div>
36
      <div class="graph-range-dates-separator"></div>
37
      <div>
38
        <div class="input-group form-group">
39
          <div class="input-group-prepend">
40
            <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
41
          </div>
42
          <p-calendar id="to" [(ngModel)]="to" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>
43
        </div>
34
      <div class="graph-range-dates-separator">
35
        <div></div>
44 36
      </div>
45
      <div>
46
        <div class="input-group form-group">
47
          <p-listbox *ngIf="showAggregation" [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code"></p-listbox>
37
      <div class="input-group form-group">
38
        <div class="input-group-prepend">
39
          <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
48 40
        </div>
41
        <p-calendar id="to" [(ngModel)]="to" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>
49 42
      </div>
43
      <p-listbox *ngIf="showAggregation" [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code"></p-listbox>
50 44
      <div>
51
        <p-button *ngIf="dateChanged" label="Get data" icon="pi pi-chart-line" styleClass="p-button" (click)="showGraph()"></p-button>
45
        <button pButton label="Load data" *ngIf="dateChanged" class="p-button-primary" icon="pi pi-chart-line" (click)="showGraph()"></button>
52 46
      </div>
53 47
    </div>
54 48
  </div>
55
  <div class="row">
49
  <div class="graph-view-wrapper">
56 50
    <div id="view"></div>
57 51
  </div>
58 52
</div>
src/app/unit/components/unit.component.html
1 1
<app-nav-bar></app-nav-bar>
2 2

  
3 3
<div class="container graph">
4
  <div class="row graph-information">
4
  <div class="graph-information">
5 5
    <div class="graph-desc">
6 6
      <div>
7 7
        <span class="graph-attr-heading">Unit description: </span>
......
9 9
      </div>
10 10
    </div>
11 11
    <div class="graph-range-dates">
12
      <div class="col-xs-12">
13
        <div class="input-group form-group">
14
          <div class="input-group-prepend">
15
            <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
16
          </div>
17
          <p-calendar id="from" [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="from" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>
12
      <div class="input-group form-group">
13
        <div class="input-group-prepend">
14
          <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
18 15
        </div>
16
        <p-calendar id="from" [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="from" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>
19 17
      </div>
20
      <div class="graph-range-dates-separator"></div>
21
      <div class="col-xs-12">
22
        <div class="input-group form-group">
23
          <div class="input-group-prepend">
24
            <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
25
          </div>
26
          <p-calendar id="to" [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="to" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>
27
        </div>
18
      <div class="graph-range-dates-separator">
19
        <div></div>
28 20
      </div>
29
      <div class="">
30
        <div class="input-group form-group">
31
          <div class="input-group form-group">
32
            <p-listbox *ngIf="showAggregation" [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code"></p-listbox>
33
          </div>
21
      <div class="input-group form-group">
22
        <div class="input-group-prepend">
23
          <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
34 24
        </div>
25
        <p-calendar id="to" [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="to" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>
35 26
      </div>
27
      <p-listbox *ngIf="showAggregation" [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code"></p-listbox>
36 28
      <div>
37
        <button pButton type="button" *ngIf="dateChanged" label="Load data" class="p-button-primary" icon="pi pi-check" (click)="showGraph()"></button>
29
        <button pButton type="button" *ngIf="dateChanged" label="Load data" class="p-button-primary" icon="pi pi-chart-line" (click)="showGraph()"></button>
38 30
      </div>
39 31
    </div>
40 32
  </div>
41
  <ng-container *ngFor="let group of sensorGroups">
42
    <div class="row">
43
      <div class="graph-group-heading">
44
        Group of
45
        <ng-container *ngFor="let sensorType of sensorTypes">
46
          <ng-container *ngIf="sensorType.sensorId.toString().slice(0, 5) === group">
47
            {{sensorType.sensorType}}
33
  <div class="graph-view-wrapper">
34
    <ng-container *ngFor="let group of sensorGroups">
35
      <div class="row">
36
        <div class="graph-group-heading">
37
          Group of
38
          <ng-container *ngFor="let sensorType of sensorTypes">
39
            <ng-container *ngIf="sensorType.sensorId.toString().slice(0, 5) === group">
40
              {{sensorType.sensorType}}
41
            </ng-container>
48 42
          </ng-container>
49
        </ng-container>
50
        sensors:
51
      </div>
52
      <ng-container *ngFor="let sensor of sensors">
43
          sensors:
44
        </div>
45
        <ng-container *ngFor="let sensor of sensors">
53 46
          <div *ngIf="sensor.sensorId.toString().slice(0, 5) === group" class="p-field-checkbox">
54 47
            <p-checkbox [id]="sensor.sensorId" name="{{group}}" [value]="sensor.sensorId.toString()" [(ngModel)]="selectedSensors" [inputId]="sensor.sensorId.toString()" (onChange)="addSensorToGraph(sensor.sensorId.toString(), $event)"></p-checkbox>
55 48
            <label>{{sensor.sensorName}}</label>
56 49
          </div>
57
      </ng-container>
58
    </div>
59
    <div id="vega_container_{{group}}"></div>
60
  </ng-container>
50
        </ng-container>
51
      </div>
52
      <div id="vega_container_{{group}}"></div>
53
    </ng-container>
54
  </div>
61 55
</div>
src/assets/scss/_graph.scss
10 10

  
11 11
  .input-group {
12 12
    margin: 0;
13
    width: auto;
14

  
15
    @include media-breakpoint-down(sm) {
16
      justify-content: center;
17
      width: 100%;
18
    }
13 19
  }
14 20

  
15 21
  .input-group-text {
......
34 40
    border-color: $primary;
35 41
    background: $white;
36 42

  
43
    @include media-breakpoint-down(md) {
44
      margin-top: 10px;
45
    }
46

  
37 47
    .p-listbox-item {
38 48
      color: #0B1226;
39 49

  
......
79 89
.graph-desc {
80 90
  width: 100%;
81 91
  padding: 10px;
82
  font-size: $h3-font-size;
92
  font-size: 18px;
93

  
94
  @include media-breakpoint-down(xs) {
95
    font-size: 16px;
96
  }
83 97
}
84 98

  
85 99
.graph-attr-heading {
......
91 105
  display: flex;
92 106
  align-items: center;
93 107
  justify-content: flex-start;
108
  flex-wrap: wrap;
94 109
  margin-top: $grid-gutter-width;
95 110
  margin-bottom: $grid-gutter-width;
96 111
  padding: 10px $grid-gutter-width;
112

  
113
  @include media-breakpoint-down(md) {
114
    justify-content: center;
115
    padding-left: 10px;
116
    padding-right: 10px;
117
  }
97 118
}
98 119

  
99 120
.graph-range-dates-separator {
100
  @include size(10px,2px);
101
  margin: 0 10px;
102
  background: #0B1226;
121
  display: flex;
122
  align-items: center;
123
  justify-content: center;
124
  height: 42px;
125

  
126
  @include media-breakpoint-down(sm) {
127
    width: 100%;
128
  }
129

  
130
  div {
131
    @include size(15px,2px);
132
    margin: 0 10px;
133
    background: #0B1226;
134
  }
103 135
}
104 136

  
105 137
.graph-group-heading {
106 138
  font-weight: $font-weight-bold;
107 139
  line-height: 2;
108 140
}
141

  
142
.graph-view-wrapper {
143
  padding-left: $grid-gutter-width / 2;
144
  padding-right: $grid-gutter-width / 2;
145

  
146
  @include media-breakpoint-down(lg) {
147
    overflow-x: scroll;
148
  }
149
}
src/assets/scss/_popup-form.scss
20 20
  }
21 21

  
22 22
  .p-dialog {
23
    width: 100vw;
23
    width: 100%;
24 24

  
25 25
    @include media-breakpoint-up(md) {
26
      width: 50vw;
26
      width: 800px;
27 27
    }
28 28

  
29 29
    .p-dialog-header, .p-dialog-content, .p-dialog-footer {

Také k dispozici: Unified diff