chain4all-frontend/src/app/bc-info/bc-info.component.ts

import {
  Component,
  OnInit,
  ViewRef
} from '@angular/core';

import ExtentIteraction, { ExtentEvent } from 'ol/interaction/Extent'
import { shiftKeyOnly } from 'ol/events/condition';
import { transformExtent } from 'ol/proj'
import {
  Extent,
  getArea
} from 'ol/extent'

import checkDescription from 'iroha-helpers'

import {
  HsMapService,
  HsPanelComponent,
  HsLayoutService,
  getAccessRights
} from 'hslayers-ng';

import { BcInfoService } from './bc-info.service';

@Component({
  selector: 'blockchain-info',
  templateUrl: 'bc-info.component.html',
})
export class BcInfoComponent implements HsPanelComponent, OnInit {
  private extentIteraction: ExtentIteraction;

  selectingArea: boolean = false;
  buyInProgress: boolean = false;
  getUserBalanceInProgress: boolean = false;

  user: string = 'kunickyd@test';
  assetId: string = "coin#test"
  userPrivateKey: string = '5ee90333f04f42f457f2d10f1cbd7ec870b041184074dce2b744aa17e67b1e9a';
  userBalance: number;
  extent: Extent;
  price: number;
  paymentHash: string;
  dataUrl: string;

  viewRef: ViewRef;
  data: any;
  name: string = "bc-panel";

  lastTransfers: Array<any> = [
    {
      hash: "dafsdfagfsdgsrggfsdfasdfgghvccvbgdfgdsf",
      user: "kunickyd@test",
      timestamp: "20.3.2021 14:35",
      extent: "[36, 58, 78, 65]",
      amount: "58.5",
      expanded: true
    },
    {
      hash: "ddafs65432df456d4fsa54as9d8f4df",
      user: "kunickyd@test",
      timestamp: "20.3.2021 14:35",
      extent: "[36, 58, 78, 65]",
      amount: "58.5",
      expanded: false
    },
    {
      hash: "54d6afs54df488d8da98f7d75dddafdf5d5f5d5f5d5fd",
      user: "kunickyd@test",
      timestamp: "20.3.2021 14:35",
      extent: "[36, 58, 78, 65]",
      amount: "58.5",
      expanded: true
    }
  ];

  constructor(
    private bcInfoService: BcInfoService,
    private mapService: HsMapService,
    private hsLayoutService: HsLayoutService
  ) {
    this.extentIteraction = new ExtentIteraction({ condition: shiftKeyOnly });

    //bind event handlers to this scope
    this.onMouseUp = this.onMouseUp.bind(this);
    this.onExtentChanged = this.onExtentChanged.bind(this);
  }

  async ngOnInit(): Promise<void> {
    await this.refreshUserBalance();
  }

  async refreshUserBalance(): Promise<void> {
    this.getUserBalanceInProgress = true;
    this.userBalance = await this.bcInfoService.getUserBalance(this.user, this.userPrivateKey, this.assetId);
    this.getUserBalanceInProgress = false;
  }

  isVisible(): boolean {
    return this.hsLayoutService.panelVisible(this.name);
  }

  onSelectArea(): void {
    let map = this.mapService.getMap();

    this.selectingArea = true;

    map.getTargetElement().addEventListener("mouseup", this.onMouseUp);
    this.extentIteraction.on("extentchanged", this.onExtentChanged);

    map.addInteraction(this.extentIteraction);
  }

  async onBuy(): Promise<void> {
    if (!confirm("You sure?")) {
      return;
    }

    this.buyInProgress = true;

    let transformedExtent = transformExtent(this.extent, this.mapService.getMap().getView().getProjection(), "EPSG:4326");
    transformedExtent = this.roundExtentCoords(transformedExtent);
    //console.log(transformedExtent);

    this.paymentHash = await this.bcInfoService.transferAssets(this.user, this.userPrivateKey, this.assetId, transformedExtent, this.price);
    this.refreshUserBalance();
    this.dataUrl = await this.bcInfoService.requestData(this.paymentHash, this.user);//"https://eo.lesprojekt.cz/produkty/S2/2020/S2A_MSIL2A_20200422T095031_N9999_R079_T33UXQ_20201127T165009_NDVI.tif"

    this.buyInProgress = false;
  }

  onCancel(): void {
    let map = this.mapService.getMap();

    this.extent = this.price = this.paymentHash = this.dataUrl = null;
    this.extentIteraction.setExtent(null);

    map.getTargetElement().removeEventListener("mouseup", this.onMouseUp); //This doesnt seem to work...
    this.extentIteraction.un("extentchanged", this.onExtentChanged);

    map.removeInteraction(this.extentIteraction);

    this.selectingArea = false;
  }

  async onMouseUp(event): Promise<void> {
    if (this.extent) {
      this.price = this.roundTwoDecimalPlaces(await this.bcInfoService.getPrice(getArea(this.extent))); //round the price => allow more decimal places in iroha?
    }
  }

  onExtentChanged(event: ExtentEvent): any {
    if (event.extent) {
      this.extent = this.roundExtentCoords(event.extent); //!! workaround for fixed description length to 64 chars in iroha-helpers !!
    }
  }

  onRequestData(){
    window.open("https://eo.lesprojekt.cz/produkty/S2/2020/S2A_MSIL2A_20200422T095031_N9999_R079_T33UXQ_20201127T165009_NDVI.tif");
  }

  onTest() {
    //this.bcInfoService.getUserTransactions(this.user, this.userPrivateKey);
    //console.log(this.mapService.getMap().getView().getProjection());
  }

  //UTILS SECTION - should be separeted in solo file
  private roundExtentCoords(extent: Extent): Extent {
    let roundedExtent: number[] = new Array<number>(4);

    for (let i = 0; i !== extent.length; i++) {
      roundedExtent[i] = this.roundTwoDecimalPlaces(extent[i]);
    }

    return roundedExtent;
  }

  private roundTwoDecimalPlaces(num: number): number {
    return Math.round((num + Number.EPSILON) * 100) / 100;
  }
}