Revize 25a20eec

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

+ endpoint calls with dynamic params

src/app/dashboard/components/dashboard.component.html

@@ -1 +1 @@
 <app-nav-bar></app-nav-bar>
 
-<!--<div *ngFor="let unit of units">
-  <div class="row">
-    <div class="col">
-      <b>{{ unit.unit.description }}</b>
-    </div>
-    <div class="col">
-      <b>{{ unit.unit.unitId }}</b>
-    </div>
-  </div>
-  <div *ngFor="let sensor of unit.sensors">
-    &lt;!&ndash;{{ sensor | json}}&ndash;&gt;
-    <div class="row">
-      <div class="col">
-        {{ sensor.sensorName }}
-      </div>
-      <div class="col">
-        {{ sensor.sensorId }}
-      </div>
-      <div class="col">
-        <p-button [routerLink]="['/dashboard/unit', unit.unit.unitId, 'sensor', sensor.sensorId]" title="Sensor" icon="pi pi-chart-line"></p-button>
-      </div>
-    </div>
-  </div>
-</div>-->
 <div class="container">
 <p-accordion>
     <p-accordionTab *ngFor="let unit of units">
       <p-header>
         <div class="flex-1 row align-items-center">
-          <div class="col-4">{{ unit.unit.description}}</div>
-          <div class="col-4"></div>
+          <div class="col-4">{{ unit.unit.description }} | {{ unit.unit.unitId}}</div>
+          <div class="col-4">
+            <p-button [routerLink]="['/dashboard/unit', unit.unit.unitId]" title="Sensor" icon="pi pi-chart-line"></p-button>
+          </div>
           <div class="col-4">
             <p-button icon="pi pi-cog" (onClick)="editUnit($event, unit.unit)"></p-button>
           </div>
@@ -43 +21 @@
 </p-accordion>
 </div>
 
-<app-edit-popup [(isVisible)]="showUnitPopup" [unit]="editedUnit"></app-edit-popup>
+<app-unit-popup [(isVisible)]="showUnitPopup" [unit]="editedUnit"></app-unit-popup>

src/app/dashboard/components/dashboard.component.ts

