choose area and get price

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

@@ -8,7 +8,13 @@ Data URL: {{bcInfoService.dataUrl}} -->
 <div [hidden]="!isVisible()" class="mainpanel">
     <hs-panel-header name="bc-panel" [title]="'Blockchain shop'"></hs-panel-header>
     <div class="card-body">
-        <h1>henlooo</h1>
-        <button>choose area</button>
+        <span>
+            <p>User: {{user}}</p>
+            <p>Asset: {{assetId}}</p>
+            <p>Balance: {{userBalance}}</p>
+        </span>
+        <button type="button" class="btn btn-primary" (click)="onChooseArea()"> "Confirm area" : "Choose Area"}}</button>        
+        <p>Extent: {{extent}}</p>
+        <p>Price: {{price}}</p>
     </div>
 </div>

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

@@ -1,5 +1,11 @@
 import { Component, OnInit, ViewRef } from '@angular/core';
-import { BcInfoService } from './bc-info.service';
+
+import ExtentIteraction from 'ol/interaction/Extent'
+import { shiftKeyOnly } from 'ol/events/condition';
+import {
+  Extent,
+  getArea
+ } from 'ol/extent'
 
 import {
   HsMapService,
@@ -7,28 +13,53 @@ import {
   HsLayoutService
 } from 'hslayers-ng';
 
+import { BcInfoService } from './bc-info.service';
+
 @Component({
   selector: 'blockchain-info',
   templateUrl: 'bc-info.component.html',
 })
+export class BcInfoComponent implements HsPanelComponent {
+  private extentIteraction: ExtentIteraction;
+
+  choosingArea: boolean = false;
+
+  user: string = 'kunickyd@test';
+  assetId: string = "coin#test"
+  userPrivateKey: string = '5ee90333f04f42f457f2d10f1cbd7ec870b041184074dce2b744aa17e67b1e9a';
+  userBalance: number;    
+  extent: Extent;
+  price: number;
 
-export class BcInfoComponent implements OnInit, HsPanelComponent {
   viewRef: ViewRef;
   data: any;
-  name: string;
-  
+  name: string = "bc-panel";
+
   constructor(
     private bcInfoService: BcInfoService,
     private mapService: HsMapService,
     private hsLayoutService: HsLayoutService
-    ) { 
-      this.name = "bc-panel";
+  ) {
+    this.extentIteraction = new ExtentIteraction({ condition: shiftKeyOnly });
+  }
 
-    }
-  
   isVisible(): boolean {
     return this.hsLayoutService.panelVisible(this.name);
   }
 
-  ngOnInit() { }
+  onChooseArea(): void {
+    let map = this.mapService.getMap();
+    
+    this.choosingArea = true;
+    
+    map.getTargetElement().addEventListener("mouseup", async (event) => {
+      if(this.extent){
+        this.price = await this.bcInfoService.getPrice(getArea(this.extent)); 
+      }        
+    });
+
+    this.extentIteraction.on("extentchanged", (event) => this.extent = event.extent);
+
+    map.addInteraction(this.extentIteraction);
+  }
 }

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

@@ -16,18 +16,13 @@ export class BcInfoService {
 
   private readonly _bcConfig: BcConfig;
 
-  user = 'kunickyd@test';
-  userPrivateKey = '5ee90333f04f42f457f2d10f1cbd7ec870b041184074dce2b744aa17e67b1e9a';
-  userBalance = -1;
-  price = -1;
-  paymentHash = "";
-  dataUrl = "";
-  extent = [ //bottom left and top right point should be enough
-    [48.5, 17],
-    [49, 17],
-    [49, 16.5],
-    [48.5, 16.5]
-  ];
+  
+  // extent = [ //bottom left and top right point should be enough
+  //   [48.5, 17],
+  //   [49, 17],
+  //   [49, 16.5],
+  //   [48.5, 16.5]
+  // ];
 
   constructor(private httpClient: HttpClient, private appSettings: AppConfigService ) {
     this._bcConfig = appSettings.config;
@@ -94,8 +89,8 @@ export class BcInfoService {
     }
   }
 
-  async getPrice(extent: Array<Array<number>>) : Promise<number>{
-    let response = await this.httpClient.post(this._bcConfig.CHAIN4ALL_SERVICE_URL + '/price', { extent: extent }, { headers: this.basicAuthHeaders} ).toPromise();
+  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"];