Revize a28c9b6e
Přidáno uživatelem Lukáš Moučka před téměř 4 roky(ů)
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 – {{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
+ Add styles for responsive charts