Revize 370c3423

Re #8677 - Nová obrazovka Unit

+ new view for all unit sensors

src/app/app-routing.module.ts

@@ -6 +6 @@
 import {RoleGuard} from './auth/guards/role.guard';
 import {AdministrationComponent} from './administration/components/administration.component';
 import {SensorComponent} from './sensor/components/sensor.component';
+import {UnitComponent} from './unit/components/unit.component';
 
 const routes: Routes = [
   {
@@ -25 +26 @@
     data: {
       expectedRole: ['1', '0']
     }
+  }, {
+    canActivate: [AuthGuard, RoleGuard],
+    path: 'dashboard/unit/:unitId',
+    component: UnitComponent,
+    pathMatch: 'full',
+    data: {
+      expectedRole: ['1', '0']
+    }
   }, {
     canActivate: [AuthGuard, RoleGuard],
     path: 'administration',

src/app/app.module.ts

@@ -12 +12 @@
 import {AdministrationModule} from './administration/administration.module';
 import {SensorModule} from './sensor/sensor.module';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
+import {UnitModule} from './unit/unit.module';
 
 @NgModule({
   declarations: [
@@ -28 +29 @@
     DashboardModule,
     AdministrationModule,
     SensorModule,
-    FontAwesomeModule
+    FontAwesomeModule,
+    UnitModule
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ +1 @@
+<app-nav-bar></app-nav-bar>
+
+{{ unitId}}
+<br>
+------
+<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>
+
+
+<!--  {{ data | json}}-->

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

@@ +1 @@
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {AnalyticsService} from '../../shared/api/endpoints/services/analytics.service';
+import {tap} from 'rxjs/operators';
+import {Sensors} from '../../shared/api/endpoints/models/sensors';
+import {AggreationModel} from '../../shared/models/aggreation.model';
+import * as moment from 'moment-timezone';
+
+@Component({
+  selector: 'app-unit',
+  templateUrl: './unit.component.html',
+  styleUrls: ['./unit.component.scss']
+})
+export class UnitComponent implements OnInit {
+
+  preselectedSensors: string;
+  unitId: number;
+  data;
+  rangeDates: Date[];
+  aggregationFunction: AggreationModel[];
+  selectedAggregationFunction: string;
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private analyticsService: AnalyticsService
+  ) {
+    this.aggregationFunction = [
+      {name: 'Hour', code: 'HOUR'},
+      {name: 'Day', code: 'DAY'},
+      {name: 'Month', code: 'MONTH'},
+      {name: 'Year', code: 'YEAR'}
+    ];
+  }
+
+  ngOnInit(): void {
+/*    this.route.queryParams.subscribe(params => {
+      if(params.sensors)  {
+        this.preselectedSensors = params.sensors;
+      }
+    });*/
+
+    this.unitId = parseInt(this.activatedRoute.snapshot.paramMap.get('unitId'), 10);
+
+    this.showGraph()
+  }
+
+  showGraph() {
+    let agg = 'HOUR';
+    let range: Date[] = [moment().subtract(12, 'months').toDate(), moment().toDate()];
+    if (this.selectedAggregationFunction) {
+      agg = this.selectedAggregationFunction;
+    }
+
+    if (this.rangeDates) {
+      range = this.rangeDates;
+    }
+
+    this.analyticsService.getAnalytics({unit_id: this.unitId, sensor_id: null,
+      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}).pipe(
+      tap(data => {
+        this.data = Object.entries(data);
+        console.log(this.data);
+      })
+    ).subscribe();
+  }
+}

src/app/unit/unit.module.ts

@@ +1 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UnitComponent } from './components/unit.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';
+
+
+
+@NgModule({
+  declarations: [UnitComponent],
+  imports: [
+    CommonModule,
+    NavBarModule,
+    CalendarModule,
+    FormsModule,
+    ListboxModule
+  ]
+})
+export class UnitModule { }