add user binding & load data indication

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

@@ -52,6 +52,7 @@ Data URL: {{bcInfoService.dataUrl}} -->
                     [amount]="purchase.amount"
                     [extent]="purchase.extent"
                     [timestamp]="purchase.timestamp"
+                    [user]="user"
                 ></purchase>
             </div>
     </div>

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

@@ -3,8 +3,9 @@
     <div class="card-header">
         <small>{{timestamp | date:"dd.MM.yyyy hh:mm:ss"}}</small>
         <span style="float: right;">                            
-            <button style="margin-right: 5px" class="btn btn-secondary btn-sm" (click)="onRequestData()">
+            <button [disabled]="loadingData" style="margin-right: 5px" class="btn btn-secondary btn-sm" (click)="onRequestData()">
                 Data
+                <span *ngIf="loadingData" class="spinner-border spinner-border-sm" role="status"></span>
             </button>
             <button style="margin-right: 5px" class="btn btn-sm" (click)="expanded = !expanded">
                 <i [class]="expanded ? 'icon-arrow-up' : 'icon-arrow-down'"></i>

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

@@ -11,16 +11,19 @@ export class Purchase {
     @Input() timestamp: string;
     @Input() extent: Extent;
     @Input() amount: number;
+    @Input() user: string;
 
     expanded: boolean = false;
     loadingData: boolean = false;
 
-    constructor(bcInfoService: BcInfoService) {
-
-    }
+    constructor(private bcInfoService: BcInfoService) {}
 
+    async onRequestData(): Promise<void> {
+        this.loadingData = true;
 
-    onRequestData() {
-        window.open("https://eo.lesprojekt.cz/produkty/S2/2020/S2A_MSIL2A_20200422T095031_N9999_R079_T33UXQ_20201127T165009_NDVI.tif");
+        let dataUrl = await this.bcInfoService.requestData(this.hash, this.user);
+        window.open(dataUrl);
+        
+        this.loadingData = false;
     }
 }