Add dialog to purchase sessions

src/app/listorders/listorders.component.html

@@ -8,7 +8,7 @@
 			{{ vE.listordersEndDate }}{{(ownerUpdate | async)!.expiration | date: 'YYYY-MM-dd'}}
 			</td>
 			<td>
-				<button mat-icon-button color="primary">
+				<button mat-icon-button color="primary" (click)="paySession()">
 					<mat-icon class="icon">queue</mat-icon>
 				</button>
 			</td>

src/app/listorders/listorders.component.ts

@@ -4,6 +4,7 @@ import { Order } from '../order/order.model';
 import { FullnodeService } from '../fullnode.service';
 import { UserService } from '../user.service';
 import { Owner } from '../owner.model';
+import { User } from '../user.model';
 import { OrderService } from '../order/order.service';
 
 import { MatDialog, MatDialogConfig} from '@angular/material/dialog';
@@ -20,6 +21,7 @@ import { faTrash } from '@fortawesome/free-solid-svg-icons';
 
 import { LanguageService } from '../language.service';
 import { LanguageData } from '../language.model';
+import {SessionpayComponent} from '../sessionpay/sessionpay.component';
 
 @Component({
 	selector: 'app-list-orders',
@@ -71,6 +73,12 @@ export class ListOrdersComponent implements OnInit, OnDestroy{
 			viewkey: '',
 			crmToken: ''
 		};
+	zecPrice: number = 1;
+	nodeAddress: string = '';
+	session: string = '';
+	addrUpdate: Observable<string>;
+	priceUpdate: Observable<number>;
+	userUpdate: Observable<User>;
 	// -------------------------------------
 	// -------------------------------------
 	//
@@ -97,11 +105,24 @@ export class ListOrdersComponent implements OnInit, OnDestroy{
 		private languageService : LanguageService,
 		public orderService: OrderService,
 		public userService: UserService,
+		public fullnodeService: FullnodeService,
 		private dialog: MatDialog)
 	{
 		this.ownerUpdate = userService.ownerUpdate;
+		this.userUpdate = userService.userUpdate;
 		this.orderService.getAllOrders();
 		this.ordersUpdate = orderService.allOrdersUpdate;
+		this.addrUpdate = fullnodeService.addrUpdate;
+		this.priceUpdate = fullnodeService.priceUpdate;
+		this.priceUpdate.subscribe(price => {
+			this.zecPrice = price;
+		});
+		this.addrUpdate.subscribe(nAddress => {
+			this.nodeAddress = nAddress;
+		});
+		this.userUpdate.subscribe(user => {
+			this.session = user.session;
+		});
 	}
 
 	ngOnInit(){
@@ -237,4 +258,17 @@ export class ListOrdersComponent implements OnInit, OnDestroy{
       );
   }  
 
+  paySession() {
+	  const dialogConfig = new MatDialogConfig();
+
+	  dialogConfig.disableClose = true;
+	  dialogConfig.autoFocus = true;
+	  dialogConfig.data = {
+		  addr: this.nodeAddress,
+		  session: this.session,
+		  zecPrice: this.zecPrice
+	  };
+
+	  const dialogRef = this.dialog.open(SessionpayComponent, dialogConfig);
+  }
 }

src/app/sessionpay/sessionpay.component.css

@@ -0,0 +1,20 @@
+
+* {
+	font-family: 'Spartan', sans-serif;
+}
+
+.settings-title {
+	font-family: 'Spartan', sans-serif;
+	background: #ff5722;
+	color: white;
+	font-size: 30px;
+	text-align: center;
+	padding: 5px;
+	margin-bottom: 10px;
+}
+
+.container {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}

src/app/sessionpay/sessionpay.component.html

@@ -1,3 +1,4 @@
+<div class="settings-title">Purchase Session</div>
 <mat-card [formGroup]="payForm">
 	<mat-form-field appearance="outline">
 		<mat-label>Select session:</mat-label>
@@ -7,7 +8,8 @@
 			</mat-option>
 		</mat-select>
 	</mat-form-field>
-	<mat-card-actions>
+	<div class="container">
+		<button mat-raised-button (click)="close()">Cancel</button>
 		<button mat-raised-button color="primary" [disabled]="payForm.invalid" (click)="pay()">Pay</button>
-	</mat-card-actions>
+	</div>
 </mat-card>

src/app/sessionpay/sessionpay.component.ts

@@ -1,7 +1,7 @@
 import { Inject, Component } from '@angular/core';
 import { ScanComponent } from '../scan/scan.component';
 import { Validators, UntypedFormGroup, FormBuilder } from '@angular/forms';
-import { MatDialog, MatDialogConfig, MAT_DIALOG_DATA} from '@angular/material/dialog';
+import { MatDialog, MatDialogConfig, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
 
 @Component({
   selector: 'app-sessionpay',
@@ -29,10 +29,10 @@ export class SessionpayComponent {
 	];
 	payForm: UntypedFormGroup;
 	session: string;
-	zecPrice: number;
 
 	constructor(
 		private dialog: MatDialog,
+		private dialogRef: MatDialogRef<SessionpayComponent>,
 		private fb: FormBuilder,
 		@Inject(MAT_DIALOG_DATA) public data: { addr: string, session: string, zecPrice: number }
 	) {
@@ -56,6 +56,13 @@ export class SessionpayComponent {
 			pay: true
 		};
 
-		const dialogRef = this.dialog.open(ScanComponent, dialogConfig);
+		const dialogRef1 = this.dialog.open(ScanComponent, dialogConfig);
+		dialogRef1.afterClosed().subscribe(val => {
+			this.dialogRef.close();
+		});
+	}
+
+	close(){
+		this.dialogRef.close();
 	}
 }