gui prototype

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

@@ -14,15 +14,18 @@ Data URL: {{bcInfoService.dataUrl}} -->
             <p><b>Asset:</b> {{assetId}}</p>
             <p>
                 <b>Balance:</b> {{userBalance}}
-                <button type="button" [disabled]="getUserBalanceInProgress" class="btn btn-secondary btn-sm" (click)="refreshUserBalance()" title="Refresh balance">
-                    <i *ngIf="!getUserBalanceInProgress" class="icon-refresh"></i>             
-                    <span *ngIf="getUserBalanceInProgress" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 
+                <button type="button" [disabled]="getUserBalanceInProgress" class="btn btn-secondary btn-sm"
+                    (click)="refreshUserBalance()" title="Refresh balance">
+                    <i *ngIf="!getUserBalanceInProgress" class="icon-refresh"></i>
+                    <span *ngIf="getUserBalanceInProgress" class="spinner-border spinner-border-sm" role="status"
+                        aria-hidden="true"></span>
                 </button>
             </p>
         </span>
         <hr>
         <button *ngIf="!selectingArea" type="button" class="btn btn-primary" (click)="onSelectArea()">Select
             area</button>
+
         <div *ngIf="selectingArea">
             <p>Select area with <b> Shift + Drag</b></p>
             <span *ngIf="price">
@@ -31,12 +34,43 @@ Data URL: {{bcInfoService.dataUrl}} -->
             <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>
+                    <span *ngIf="buyInProgress" class="spinner-border spinner-border-sm" role="status"></span>
                     Buy
                 </button>
-                <button type="button" class="btn btn-danger" [disabled]="buyInProgress" (click)="onCancel()">Cancel</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>
+            <p>Transaction history</p>
+            <div id="tx-history">
+                <div *ngFor="let transfer of lastTransfers; index as i" class="card">
+                    <div class="card-header">
+                        <small>{{transfer.timestamp}}</small>
+
+                        <span style="float: right;">                            
+                            <button style="margin-right: 5px" class="btn btn-secondary btn-sm" (click)="onRequestData()">
+                                Data
+                            </button>
+                            <button style="margin-right: 5px" class="btn btn-sm" (click)="transfer.expanded = !transfer.expanded">
+                                <i [class]="transfer.expanded ? 'icon-arrow-up' : 'icon-arrow-down'"></i>
+                            </button>
+                        </span>
+                        
+                    </div>
+
+                    <div [class]="transfer.expanded ? '' : 'collapse'">
+                        <div class="card-body">
+                            Extent: {{transfer.extent}}
+                            Amount: {{transfer.amount}}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
     </div>
 </div>

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

@@ -47,6 +47,33 @@ export class BcInfoComponent implements HsPanelComponent, OnInit {
   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,
@@ -128,8 +155,12 @@ export class BcInfoComponent implements HsPanelComponent, OnInit {
     }
   }
 
+  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);
+    //this.bcInfoService.getUserTransactions(this.user, this.userPrivateKey);
     //console.log(this.mapService.getMap().getView().getProjection());
   }