Revize 2b0d2514

Re #8851 - Unit page - implementace

+ sensors checkboxes
+ checking sensor will reinitialize graph

src/app/unit/components/unit.component.html

@@ -1 +1 @@
 <app-nav-bar></app-nav-bar>
 
-{{ unitId}}
-<br>
-------
-<br><br>
-
-<div class="col">
-  <div class="input-group form-group">
-    <div class="input-group-prepend">
-      <span class="input-group-text">From</span>
-    </div>
-    <p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="from" [showTime]="true" (onSelect)="showGraph()" [maxDate]="today" showButtonBar="true"></p-calendar>
+<div class="container">
+  <div class="row-2">
+      <h5><span class="text-color-sensor-unit">Unit ID: {{unitId}}</span></h5>
   </div>
-</div>
-<div class="col">
-  <div class="input-group form-group">
-    <div class="input-group-prepend">
-      <span class="input-group-text">To</span>
+  <div class="row">
+    <div class="col">
+      <div class="input-group form-group">
+        <div class="input-group-prepend">
+          <span class="input-group-text">From</span>
+        </div>
+        <p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="from" [showTime]="true" (onSelect)="showGraph()" [maxDate]="today" showButtonBar="true"></p-calendar>
+      </div>
     </div>
-    <p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="to" [showTime]="true" (onSelect)="showGraph()" [maxDate]="today" showButtonBar="true"></p-calendar>
-  </div>
-</div>
-<div *ngIf="showAggregation" class="col">
-  <div class="input-group form-group">
-    <div class="input-group-prepend">
-      <span class="input-group-text">Aggregation</span>
+    <div class="col">
+      <div class="input-group form-group">
+        <div class="input-group-prepend">
+          <span class="input-group-text">To</span>
+        </div>
+        <p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="to" [showTime]="true" (onSelect)="showGraph()" [maxDate]="today" showButtonBar="true"></p-calendar>
+      </div>
+    </div>
+    <div *ngIf="showAggregation" class="col">
+      <div class="input-group form-group">
+        <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>
+      </div>
     </div>
-    <p-listbox [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code" (onClick)="showGraph()" ></p-listbox>
   </div>
-</div>
 
-<ng-container *ngFor="let group of sensorGroups">
-  Group of sensors:
-  <ng-container *ngFor="let sensor of sensors">
-    <ng-container *ngIf="sensor.sensorId.toString().slice(0, 2) === group">
-      {{ sensor.sensorId }}
-    </ng-container>
+  <ng-container *ngFor="let group of sensorGroups">
+    <div class="row">
+    Group of sensors:
+      <ng-container *ngFor="let sensor of sensors">
+        <ng-container *ngIf="sensor.sensorId.toString().slice(0, 5) === group">
+          <div class="p-field-checkbox">
+            <p-checkbox name="group1" value="{{sensor.sensorId}}" [value]="sensor.sensorId" inputId="{{sensor.sensorId}}" [(ngModel)]="selectedSensors" [inputId]="sensor.sensorId.toString()" (onChange)="addSensorToGraph(sensor.sensorId)"></p-checkbox>
+            <label>{{sensor.sensorName}}</label>
+          </div>
+        </ng-container>
+      </ng-container>
+    </div>
+    <div id="vega_container_{{group}}"></div>
   </ng-container>
-  <div id="vega_container_{{group}}"></div>
-</ng-container>
+</div>

src/app/unit/components/unit.component.ts

@@ -1 +1 @@
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {AnalyticsService} from '../../shared/api/endpoints/services/analytics.service';
-import {map, tap} from 'rxjs/operators';
+import {map} from 'rxjs/operators';
 import {AggregationModel} from '../../shared/models/aggregationModel';
 import * as moment from 'moment-timezone';
 import {GraphLoader} from '../../shared/graph-loading/graphloader';
@@ -10 +10 @@
 import {ToastService} from '../../shared/services/toast.service';
 import {Sensor} from '../../shared/api/endpoints/models/sensor';
 
-declare var require: any
 
 @Component({
   selector: 'app-unit',
@@ -27 +26 @@
   from: Date;
   to: Date;
   today: Date;
+  analyticsData: any[] = [];
+  observationsData: any[] = [];
   sensorGroups = [];
-  selectedSensors = [];
+  selectedSensors: any[] = [];
   sensors: Sensor[];
   showAggregation = false;
   aggregationFunction: AggregationModel[];
@@ -56 +57 @@
             const sensorType = sensor.sensorId.toString().slice(0, 5);
             if (!this.sensorGroups.some(group => group === sensorType)) {
               this.sensorGroups.push(sensorType);
+              setTimeout(() => {
+                  GraphLoader.getGraph(null, null, null, '#vega_container_' + sensor.sensorId.toString().slice(0, 5));
+              }, 0);
             }
             if (!this.selectedSensors.some(sens => sens.toString().slice(0, 5) === sensorType)) {
               this.selectedSensors.push(sensor.sensorId);
@@ -63 +67 @@
           })
         }
       }
-    )
+    );
   }
 
   ngOnInit(): void {
@@ -108 +112 @@
         }
       })
     ).subscribe(data => {
+      if (data) {
+        this.analyticsData = data;
         const objectKeys = Object.keys(data);
-        for(const key of objectKeys ) {
-          if (data[key].data) {
-            const view = '#vega_container_' + key.slice(0, 5);
-            if (this.selectedSensors.some(sens => sens.toString() === key)) {
-              GraphLoader.getGraph(key, data[key].data, data[key].interval, view);
+          for(const key of objectKeys ) {
+            if (data[key].data) {
+              const view = '#vega_container_' + key.slice(0, 5);
+              if (this.selectedSensors.some(sens => sens.toString() === key)) {
+                GraphLoader.getGraph(key, data[key].data, data[key].interval, view);
+              }
             }
           }
         }
-      });
+      }, err => this.toastService.showError(err.error.message));
+  }
+
+  addSensorToGraph(sensorId: number) {
+    const objectKeys = Object.keys(this.analyticsData);
+    for(const key of objectKeys ) {
+      if (this.analyticsData[key].data) {
+        const view = '#vega_container_' + key.slice(0, 5);
+        if (sensorId.toString() === key) {
+          GraphLoader.getGraph(key, this.analyticsData[key].data, this.analyticsData[key].interval, view);
+        }
+      }
+    }
   }
 }

src/app/unit/unit.module.ts

@@ -5 +5 @@
 import {CalendarModule} from 'primeng/calendar';
 import {FormsModule} from '@angular/forms';
 import {ListboxModule} from 'primeng/listbox';
+import {CheckboxModule} from 'primeng/checkbox';
 
 
 
 @NgModule({
   declarations: [UnitComponent],
-  imports: [
-    CommonModule,
-    NavBarModule,
-    CalendarModule,
-    FormsModule,
-    ListboxModule
-  ]
+    imports: [
+        CommonModule,
+        NavBarModule,
+        CalendarModule,
+        FormsModule,
+        ListboxModule,
+        CheckboxModule
+    ]
 })
 export class UnitModule { }