Revize 25a20eec
Přidáno uživatelem Jakub Hlaváč před téměř 4 roky(ů)
src/app/dashboard/components/dashboard.component.html | ||
---|---|---|
1 | 1 |
<app-nav-bar></app-nav-bar> |
2 | 2 |
|
3 |
<!--<div *ngFor="let unit of units"> |
|
4 |
<div class="row"> |
|
5 |
<div class="col"> |
|
6 |
<b>{{ unit.unit.description }}</b> |
|
7 |
</div> |
|
8 |
<div class="col"> |
|
9 |
<b>{{ unit.unit.unitId }}</b> |
|
10 |
</div> |
|
11 |
</div> |
|
12 |
<div *ngFor="let sensor of unit.sensors"> |
|
13 |
<!–{{ sensor | json}}–> |
|
14 |
<div class="row"> |
|
15 |
<div class="col"> |
|
16 |
{{ sensor.sensorName }} |
|
17 |
</div> |
|
18 |
<div class="col"> |
|
19 |
{{ sensor.sensorId }} |
|
20 |
</div> |
|
21 |
<div class="col"> |
|
22 |
<p-button [routerLink]="['/dashboard/unit', unit.unit.unitId, 'sensor', sensor.sensorId]" title="Sensor" icon="pi pi-chart-line"></p-button> |
|
23 |
</div> |
|
24 |
</div> |
|
25 |
</div> |
|
26 |
</div>--> |
|
27 | 3 |
<div class="container"> |
28 | 4 |
<p-accordion> |
29 | 5 |
<p-accordionTab *ngFor="let unit of units"> |
30 | 6 |
<p-header> |
31 | 7 |
<div class="flex-1 row align-items-center"> |
32 |
<div class="col-4">{{ unit.unit.description}}</div> |
|
33 |
<div class="col-4"></div> |
|
8 |
<div class="col-4">{{ unit.unit.description }} | {{ unit.unit.unitId}}</div> |
|
9 |
<div class="col-4"> |
|
10 |
<p-button [routerLink]="['/dashboard/unit', unit.unit.unitId]" title="Sensor" icon="pi pi-chart-line"></p-button> |
|
11 |
</div> |
|
34 | 12 |
<div class="col-4"> |
35 | 13 |
<p-button icon="pi pi-cog" (onClick)="editUnit($event, unit.unit)"></p-button> |
36 | 14 |
</div> |
... | ... | |
43 | 21 |
</p-accordion> |
44 | 22 |
</div> |
45 | 23 |
|
46 |
<app-edit-popup [(isVisible)]="showUnitPopup" [unit]="editedUnit"></app-edit-popup> |
|
24 |
<app-unit-popup [(isVisible)]="showUnitPopup" [unit]="editedUnit"></app-unit-popup> |
src/app/dashboard/components/dashboard.component.ts | ||
---|---|---|
37 | 37 |
console.log('Get Groups'); |
38 | 38 |
this.groupService.getGroups({Operation: 'GetGroups'}).pipe( |
39 | 39 |
tap(data => this.groups = data) |
40 |
).toPromise();
|
|
40 |
).subscribe();
|
|
41 | 41 |
} |
42 | 42 |
|
43 | 43 |
getUnits() { |
44 | 44 |
this.dataService.getData().pipe( |
45 |
tap(data => this.units = data) |
|
46 |
).toPromise() |
|
45 |
tap(data => { |
|
46 |
this.units = data; |
|
47 |
this.units.forEach(unit => unit.sensors.sort((a, b) => a.sensorId - b.sensorId)); |
|
48 |
}) |
|
49 |
).subscribe(); |
|
47 | 50 |
} |
48 | 51 |
|
49 | 52 |
editUnit($event: MouseEvent, unit: Unit) { |
src/app/dashboard/components/sensors/sensors.component.html | ||
---|---|---|
1 | 1 |
|
2 | 2 |
<div class="row"> |
3 | 3 |
<div class="col"> |
4 |
{{ sensor.sensorName }} |
|
4 |
{{ sensor.sensorName }} | {{ sensor.sensorId }}
|
|
5 | 5 |
</div> |
6 | 6 |
<div class="col"> |
7 | 7 |
</div> |
src/app/dashboard/components/unit-popup/unit-popup.component.ts | ||
---|---|---|
1 | 1 |
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; |
2 | 2 |
|
3 | 3 |
@Component({ |
4 |
selector: 'app-edit-popup',
|
|
4 |
selector: 'app-unit-popup',
|
|
5 | 5 |
templateUrl: './unit-popup.component.html', |
6 | 6 |
styleUrls: ['./unit-popup.component.scss'] |
7 | 7 |
}) |
src/app/sensor/components/sensor.component.html | ||
---|---|---|
4 | 4 |
<br> |
5 | 5 |
Unit ID {{unitId}} |
6 | 6 |
<br> |
7 |
<br> |
|
8 | 7 |
|
8 |
<div class="row"> |
|
9 |
<div class="col"> |
|
10 |
<p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="rangeDates" selectionMode="range" [showTime]="true" [numberOfMonths]="3" (onSelect)="showGraph()"></p-calendar> |
|
11 |
</div> |
|
12 |
<div class="col"> |
|
13 |
<p-listbox [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code" (onClick)="showGraph()"></p-listbox> |
|
14 |
</div> |
|
15 |
</div> |
|
9 | 16 |
|
17 |
<div id="view"></div> |
|
10 | 18 |
|
11 | 19 |
<div *ngFor="let observation of observations"> |
12 | 20 |
{{ observation | json}} |
13 | 21 |
<br> |
14 | 22 |
</div> |
15 |
|
|
16 |
<div id="view"> |
|
17 |
|
|
18 |
</div> |
src/app/sensor/components/sensor.component.ts | ||
---|---|---|
1 | 1 |
import { Component, OnInit } from '@angular/core'; |
2 | 2 |
import {ActivatedRoute} from '@angular/router'; |
3 |
import {ObservationService} from '../../shared/api/endpoints/services/observation.service'; |
|
4 |
import {tap} from 'rxjs/operators'; |
|
5 | 3 |
import {Observation} from '../../shared/api/endpoints/models/observation'; |
6 | 4 |
import * as moment from 'moment-timezone'; |
5 |
import {AnalyticsService} from '../../shared/api/endpoints/services/analytics.service'; |
|
6 |
import {AggreationModel} from '../../shared/models/aggreation.model'; |
|
7 | 7 |
|
8 | 8 |
declare var require: any |
9 | 9 |
|
... | ... | |
19 | 19 |
observations: Observation[]; |
20 | 20 |
data = []; |
21 | 21 |
time = []; |
22 |
rangeDates: Date[]; |
|
23 |
aggregationFunction: AggreationModel[]; |
|
24 |
selectedAggregationFunction: string; |
|
22 | 25 |
|
23 | 26 |
constructor( |
24 | 27 |
private activatedRoute: ActivatedRoute, |
25 |
private observationService: ObservationService
|
|
28 |
private analyticsService: AnalyticsService
|
|
26 | 29 |
) { |
27 | 30 |
this.sensorId = parseInt(this.activatedRoute.snapshot.paramMap.get('sensorId'), 10); |
28 | 31 |
this.unitId = parseInt(this.activatedRoute.snapshot.paramMap.get('unitId'), 10); |
32 |
this.aggregationFunction = [ |
|
33 |
{name: 'Hour', code: 'HOUR'}, |
|
34 |
{name: 'Day', code: 'DAY'}, |
|
35 |
{name: 'Month', code: 'MONTH'}, |
|
36 |
{name: 'Year', code: 'YEAR'} |
|
37 |
]; |
|
29 | 38 |
} |
30 | 39 |
|
31 | 40 |
ngOnInit(): void { |
32 |
// this.getObservations(); |
|
33 |
// this.getLongQueriesBySourceData(); |
|
34 | 41 |
this.showGraph(); |
35 | 42 |
} |
36 | 43 |
|
37 |
getObservations(){ |
|
38 |
this.observationService.getObservation({unit_id: this.unitId, sensor_id: this.sensorId}).pipe( |
|
39 |
tap(data => this.observations = data) |
|
40 |
).toPromise(); |
|
41 |
} |
|
42 |
|
|
43 |
getLongQueriesBySourceData() { |
|
44 |
this.observationService.getObservation({ |
|
45 |
unit_id: this.unitId, |
|
46 |
sensor_id: this.sensorId, |
|
47 |
from: '2020-01-01 00:00:00+02', |
|
48 |
to: '2021-01-01 00:00:00+02' |
|
49 |
}).subscribe( |
|
50 |
observations => { |
|
51 |
// this.observations = observations; |
|
52 |
this.observations = observations.sort((a, b) => moment(a.time).unix() - moment(b.time).unix()); |
|
53 |
console.log(this.observations); |
|
54 |
const tz = moment.tz.guess(true); |
|
55 |
this.observations.forEach(observation => { |
|
56 |
this.data.push(observation.value); |
|
57 |
this.time.push(moment(observation.time).tz(tz).format('yyyy-MM-DD hh:mm')) |
|
58 |
}); |
|
59 |
console.log(this.time); |
|
60 |
console.log(this.data); |
|
61 |
} |
|
62 |
); |
|
63 |
} |
|
64 |
|
|
65 | 44 |
showGraph() { |
45 |
let agg = 'HOUR'; |
|
46 |
let range: Date[] = [moment().subtract(12, 'months').toDate(), moment().toDate()]; |
|
66 | 47 |
const vega = require('vega'); |
67 | 48 |
const spec = require('/src/vega/data.json'); |
68 |
|
|
69 |
this.observationService.getObservation({ |
|
49 |
/* this.observationService.getObservation({ |
|
70 | 50 |
unit_id: this.unitId, |
71 | 51 |
sensor_id: this.sensorId, |
72 | 52 |
from: '2020-01-01 00:00:00+02', |
... | ... | |
80 | 60 |
container: '#view', |
81 | 61 |
hover: 'true'}).runAsync(); |
82 | 62 |
|
83 |
} |
|
84 |
) |
|
85 |
|
|
86 |
|
|
87 |
|
|
88 |
|
|
89 |
|
|
63 |
}*/ |
|
90 | 64 |
|
65 |
if (this.selectedAggregationFunction) { |
|
66 |
agg = this.selectedAggregationFunction; |
|
67 |
} |
|
91 | 68 |
|
69 |
if (this.rangeDates) { |
|
70 |
range = this.rangeDates; |
|
71 |
} |
|
92 | 72 |
|
73 |
this.analyticsService.getAnalytics({unit_id: this.unitId, sensor_id: this.sensorId, |
|
74 |
from: moment(range[0]).format('yyyy-MM-DD HH:mm:ssZ').slice(0, -3), |
|
75 |
to: moment(range[1]).format('yyyy-MM-DD HH:mm:ssZ').slice(0, -3), interval: agg}).subscribe( |
|
76 |
observations => { |
|
77 |
if (observations){ |
|
78 |
spec.data[0].values = observations[this.sensorId].data; |
|
79 |
} else { |
|
80 |
spec.data[0].values = null; |
|
81 |
} |
|
93 | 82 |
|
83 |
const view = new vega.View(vega.parse(spec), { |
|
84 |
renderer: 'canvas', |
|
85 |
container: '#view', |
|
86 |
hover: 'true'}).runAsync(); |
|
87 |
} |
|
88 |
) |
|
94 | 89 |
|
95 | 90 |
|
96 | 91 |
} |
97 |
|
|
98 | 92 |
} |
src/app/sensor/sensor.module.ts | ||
---|---|---|
2 | 2 |
import { CommonModule } from '@angular/common'; |
3 | 3 |
import { SensorComponent } from './components/sensor.component'; |
4 | 4 |
import {NavBarModule} from '../shared/nav-bar/nav-bar.module'; |
5 |
import {CalendarModule} from 'primeng/calendar'; |
|
6 |
import {FormsModule} from '@angular/forms'; |
|
7 |
import {ListboxModule} from 'primeng/listbox'; |
|
5 | 8 |
|
6 | 9 |
|
7 | 10 |
|
... | ... | |
9 | 12 |
declarations: [SensorComponent], |
10 | 13 |
imports: [ |
11 | 14 |
CommonModule, |
12 |
NavBarModule |
|
15 |
NavBarModule, |
|
16 |
CalendarModule, |
|
17 |
FormsModule, |
|
18 |
ListboxModule |
|
13 | 19 |
] |
14 | 20 |
}) |
15 | 21 |
export class SensorModule { } |
Také k dispozici: Unified diff
Re #8678 - Implementace dynamického dotazování
+ endpoint calls with dynamic params