Revize f3995ee4

Re #8915 - Zapracování požadavků ze schůzky

• get new data on button action
  + show all information of sensor and unit

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

@@ -19 +19 @@
             <ng-container *ngIf="i > 0 && unit.sensors[i].sensorId.toString().slice(0, 5) !== unit.sensors[i-1].sensorId.toString().slice(0, 5)">
               <hr>
             </ng-container>
-            <app-sensors *ngIf="sensor" [sensor]="sensor" [unitId]="unit.unit.unitId" [phenomenons]="phenomenons" [loggedUser]="loggedUser" (emitSensorDeletion)="deleteSensor(unit.unit.unitId, $event)" [sensorTypes]="sensorTypes"></app-sensors>
+            <app-sensors *ngIf="sensor" [sensor]="sensor" [unit]="unit.unit" [phenomenons]="phenomenons" [loggedUser]="loggedUser" (emitSensorDeletion)="deleteSensor(unit.unit.unitId, $event)" [sensorTypes]="sensorTypes"></app-sensors>
           </ng-container>
         </div>
       </p-accordionTab>

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

@@ -5 +5 @@
     </div>
   </div>
   <div class="col-md-7 text-right">
-    <button pButton type="button" label="View graph" [routerLink]="['/dashboard/unit', unitId, 'sensor', sensor.sensorId]" title="Sensor" icon="pi pi-chart-line"></button>
+    <button pButton type="button" label="View graph" [routerLink]="['/dashboard/unit', unit.unitId, 'sensor', sensor.sensorId]" [queryParams]="{unitName: unit.description}" title="Sensor" icon="pi pi-chart-line"></button>
     <ng-container *ngIf="loggedUser?.userInfo?.rightsId == 0 || loggedUser?.userInfo?.rightsId == 1">
       <div class="dashboard-button-separator"></div>
       <button pButton type="button" label="Edit sensor" icon="pi pi-cog" (click)="editSensor($event, sensor)" [className]="'p-button-warning'"></button>
@@ -14 +14 @@
   </div>
 </div>
 
-<app-sensor-popup *ngIf="editedSensor" [(isVisible)]="showSensorPopup" [sensor]="editedSensor" [phenomenons]="phenomenons" [unitId]="unitId" [sensorTypes]="sensorTypes"></app-sensor-popup>
+<app-sensor-popup *ngIf="editedSensor" [(isVisible)]="showSensorPopup" [sensor]="editedSensor" [phenomenons]="phenomenons" [unitId]="unit.unitId" [sensorTypes]="sensorTypes"></app-sensor-popup>

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

@@ -7 +7 @@
 import {ToastService} from '../../../shared/services/toast.service';
 import {User} from '../../../auth/models/user';
 import {SensorType} from '../../../shared/api/endpoints/models/sensor-type';
