register and modify new components

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

@@ -44,33 +44,7 @@ Data URL: {{bcInfoService.dataUrl}} -->
         </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>
-
-
+            <p>Purchase history</p>
+            <purchase-history [user]="user"></purchase-history>
     </div>
 </div>

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

@@ -155,9 +155,7 @@ 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);

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

@@ -4,11 +4,13 @@ import {CommonModule} from '@angular/common'
 import { HsPanelHelpersModule } from 'hslayers-ng';
 
 import {BcInfoComponent} from './bc-info.component';
+import { PurchaseHistory } from './purchase-history/purchase-history.component';
+import { Purchase } from './purchase-history/purchase/purchase.component';
 
 @NgModule({
   imports: [CommonModule, HsPanelHelpersModule],
   exports: [BcInfoComponent],
-  declarations: [BcInfoComponent],
+  declarations: [BcInfoComponent, PurchaseHistory, Purchase],
   providers: [],
 })
 export class BcInfoModule {}

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

@@ -1,24 +1,10 @@
 <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">
-                    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>
+    <purchase 
+        class="card"
+        *ngFor="let transfer of lastPurchases; index as i"
+        [hash]="transfer.hash"
+        [amount]="transfer.amount"
+        [extent]="transfer.extent"
+        [timestamp]="transfer.timestamp"
+    ></purchase>
 </div>

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

@@ -1,6 +1,6 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, Input } from '@angular/core'
 import { BcInfoService } from '../bc-info.service'
-import {Purchase} from './purchase/purchase.component'
+import { Purchase } from './purchase/purchase.component'
 
 
 @Component({
@@ -9,12 +9,13 @@ import {Purchase} from './purchase/purchase.component'
 })
 export class PurchaseHistory implements OnInit {
     lastPurchases: Array<Purchase>;
+    @Input() user: string;
 
-    constructor(bcInfoService: BcInfoService) {
+    constructor(private bcInfoService: BcInfoService) {
 
     }
-    
+
     ngOnInit(): void {
-        throw new Error('Method not implemented.');
+        console.log(this.user);
     }
 }

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

@@ -3,7 +3,7 @@
     <div class="card-header">
         <small>{{timestamp}}</small>
         <span style="float: right;">                            
-            <button style="margin-right: 5px" class="btn btn-secondary btn-sm">
+            <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)="expanded = !expanded">

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

@@ -1,20 +1,26 @@
-import { Component } from '@angular/core'
-import {Extent} from 'ol/extent'
-import {BcInfoService} from '../../bc-info.service'
+import { Component, Input } from '@angular/core'
+import { Extent } from 'ol/extent'
+import { BcInfoService } from '../../bc-info.service'
 
 @Component({
     selector: 'purchase',
-    templateUrl: 'purchase.component.html',
+    templateUrl: 'purchase.component.html'
 })
 export class Purchase {
-    hash: string;    
-    timestamp: string;
-    extent: Extent;
-    amount: number;  
+    @Input() hash: string;
+    @Input() timestamp: string;
+    @Input() extent: Extent;
+    @Input() amount: number;
+
     expanded: boolean = false;
     loadingData: boolean = false;
 
-    constructor(bcInfoService: BcInfoService){
+    constructor(bcInfoService: BcInfoService) {
+
+    }
+
 
+    onRequestData() {
+        window.open("https://eo.lesprojekt.cz/produkty/S2/2020/S2A_MSIL2A_20200422T095031_N9999_R079_T33UXQ_20201127T165009_NDVI.tif");
     }
 }