Merge branch 'zgo-test' of gitlab.com:pitmutt/zgo into zgo-test

CHANGELOG.md

@@ -4,7 +4,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+- (2022-07-13) Orders's list UI reviewed and apdated
+    + Order generation and Availavle Items form completed
+- (2022-07-12) Set configuration global parameters in one place
+    + Static class ConfigData created 
+        - configdata.ts created inside "src/app/" folder
+    + Services modified to include config data
 
+    
 ### Changed
 
 - Added viewing key field to owner model

angular.json

@@ -105,6 +105,5 @@
         }
       }
     }
-  },
-  "defaultProject": "zgo"
+  }
 }

package.json

@@ -10,16 +10,16 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~13.0.2",
-    "@angular/cdk": "^12.2.8",
-    "@angular/common": "~13.0.2",
-    "@angular/compiler": "~13.0.2",
-    "@angular/core": "~13.0.2",
-    "@angular/forms": "~13.0.2",
-    "@angular/material": "^12.2.8",
-    "@angular/platform-browser": "~13.0.2",
-    "@angular/platform-browser-dynamic": "~13.0.2",
-    "@angular/router": "~13.0.2",
+    "@angular/animations": "^14.0.5",
+    "@angular/cdk": "^13.3.9",
+    "@angular/common": "^14.0.5",
+    "@angular/compiler": "^14.0.5",
+    "@angular/core": "^14.0.5",
+    "@angular/forms": "^14.0.5",
+    "@angular/material": "^13.3.9",
+    "@angular/platform-browser": "^14.0.5",
+    "@angular/platform-browser-dynamic": "^14.0.5",
+    "@angular/router": "^14.0.5",
     "@fortawesome/angular-fontawesome": "^0.10.2",
     "@fortawesome/fontawesome-free": "^6.1.1",
     "@fortawesome/fontawesome-svg-core": "^6.1.0",
@@ -41,9 +41,9 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.0.2",
-    "@angular/cli": "~13.0.2",
-    "@angular/compiler-cli": "~13.0.2",
+    "@angular-devkit/build-angular": "^14.0.5",
+    "@angular/cli": "^14.0.5",
+    "@angular/compiler-cli": "^14.0.5",
     "@types/jasmine": "~3.8.0",
     "@types/node": "^12.20.33",
     "@types/urlsafe-base64": "^1.0.28",
@@ -54,6 +54,6 @@
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
-    "typescript": "~4.4.4"
+    "typescript": "~4.7.4"
   }
-}
+}

src/app/app.module.ts