@@ -37 +37 @@
     console.log('Get Groups');
     this.groupService.getGroups({Operation: 'GetGroups'}).pipe(
       tap(data => this.groups = data)
-    ).toPromise();
+    ).subscribe();
   }
 
   getUnits() {
     this.dataService.getData().pipe(
-      tap(data => this.units = data)
-    ).toPromise()
+      tap(data => {
+        this.units = data;
+        this.units.forEach(unit => unit.sensors.sort((a, b)  => a.sensorId - b.sensorId));
+      })
+    ).subscribe();
   }
 
   editUnit($event: MouseEvent, unit: Unit) {

src/app/dashboard/components/sensors/sensors.component.html

@@ -1 +1 @@
 
 <div class="row">
   <div class="col">
-    {{ sensor.sensorName }}
+    {{ sensor.sensorName }} | {{ sensor.sensorId }}
   </div>
   <div class="col">
   </div>

src/app/dashboard/components/unit-popup/unit-popup.component.ts

@@ -1 +1 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 
 @Component({
-  selector: 'app-edit-popup',
+  selector: 'app-unit-popup',
   templateUrl: './unit-popup.component.html',
   styleUrls: ['./unit-popup.component.scss']
 })

src/app/sensor/components/sensor.component.html

@@ -4 +4 @@
 <br>
 Unit ID {{unitId}}
 <br>
-<br>
 
+<div class="row">
+  <div class="col">
+    <p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="rangeDates" selectionMode="range" [showTime]="true" [numberOfMonths]="3" (onSelect)="showGraph()"></p-calendar>
+  </div>
+  <div class="col">
+    <p-listbox [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code" (onClick)="showGraph()"></p-listbox>
+  </div>
+</div>
 
+<div id="view"></div>
 
 <div *ngFor="let observation of observations">
   {{ observation | json}}
   <br>
 </div>
-
-<div id="view">
-
-</div>

src/app/sensor/components/sensor.component.ts

@@ -1 +1 @@
 import { Component, OnInit } from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
-import {ObservationService} from '../../shared/api/endpoints/services/observation.service';
-import {tap} from 'rxjs/operators';
 import {Observation} from '../../shared/api/endpoints/models/observation';
 import * as moment from 'moment-timezone';
+import {AnalyticsService} from '../../shared/api/endpoints/services/analytics.service';
+import {AggreationModel} from '../../shared/models/aggreation.model';
 
 declare var require: any
 
@@ -19 +19 @@
   observations: Observation[];
   data = [];
   time = [];
+  rangeDates: Date[];
+  aggregationFunction: AggreationModel[];
+  selectedAggregationFunction: string;
 
   constructor(
     private activatedRoute: ActivatedRoute,
-    private observationService: ObservationService
+    private analyticsService: AnalyticsService
   ) {
     this.sensorId = parseInt(this.activatedRoute.snapshot.paramMap.get('sensorId'), 10);
     this.unitId = parseInt(this.activatedRoute.snapshot.paramMap.get('unitId'), 10);
+    this.aggregationFunction = [
+      {name: 'Hour', code: 'HOUR'},
+      {name: 'Day', code: 'DAY'},
+      {name: 'Month', code: 'MONTH'},
+      {name: 'Year', code: 'YEAR'}
+    ];
   }
 
   ngOnInit(): void {
-    // this.getObservations();
-    // this.getLongQueriesBySourceData();
     this.showGraph();
   }
 
-  getObservations(){
-    this.observationService.getObservation({unit_id: this.unitId, sensor_id: this.sensorId}).pipe(
-      tap(data => this.observations = data)
-    ).toPromise();
-  }
-
-  getLongQueriesBySourceData() {
-    this.observationService.getObservation({
-      unit_id: this.unitId,
-      sensor_id: this.sensorId,
-      from: '2020-01-01 00:00:00+02',
-      to: '2021-01-01 00:00:00+02'
-    }).subscribe(
-      observations => {
-        // this.observations = observations;
-        this.observations = observations.sort((a, b) => moment(a.time).unix() - moment(b.time).unix());
-        console.log(this.observations);
-        const tz = moment.tz.guess(true);
-        this.observations.forEach(observation => {
-          this.data.push(observation.value);
-          this.time.push(moment(observation.time).tz(tz).format('yyyy-MM-DD hh:mm'))
-        });
-        console.log(this.time);
-        console.log(this.data);
-      }
-    );
-  }
-
   showGraph() {
+    let agg = 'HOUR';
+    let range: Date[] = [moment().subtract(12, 'months').toDate(), moment().toDate()];
     const vega = require('vega');
     const spec = require('/src/vega/data.json');
-
-    this.observationService.getObservation({
+/*    this.observationService.getObservation({
       unit_id: this.unitId,
       sensor_id: this.sensorId,
       from: '2020-01-01 00:00:00+02',
@@ -80 +60 @@
           container: '#view',
           hover: 'true'}).runAsync();
 
-      }
-    )
-
-
-
-
-
+      }*/
 
+    if (this.selectedAggregationFunction) {
+      agg = this.selectedAggregationFunction;
+    }
 
+    if (this.rangeDates) {
+      range = this.rangeDates;
+    }
 
+    this.analyticsService.getAnalytics({unit_id: this.unitId, sensor_id: this.sensorId,
+      from: moment(range[0]).format('yyyy-MM-DD HH:mm:ssZ').slice(0, -3),
+      to: moment(range[1]).format('yyyy-MM-DD HH:mm:ssZ').slice(0, -3), interval: agg}).subscribe(
+      observations => {
+        if (observations){
+          spec.data[0].values = observations[this.sensorId].data;
+        } else {
+          spec.data[0].values = null;
+        }
 
+        const view = new vega.View(vega.parse(spec), {
+          renderer: 'canvas',
+          container: '#view',
+          hover: 'true'}).runAsync();
+      }
+    )
 
 
   }
-
 }

src/app/sensor/sensor.module.ts

@@ -2 +2 @@
 import { CommonModule } from '@angular/common';
 import { SensorComponent } from './components/sensor.component';
 import {NavBarModule} from '../shared/nav-bar/nav-bar.module';
+import {CalendarModule} from 'primeng/calendar';
+import {FormsModule} from '@angular/forms';
+import {ListboxModule} from 'primeng/listbox';
 
 
 
@@ -9 +12 @@
   declarations: [SensorComponent],
   imports: [
     CommonModule,
-    NavBarModule
+    NavBarModule,
+    CalendarModule,
+    FormsModule,
+    ListboxModule
   ]
 })
 export class SensorModule { }