first demo

src/app/bc-info/bc-info.component.html

@@ -5,26 +5,34 @@ Payment hash: {{bcInfoService.paymentHash}} <button (click)="pay()">SEND TX</but
 Price: {{bcInfoService.price}}$$
 <br>
 Data URL: {{bcInfoService.dataUrl}} -->
-<div [hidden]="!isVisible()" class="mainpanel">
+<div [hidden]="!isVisible()" class="mainpanel" style="overflow: auto;">
     <hs-panel-header name="bc-panel" [title]="'Blockchain shop'"></hs-panel-header>
     <div class="card-body">
         <span>
-            <p>User: {{user}}</p>
-            <p>Asset: {{assetId}}</p>
-            <p>Balance: {{userBalance}}</p>
+            <p><b>User:</b> {{user}}</p>
+            <p><b>Asset:</b> {{assetId}}</p>
+            <p><b>Balance:</b> {{userBalance}}</p>
         </span>
-        <hr>     
-        <button *ngIf="!selectingArea" type="button" class="btn btn-primary" (click)="onSelectArea()">Select area</button>        
+        <hr>
+        <button *ngIf="!selectingArea" type="button" class="btn btn-primary" (click)="onSelectArea()">Select
+            area</button>
         <div *ngIf="selectingArea">
-            <span>
-                <p>Extent: {{extent}}</p>
-                <p>Price: {{price}}</p>
+            <p>Select data with <b> Shift + Drag</b></p>
+            <span *ngIf="price">
+                <p><b>Price:</b> {{price}}</p>
             </span>
-            <div >
-                <button type="button" class="btn btn-success">Buy</button>        
-                <button type="button" class="btn btn-danger" (click)="onCancel()">Cancel</button>        
+            <p *ngIf="paymentHash"><b>Payment hash:</b> {{paymentHash}}</p>
+            <div>
+                <button type="button" [disabled]="!price || buyInProgress" class="btn btn-success" (click)="onBuy()">
+                    <span *ngIf="buyInProgress" class="spinner-border spinner-border-sm" role="status"
+                        aria-hidden="true"></span>
+                    Buy
+                </button>
+                <button type="button" class="btn btn-danger" [disabled]="buyInProgress" (click)="onCancel()">Cancel</button>
+                <a *ngIf="dataUrl" class="btn btn-primary" [href]="dataUrl">Download your data!</a>
             </div>
+
         </div>
-        
+
     </div>
 </div>

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

@@ -4,18 +4,20 @@ import {
   ViewRef
 } from '@angular/core';
 
-import {EventsKey} from 'ol/events'
 import ExtentIteraction, { ExtentEvent } from 'ol/interaction/Extent'
 import { shiftKeyOnly } from 'ol/events/condition';
 import {
-  Extent,  
+  Extent,
   getArea
 } from 'ol/extent'
 
+import checkDescription from 'iroha-helpers'
+
 import {
   HsMapService,
   HsPanelComponent,
-  HsLayoutService
+  HsLayoutService,
+  getAccessRights
 } from 'hslayers-ng';
 
 import { BcInfoService } from './bc-info.service';