@@ -43,65 +43,56 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { PromptInvoiceComponent } from './prompt-invoice/prompt-invoice.component';
 
 @NgModule({
-  declarations: [
-    AppComponent,
-	HeaderComponent,
-	ViewerComponent,
-	ItemListComponent,
-	LoginComponent,
-	OrderComponent,
-	ItemCreateComponent,
-	ItemDeleteComponent,
-	ItemAddComponent,
-	CancelComponent,
-	CheckoutComponent,
-	SettingsComponent,
-	ScanComponent,
-	ListOrdersComponent,
-	BusinessComponent,
-	SearchOptionsPipe,
-	TermsComponent,
- ReceiptComponent,
- ReceiptQRComponent,
- InvoiceComponent,
- PromptInvoiceComponent
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    FormsModule,
-	ReactiveFormsModule,
-	MatIconModule,
-    HttpClientModule,
-    MatInputModule,
-    MatCardModule,
-    MatButtonModule,
-    MatToolbarModule,
-    MatExpansionModule,
-	MatDialogModule,
-	MatDividerModule,
-	MatListModule,
-	MatSelectModule,
-	MatProgressBarModule,
-	MatStepperModule,
-	MatAutocompleteModule,
-	MatSlideToggleModule,
-    BrowserAnimationsModule,
-    FontAwesomeModule
-  ],
-  exports: [
-	  MatIconModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent],
-  entryComponents: [
-	  ItemCreateComponent,
-	  ItemDeleteComponent,
-	  ItemAddComponent,
-	  CancelComponent,
-	  CheckoutComponent,
-	  SettingsComponent,
-	  ScanComponent
-  ]
+    declarations: [
+        AppComponent,
+        HeaderComponent,
+        ViewerComponent,
+        ItemListComponent,
+        LoginComponent,
+        OrderComponent,
+        ItemCreateComponent,
+        ItemDeleteComponent,
+        ItemAddComponent,
+        CancelComponent,
+        CheckoutComponent,
+        SettingsComponent,
+        ScanComponent,
+        ListOrdersComponent,
+        BusinessComponent,
+        SearchOptionsPipe,
+        TermsComponent,
+        ReceiptComponent,
+        ReceiptQRComponent,
+        InvoiceComponent,
+        PromptInvoiceComponent
+    ],
+    imports: [
+        BrowserModule,
+        AppRoutingModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatIconModule,
+        HttpClientModule,
+        MatInputModule,
+        MatCardModule,
+        MatButtonModule,
+        MatToolbarModule,
+        MatExpansionModule,
+        MatDialogModule,
+        MatDividerModule,
+        MatListModule,
+        MatSelectModule,
+        MatProgressBarModule,
+        MatStepperModule,
+        MatAutocompleteModule,
+        MatSlideToggleModule,
+        BrowserAnimationsModule,
+        FontAwesomeModule
+    ],
+    exports: [
+        MatIconModule
+    ],
+    providers: [],
+    bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/business/business.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
-import { FormBuilder, Validators, FormGroup, FormControl } from '@angular/forms';
+import { UntypedFormBuilder, Validators, UntypedFormGroup, FormControl } from '@angular/forms';
 import { MatDialog, MatDialogConfig} from '@angular/material/dialog';
 import { ProgressBarMode } from '@angular/material/progress-bar';
 import { Router } from '@angular/router';
@@ -38,8 +38,8 @@ export class BusinessComponent implements OnInit {
 			viewValue: '1 month: 0.1 ZEC'
 		}
 	];
-	bizForm: FormGroup;
-	payForm: FormGroup;
+	bizForm: UntypedFormGroup;
+	payForm: UntypedFormGroup;
 	barMessage = 'Awaiting for transaction';
 	barMode: ProgressBarMode = 'indeterminate';
 	barValue = 0;
@@ -77,7 +77,7 @@ export class BusinessComponent implements OnInit {
 	termsChecked = false;
 
 	constructor(
-		private fb: FormBuilder,
+		private fb: UntypedFormBuilder,
 		private userService: UserService,
 		private fullnodeService: FullnodeService,
 		private dialog: MatDialog,

src/app/configdata.ts

@@ -0,0 +1,4 @@
+export class ConfigData {
+    public static Be_URL : string = 'https://test.zgo.cash/';
+    public static UsrPwd : string = 'user:superSecret2';
+}

src/app/fullnode.service.ts

@@ -4,12 +4,14 @@ import {HttpClient, HttpParams, HttpHeaders} from '@angular/common/http';
 import {UserService} from './user.service';
 import { Owner } from './owner.model';
 
+import { ConfigData } from './configdata';
+
 var Buffer = require('buffer/').Buffer;
 //import {User} from './user.model';
 
 @Injectable({providedIn: 'root'})
 export class FullnodeService{
-	beUrl = 'https://test.zgo.cash/';
+	beUrl = ConfigData.Be_URL;
 	private dataStore: { height: number, memoList: string[], addr: string, price: number } = { height: 0, memoList: [], addr: '', price:0 };
 	private _heightUpdated: BehaviorSubject<number> = new BehaviorSubject(this.dataStore.height);
 	private _memoUpdated: BehaviorSubject<string[]> = new BehaviorSubject(this.dataStore.memoList);
@@ -49,7 +51,7 @@ export class FullnodeService{
 	};
 
 	constructor(private http: HttpClient, public userService: UserService){
-		var auth = 'Basic ' + Buffer.from('user:superSecret2').toString('base64');
+		var auth = 'Basic ' + Buffer.from(ConfigData.UsrPwd).toString('base64');
 		this.reqHeaders = new HttpHeaders().set('Authorization', auth);
 		this.ownerUpdate = userService.ownerUpdate;
 		this.getAddr();

src/app/items/item-add/item-add.component.ts

@@ -1,6 +1,6 @@
 import { Inject, Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { FormBuilder, Validators, FormGroup, FormControl } from '@angular/forms';
+import { UntypedFormBuilder, Validators, UntypedFormGroup, FormControl } from '@angular/forms';
 import { LineItem } from '../lineitem.model';
 import { Order } from '../../order/order.model';
 
@@ -12,12 +12,12 @@ import { Order } from '../../order/order.model';
 
 export class ItemAddComponent implements OnInit {
 
-	orderForm: FormGroup;
+	orderForm: UntypedFormGroup;
 	lineItem: LineItem;
 	//order: Order;
 
 	constructor(
-		private fb: FormBuilder,
+		private fb: UntypedFormBuilder,
 		private dialogRef: MatDialogRef<ItemAddComponent>,
 		@Inject(MAT_DIALOG_DATA) public data: LineItem
 	) {

src/app/items/item-create/item-create.component.ts

@@ -1,6 +1,6 @@
 import { Inject, Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { FormBuilder, Validators, FormGroup, FormControl } from '@angular/forms';
+import { UntypedFormBuilder, Validators, UntypedFormGroup, UntypedFormControl } from '@angular/forms';
 import { Item } from '../item.model';
 
 
@@ -12,12 +12,12 @@ import { Item } from '../item.model';
 
 export class ItemCreateComponent implements OnInit {
 
-	form: FormGroup;
+	form: UntypedFormGroup;
 	id: string | undefined = '';
 	numberRegEx = /\d*\.?\d{1,2}/;
 
 	constructor(
-		private fb: FormBuilder,
+		private fb: UntypedFormBuilder,
 		private dialogRef: MatDialogRef<ItemCreateComponent>,
 		@Inject(MAT_DIALOG_DATA) public data: Item
 	){
@@ -26,7 +26,7 @@ export class ItemCreateComponent implements OnInit {
 				id: [''],
 				name: [null, Validators.required],
 				description: [null, Validators.required],
-				cost: new FormControl('', {
+				cost: new UntypedFormControl('', {
 					validators: [Validators.required, Validators.pattern(this.numberRegEx)],
 					updateOn: "blur"
 				})
@@ -37,7 +37,7 @@ export class ItemCreateComponent implements OnInit {
 				id: [data._id],
 				name: [data.name, Validators.required],
 				description: [data.description, Validators.required],
-				cost: new FormControl(data.cost, {
+				cost: new UntypedFormControl(data.cost, {
 					validators: [Validators.required, Validators.pattern(this.numberRegEx)],
 					updateOn: "blur"
 				})

src/app/items/item-list/item-list.component.css

@@ -25,6 +25,27 @@ div.card{
 }
 
 p.price{
-	font-family: 'Roboto-Mono', monospace;
+	font-family: 'Roboto Mono', monospace;
 	margin: 0px;
 }
+
+.rv_price {
+	font-family:  Roboto Mono;
+	font-size:  16px;
+	text-align: right;
+}
+
+ /* Style buttons */
+.btn {
+  background-color: DodgerBlue; /* Blue background */
+  border: none; /* Remove borders */
+  color: white; /* White text */
+  padding: 12px 16px; /* Some padding */
+  font-size: 16px; /* Set a font size */
+  cursor: pointer; /* Mouse pointer on hover */
+}
+
+/* Darker background on mouse-over */
+.btn:hover {
+  background-color: RoyalBlue;
+}

src/app/items/item-list/item-list.component.html

@@ -1,19 +1,35 @@
 <div *ngIf="items.length > 0">
 	<div class="card" *ngFor="let item of itemsUpdate | async">
 		<mat-card>
-				<table cellspacing="0" width="100%" class="text">
+				<table cellspacing="0" width="100%" >
 					<tr>
-						<td>{{item.name}}</td>
-						<td align="right">
-							<p class="price">{{item.cost | currency: getCurrency() }}</p>
-							<p class="price" *ngIf="!owner.zats"><img class="icon" src="/assets/spartan-zec.png" width="12px" />{{(item.cost/zecPrice) | number: '1.0-6'}}</p>
-							<p class="price" *ngIf="owner.zats">&#x24e9; {{(item.cost/zecPrice)*100000000 | number: '1.0-0'}}</p>
+						<td style="font-family: Roboto Mono;
+				           		   font-size: 16px;
+				                   font-weight: 700;
+				                   height: 20px;">
+				             {{item.name}}
+				        </td>
+						
+						<td></td>	
+					</tr>
+					<tr>
+						<td style="font-family: Roboto Mono;
+				           		   font-size: 16px;
+				                   font-weight: 400;
+				                   height: 20px;">
+							{{item.description}}
+						</td>
+						<td>
+							<div class="rv_price" *ngIf="!owner.zats">
+								<img class="icon" 
+								     src="/assets/zec_rv.png" 
+								     height="16px">{{(item.cost/price) | number: '1.06'}}
+								[{{item.cost | number: '1.02' | currency: getCurrency() }}]    
+							</div>
+							<p class="price" *ngIf="owner.zats"> &#x24e9;(item.cost/price)*100000000 | number: '1.0-0'}}</p>
 						</td>
 					</tr>
 				</table>
-				<div align="center">
-					<p class="text small">{{item.description}}</p>
-				</div>
 			<mat-card-actions>
 				<table cellspacing="0" width="100%">
 					<tr>
@@ -26,6 +42,13 @@
 							</button>
 						</td>
 						<td align="right">
+<!--
+							<button class="btn">
+								<fa-icon  [icon]="getIcon(order)" >
+									
+								</fa-icon>
+							</button>	
+-->
 							<button mat-raised-button color="primary" class="icons" (click)="addToOrder(item._id!)">
 								<mat-icon>shopping_cart</mat-icon>
 							</button>

src/app/items/items.service.ts

@@ -3,12 +3,19 @@ import { Injectable } from '@angular/core';
 import { Subject, BehaviorSubject, Observable } from 'rxjs';
 import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
 
+import { ConfigData } from '../configdata';
+
 var Buffer = require('buffer/').Buffer;
 
 @Injectable({providedIn: 'root'})
 
 export class ItemService{
-	beUrl = 'https://test.zgo.cash/';
+//	beUrl = 'https://test.zgo.cash/';
+
+	beUrl = ConfigData.Be_URL;
+	
+//	console.log(ConfigData.Be_URL);
+
 	private dataStore: { items: Item[] } = { items: [] } ;
 	private _itemsUpdated: BehaviorSubject<Item[]> = new BehaviorSubject(this.dataStore.items);
 	public readonly itemsUpdated: Observable<Item[]> = this._itemsUpdated.asObservable();
@@ -16,7 +23,7 @@ export class ItemService{
 	private reqHeaders: HttpHeaders;
 
 	constructor(private http: HttpClient){
-		var auth = 'Basic ' + Buffer.from('user:superSecret2').toString('base64');
+		var auth = 'Basic ' + Buffer.from(ConfigData.UsrPwd).toString('base64');
 		this.reqHeaders = new HttpHeaders().set('Authorization', auth);
 	}
 

src/app/listorders/listorders.component.css

@@ -3,9 +3,9 @@
 }
 
 .text2 {
-	font-family: 'Noto sans';
-	font-size: 15px;
-	color: #000080;
+	font-family: 'Roboto Mono';
+	font-size: 14px;
+	color: #000000;
 	text-align: left;
 	margin-left: 5px;
 	background: lightgray;
@@ -16,12 +16,12 @@
 }
 
 .orderdetail {
-	font-family: 'Noto sans';
-	font-size: 15px;
-	color: #000080;
+	font-family: 'Roboto Mono';
+	font-size: 12px;
+	color: #000000;
 	text-align: left;
 	margin-left: 5px;
-	background: lightyellow;
+	background: lightcyan;
    
 }
 
@@ -31,6 +31,7 @@
 
 img.icon{
 	margin-bottom: -2px;
+	height: 18px;
 }
 
 .price{
@@ -50,12 +51,13 @@ img.icon{
 }
 
 .total{
-	font-size: large;
+	font-size: 15px;
 	font-family: 'Roboto Mono', monospace;
+	margin:  auto;
 }
 
 img.total{
-	margin-bottom:-2px;
+	margin-bottom:  -15px !important;
 }
 
 .central{

src/app/listorders/listorders.component.html

@@ -8,25 +8,25 @@
 <mat-divider></mat-divider>
 <div align="center">
 <div class="central">
-	<table class="text" width="75%">
+	<table class="text" style="font-size: 12px !important;" width="75%">
 		<tr>
 			<td width="50%" align="center">
 				<h3>Today's Total:</h3>
-				<p class="total">
-				   <img src="/assets/zcash.png" 
-						style='height: 18px;
-						       margin: auto;'/>
-				   {{todayTotal | number: '1.0-6'}}
-				</p>
+				<div class="total">
+				   <img src="/assets/zec_rv.png" 
+						style='height: 16px !important;
+						       margin: -2px;'/>
+				   {{todayTotal | number: '1.06'}}
+				</div>
 			</td>
 			<td width="50%" align="center">
 				<h3>Overall Total:</h3>
-				<p class="total">
-				   <img src="/assets/zcash.png" 
-						style='height: 18px;
-						       margin: auto;'/>
-				   {{total | number: '1.0-6'}}
-				</p>
+				<div class="total">
+				   <img src="/assets/zec_rv.png" 
+						style='height: 16px !important;
+						       margin: -2px;'/>
+				   {{total | number: '1.06'}}
+				</div>
 			</td>
 		</tr>
 	</table>
@@ -40,20 +40,20 @@
 				<mat-expansion-panel-header class="text" >
 					<mat-panel-title>
 						<span class="price" 
-						      style='font-family: Noto sans !important;
-						             font-size: 15px; 
+						      style='font-family: Roboto Mono !important;
+						             font-size: 14px; 
 						      		 font-weight: strong; 
 						      		 color:  black !important;
 						             margin: auto;'>
-						        <img src="/assets/zcash.png" 
-						             style='height: 18px;
-						                    margin: auto; '/>&nbsp;{{order.totalZec | number: '1.0-6'}}
+						        <img src="/assets/zec_rv.png" 
+						             style='height: 16px;
+						                    margin: auto; '/>&nbsp;{{order.totalZec | number: '1.06'}}
 						</span>
 					</mat-panel-title>
 				    <mat-panel-description>
 						<fa-icon  [icon]="getIcon(order)" [style]="getIconStyle(order)" ></fa-icon>
-						<div style='font-family: Noto sans !important;
-						            font-size: 15px;
+						<div style='font-family: Roboto Mono !important;
+						            font-size: 14px;
 						            font-weight: strong; 
 						            color:  black !important;
 						            margin: auto;'>
@@ -63,17 +63,97 @@
 				</mat-expansion-panel-header>
 				<div class='orderheader'>
 					<div class="text2"> <b>Order Id</b>: {{order._id}}</div>
-					<div class="text2"><b>ZCash price</b>: {{order.price | currency: order.currency.toUpperCase()}}
-					</div>
 		  		</div>
-				<mat-list>
+<!-- 
+     order header
+-->      
+				<table style="width: 100%;" 
+				       cellspacing="0">
+					<tr style="font-family: Roboto Mono;
+					           font-size: 19px;
+					           font-weight: 700;
+					           height: 20px;">
+						<td width="50%">Order Total:</td>
+						<td align="right"
+						    width="50%">	
+							<img class="icon" src="/assets/zec_rv.png"
+							>{{ order.totalZec  | number: '1.06'}}
+						</td>
+					</tr>
+					<tr style="font-family: Roboto Mono;
+					           font-size: 16px;
+					           font-weight: 400;
+					           height: 18px;">
+						<td width="50%">
+							<img class="icon" 
+							     style="color: lightgray; 
+							            margin-bottom: -3px;" 
+							     src="/assets/zec_rv.png"
+							>1.0 = {{ order.price | currency: order.currency.toUpperCase()}}
+						</td>
+						<td width="50%" align="right">
+							{{ order.total | number: '1.02' | currency: order.currency.toUpperCase()}}
+						</td>
+					</tr>
+				</table>
+
+				<table style="width: 100%;">
+		<!--			
+					<div style="display: block;">
+		-->
+		            <thead style="width: 100%;">
+						<tr style="background: lightblue;">
+							<th style= "font-family:  Roboto Mono;
+										font-size: 14px;
+										font-weight: 700;
+										text-align: left;" 
+								width="55%">Item
+							</th>
+							<th style= "font-family:  Roboto Mono;
+										font-size: 14px;
+										font-weight: 700;
+										text-align: left;" 
+								width="15%">Qty.
+							</th>
+							<th style= "font-family:  Roboto Mono;
+										font-size: 14px;
+										font-weight: 700;
+										text-align: right;" 
+							    width="30%">Total
+							</th>
+						</tr>
+					</thead>	
+		<!--
+				    </div>
+		-->
+				    <tbody style="overflow-y: auto;    
+							      overflow-x: hidden;">
+						<tr style="height: 20px !important;" 
+						    *ngFor="let item of order.lines">
+							<td class="tbdetail" 
+							    style="text-align: left;" 
+								width="55%">{{item.name}}
+							</td>
+							<td class="tbdetail" 
+							    style="text-align: left;" 
+								width="15%">{{item.qty}}
+							</td>
+							<td class="tbdetail" 
+							    style="text-align: right;" 
+							    width="30%">{{item.qty * item.cost | number:'1.02' | currency: order.currency.toUpperCase() }} 
+							</td>
+						</tr>
+					</tbody>
+				</table>
 <!--					
+				<mat-list>
 					<mat-list-item class="text small" *ngFor="let item of order.lines">{{item.qty}} x {{item.name}}</mat-list-item>
--->
+
 					<div class="orderdetail" *ngFor="let item of order.lines">
 						{{ item.name }} Qty.: {{ item.qty }} 
 					</div>	
 				</mat-list>
+-->
 			</mat-expansion-panel>
 		</mat-accordion>
 		<p class="text" *ngIf = "orders.length <= 0">No orders</p>

src/app/listorders/listorders.component.ts

@@ -76,8 +76,8 @@ export class ListOrdersComponent implements OnInit, OnDestroy{
 
 	getIconStyle(order : Order) {
 		if( order.paid )
-		  return "font-size: 16px; color: #72cc50; margin: auto;";
-		return "color: #88293d; cursor: pointer;";
+		  return "font-size: 14px; color: #72cc50; margin-bottom: -2px;";
+		return "color: #FB4F14; margin-bottom: -2px; cursor: pointer;";
 
 	}
 

src/app/login/login.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, OnDestroy, Injectable, ChangeDetectorRef, ViewChild, AfterViewInit } from '@angular/core';
 import { CanActivate, Router, RouterStateSnapshot, ActivatedRouteSnapshot, ActivatedRoute } from '@angular/router';
 import { MatDialog, MatDialogConfig} from '@angular/material/dialog';
-import { FormBuilder, Validators, FormGroup, FormControl } from '@angular/forms';
+import { UntypedFormBuilder, Validators, UntypedFormGroup, FormControl } from '@angular/forms';
 import { ProgressBarMode } from '@angular/material/progress-bar';
 import { MatStepper } from '@angular/material/stepper';
 import { UserService } from '../user.service';
@@ -89,12 +89,12 @@ export class LoginComponent implements OnInit, AfterViewInit {
 	barMessage = 'Scanning blockchain for login memo, please wait.';
 	@ViewChild('stepper') private myStepper?: MatStepper;
 
-	entryForm: FormGroup;
-	pinForm: FormGroup;
+	entryForm: UntypedFormGroup;
+	pinForm: UntypedFormGroup;
 
 
 	constructor(
-		private fb: FormBuilder,
+		private fb: UntypedFormBuilder,
 		private activatedRoute: ActivatedRoute,
 		public fullnodeService: FullnodeService,
 		private router: Router,

src/app/order/order.component.css

@@ -5,6 +5,20 @@
 .number{
 	font-family: 'Roboto Mono', monospace;
 }
+
 img.icon{
-	margin-bottom: -3px;
+	margin-bottom: -2px;
+	height: 18px;
 }
+
+.tbheader {
+	font-family:  Roboto Mono;
+	font-size: 14px;
+	font-weight: 700;
+}
+
+.tbdetail {
+	font-family:  Roboto Mono;
+	font-size: 14px;
+	font-weight: 400;
+}

src/app/order/order.component.html

@@ -1,28 +1,92 @@
-<div align="center">
-<p *ngIf="order.address.length == 0">No open order!</p>
+<div align="center" 
+     style="font-family: Roboto Mono;
+            font-size: 14PX;
+            font-weight: 700;
+            margin-top: 5px;" *ngIf="order.address.length == 0">
+	No open order!
 </div>
-<mat-card class="text" *ngIf="order.address.length > 0">
-	<div align="center">
+<mat-card style="margin-top: 10px;" *ngIf="order.address.length" >
+
+	<div>
 		<mat-card-title>
-			<table cellspacing="0" width="100%">
-				<tr>
-					<td>Order Total:</td>
-					<td align="right">
-						<p class="number">{{total | currency: getCurrency()}}</p>
-						<p class="number"><img class="icon" src="/assets/spartan-zec.png" width="15px" />{{(total/price) | number: '1.0-6'}}</p>
+			<table style="width: 100%;" 
+			       cellspacing="0">
+				<tr style="font-family: Roboto Mono;
+				           font-size: 19px;
+				           font-weight: 700;
+				           height: 20px;">
+					<td width="50%">Order Total:</td>
+					<td align="right"
+					    width="50%">	
+						<img class="icon" src="/assets/zec_rv.png" 
+						>{{(total/price) | number: '1.0-6'}}
+					</td>
+				</tr>
+				<tr style="font-family: Roboto Mono;
+				           font-size: 16px;
+				           font-weight: 400;
+				           height: 18px;">
+					<td width="50%">
+						<img class="icon" 
+						     style="color: lightgray; 
+						            margin-bottom: -3px;" 
+						     src="/assets/zec_rv.png"
+						>1.0 &cong; {{ price | currency: getCurrency()}}
+
+					</td>
+					<td width="50%" align="right">
+						{{total | currency: getCurrency()}}
 					</td>
 				</tr>
 			</table>
 		</mat-card-title>
-		<table>
-			<tr>
-				<th>Qty.</th>
-				<th>Items</th>
-			</tr>
-			<tr *ngFor="let item of order.lines">
-				<td align="right">{{item.qty}}</td>
-				<td>{{item.name}}</td>
-			</tr>
+		<table style="width: 100%;">
+<!--			
+			<div style="display: block;">
+-->
+            <thead style="width: 100%;">
+				<tr style="background: lightblue;">
+					<th style= "font-family:  Roboto Mono;
+								font-size: 14px;
+								font-weight: 700;
+								text-align: left;" 
+						width="55%">Item
+					</th>
+					<th style= "font-family:  Roboto Mono;
+								font-size: 14px;
+								font-weight: 700;
+								text-align: left;" 
+						width="15%">Qty.
+					</th>
+					<th style= "font-family:  Roboto Mono;
+								font-size: 14px;
+								font-weight: 700;
+								text-align: right;" 
+					    width="30%">Total
+					</th>
+				</tr>
+			</thead>	
+<!--
+		    </div>
+-->
+		    <tbody style="overflow-y: auto;    
+					      overflow-x: hidden;">
+				<tr style="height: 20px !important;" 
+				    *ngFor="let item of order.lines">
+					<td class="tbdetail" 
+					    style="text-align: left;" 
+						width="55%">{{item.name}}
+					</td>
+					<td class="tbdetail" 
+					    style="text-align: left;" 
+						width="15%">{{item.qty}}
+					</td>
+					<td class="tbdetail" 
+					    style="text-align: right;" 
+					    width="30%">{{item.qty * item.cost | number:'1.02' | currency: getCurrency() }} 
+					</td>
+				</tr>
+			</tbody>
 		</table>
 	</div>
 	<mat-card-actions>
@@ -41,4 +105,11 @@
 		</table>
 	</mat-card-actions>
 </mat-card>
+<div style="font-family: Roboto Mono;
+            font-size: 18px;
+            font-weight: 700;
+            margin-left: 10px;
+            margin-top: 5px;" >
+     Available Items:
+</div>
 

src/app/order/order.service.ts

@@ -8,12 +8,14 @@ import { User } from '../user.model';
 import { Owner } from '../owner.model';
 import { LineItem} from '../items/lineitem.model';
 
+import { ConfigData } from '../configdata';
+
 var Buffer = require('buffer/').Buffer;
 
 @Injectable({providedIn: 'root'})
 
 export class OrderService {
-	beUrl = 'https://test.zgo.cash/';
+	beUrl = ConfigData.Be_URL;
 	private dataStore: {allOrders: Order[], user: User, order: Order, owner: Owner } = {
 		allOrders: [],
 		user:{
@@ -82,7 +84,7 @@ export class OrderService {
 		public fullnodeService: FullnodeService,
 		public userService: UserService
 	) {
-		var auth = 'Basic ' + Buffer.from('user:superSecret2').toString('base64');
+		var auth = 'Basic ' + Buffer.from(ConfigData.UsrPwd).toString('base64');
 		this.reqHeaders = new HttpHeaders().set('Authorization', auth);
 		this.userUpdate = userService.userUpdate;
 		this.ownerUpdate = userService.ownerUpdate;

src/app/receipt.service.ts

@@ -5,13 +5,15 @@ import { Order } from './order/order.model';
 import { Owner } from './owner.model';
 import { UserService } from './user.service';
 
+import { ConfigData } from './configdata';
+
 var Buffer = require('buffer/').Buffer;
 
 @Injectable({
   providedIn: 'root'
 })
 export class ReceiptService {
-	beUrl = 'https://test.zgo.cash/';
+	beUrl = ConfigData.Be_URL;
 	private dataStore: {order: Order, owner: Owner } = {
 		owner: {
 			_id: '',
@@ -68,7 +70,7 @@ export class ReceiptService {
 		private http: HttpClient,
 		public userService: UserService
   ) {
-		var auth = 'Basic ' + Buffer.from('user:superSecret2').toString('base64');
+		var auth = 'Basic ' + Buffer.from(ConfigData.UsrPwd).toString('base64');
 		this.reqHeaders = new HttpHeaders().set('Authorization', auth);
 		this.ownerUpdate = userService.ownerUpdate;
   }

src/app/settings/settings.component.ts

@@ -1,7 +1,7 @@
 import { Inject, Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatSlideToggleChange } from '@angular/material/slide-toggle';
-import { FormBuilder, Validators, FormGroup, FormControl } from '@angular/forms';
+import { UntypedFormBuilder, Validators, UntypedFormGroup, FormControl } from '@angular/forms';
 import {User} from '../user.model';
 import {Owner} from '../owner.model';
 
@@ -13,7 +13,7 @@ import {Owner} from '../owner.model';
 
 export class SettingsComponent implements OnInit {
 
-	settingsForm: FormGroup;
+	settingsForm: UntypedFormGroup;
 	owner: Owner;
 	useZats: boolean;
 	coins = [
@@ -36,7 +36,7 @@ export class SettingsComponent implements OnInit {
 	];
 
 	constructor(
-		private fb: FormBuilder,
+		private fb: UntypedFormBuilder,
 		private dialogRef: MatDialogRef<SettingsComponent>,
 		@Inject(MAT_DIALOG_DATA) public data: Owner
 	) {

src/app/user.service.ts

@@ -6,12 +6,14 @@ import {Owner} from './owner.model';
 import { Country } from './country.model';
 import {Tx} from './tx.model';
 
+import { ConfigData } from './configdata';
+
 var Buffer = require('buffer/').Buffer;
 
 @Injectable({providedIn: 'root'})
 
 export class UserService{
-	beUrl = 'https://test.zgo.cash/';
+	beUrl = ConfigData.Be_URL;
 	private dataStore: { user: User, owner: Owner, txs: Tx[], countries: Country[]} = { 
 		user: {
 			address: '',
@@ -67,7 +69,7 @@ export class UserService{
 	private reqHeaders: HttpHeaders;
 
 	constructor(private http: HttpClient){
-		var auth = 'Basic ' + Buffer.from('user:superSecret2').toString('base64');
+		var auth = 'Basic ' + Buffer.from(ConfigData.UsrPwd).toString('base64');
 		this.reqHeaders = new HttpHeaders().set('Authorization', auth);
 		//console.log('US:', this.reqHeaders);
 		this.session = localStorage.getItem('s4z_token');

src/custom-theme.scss

@@ -1,4 +1,4 @@
-@import "~@angular/material/_theming.scss";
+@import "@angular/material/_theming";
 
 @include mat-core();
 

src/styles.css

@@ -2,7 +2,7 @@
 
 /*@import '@angular/material/prebuilt-themes/indigo-pink.css';*/
 
-/*@use '~@angular/material' as mat;*/
+/*@use '@angular/material' as mat;*/
 
 /*@include mat.core();*/
 

tsconfig.json

@@ -14,7 +14,7 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2017",
+    "target": "es2020",
     "module": "es2020",
     "lib": [
       "es2018",