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

162 lines
4.8 KiB
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>