zgo/src/app/listorders/listorders.component.html

<app-header></app-header>
<div align="center">
	<h3 class="text">{{(ownerUpdate | async)!.name}}</h3>
	<button class="text" mat-raised-button [routerLink]="['/shop']" color="primary">
		Back to Shop
	</button>
</div>
<mat-divider></mat-divider>
<div align="center">
<div class="central">
	<table class="text" style="font-size: 12px !important;" width="75%">
		<tr>
			<td width="50%" align="center">
				<h3>Today's Total:</h3>
				<div class="total">
				   <img src="/assets/zec_rv.png" 
						style='height: 16px !important;
						       margin: -2px;'/>
				   {{todayTotal | number: '1.0-6'}}
				</div>
			</td>
			<td width="50%" align="center">
				<h3>Overall Total:</h3>
				<div class="total">
				   <img src="/assets/zec_rv.png" 
						style='height: 16px !important;
						       margin: -2px;'/>
				   {{total | number: '1.0-6'}}
				</div>
			</td>
		</tr>
	</table>
</div>
</div>
<mat-divider></mat-divider>
<div align="center">
	<div class="central">
		<mat-accordion *ngIf = "orders.length > 0">
			<mat-expansion-panel class="text" *ngFor = "let order of orders">
				<mat-expansion-panel-header class="text" >
					<mat-panel-title>
						<span class="price" 
						      style='font-family: Roboto Mono !important;
						             font-size: 14px; 
						      		 font-weight: strong; 
						      		 color:  black !important;
						             margin: auto;'>
						        <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: Roboto Mono !important;
						            font-size: 14px;
						            font-weight: strong; 
						            color:  black !important;
						            margin: auto;'>
							{{order.timestamp | date: 'short'}}
					    </div>
					</mat-panel-description>
				</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>
<!--					
					<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>
	</div>
</div>