visualize-all.component.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { GeneratorService } from '../services/generator.service';
import { DataService } from '../services/data.service';
import { VisualizeService } from '../services/visualize.service';
import { Router } from '@angular/router';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import 'rxjs/add/operator/map';
import { $ } from 'protractor';
import * as moment from 'moment';
import { MatDatepickerModule, MatDatepicker } from '@angular/material/datepicker';
import { GeneratorObject } from '../generator-object';
import { LoginService } from '../services/login.service';

@Component({
  selector: 'app-visualize-all',
  templateUrl: './visualize-all.component.html',
  styleUrls: ['./visualize-all.component.css']
})
export class VisualizeAllComponent implements OnInit {
  public generators$: Array<GeneratorObject>;
  public chart$: Object;
  public unit$: any = null;
  public count: any = null;
  public today$: any = null;
  public function$: any = null;
  public range$: any = null;
  public startTime$: any = null;
  public endTime$: any = null;
  public dataNames$;
  public laymanDataVal$: any = null;
  public chart: any = null;
  public signal = false;
  public errorMessage$: any = null;
  private jsonToken$: string;
  events: string[] = [];
  @ViewChild('time_span') timeSpan: ElementRef;
  @ViewChild('start_time') startTime: ElementRef;
  @ViewChild('end_time') endTime: ElementRef;

  constructor(public data: DataService, public graphData: VisualizeService, public genData: GeneratorService, private login: LoginService,
    private router: Router, private http: HttpClient) { }