+import {Unit} from '../../../shared/api/endpoints/models/unit';
 
 @Component({
   selector: 'app-sensors',
@@ -16 +17 @@
 export class SensorsComponent implements OnInit {
 
   @Input() sensor: Sensor;
-  @Input() unitId: number;
+  @Input() unit: Unit;
   @Input() phenomenons;
   @Input() loggedUser: User;
   @Output() emitSensorDeletion: EventEmitter<Sensor> = new EventEmitter<Sensor>();
@@ -56 +57 @@
   processSensorDeletion(sensor: Sensor) {
     this.managementService.deleteSensor$Response({body: {
       unit: {
-        unit_id: this.unitId
+        unit_id: this.unit.unitId
       },
         sensors: [
           {

src/app/sensor/components/dummysensor.json

@@ -1 @@
-[
-  {
-    "firstObservationTime": "2019-03-07 06:10:16+02",
-    "lastObservationTime": "2021-05-12 18:00:06+03",
-    "phenomenon": {
-      "phenomenonId": "1",
-      "phenomenonName": "Temperature",
-      "unit": "°C"
-    },
-    "sensorId": 340400000,
-    "sensorName": "iMetos HC Air temp",
-    "sensorType": "Thermometer"
-  }
-]

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

@@ -3 +3 @@
 <div class="container graph">
   <div class="row-2">
     <div class="col-xs-3">
-      <h5><span class="text-color-sensor-unit">Sensor ID: {{sensorId}}</span></h5>
+      <h5><span class="text-color-sensor-unit">Unit name: <a [routerLink]="['/dashboard/unit', unitId]">{{unitName}}</a></span></h5>
     </div>
-    <div class="col-1"></div>
     <div class="col-xs-3">
-      <h5><span class="text-color-sensor-unit">Unit ID: <a [routerLink]="['/dashboard/unit', unitId]">{{unitId}}</a></span></h5>
+      <h5><span class="text-color-sensor-unit">Sensor name: {{sensor?.sensorName}}</span></h5>
+    </div>
+    <div class="col-xs-3">
+      <h5><span class="text-color-sensor-unit">Sensor type: {{sensor?.sensorType}}</span></h5>
+    </div>
+    <div class="col-xs-3">
+      <h5><span class="text-color-sensor-unit">Phenomenon: {{sensor?.phenomenon?.phenomenonName}} ({{sensor?.phenomenon?.unit}})</span></h5>
     </div>
-    <div class="col-1"></div>
   </div>
   <div class="row">
     <div class="col-xs-3">
@@ -17 +21 @@
         <div class="input-group-prepend">
           <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i>From</span>
         </div>
-        <p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="from" [showTime]="true" (onSelect)="showGraph()" [maxDate]="today" showButtonBar="true"></p-calendar>
+        <p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="from" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>
       </div>
     </div>
     <div class="col-1"></div>
@@ -26 +30 @@
         <div class="input-group-prepend">
           <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i>To</span>
         </div>
-        <p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="to" [showTime]="true" (onSelect)="showGraph()" [maxDate]="today" showButtonBar="true"></p-calendar>
+        <p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="to" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>
       </div>
     </div>
     <div class="col-1"></div>
@@ -35 +39 @@
         <!--<div class="input-group-prepend">
           <span class="input-group-text">Aggregation</span>
         </div>-->
-        <p-listbox [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code" (onClick)="showGraph()" ></p-listbox>
+        <p-listbox [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code"></p-listbox>
       </div>
     </div>
+    <div class="col-1"></div>
+    <div class="col-xs-3">
+      <p-button *ngIf="dateChanged" label="Get data" icon="pi pi-cog" styleClass="p-button-success" (click)="showGraph()"></p-button>
+    </div>
   </div>
   <div class="row">
     <div class="col-10">

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

@@ -11 +11 @@
 import {Sensor} from '../../shared/api/endpoints/models/sensor';
 import {SensorsService} from '../../shared/api/endpoints/services/sensors.service';
 
-declare var require: any
-
 @Component({
   selector: 'app-sensor',
   templateUrl: './sensor.component.html',
@@ -27 +25 @@
   unitId: number;
   data = [];
   time = [];
-  from: Date;
-  to: Date;
-  today: Date;
+  from: Date = moment().hour(0).minutes(0).subtract(7, 'days').toDate();
+  to: Date = moment().toDate();
   showAggregation = false;
   aggregationFunction: AggregationModel[];
   selectedAggregationFunction = 'HOUR';
   sensor: Sensor;
+  dateChanged = false;
+  unitName: string;
+  today: Date = moment().toDate();
 
   constructor(
     private activatedRoute: ActivatedRoute,
     private analyticsService: AnalyticsService,
     private observationService: ObservationService,
     private toastService: ToastService,
-    private sensorsService: SensorsService
+    private sensorsService: SensorsService,
+    private route: ActivatedRoute,
   ) {
+    this.getInitData();
+    this.sensorsService.getUnitSensors({unit_id: this.unitId}).subscribe(sensors => {
+      if (sensors) {
+        this.sensor = sensors.filter(value => value.sensorId === this.sensorId)[0];
+        this.showGraph(); // show default graph
+      }
+    });
+  }
+
+  /**
+   * Sets up default data
+   */
+  getInitData() {
+    this.route.queryParams.subscribe(params => {
+      if(params.unitName)  {
+        this.unitName = params.unitName;
+      }
+    });
     this.sensorId = parseInt(this.activatedRoute.snapshot.paramMap.get('sensorId'), 10);
     this.unitId = parseInt(this.activatedRoute.snapshot.paramMap.get('unitId'), 10);
     this.aggregationFunction = [
@@ -50 +69 @@
       {name: 'Month', code: 'MONTH'},
       {name: 'Year', code: 'YEAR'}
     ];
-    this.today = moment().toDate();
   }
 
   ngOnInit(): void {
-    this.sensorsService.getUnitSensors({unit_id: this.unitId}).subscribe(sensors => {
-      if (sensors) {
-        this.sensor = sensors.filter(value => value.sensorId === this.sensorId)[0];
-        this.showGraph();
-      }
-    });
   }
 
-  showGraph() {
-    const range: Date[] = [moment().subtract(7, 'days').toDate(), moment().toDate()];
-
-    if (this.from && !this.to || !this.from && this.to) {
-      return;
-    }
-
-    if (this.from && this.to) {
-      range[0] = this.from;
-      range[1] = this.to;
-    }
+  /**
+   * Shows aggregation select box and get data button
+   */
+  aggregationShow() {
+    this.dateChanged = true;
+    this.showAggregation = moment(this.to).diff(moment(this.from), 'days') > 7;
+  }
 
-    if (moment(range[1]).diff(moment(range[0]), 'days') > 7) {
+  /**
+   * Gets data based on selected time range
+   */
+  showGraph() {
+    if (moment(this.to).diff(moment(this.from), 'days') > 7) {
       this.showAggregation = true;
+      const range: Date[] = [this.from, this.to];
       this.getAnalytics(range);
     } else {
       this.showAggregation = false;
+      const range: Date[] = [this.from, this.to];
       this.getObservations(range);
     }
   }
 
+  /**
+   * Get data from analytics endpoint
+   * @param range from and to interval
+   */
   getAnalytics(range: Date[]) {
     this.analyticsService.getAnalytics$Response({
       unit_id: this.unitId, sensor_id: this.sensorId,
@@ -102 +120 @@
     ).subscribe(
       observations => {
         if (observations) {
-        //  GraphLoader.getGraph(this.sensorId, observations[this.sensorId].data, observations[this.sensorId].interval, '#view');
           GraphLoader.getGraph(this.sensorId, observations, this.sensor, '#view', true);
         } else {
           GraphLoader.getGraph(null, null, null, '#view', null);
@@ -110 +127 @@
       }, err => this.toastService.showError(err.error.message));
   }
 
+  /**
+   * Get data from observation endpoint
+   * @param range from and to interval
+   */
   getObservations(range: Date[]) {
     this.observationService.getObservation$Response({
       unit_id: this.unitId,
@@ -130 +151 @@
     ).subscribe(
       observations => {
         if (observations) {
-         // GraphLoader.getObservationGraph(this.sensorId, observations, '#view');
           GraphLoader.getGraph(this.sensorId, observations, this.sensor, '#view', false);
         } else {
-         // GraphLoader.getObservationGraph(null, null, null);
           GraphLoader.getGraph(null, null, null,'#view', null);
         }
       }, err => this.toastService.showError(err.error.message));
   }
-
-  getDummySensor() {
-    return require('/src/app/sensor/components/dummysensor.json');
-  }
 }