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.06'}}
				</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.06'}}
				</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>
<!-- 
     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>
	</div>
</div>