Projekt

Obecné

Profil

« Předchozí | Další » 

Revize 25a20eec

Přidáno uživatelem Jakub Hlaváč před téměř 4 roky(ů)

Re #8678 - Implementace dynamického dotazování

+ endpoint calls with dynamic params

Zobrazit rozdíly:

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
    &lt;!&ndash;{{ sensor | json}}&ndash;&gt;
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