@@ -28,6 +30,7 @@ export class BcInfoComponent implements HsPanelComponent, OnInit {
   private extentIteraction: ExtentIteraction;
 
   selectingArea: boolean = false;
+  buyInProgress: boolean = false;
 
   user: string = 'kunickyd@test';
   assetId: string = "coin#test"
@@ -35,6 +38,8 @@ export class BcInfoComponent implements HsPanelComponent, OnInit {
   userBalance: number;
   extent: Extent;
   price: number;
+  paymentHash: string;
+  dataUrl: string;
 
   viewRef: ViewRef;
   data: any;
@@ -46,9 +51,17 @@ export class BcInfoComponent implements HsPanelComponent, OnInit {
     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.userBalance = await this.bcInfoService.getUserBalance(this.user, this.userPrivateKey, this.assetId);
   }
 
@@ -61,19 +74,33 @@ export class BcInfoComponent implements HsPanelComponent, OnInit {
 
     this.selectingArea = true;
 
-    map.getTargetElement().addEventListener("mouseup", this.onMouseUp.bind(this));
-    this.extentIteraction.on("extentchanged", this.onExtentChanged.bind(this));
+    map.getTargetElement().addEventListener("mouseup", this.onMouseUp);
+    this.extentIteraction.on("extentchanged", this.onExtentChanged);
 
     map.addInteraction(this.extentIteraction);
   }
 
-  onCancel(): void{
+  async onBuy(): Promise<void> {
+    if(!confirm("You sure?")){
+      return;
+    }
+
+    this.buyInProgress = true;
+
+    this.paymentHash = await this.bcInfoService.transferAssets(this.user, this.userPrivateKey, this.assetId, this.extent, this.price);
+    this.refreshUserBalance();
+    this.dataUrl = "https://eo.lesprojekt.cz/produkty/S2/2020/S2A_MSIL2A_20200422T095031_N9999_R079_T33UXQ_20201127T165009_NDVI.tif" //await this.bcInfoService.requestData(this.paymentHash, this.user);
+
+    this.buyInProgress = false; 
+  }
+
+  onCancel(): void {
     let map = this.mapService.getMap();
 
-    this.extent = this.price = null;
-    this.extentIteraction.setExtent(null);
-    
-    map.getTargetElement().removeEventListener("mouseup", this.onMouseUp);
+    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);
@@ -81,14 +108,30 @@ export class BcInfoComponent implements HsPanelComponent, OnInit {
     this.selectingArea = false;
   }
 
-  async onMouseUp(event): Promise<void>{   
-    console.log("up");
+  async onMouseUp(event): Promise<void> {
     if (this.extent) {
-      this.price = await this.bcInfoService.getPrice(getArea(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{
-    this.extent = event.extent    
+  onExtentChanged(event: ExtentEvent): any {
+    if(event.extent){
+      this.extent = this.roundExtentCoords(event.extent); //!! workaround for fixed description length to 64 chars in iroha-helpers !!
+    }    
+  }
+
+  //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;
   }
 }

src/app/bc-info/bc-info.service.ts

@@ -50,8 +50,6 @@ export class BcInfoService {
         pageSize: 10
       });
 
-      console.debug(data);
-
       let balance: number = parseFloat(data[0].balance);      
       return balance;
 
@@ -60,7 +58,7 @@ export class BcInfoService {
     }
   }
 
-  async transferAssets(user: string, userPrivateKey: string, assetId: string, description: string, amount: number): Promise<string> {
+  async transferAssets(user: string, userPrivateKey: string, assetId: string, extent: number[], amount: number): Promise<string> {
 
     let commandOptions = {
       privateKeys: [userPrivateKey], // Array of private keys in hex format
@@ -76,12 +74,10 @@ export class BcInfoService {
         srcAccountId: user,
         destAccountId: this._bcConfig.ADMIN_USER,
         assetId,
-        description,
-        amount: String(amount),
+        description: JSON.stringify({ extent }),
+        amount: String(amount), 
       });
 
-      console.debug(response);
-
       return response["txHash"][0];
 
     } catch (err) {
@@ -91,15 +87,13 @@ export class BcInfoService {
 
   async getPrice(area: number) : Promise<number>{
     let response = await this.httpClient.post(this._bcConfig.CHAIN4ALL_SERVICE_URL + '/price', { area }, { headers: this.basicAuthHeaders} ).toPromise();
-
-    console.debug(response);
+    
     return response["price"];
   }
 
   async requestData(paymentHash: string, user: string) : Promise<string>{
     let response = await this.httpClient.post(this._bcConfig.CHAIN4ALL_SERVICE_URL + '/buy', { txHash: paymentHash, user }, { headers: this.basicAuthHeaders}).toPromise();
-
-    console.debug(response);
+    
     return response["dataUrl"];
   }
 }