Revize cbb91c90

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

+ sensor edit under edit button in menu

• request for sensor data only for first time, then after button click
  + sensor group names
  + adding information to unit and sensor
  + commenting
  + code refactor

src/app/administration/administration.module.ts

@@ -1 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AdministrationComponent } from './components/administration.component';
-import {NavBarModule} from '../shared/nav-bar/nav-bar.module';
-
-
-
-@NgModule({
-  declarations: [AdministrationComponent],
-  imports: [
-    CommonModule,
-    NavBarModule
-  ]
-})
-export class AdministrationModule { }

src/app/administration/components/administration.component.html

@@ -1 @@
-<app-nav-bar></app-nav-bar>
-
-<p>administration works!</p>

src/app/administration/components/administration.component.ts

@@ -1 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-administration',
-  templateUrl: './administration.component.html',
-  styleUrls: ['./administration.component.scss']
-})
-export class AdministrationComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

src/app/app-routing.module.ts

@@ -4 +4 @@
 import {DashboardComponent} from './dashboard/components/dashboard.component';
 import {AuthGuard} from './auth/guards/auth.guard';
 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';
 
@@ -35 +34 @@
       expectedRole: ['1', '0']
     }
   }, {
-    canActivate: [AuthGuard, RoleGuard],
-    path: 'administration',
-    component: AdministrationComponent,
-    pathMatch: 'full',
-    data: {
-      expectedRole: ['0']
-    }
-  },{
     path: 'login',
     component: LoginComponent,
     pathMatch: 'full',

src/app/app.module.ts

@@ -9 +9 @@
 import {AuthModule} from './auth/auth.module';
 import {LoginModule} from './login/login.module';
 import {DashboardModule} from './dashboard/dashboard.module';
-import {AdministrationModule} from './administration/administration.module';
 import {SensorModule} from './sensor/sensor.module';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {UnitModule} from './unit/unit.module';
@@ -29 +28 @@
     AuthModule,
     LoginModule,
     DashboardModule,
-    AdministrationModule,
     SensorModule,
     FontAwesomeModule,
     UnitModule,

src/app/auth/interceptors/auth.interceptor.ts

@@ -23 +23 @@
   ) {
   }
 
+  /**
+   * Intercept every request to backend
+   * @param request request
+   * @param next next
+   */
   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-
+    // check if data in cookies
     if (!this.cookieService.get(GlobalVariable.SESSION_ID) && !request.url.includes('ControllerServlet')) {
       console.log('No sessionid!');
       this.cookieService.deleteAll();
@@ -32 +37 @@
       return of(null);
     }
 
