Order's detail list format updated - paid icon added to list header

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "zgo",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "zgo",
-      "version": "1.1.1",
+      "version": "1.1.2",
       "dependencies": {
         "@angular/animations": "~13.0.2",
         "@angular/cdk": "^12.2.8",

src/app/fullnode.service.ts

@@ -9,7 +9,7 @@ var Buffer = require('buffer/').Buffer;
 
 @Injectable({providedIn: 'root'})
 export class FullnodeService{
-	beUrl = 'http://localhost:3000/';
+	beUrl = 'https://test.zgo.cash/';
 	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);
@@ -48,7 +48,7 @@ export class FullnodeService{
 	};
 
 	constructor(private http: HttpClient, public userService: UserService){
-		var auth = 'Basic ' + Buffer.from('user:superSecret').toString('base64');
+		var auth = 'Basic ' + Buffer.from('user:superSecret2').toString('base64');
 		this.reqHeaders = new HttpHeaders().set('Authorization', auth);
 		this.ownerUpdate = userService.ownerUpdate;
 		this.getAddr();

src/app/items/items.service.ts

@@ -8,7 +8,7 @@ var Buffer = require('buffer/').Buffer;
 @Injectable({providedIn: 'root'})
 
 export class ItemService{
-	beUrl = 'http://localhost:3000/';
+	beUrl = 'https://test.zgo.cash/';
 	private dataStore: { items: Item[] } = { items: [] } ;
 	private _itemsUpdated: BehaviorSubject<Item[]> = new BehaviorSubject(this.dataStore.items);
 	public readonly itemsUpdated: Observable<Item[]> = this._itemsUpdated.asObservable();
@@ -16,7 +16,7 @@ export class ItemService{
 	private reqHeaders: HttpHeaders;
 
 	constructor(private http: HttpClient){
-		var auth = 'Basic ' + Buffer.from('user:superSecret').toString('base64');
+		var auth = 'Basic ' + Buffer.from('user:superSecret2').toString('base64');
 		this.reqHeaders = new HttpHeaders().set('Authorization', auth);
 	}
 

src/app/listorders/listorders.component.css

@@ -1,32 +1,63 @@
 .text{
 	font-family: 'Spartan', sans-serif;
 }
+
+.text2 {
+	font-family: 'Noto sans';
+	font-size: 15px;
+	color: #000080;
+	text-align: left;
+	margin-left: 5px;
+	background: lightgray;
+}
+
+.orderheader {
+	background-color: lightgrey !important;
+}
+
+.orderdetail {
+	font-family: 'Noto sans';
+	font-size: 15px;
+	color: #000080;
+	text-align: left;
+	margin-left: 5px;
+	background: lightyellow;
+   
+}
+
 .number{
 	font-family: 'Roboto Mono', monospace;
 }
+
 img.icon{
 	margin-bottom: -2px;
 }
+
 .price{
 	display: flex;
 	align-items: center;
 }
+
 .mini{
 	font-size: x-small;
 	align-items: center;
 	display: flex;
 	padding: 3px;
 }
+
 .small{
 	font-size: small;
 }
+
 .total{
 	font-size: large;
 	font-family: 'Roboto Mono', monospace;
 }
+
 img.total{
 	margin-bottom:-2px;
 }
+
 .central{
 	max-width: 450px;
 }

src/app/listorders/listorders.component.html

@@ -12,11 +12,21 @@
 		<tr>
 			<td width="50%" align="center">
 				<h3>Today's Total:</h3>
-				<p class="total"><img class="total" src="/assets/spartan-zec.png" height="18px" />{{todayTotal | number: '1.0-6'}}</p>
+				<p class="total">
+				   <img src="/assets/zcash.png" 
+						style='height: 18px;
+						       margin: auto;'/>
+				   {{todayTotal | number: '1.0-6'}}
+				</p>
 			</td>
 			<td width="50%" align="center">
 				<h3>Overall Total:</h3>
-				<p class="total"><img class="total" src="/assets/spartan-zec.png" height="18px" />{{total | number: '1.0-6'}}</p>
+				<p class="total">
+				   <img src="/assets/zcash.png" 
+						style='height: 18px;
+						       margin: auto;'/>
+				   {{total | number: '1.0-6'}}
+				</p>
 			</td>
 		</tr>
 	</table>
@@ -29,16 +39,40 @@
 			<mat-expansion-panel class="text" *ngFor = "let order of orders">
 				<mat-expansion-panel-header class="text" >
 					<mat-panel-title>
-						<span class="price number"><img src="/assets/spartan-zec.png" height="50%" />{{order.totalZec}}</span>
+						<span class="price" 
+						      style='font-family: Noto sans !important;
+						             font-size: 15px; 
+						      		 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'}}
+						</span>
 					</mat-panel-title>
-					<mat-panel-description>
+				    <mat-panel-description>
-						{{order.timestamp | date: 'short'}}
+						<fa-icon  [icon]="getIcon(order)" [style]="getIconStyle(order)" ></fa-icon>
+						<div style='font-family: Noto sans !important;
+						            font-size: 15px;
+						            font-weight: strong; 
+						            color:  black !important;
+						            margin: auto;'>
+							{{order.timestamp | date: 'short'}}
+					    </div>
 					</mat-panel-description>
 				</mat-expansion-panel-header>
-				<p class="text">Order: {{order._id}}</p>
+				<div class='orderheader'>
-				<p class="text">Zcash price: {{order.price | currency: order.currency.toUpperCase()}}</p>
+					<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>
+<!--					
 					<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>

src/app/listorders/listorders.component.ts

@@ -6,6 +6,12 @@ import { UserService } from '../user.service';
 import {Owner} from '../owner.model';
 import { OrderService } from '../order/order.service';
 
+import { faTimes } from '@fortawesome/free-solid-svg-icons'
+import { faTimesCircle } from '@fortawesome/free-solid-svg-icons'
+import { faCheck } from '@fortawesome/free-solid-svg-icons'
+import { faCheckCircle } from '@fortawesome/free-solid-svg-icons'
+import { faHourglass } from '@fortawesome/free-solid-svg-icons'
+
 @Component({
 	selector: 'app-list-orders',
 	templateUrl: './listorders.component.html',
@@ -19,6 +25,17 @@ export class ListOrdersComponent implements OnInit, OnDestroy{
 	public ownerUpdate: Observable<Owner>;
 	public ordersUpdate: Observable<Order[]>;
 
+	// ------------------------------------
+	//
+	faTimes = faTimes;
+	faTimesCircle = faTimesCircle;
+	faCheck = faCheck;
+	faCheckCircle = faCheckCircle;
+	faHourglass = faHourglass;
+	// -------------------------------------
+
+
+
 	constructor(
 		public orderService: OrderService,
 		public userService: UserService
@@ -50,4 +67,18 @@ export class ListOrdersComponent implements OnInit, OnDestroy{
 		this.total = 0;
 		this.todayTotal = 0;
 	}
+
+	getIcon(order : Order) {
+	    if( order.paid )
+		  return faCheckCircle;
+		return faHourglass;
+	}
+
+	getIconStyle(order : Order) {
+		if( order.paid )
+		  return "font-size: 16px; color: #72cc50; margin: auto;";
+		return "color: #88293d; cursor: pointer;";
+
+	}
+
 }

src/app/order/order.service.ts

@@ -13,7 +13,7 @@ var Buffer = require('buffer/').Buffer;
 @Injectable({providedIn: 'root'})
 
 export class OrderService {
-	beUrl = 'http://localhost:3000/';
+	beUrl = 'https://test.zgo.cash/';
 	private dataStore: {allOrders: Order[], user: User, order: Order, owner: Owner } = {
 		allOrders: [],
 		user:{
@@ -81,7 +81,7 @@ export class OrderService {
 		public fullnodeService: FullnodeService,
 		public userService: UserService
 	) {
-		var auth = 'Basic ' + Buffer.from('user:superSecret').toString('base64');
+		var auth = 'Basic ' + Buffer.from('user:superSecret2').toString('base64');
 		this.reqHeaders = new HttpHeaders().set('Authorization', auth);
 		this.userUpdate = userService.userUpdate;
 		this.ownerUpdate = userService.ownerUpdate;

src/app/receipt.service.ts

@@ -11,7 +11,7 @@ var Buffer = require('buffer/').Buffer;
   providedIn: 'root'
 })
 export class ReceiptService {
-	beUrl = 'http://localhost:3000/';
+	beUrl = 'https://test.zgo.cash/';
 	private dataStore: {order: Order, owner: Owner } = {
 		owner: {
 			_id: '',
@@ -67,7 +67,7 @@ export class ReceiptService {
 		private http: HttpClient,
 		public userService: UserService
   ) {
-		var auth = 'Basic ' + Buffer.from('user:superSecret').toString('base64');
+		var auth = 'Basic ' + Buffer.from('user:superSecret2').toString('base64');
 		this.reqHeaders = new HttpHeaders().set('Authorization', auth);
 		this.ownerUpdate = userService.ownerUpdate;
   }

src/app/user.service.ts

@@ -11,7 +11,7 @@ var Buffer = require('buffer/').Buffer;
 @Injectable({providedIn: 'root'})
 
 export class UserService{
-	beUrl = 'http://localhost:3000/';
+	beUrl = 'https://test.zgo.cash/';
 	private dataStore: { user: User, owner: Owner, txs: Tx[], countries: Country[]} = { 
 		user: {
 			address: '',
@@ -66,7 +66,7 @@ export class UserService{
 	private reqHeaders: HttpHeaders;
 
 	constructor(private http: HttpClient){
-		var auth = 'Basic ' + Buffer.from('user:superSecret').toString('base64');
+		var auth = 'Basic ' + Buffer.from('user:superSecret2').toString('base64');
 		this.reqHeaders = new HttpHeaders().set('Authorization', auth);
 		//console.log('US:', this.reqHeaders);
 		this.session = localStorage.getItem('s4z_token');