  // create real chart based off of user data
  resetAndRemakeChart() {
    let startTime = this.startTime.nativeElement.value;
    let endTime = this.endTime.nativeElement.value;
    const errorMessage = [];
    let optionalErrorMessage = '';
    let genVal = '';
    let genVals = [];
    const genName = [];
    const genValArray = [];
    let genCount;
    if (this.count === 0) {
      if (this.generators$) {
        genVals.push(this.generators$[0].gen_id + ',' + this.generators$[0].gen_name);
      }
    } else {
      genVals = Array.prototype.slice.call(document.querySelectorAll('#gen_select option:checked'), 0).map(function (v, i, a) {
        return v.value;
      });
    }
    genCount = genVals.length;
    this.signal = false;

    if (genCount === 0 ) {
      genVal = 'generator';
      this.signal = true;
      errorMessage.push(genVal);
    } else if (genVals[0] !== '') {
      for (let i = 0; i < genVals.length; i++) {
        const array = genVals[i].split(',');
        const n = 0;
        if (genVal === '') {
          genVal = array[n];
          genValArray.push(array[n]);
          genName.push(array[n + 1]);
        } else {
          genVal = genVal + '|' + array[n];
          genValArray.push(array[n]);
          genName.push(array[n + 1]);
        }
      }
    } else if (genCount > 5) {
      genVal = 'generator';
      errorMessage.push(genVal);
    } else {
      genVal = 'generator';
      this.signal = true;
      errorMessage.push(genVal);
    }

    const funcVals = Array.prototype.slice.call(document.querySelectorAll('#func_select option:checked'), 0).map(function (v, i, a) {
      return v.value;
    });
    let funcVal = '';
    if (funcVal[0] !== '') {
      funcVal = funcVals[0] + '';
    }

    const rangeVals = Array.prototype.slice.call(document.querySelectorAll('#func_time_select option:checked'), 0).map(function (v, i, a) {
      return v.value;
    });
    let rangeVal = '';
    if (rangeVal[0] !== '') {
      rangeVal = rangeVals[0] + '';
    }

    let dataVal = '';
    if (this.count === 0) {
      dataVal = 'intake.pressure';
    } else {
      const dataVals = Array.prototype.slice.call(document.querySelectorAll('#data_select option:checked'), 0).map(function (v, i, a) {
        return v.value;
      });
      if (dataVals[0] !== '') {
        dataVal = this.data.convertNames(dataVals[0], 'metric');
      } else {
        dataVal = 'metric';
        errorMessage.push(dataVal);
        this.signal = true;
      }
    }
    if (dataVal !== null) {
      this.laymanDataVal$ = this.data.convertNames(dataVal, 'layman');
    }


    if (this.count === 0) {
      startTime = this.today$;
      endTime = this.today$;
    } else {
      startTime = this.startTime.nativeElement.value;
      endTime = this.endTime.nativeElement.value;
    }
    let timeStart = '';
    let timeEnd = '';
    if (startTime === '') {
      timeStart = 'time start';
      errorMessage.push(timeStart);
      this.signal = true;
    } else if (endTime === '') {
      timeEnd = 'time end';
      errorMessage.push(timeEnd);
      this.signal = true;
    }
    const startArray = startTime.split('-');
    const endArray = endTime.split('-');
    let startNumArray;
    let endNumArray;
    if (startArray.length === 3 && endArray.length === 3) {
      startNumArray = [parseInt(startArray[0], 10), parseInt(startArray[1], 10), parseInt(startArray[2], 10)];
      endNumArray = [parseInt(endArray[0], 10), parseInt(endArray[1], 10), parseInt(endArray[2], 10)];
      if (startNumArray[0] === endNumArray[0]) { // if years are equal
        if (startNumArray[1] === endNumArray[1]) { // if months are equal
          if (startNumArray[2] <= endNumArray[2]) { // if start days are less than or equal
            timeStart = startArray[0] + '/' + startArray[1] + '/' + startArray[2] + '-00:00:00';
            timeEnd = endArray[0] + '/' + endArray[1] + '/' + endArray[2] + '-23:59:59';
          } else {
            timeStart = 'time start';
            errorMessage.push(timeStart);
            this.signal = true;
          }
        } else if (startNumArray[1] < endNumArray[1]) { // if start month is less
          timeStart = startArray[0] + '/' + startArray[1] + '/' + startArray[2];
          timeEnd = endArray[0] + '/' + endArray[1] + '/' + endArray[2];
        } else {
          timeStart = 'time start';
          errorMessage.push(timeStart);
          this.signal = true;
        }
      } else if (startNumArray[0] < endNumArray[0]) { // if start year is less
        timeStart = startArray[0] + '/' + startArray[1] + '/' + startArray[2];
        timeEnd = endArray[0] + '/' + endArray[1] + '/' + endArray[2];
      } else {
        timeStart = 'time start';
        errorMessage.push(timeStart);
        this.signal = true;
      }
    } else {
      timeStart = 'time start';
      errorMessage.push(timeStart);
      this.signal = true;
    }
    if (((funcVal === 'none') && (rangeVal !== 'none')) || ((funcVal !== 'none') && (rangeVal === 'none'))) {
      optionalErrorMessage = ' Both function and range must be defined, or neither.';
      this.signal = true;
    }
    this.errorMessage$ = '';
    for (let i = 0; i < errorMessage.length; i++) {
      if (i === 0) {
        this.errorMessage$ = 'Error: ' + errorMessage[i];
        if ((i + 1) === errorMessage.length) {
          this.errorMessage$ = this.errorMessage$ + ' is invalid.';
        }
      } else if (((i + 1) === errorMessage.length) && (i !== 0)) {
        this.errorMessage$ = this.errorMessage$ + ' and ' + errorMessage[i] + ' are invalid.';
      } else {
        this.errorMessage$ = this.errorMessage$ + ', ' + errorMessage[i] + ' is invalid.';
      }

    }
    if (this.errorMessage$ !== null) {
      this.errorMessage$ = this.errorMessage$ + '' + optionalErrorMessage;
    } else {
      this.errorMessage$ = optionalErrorMessage;
    }

    if (this.signal === false) {
      const labels = [];
      const data = [];
      console.log(timeStart, timeEnd, funcVal, genVal, dataVal, rangeVal);
      try {
        this.graphData.getDataForVis(this.jsonToken$, timeStart, timeEnd, funcVal, genVal, dataVal, rangeVal)
          .subscribe((graphData) => {
            this.chart$ = graphData;
            let sig;
            let count = 0;
            let realCount;
            for (let n = 0; n < (Object.keys(this.chart$['outputs'][0]['dps']).length); n++) {
              labels.push(this.chart$['outputs'][0]['dps'][n][0]);
              if (n === 0) {
                sig = this.chart$['outputs'][0]['dps'][n][0];
                count = 1;
              } else if (sig === this.chart$['outputs'][0]['dps'][n][0]) {
                realCount = count;
              } else {
                count++;
              }
            }
            for (let c = 0; c < genCount; c++) {
              const genData = [];
              for (let n = 0; n < (Object.keys(this.chart$['outputs'][0]['dps']).length); n++) {
                genData.push(this.chart$['outputs'][0]['dps'][n][c + 1]);
              }
              data.push(genData);
            }
            if (this.chart !== null) {
              this.chart.destroy();
            }
            this.chart = this.graphData.createChart(labels, data, genName);
            this.unit$ = this.data.getUnits(dataVal);
            this.startTime$ = startArray[1] + '/' + startArray[2] + '/' + startArray[0];
            this.endTime$ = endArray[1] + '/' + endArray[2] + '/' + endArray[0];
            this.function$ = funcVal;
            this.range$ = rangeVal;
          });
      } catch (err) {
        return err;
      }
    } else if (this.signal === true) {
      console.log('invalid entry');
    }
    this.count = 1;
  }

  async ngOnInit() {
    localStorage.removeItem('gen_id');
    localStorage.removeItem('org_id');
    localStorage.removeItem('gen_name');
    localStorage.removeItem('data_type');
    localStorage.removeItem('fault_type');
    this.dataNames$ = this.data.getAllNames('layman');

    this.today$ = new Date().toISOString().split('T')[0];
    this.count = 0;


    this.jsonToken$ = await this.login.getToken();
    this.generators$ = await this.genData.getGenerators(this.jsonToken$);
    this.resetAndRemakeChart();

  }
}