-    console.log('Sending request!', request);
+    console.log('Sending request!', request.url);
     return next.handle(request)
       .pipe(
         catchError(err => {

src/app/auth/models/user.ts

@@ -3 +3 @@
 import {UserInfo} from '../../shared/api/endpoints/models/user-info';
 import {UserCookie} from '../../shared/api/endpoints/models/user-cookie';
 
+/**
+ * User state model
+ */
 export interface User {
   userInfo?: UserInfo;
   isLoggedIn?: boolean;

src/app/auth/services/auth.service.ts

@@ -24 +24 @@
   ) {
   }
 
+  /**
+   * Set state from saved cookies
+   */
   setFromCookie() {
     const user: User = {
       userCookie: {
@@ -37 +40 @@
     this.userState.setUser(user);
   }
 
+  /**
+   * Get user from state
+   */
   getUser() {
     console.log('Auth Service');
     if (!this.userState.getUser() && this.cookieService.get(GlobalVariable.SESSION_ID)) {
@@ -46 +52 @@
     return this.userState.getUser();
   }
 
+  /**
+   * Get user from state as observable
+   */
   getUserState(): Observable<User> {
     return this.userState.getUser$();
   }
 
+  /**
+   * Login process with backend call
+   * @param loginInput login form
+   */
   doLogin(loginInput): Observable<boolean> {
     return this.loginService.login$Response(loginInput)
       .pipe(
@@ -61 +74 @@
       );
   }
 
+  /**
+   * Set user state, cookie and localStorage from server response
+   * @param userCookie server response
+   * @param username form username
+   */
   setUserFromResponse(userCookie: UserCookie, username): UserCookie {
     console.log('Setting user from login!');
     this.userState.setUser({
@@ -71 +89 @@
     return userCookie;
   }
 
+  /**
+   * Logout user, clear user state and redirect to login
+   */
   doLogout() {
     this.userState.setUser(null);
     this.cookieService.deleteAll();
@@ -79 +100 @@
     this.cookieService.deleteAll();
   }
 
+  /**
+   * Set localstorage and cookies
+   * @param userCookie user obejct
+   * @param username username from login form
+   */
   setSessionStorage(userCookie: UserCookie, username) {
     localStorage.setItem(GlobalVariable.USER_NAME, username)
     localStorage.setItem(GlobalVariable.RIGHTS, userCookie.rightsID.toString());

src/app/auth/states/user.state.ts

@@ -1 +1 @@
 import {Injectable} from '@angular/core';
 import {BehaviorSubject, Observable} from 'rxjs';
 import {User} from '../models/user';
-import {AuthService} from '../services/auth.service';
 import {LoginService} from '../../shared/api/endpoints/services/login.service';
 import {ToastService} from '../../shared/services/toast.service';
 
@@ -28 +27 @@
     return this.userState$.getValue();
   }
 
+  /**
+   * Get user, if not exists fetch from server
+   * @param refresh force refresh user status from backend
+   */
   getUser$(refresh: boolean = false): Observable<User> {
    if (this.userState$.getValue()){
       this.loginService.getUserInfo$Response().subscribe(res => {

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

@@ -7 +7 @@
           <div [className]="'row dashboard-unit'">
             <div class="col-md-6"><h3>{{ unit.unit.description}}</h3></div>
             <div class="col-md-6 text-right">
-              <p-button label="Sensors graph" icon="pi pi-chart-line" [routerLink]="['/dashboard/unit', unit.unit.unitId]"></p-button>
+              <p-button label="Sensors graph" icon="pi pi-chart-line" [routerLink]="['/dashboard/unit', unit.unit.unitId]" [queryParams]="{unitDescription: unit.unit.description}"></p-button>
               <div class="dashboard-button-separator"></div>
               <p-button icon="pi pi-cog" styleClass="p-button-warning" (click)="showItems($event, unit.unit); menu.toggle($event)"></p-button>
               <p-menu #menu [popup]="true" [model]="items" [appendTo]="'body'" [baseZIndex]="50"></p-menu>

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

@@ -1 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {Group} from '../../shared/api/endpoints/models/group';
 import {Drivers} from '../../shared/api/endpoints/models/drivers';
 import {GeneralInfo} from '../../shared/api/endpoints/models/general-info';
@@ -16 +16 @@
 import {AuthService} from '../../auth/services/auth.service';
 import {User} from '../../auth/models/user';
 import {SensorType} from '../../shared/api/endpoints/models/sensor-type';
+import {Subscription} from 'rxjs';
 
 @Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss']
 })
-export class DashboardComponent implements OnInit {
+export class DashboardComponent implements OnInit, OnDestroy {
 
   loggedUser: User;
   items: MenuItem[] = [];
@@ -35 +36 @@
   showInsertPositionPopup = false;
   phenomenons: Phenomenon[];
   sensorTypes: SensorType[];
+  subscription: Subscription[] = [];
 
   constructor(
     private dataService: DataService,
@@ -45 +47 @@
     private toastService: ToastService,
     private authService: AuthService
   ) {
+    this.initData();
+  }
+
+  ngOnInit(): void {
+  }
+
+  /**
+   * Unsubscribe after leaving
+   */
+  ngOnDestroy(): void {
+    this.subscription.forEach(subs => subs.unsubscribe());
+  }
+
+  /**
+   * Get necessary data from backend
+   */
+  initData() {
     this.sensorService.getPhenomenons().subscribe(
       response => this.phenomenons = response
     );
     this.sensorService.getSensorTypes().subscribe(
       response => this.sensorTypes = response
     );
-  }
-
-  ngOnInit(): void {
     this.setUser();
     this.getUnits();
   }
 
+  /**
+   * Get user from user state
+   */
   setUser(){
     this.authService.getUserState().subscribe(res => {
       if(res){
@@ -66 +85 @@
     });
   }
 
+  /**
+   * Get all units and theirs sensors from backend
+   */
   getUnits() {
     this.dataService.getData().subscribe(data => {
       this.units = data;
@@ -73 +95 @@
     }, err => this.toastService.showError(err.error.message));
   }
 
+  /**
+   * Show edit unit
+   * @param $event click event
+   * @param unit edited unit
+   */
   editUnitPopup($event: MouseEvent, unit: Unit) {
     this.editedUnit = unit;
     this.showEditUnitPopup = true;
   }
 
+  /**
+   * Show insert unit
+   * @param $event click event
+   * @param unit unit for sensor insert
+   */
   insertSensorPopup($event: any, unit: Unit) {
     this.showInsertSensorPopup = true;
     this.editedUnit = unit;
   }
 
+  /**
+   * Detele unit confirmation
+   * @param $event click event
+   * @param unit unit to delete
+   */
   deleteUnit($event: any, unit: Unit) {
     this.confirmationService.confirm({
       message: 'Do you want to delete this unit?',
@@ -98 +135 @@
     });
   }
 
+  /**
+   * Send delete unit request to backend
+   * @param unit to delete
+   */
   processUnitDeletion(unit: Unit) {
     this.managementService.deleteUnit$Response({body: {
       unit: {
@@ -114 +155 @@
     ).toPromise().then().catch(err => this.toastService.showError(err.error.message));
   }
 
+  /**
+   * Show menu items to manipulate with unit
+   * @param $event click event
+   * @param unit unit we want edit
+   */
   showItems($event: any, unit: Unit) {
     $event.stopPropagation();
     this.items = [
@@ -132 +178 @@
     ]
   }
 
+  /**
+   * Add created unit to memory so we do not need call backend
+   * @param inserted unit
+   */
   addUnit(inserted: any) {
     const sensors: Sensor[] = [];
     inserted.sensors.forEach(sens => {
@@ -153 +203 @@
     })
   }
 
+  /**
+   * Add created sensors to unit in memory so we do not need call backend
+   * @param inserted sensors
+   */
   addSensors(inserted: any) {
     inserted.sensors.forEach(sens => {
       this.units.find(un => un.unit.unitId === inserted.unit.unit_id).sensors.push({
@@ -166 +220 @@
     });
   }
 
+  /**
+   * Delete sensor from memory
+   * @param unitId sensor unit
+   * @param sensor sensor to delete
+   */
   deleteSensor(unitId: number, sensor: Sensor) {
     this.units.find(unit => unit.unit.unitId === unitId).sensors =
       this.units.find(unit => unit.unit.unitId === unitId).sensors.filter(testedSensor => testedSensor.sensorId !== sensor.sensorId);
   }
 
-  private insertPosition($event: any, unit: Unit) {
+  /**
+   * Show insert position popup
+   * @param $event click event
+   * @param unit unit to insert position for
+   */
+  insertPosition($event: any, unit: Unit) {
     $event.stopPropagation();
     this.showInsertPositionPopup = true;
     this.editedUnit = unit;

src/app/dashboard/components/position-insert-popup/position-insert-popup.component.ts

@@ -44 +44 @@
     this.insertForm.reset();
   }
 
+  /**
+   * Send insert position request to backend adn handle response.
+   */
   processInsertion() {
     if (this.insertForm.valid) {
       const lat = this.insertForm.controls.lat.value;
@@ -67 +70 @@
     }
   }
 
+  /**
+   * Close popup
+   */
   close() {
     this.isVisibleChange.emit(false);
   }

src/app/dashboard/components/sensor-insert-popup/sensor-insert-popup.component.ts

@@ -49 +49 @@
     });
   }
 
+  /**
+   * Prepare form object for sensor
+   */
   createSensor(): FormGroup {
     return this.formBuilder.group({
       sensorId: ['', Validators.required],
@@ -58 +61 @@
     });
   }
 
+  /**
+   * Add sensor to form
+   */
   addSensor(): void {
     this.items = this.insertForm.get('sensors') as FormArray;
     this.items.push(this.createSensor());
     this.sensors++;
   }
 
+  /**
+   * Remove last sensor from form
+   */
   removeSensor() {
     this.items = this.insertForm.get('sensors') as FormArray;
     this.items.removeAt(this.items.length - 1);
     this.sensors--;
   }
 
+  /**
+   * Clearing form
+   */
   clearFormArray() {
     const frmArray = this.insertForm?.get('sensors') as FormArray;
     if (frmArray) {
@@ -79 +91 @@
     this.insertForm.reset();
   }
 
+  /**
+   * Send insert sensors request to backend. Iterate over all sensors in form.
+   */
   processSensorInsertion() {
     if (this.insertForm.valid) {
       const unit: InsertUnit = {

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

@@ -34 +34 @@
   ngOnInit(): void {
   }
 
+  /**
+   * Close popup
+   */
   close() {
     this.isVisibleChange.emit(false);
   }
@@ -52 +55 @@
     }, 0);
   }
 
+  /**
+   * Send update sensor request to backend. Creates object from form input. Handle response.
+   */
   processSensorEdition() {
     if (this.insertForm.valid) {
       this.managementService.updateSensor$Response({body: {
@@ -81 +87 @@
     }
   }
 
-  private changeSensor() {
+  /**
+   * Change sensor data to memory
+   */
+  changeSensor() {
     this.sensor.sensorType = this.insertForm.controls.sensorType.value;
     this.sensor.sensorName = this.insertForm.controls.sensorName.value;
     this.sensor.phenomenon.phenomenonId = this.insertForm.controls.phenomenon.value;

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

@@ -8 +8 @@
     <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>
-      <button pButton type="button" label="Delete sensor" icon="pi pi-times" (click)="deleteSensor($event, sensor)" [className]="'p-button-danger'"></button>
+      <p-button icon="pi pi-cog" styleClass="p-button-warning" (click)="showItems($event, sensor); menu.toggle($event)"></p-button>
+      <p-menu #menu [popup]="true" [model]="items" [appendTo]="'body'" [baseZIndex]="50"></p-menu>
     </ng-container>
   </div>
 </div>

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

@@ -1 +1 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {Sensor} from '../../../shared/api/endpoints/models/sensor';
-import {ConfirmationService} from 'primeng/api';
+import {ConfirmationService, MenuItem} from 'primeng/api';
 import {ManagementService} from '../../../shared/api/endpoints/services/management.service';
 import {map} from 'rxjs/operators';
 import {HttpResponse} from '@angular/common/http';
@@ -24 +24 @@
   @Input() sensorTypes: SensorType[];
   showSensorPopup = false;
   editedSensor: Sensor;
+  items: MenuItem[] = [];
+
   constructor(
     private confirmationService: ConfirmationService,
     private managementService: ManagementService,
@@ -33 +35 @@
   ngOnInit(): void {
   }
 
+  /**
+   * Show menu items to manipulate with sensor
+   * @param $event click event
+   * @param sensor sensor we want edit
+   */
+  showItems($event: any, sensor: Sensor) {
+    $event.stopPropagation();
+    this.items = [
+      {label: 'Edit sensor', icon: 'pi pi-cog', command: () => {
+          this.editSensor($event, sensor);
+        }},
+      {label: 'Delete sensor', icon: 'pi pi-times', command: () => {
+          this.deleteSensor($event, sensor);
+        }}
+    ]
+  }
+
+  /**
+   * Show edit sensor popup
+   * @param $event click event
+   * @param sensor sensor to edit
+   */
   editSensor($event: MouseEvent, sensor: Sensor) {
     $event.stopPropagation();
     this.editedSensor = sensor;
     this.showSensorPopup = true;
   }
 
+  /**
+   * Selete sensor confirmation
+   * @param $event click event
+   * @param sensor sensor to delete
+   */
   deleteSensor($event: any, sensor: Sensor) {
     this.confirmationService.confirm({
       message: 'Do you want to delete this sensor?',
@@ -54 +83 @@
     });
   }
 
+  /**
+   * Send deletion request to backend. Handle response.
+   * @param sensor to delete
+   */
   processSensorDeletion(sensor: Sensor) {
     this.managementService.deleteSensor$Response({body: {
       unit: {

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

@@ -36 +36 @@
   ngOnInit(): void {
   }
 
-
+  /**
+   * Send insert unit request to backend and handle it
+   */
   saveUnit() {
     if (this.insertForm.controls.unitDescription.value && this.insertForm.controls.unitDescription.value !== this.unit.description) {
       this.unit.description = this.insertForm.controls.unitDescription.value;

src/app/login/components/login.component.ts

@@ -1 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {switchMap} from 'rxjs/operators';
 import {of, Subscription} from 'rxjs';
@@ -10 +10 @@
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss']
 })
-export class LoginComponent implements OnInit {
+export class LoginComponent implements OnInit, OnDestroy {
 
   loginForm: FormGroup;
   subscription: Subscription[] = [];
@@ -22 +22 @@
   ) {
   }
 
+  /**
+   * Unsubscribe after leaving
+   */
+  ngOnDestroy(): void {
+    this.subscription.forEach(subs => subs.unsubscribe());
+  }
+
   ngOnInit(): void {
     this.loginForm = this.formBuilder.group({
       username: ['', [Validators.required]],
@@ -30 +37 @@
     this.userRedirect();
   }
 
+  /**
+   * Process login
+   */
   doLogin(): void {
     if (this.loginForm.valid) {
       this.subscription[2] = this.authService.doLogin({
@@ -38 +48 @@
       })
         .pipe(
           switchMap(res => {
-            console.log(res);
             if (res) {
               console.log('Login getUserState');
               return this.authService.getUserState();
@@ -48 +57 @@
           })
         ).subscribe(
           res => {
-            console.log(res);
             if (res) {
               this.subscription[2].unsubscribe();
               this.router.navigate(['/dashboard'])
@@ -58 +66 @@
     }
   }
 
+  /**
+   * If user already logged with valid sessionId redirect to dashboard
+   */
   userRedirect(): void {
     console.log('Login redirect');
     if (this.authService.getUser()){
-      console.log('Redirect to dashboard!');
       this.router.navigate(['/dashboard']);
     }
   }

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">Unit name: <a [routerLink]="['/dashboard/unit', unitId]">{{unitName}}</a></span></h5>
+      <h5><span class="text-color-sensor-unit">Unit name: <a [routerLink]="['/dashboard/unit', unitId]">{{unitDescription}}</a></span></h5>
+    </div>
+    <div class="col-xs-3">
+      <h5><span class="text-color-sensor-unit">Sensor id: {{sensor?.sensorId}}</span></h5>
     </div>
     <div class="col-xs-3">
       <h5><span class="text-color-sensor-unit">Sensor name: {{sensor?.sensorName}}</span></h5>
@@ -34 +37 @@
       </div>
     </div>
     <div class="col-1"></div>
-    <div *ngIf="showAggregation" class="col-xs-3">
+    <div class="col-xs-3">
       <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"></p-listbox>
+        <p-listbox *ngIf="showAggregation" [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code"></p-listbox>
       </div>
     </div>
     <div class="col-1"></div>

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

@@ -1 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import * as moment from 'moment-timezone';
 import {AnalyticsService} from '../../shared/api/endpoints/services/analytics.service';
@@ -10 +10 @@
 import {ToastService} from '../../shared/services/toast.service';
 import {Sensor} from '../../shared/api/endpoints/models/sensor';
 import {SensorsService} from '../../shared/api/endpoints/services/sensors.service';
+import {Subscription} from 'rxjs';
 
 @Component({
   selector: 'app-sensor',
   templateUrl: './sensor.component.html',
   styleUrls: ['./sensor.component.scss']
 })
-
-
-
-export class SensorComponent implements OnInit {
+export class SensorComponent implements OnInit, OnDestroy {
 
   sensorId: number;
   unitId: number;
@@ -32 +30 @@
   selectedAggregationFunction = 'HOUR';
   sensor: Sensor;
   dateChanged = false;
-  unitName: string;
+  unitDescription: string;
   today: Date = moment().toDate();
+  subscription: Subscription[] = [];
 
   constructor(
     private activatedRoute: ActivatedRoute,
@@ -58 +57 @@
   getInitData() {
     this.route.queryParams.subscribe(params => {
       if(params.unitName)  {
-        this.unitName = params.unitName;
+        this.unitDescription = params.unitName;
       }
     });
     this.sensorId = parseInt(this.activatedRoute.snapshot.paramMap.get('sensorId'), 10);
@@ -71 +70 @@
     ];
   }
 
+  /**
+   * Unsubscribe after leaving
+   */
+  ngOnDestroy(): void {
+    this.subscription.forEach(subs => subs.unsubscribe());
+  }
+
   ngOnInit(): void {
   }
 

src/app/shared/models/vegaModel.ts

@@ -1 @@
-/* tslint:disable */
-/* eslint-disable */
-export interface VegaModel {
-  sensordId?: string,
-  data?: []
-}

src/app/shared/nav-bar/components/nav-bar.component.ts

@@ -35 +35 @@
     this.setUser();
   }
 
+  /**
+   * Get user from state after logged
+   */
   setUser(){
     this.authService.getUserState().subscribe(res => {
       if(res){
@@ -43 +46 @@
     });
   }
 
+  /**
+   * Show insert unit popup
+   */
   insertUnitPopup() {
     this.sensorService.getPhenomenons().subscribe(
       response => this.phenomenons = response
@@ -54 +60 @@
     this.authService.doLogout();
   }
 
+  /**
+   * Unsubscribe after leaving
+   */
   ngOnDestroy(): void {
     this.subscription.forEach(subs => subs.unsubscribe());
   }
 
+  /**
+   * Show add user popup
+   */
   addUser() {
     this.showAddUserPopup = true;
   }
 
+  /**
+   * Emit inserted unit to add it to units
+   * @param inserted inserted unit
+   */
   addUnit(inserted: any) {
     this.emitNewUnit.emit(inserted);
   }

src/app/shared/nav-bar/components/unit-insert-popup/unit-insert-popup.component.ts

@@ -55 +55 @@
     });
   }
 
+  /**
+   * Create formBuilder for sensor
+   */
   createSensor(): FormGroup {
     return this.formBuilder.group({
       sensorId: ['', Validators.required],
@@ -64 +67 @@
     });
   }
 
+  /**
+   * Add sensor to form
+   */
   addSensor(): void {
     this.items = this.insertForm.get('sensors') as FormArray;
     this.items.push(this.createSensor());
     this.sensors++;
   }
 
+  /**
+   * Remove last sensor from form
+   */
   removeSensor() {
     this.items = this.insertForm.get('sensors') as FormArray;
     this.items.removeAt(this.items.length - 1);
     this.sensors--;
   }
 
+  /**
+   * Clear form
+   */
   clearFormArray() {
     const frmArray = this.insertForm?.get('sensors') as FormArray;
     if (frmArray) {
@@ -84 +96 @@
     this.insertForm.reset();
   }
 
+  /**
+   * Insert unit with sensor and position if form valid
+   */
   processInsertion() {
     if (this.insertForm.valid) {
       const lat = this.insertForm.controls.lat.value;
@@ -95 +110 @@
       const sensors: InsertSensor[] = [];
       const frmArray = this.insertForm?.get('sensors') as FormArray;
 
+      // get sensors from form
       frmArray.controls.forEach(control => {
         const sensor: InsertSensor = {
           sensor_id: control.get('sensorId').value,
@@ -107 +123 @@
         sensors.push(sensor);
       });
 
+      // insert unit
       this.managementService.insertUnit$Response({ body: { unit, sensors}}).pipe(
         map((response: HttpResponse<any>) => {
           if (response.status === 200) {
+            // insert position
             this.sensorService.insertPosition$Response( {lat, lon, unit_id: this.insertForm.controls.unitId.value, date: moment().format('yyyy-MM-DD HH:mm:ssZZ')}).pipe(
               map((response2: HttpResponse<any>) => {
                 if (response2.status === 200) {
@@ -119 +137 @@
                   this.close();
                 } else {
                   this.toastService.showError('Unit insertion ' + response2.body.unitId + ' caused error! Wrong position!');
+                  // if position not added delete unit
                   this.managementService.deleteUnit({body: {unit}}).toPromise().then().catch(
                     err => this.toastService.showError(err.error.message));
                 }
               })
             ).toPromise().then().catch(err => this.toastService.showError(err.error.message));
           } else {
+            this.toastService.showError('Unit insertion ' + response.body.unitId + ' caused error!');
           }
         })
       ).toPromise().then().catch(err => this.toastService.showError(err.error.message));

src/app/shared/nav-bar/components/user-insert-popup/user-insert-popup.component.ts

@@ -1 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
 import {map, tap} from 'rxjs/operators';
 import {GroupService} from '../../../api/endpoints/services/group.service';
 import {Group} from '../../../api/endpoints/models/group';
@@ -7 +7 @@
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {HttpResponse} from '@angular/common/http';
 import {ToastService} from '../../../services/toast.service';
+import {Subscription} from 'rxjs';
 
 @Component({
   selector: 'app-user-insert-popup',
   templateUrl: './user-insert-popup.component.html',
   styleUrls: ['./user-insert-popup.component.scss']
 })
-export class UserInsertPopupComponent implements OnInit {
+export class UserInsertPopupComponent implements OnInit, OnDestroy {
 
   groups: Group[];
   rights: Right[];
   insertForm: FormGroup;
+  subscription: Subscription[] = [];
   @Input() isVisible;
   @Output() isVisibleChange: EventEmitter<boolean> = new EventEmitter<boolean>();
 
@@ -34 +36 @@
   ngOnInit(): void {
   }
 
+  /**
+   * Unsubscribe after leaving
+   */
+  ngOnDestroy(): void {
+    this.subscription.forEach(subs => subs.unsubscribe());
+  }
+
   getGroups() {
     this.groupService.getGroups({Operation: 'GetGroups'}).pipe(
       tap(data => this.groups = data)
@@ -46 +55 @@
     ).subscribe();
   }
 
+  /**
+   * Close popup
+   */
   close() {
     this.isVisibleChange.emit(false);
   }
 
+  /**
+   * If valid form send request with new user to server
+   */
   saveUser() {
     if (this.insertForm.valid) {
       this.administrationService.createUser$Response({body: {

src/app/shared/services/toast.service.ts

@@ -11 +11 @@
   ) {
   }
 
+  /**
+   * Error message
+   * @param err error
+   */
   showError(err: any) {
     this.messageService.add({key: 'mainToast', severity:'error', summary: 'Unsuccessful!', detail: err});
   }
 
+  /**
+   * Show warning NoData message
+   */
   showWarningNoData() {
     this.messageService.add({key: 'mainToast', severity:'warn', summary: 'No data!', detail: 'Can not display any data for given interval and aggregation!'});
   }
 
+  /**
+   * Show success request message
+   */
   showSuccess() {
     this.messageService.add({key: 'mainToast', severity:'success', summary: 'Success!', detail: 'Successful request!'});
   }
 
+  /**
+   * Show message as success
+   * @param message message string
+   */
   showSuccessMessage(message: any) {
     this.messageService.add({key: 'mainToast', severity:'success', summary: 'Success!', detail: message});
   }
 
+  /**
+   * Show operation rejected
+   */
   operationRejected() {
     this.messageService.add({key: 'mainToast', severity:'warn', summary: 'Reject!', detail: 'Operation rejected!'});
   }

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

@@ -2 +2 @@
 
 <div class="container">
   <div class="row-2">
-      <h5><span class="text-color-sensor-unit">Unit ID: {{unitId}}</span></h5>
+    <h5><span class="text-color-sensor-unit">Unit description: {{unitDescription}}</span></h5>
   </div>
   <div class="row">
     <div class="col">
       <div class="input-group form-group">
         <div class="input-group-prepend">
-          <span class="input-group-text">From</span>
+          <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">
       <div class="input-group form-group">
         <div class="input-group-prepend">
-          <span class="input-group-text">To</span>
+          <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 *ngIf="showAggregation" class="col">
+    <div class="col">
       <div class="input-group form-group">
-        <div class="input-group-prepend">
-          <span class="input-group-text">Aggregation</span>
+        <div class="input-group form-group">
+          <p-listbox *ngIf="showAggregation" [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code"></p-listbox>
         </div>
-        <p-listbox [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code" (onClick)="showGraph()" ></p-listbox>
       </div>
     </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>
 
   <ng-container *ngFor="let group of sensorGroups">
     <div class="row">
-    Group of sensors:
+    Group of
+    <ng-container *ngFor="let sensorType of sensorTypes">
+      <ng-container *ngIf="sensorType.sensorId.toString().slice(0, 5) === group">
+        {{sensorType.sensorType}}
+      </ng-container>
+    </ng-container>
+      sensors:
       <ng-container *ngFor="let sensor of sensors">
           <div *ngIf="sensor.sensorId.toString().slice(0, 5) === group" class="p-field-checkbox">
             <p-checkbox name="{{group}}" [value]="sensor.sensorId.toString()" [(ngModel)]="selectedSensors" [inputId]="sensor.sensorId.toString()" (onChange)="addSensorToGraph(sensor.sensorId.toString(), $event)"></p-checkbox>

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

@@ -1 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {AnalyticsService} from '../../shared/api/endpoints/services/analytics.service';
 import {map, tap} from 'rxjs/operators';
@@ -10 +10 @@
 import {ToastService} from '../../shared/services/toast.service';
 import {Sensor} from '../../shared/api/endpoints/models/sensor';
 import {ObservationService} from '../../shared/api/endpoints/services/observation.service';
+import {SensorType} from '../../shared/api/endpoints/models/sensor-type';
+import {Subscription} from 'rxjs';
 
 
 @Component({
@@ -17 +19 @@
   templateUrl: './unit.component.html',
   styleUrls: ['./unit.component.scss']
 })
-export class UnitComponent implements OnInit {
+export class UnitComponent implements OnInit, OnDestroy {
 
   preselectedSensors: string;
   unitId: number;
   viewCount = 0;
   data = [];
   time = [];
-  from: Date;
-  to: Date;
-  today: Date;
+  from: Date = moment().hour(0).minutes(0).subtract(7, 'days').toDate();
+  to: Date = moment().toDate();
+  today: Date = moment().toDate();
   analyticsData: any[] = [];
   observationsData: any[] = [];
   sensorGroups = [];
@@ -36 +38 @@
   aggregationFunction: AggregationModel[];
   selectedAggregationFunction = 'DAY';
   useAnalyticsData = false;
+  dateChanged = false;
+  sensorTypes: SensorType[];
+  unitDescription: string;
+  subscription: Subscription[] = [];
 
   constructor(
     private activatedRoute: ActivatedRoute,
     private analyticsService: AnalyticsService,
     private sensorService: SensorsService,
     private toastService: ToastService,
-    private observationService: ObservationService
+    private observationService: ObservationService,
+    private route: ActivatedRoute,
   ) {
-    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'}
-    ];
-    this.today = moment().toDate();
+    this.getInitData();
+    // get unit sensors and prepare them for view
     this.sensorService.getUnitSensors({unit_id: this.unitId}).pipe(
       tap(sens => {
         this.sensors = sens;
@@ -61 +62 @@
         if (this.sensors && this.sensors.length > 0) {
           this.sensors.forEach(sensor => {
             const sensorType = sensor.sensorId.toString().slice(0, 5);
-            if (!this.sensorGroups.some(group => group === sensorType)) {
+            if (!this.sensorGroups.some(group => group === sensorType)) { // create sensor groups only for unit sensors
               this.sensorGroups.push(sensorType);
               setTimeout(() => {
-                // GraphLoader.getAnalyticsGraph(null, null, null, '#vega_container_' + sensor.sensorId.toString().slice(0, 5));
-                GraphLoader.getGraph(null, null, null, '#vega_container_' + sensor.sensorId.toString().slice(0, 5),null );
+                GraphLoader.getGraph(null, null, null, '#vega_container_' + sensor.sensorId.toString().slice(0, 5),null);
               }, 0);
             }
           });
@@ -74 +74 @@
     ).toPromise().then();
   }
 
-  ngOnInit(): void {
+  /**
+   * Unsubscribe after leaving
+   */
+  ngOnDestroy(): void {
+    this.subscription.forEach(subs => subs.unsubscribe());
   }
 
-  showGraph(changedDate: boolean = true, changedSensor: string = null) {
-    const range: Date[] = [moment().subtract(7, 'days').toDate(), moment().toDate()];
+  /**
+   * Sets up default data
+   */
+  getInitData() {
+    this.route.queryParams.subscribe(params => {
+      if(params.unitDescription)  {
+        this.unitDescription = params.unitDescription;
+      }
+    });
+    this.sensorService.getSensorTypes().toPromise().then(types => this.sensorTypes = types);
+    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'}
+    ];
+  }
 
-    if (this.from && !this.to || !this.from && this.to) {
-      return;
-    }
+  ngOnInit(): void {
+  }
 
-    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(changedDate: boolean = true, changedSensor: string = null) {
+    if (moment(this.to).diff(moment(this.from), 'days') > 7) {
       this.useAnalyticsData = true;
       this.showAggregation = true;
+      const range: Date[] = [this.from, this.to];
       this.getAnalytics(range, changedDate, changedSensor);
     } else {
       this.useAnalyticsData = false;
       this.showAggregation = false;
+      const range: Date[] = [this.from, this.to];
       this.getObservations(range, changedDate, changedSensor);
     }
   }
 
-  getAnalytics(range: Date[], changedDate: boolean, changedSensor: string) {
-    const groupId = changedSensor.toString().slice(0, 5);
-    if (changedDate) {
+  /**
+   * Gets data from analytics endpoint
+   * @param range from and to interval
+   * @param changedDate determines if dates changed so we need refresh all data
+   * @param changedSensorId if selecting sensor only fetch data for this server
+   */
+  getAnalytics(range: Date[], changedDate: boolean, changedSensorId: string) {
+    if (changedDate) { // if changed date we need new data for all sensors
       this.selectedSensors.forEach(selectSens => {
-        this.analyticsService.getAnalytics$Response({unit_id: this.unitId, sensor_id: parseInt(selectSens, 10),
-          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: this.selectedAggregationFunction}).pipe(
-          map((response: HttpResponse<any>) => {
-            if (response.status === 200) {
-              return response.body;
-            } else if (response.status === 204) {
-              // GraphLoader.getAnalyticsGraph(null, null, null, '#vega_container_' + selectSens.toString().slice(0, 5));
-              GraphLoader.getGraph(null, null, null, '#vega_container_' + selectSens.toString().slice(0, 5),null );
-              this.toastService.showWarningNoData();
-              return response.body;
-            } else {
-              return false;
-            }
-          })
-        ).subscribe(data => {
-          if (data) {
-            this.analyticsData.push({sensorId: selectSens, data: data[selectSens].data, interval: data[selectSens].interval});
-            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.getAnalyticsGraph(key, data[key].data, data[key].interval, view);
-                  // GraphLoader.getGraph(this.selectedSensors, this.filteredAnalyticsData(groupId), view, true);
-                } else {
-                  GraphLoader.getGraph(null, null, null, view, null);
-                }
-              }
-            }
-          }
-        }, err => this.toastService.showError(err.error.message));
+        this.analyticsEndpointRequest(selectSens, range);
       });
-    } else  {
-      this.analyticsService.getAnalytics$Response({unit_id: this.unitId, sensor_id: parseInt(changedSensor, 10),
-        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: this.selectedAggregationFunction}).pipe(
-        map((response: HttpResponse<any>) => {
-          if (response.status === 200) {
-            return response.body;
-          } else if (response.status === 204) {
-            this.toastService.showWarningNoData();
-            return response.body;
+    } else  { // add data for selected sensor
+      this.analyticsEndpointRequest(changedSensorId, range);
+    }
+  }
+
+  /**
+   * Endpoint request to get analytics data for sensor
+   * @param sensorId sensor id to get data
+   * @param range from and to interval
+   */
+  analyticsEndpointRequest(sensorId: string, range: Date[]) {
+    this.analyticsService.getAnalytics$Response({unit_id: this.unitId, sensor_id: parseInt(sensorId, 10),
+      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: this.selectedAggregationFunction}).pipe(
+      map((response: HttpResponse<any>) => {
+        if (response.status === 200) {
+          return response.body;
+        } else if (response.status === 204) {
+          this.toastService.showWarningNoData();
+          return response.body;
+        } else {
+          return false;
+        }
+      })
+    ).subscribe(data => {
+      if (data) {
+        this.analyticsData.push({sensorId, data: data[sensorId].data, interval: data[sensorId].interval});
+        if (data[sensorId].data) {
+          const groupId = sensorId.slice(0, 5);
+          const view = '#vega_container_' + groupId;
+          if (this.selectedSensors.some(sens => sens.toString() === sensorId)) {
+            // GraphLoader.getAnalyticsGraph(key, data[key].data, data[key].interval, view);
+            GraphLoader.getGraph(this.selectedSensors, this.analyticsData, this.filteredSensorsInfos(groupId), view, true);
           } else {
-            return false;
-          }
-        })
-      ).subscribe(data => {
-        if (data) {
-          this.analyticsData.push({sensorId: changedSensor, data: data[changedSensor].data, interval: data[changedSensor].interval});
-          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.getAnalyticsGraph(key, data[key].data, data[key].interval, view);
-                GraphLoader.getGraph(this.selectedSensors, this.analyticsData, this.filteredSensorsInfos(groupId), view, true);
-              } else {
-                // GraphLoader.getAnalyticsGraph(null, null, null, view);
-                GraphLoader.getGraph(null, null, null, view, null);
-              }
-            }
+            // GraphLoader.getAnalyticsGraph(null, null, null, view);
+            GraphLoader.getGraph(null, null, null, view, null);
           }
         }
-      }, err => this.toastService.showError(err.error.message));
-    }
+      }
+    }, err => this.toastService.showError(err.error.message));
   }
 
   /**
@@ -205 +214 @@
           if (this.observationsData.some(sens => sens.sensorId.toString() === sensorId)) { // if already data for selected sensor in memory
             GraphLoader.getGraph(this.filteredSelectedSensors(groupId), this.filteredObservationData(groupId),
               this.filteredSensorsInfos(groupId), sensorGroupElement, false);
-            // GraphLoader.getMultilineGraph(this.selectedSensors, this.filteredObservationData(groupId), sensorGroupElement)
           } else { // get data from server for added sensor and show graph for selected sensors
             this.showGraph(false, sensorId);
           }
         } else { // remove sensor from graph
-          // GraphLoader.getMultilineGraph(this.selectedSensors, this.filteredObservationData(groupId), sensorGroupElement)
-          GraphLoader.getGraph(this.filteredSelectedSensors(groupId), this.filteredObservationData(groupId),
+            GraphLoader.getGraph(this.filteredSelectedSensors(groupId), this.filteredObservationData(groupId),
             this.filteredSensorsInfos(groupId), sensorGroupElement, false);
-
         }
       }
     }
@@ -236 +242 @@
       sen.sensorId.toString().slice(0, 5) === sensorGroupId);
   }
 
-
+  /**
+   * Filter only selected sensors for group of sensors
+   * @param sensorGroupId group of sensors
+   */
   filteredSelectedSensors(sensorGroupId: string): any {
-    return this.selectedSensors.filter(sen => sen.toString().slice(0, 5) === sensorGroupId );
+    return this.selectedSensors.filter(sen => sen.toString().slice(0, 5) === sensorGroupId);
   }
 
+  /**
+   * Get sensors only for group
+   * @param sensorGroupId group id
+   */
   filteredSensorsInfos(sensorGroupId: string): any {
     return this.sensors.filter(sen => this.selectedSensors.includes(sen.sensorId.toString()) &&
       sen.sensorId.toString().slice(0, 5) === sensorGroupId);
   }
 
-  private getObservations(range: Date[], changedDate: boolean, changedSensorId: string) {
-    const groupId = changedSensorId.toString().slice(0, 5);
+  /**
+   * Gets data from observation endpoint
+   * @param range from and to interval
+   * @param changedDate determines if dates changed so we need refresh all data
+   * @param changedSensorId if selecting sensor only fetch data for this server
+   */
+  getObservations(range: Date[], changedDate: boolean, changedSensorId: string) {
     if (changedDate) { // if changed date we need new data for all sensors
       this.observationsData = []; // empty observation data
       this.selectedSensors.forEach(selectSens => {
-        this.observationService.getObservation$Response({
-          unit_id: this.unitId,
-          sensor_id: parseInt(selectSens, 10),
-          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)
-        }).pipe(
-          map((response: HttpResponse<any>) => {
-            if (response.status === 200) {
-              return response.body;
-            } else if (response.status === 204) {
-              this.toastService.showWarningNoData();
-              return response.body;
-            } else {
-              return false;
-            }
-          }),
-          tap((observations) => {
-            if (observations) {
-              this.observationsData.push({sensorId: selectSens, sensor:
-                this.sensors.find(sens => sens.sensorId.toString() === selectSens.toString()), data: observations});
-            }
-          }),
-          tap(() => {
-            if (this.observationsData && this.observationsData.length > 1) {
-              const view = '#vega_container_' + selectSens.toString().slice(0, 5);
-              setTimeout(() => {
-                console.log(this.selectedSensors);