aswi2021codebakers-gitlab/src/app/unit/components/unit.component.ts @ 086f94e9

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 {AggregationModel} from '../../shared/models/aggregationModel';
import * as moment from 'moment-timezone';
import {GraphLoader} from '../../shared/graph-loading/graphloader';
import {SensorsService} from '../../shared/api/endpoints/services/sensors.service';
import {HttpResponse} from '@angular/common/http';
import {ToastService} from '../../shared/services/toast.service';
import {Sensor} from '../../shared/api/endpoints/models/sensor';
import {ObservationService} from '../../shared/api/endpoints/services/observation.service';


@Component({
  selector: 'app-unit',
  templateUrl: './unit.component.html',
  styleUrls: ['./unit.component.scss']
})
export class UnitComponent implements OnInit {

  preselectedSensors: string;
  unitId: number;
  viewCount = 0;
  data = [];
  time = [];
  from: Date;
  to: Date;
  today: Date;
  analyticsData: any[] = [];
  observationsData: any[] = [];
  sensorGroups = [];
  selectedSensors: number[] = [];
  sensors: Sensor[];
  showAggregation = false;
  aggregationFunction: AggregationModel[];
  selectedAggregationFunction = 'DAY';
  useAnalyticsData = false;

  constructor(
    private activatedRoute: ActivatedRoute,
    private analyticsService: AnalyticsService,
    private sensorService: SensorsService,
    private toastService: ToastService,
    private observationService: ObservationService
  ) {
    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.sensorService.getUnitSensors({unit_id: this.unitId}).pipe(
      tap(sens => {
        this.sensors = sens;
      }),
      tap(() => {
        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)) {
              this.sensorGroups.push(sensorType);
              setTimeout(() => {
                GraphLoader.getGraph(null, null, null, '#vega_container_' + sensor.sensorId.toString().slice(0, 5));
              }, 0);
            }
          });
        }
      })
    ).toPromise().then();
  }

  ngOnInit(): void {
  }

  showGraph(changedDate: boolean = true, changedSensor: number = null) {
    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;
    }

    if (moment(range[1]).diff(moment(range[0]), 'days') > 7) {
      this.useAnalyticsData = true;
      this.showAggregation = true;
      this.getAnalytics(range, changedDate, changedSensor);
    } else {
      this.useAnalyticsData = false;
      this.showAggregation = false;
      this.getObservations(range, changedDate, changedSensor);
    }
  }

  getAnalytics(range: Date[], changedDate: boolean, changedSensor: number) {
    if (changedDate) {
      this.selectedSensors.forEach(selectSens => {
        this.analyticsService.getAnalytics$Response({unit_id: this.unitId, sensor_id: selectSens,
          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.getGraph(null, null, null, '#vega_container_' + selectSens.toString().slice(0, 5));
              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.getGraph(key, data[key].data, data[key].interval, view);
                } else {
                  GraphLoader.getGraph(null, null, null, view);
                }
              }
            }
          }
        }, err => this.toastService.showError(err.error.message));
      });
    } else  {
      this.analyticsService.getAnalytics$Response({unit_id: this.unitId, sensor_id: changedSensor,
        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: 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.getGraph(key, data[key].data, data[key].interval, view);
              } else {
                GraphLoader.getGraph(null, null, null, view);
              }
            }
          }
        }
      }, err => this.toastService.showError(err.error.message));
    }
  }

  /**
   * Check button handler.
   * @param sensorId checked sensorId
   * @param event event for getting if checked or unchecked
   */
  addSensorToGraph(sensorId: number, event) {
    const groupId = sensorId.toString().slice(0, 5);
    const sensorGroupElement = '#vega_container_' + groupId;
    if (!this.selectedSensors.find(sensId => sensId.toString().slice(0, 5) === groupId)) { // if group of sensors is empty show empty graph
      GraphLoader.getGraph(null, null, null, sensorGroupElement);
    } else {
      if (this.useAnalyticsData) { // use analytics data
        if (event.checked) { // if checked > add to graph
          if (this.analyticsData.some(sens => sens.sensorId === sensorId)) { // if already data for selected sensor in memory
            GraphLoader.getGraph(sensorId, this.analyticsData.find(sens => sens.sensorId === sensorId).data,
              this.analyticsData.find(sens => sens.sensorId === sensorId).interval, 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.getGraph(sensorId, this.analyticsData.find(sens => sens.sensorId === sensorId).data,
            this.analyticsData.find(sens => sens.sensorId === sensorId).interval, sensorGroupElement);
        }
      } else { // use observations data
        if (event.checked) { // if checked > add to graph
          if (this.observationsData.some(sens => sens.sensorId === sensorId)) { // if already data for selected sensor in memory
            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)
        }
      }
    }
  }

  /**
   * Filter observations data only fro selected sensors.
   * @param sensorGroupId id of changed sensor group
   */
  filteredObservationData(sensorGroupId: string): any {
    return this.observationsData.filter(sen => this.selectedSensors.includes(sen.sensorId.toString()) &&
      sen.sensorId.toString().slice(0, 5) === sensorGroupId);
  }

  /**
   * Filter analytics data only fro selected sensors.
   */
  filteredAnalyticsData(): any {
    return this.analyticsData.filter(sen => this.selectedSensors.includes(sen.sensorId.toString()));
  }

  private getObservations(range: Date[], changedDate: boolean, changedSensorId: number) {
    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: selectSens,
          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);
                GraphLoader.getMultilineGraph(this.selectedSensors, this.filteredObservationData(selectSens.toString().slice(0, 5)), view);
              }, 0);
            }
          })
        ).toPromise().then().catch(err => this.toastService.showError(err));
      });
    } else {
      this.observationService.getObservation$Response({
        unit_id: this.unitId,
        sensor_id: changedSensorId,
        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;
          }
        })
      ).subscribe(
        observations => {
          this.observationsData.push({sensorId: changedSensorId, sensor:
              this.sensors.find(sens => sens.sensorId.toString() === changedSensorId.toString()), data: observations});
          const view = '#vega_container_' + changedSensorId.toString().slice(0, 5);
          if (observations) {
            GraphLoader.getMultilineGraph(this.selectedSensors, this.filteredObservationData(changedSensorId.toString().slice(0, 5)), view);
          } else {
            GraphLoader.getMultilineGraph(null, null, null);
          }
        }, err => this.toastService.showError(err.error.message));
    }
  }
}