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

193 lines
6.2 KiB
HTML

<app-header></app-header>
<div align="center">
<div class="text1">{{(ownerUpdate | async)!.name}}</div>
<table style="padding-top: 10px;
padding-bottom: 10px;">
<tr class="text1a">
<td>
{{ vE.listordersEndDate }}{{(ownerUpdate | async)!.expiration | date: 'YYYY-MM-dd'}}
</td>
<td>
<button mat-icon-button color="primary" (click)="paySession()">
<mat-icon class="icon">queue</mat-icon>
</button>
</td>
</tr>
</table>
<table >
<tr>
<td width="45%">
<button class="text" mat-raised-button [routerLink]="['/shop']" color="primary">
<mat-icon class="icon">home</mat-icon>
{{ vE.listordersBacktoshopBtn }}
</button>
</td>
<td width="10%">
</td>
<td width="45%">
<button mat-raised-button color="primary"
class="text" (click)="openDbExport()">
<mat-icon class="icon">get_app</mat-icon>
{{ vE.listordersExportOrders }}
</button>
</td>
</tr>
</table>
</div>
<table class="totalsTbl" width="100%">
<tr class="totalsHdr">
<td width="10%"></td>
<td width="40%" >
<div class="totalsHdrTitle">{{ vE.listordersTodaysTotal }}</div>
<div class="totalsHdrDetail">
<img src="/assets/zec_rv.png"
style="height: 16px !important;
margin-bottom: -2px;">{{todayTotal | number: '1.08'}}
</div>
</td>
<td width="40%" >
<div class="totalsHdrTitle">{{ vE.listordersOverallTotal }}</div>
<div class="totalsHdrDetail">
<img src="/assets/zec_rv.png"
style="height: 16px !important;
margin-bottom: -2px;">{{total | number: '1.08'}}
</div>
</td>
<td width="10%"></td>
</tr>
</table>
<div class="orderList">
<mat-accordion *ngIf = "orders.length > 0">
<mat-expansion-panel *ngFor = "let order of orders">
<mat-expansion-panel-header [collapsedHeight]="'35px'" [expandedHeight]="'30px'" >
<mat-panel-title>
<div class="orderListTitle">
<img src="/assets/zec_rv.png"
style="height: 14px;
margin-bottom: -2px;
padding-right: 3px;"
>{{order.totalZec | number: '1.08'}}
</div>
</mat-panel-title>
<mat-panel-description>
<table width="100%">
<tr>
<td>
<fa-icon *ngIf="payConf"
[icon]="getIcon(order)" [style]="getIconStyle(order)" ></fa-icon>
</td>
<td align="center"
style="font-family: 'Roboto Mono' !important;
font-weight: 700 ;
font-size: 14px;">
{{order.timestamp | date: 'YYYY-MM-dd, HH:mm'}}
</td>
</tr>
</table>
</mat-panel-description>
</mat-expansion-panel-header>
<div class='orderheader'>
<div class="text2"> <b>{{ vE.listordersOrderId }}</b>: {{order._id}}</div>
</div>
<table style="width: 100%;"
cellspacing="0">
<tr style="font-family: 'Roboto Mono';
font-weight: 700;
font-size: 16px;
height: 20px;">
<td width="50%">{{ vE.listordersOrderTotal }}</td>
<td align="right"
width="50%">
<img class="icon" src="/assets/zec_rv.png"
>{{ order.totalZec | number: '1.08'}}
</td>
</tr>
<tr style="font-family: 'Roboto Mono';
font-size: 15px;
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 | currency: order.currency.toUpperCase()}}
</td>
</tr>
</table>
<table style="width: 100%;">
<thead style="width: 100%;">
<tr style="background: lightblue;">
<th class="tbheader"
style="text-align: left;"
width="55%">{{ vE.listordersItemLbl }}
</th>
<th class="tbheader"
style="text-align: left;"
width="15%">{{ vE.listordersQtyLbl }}
</th>
<th class="tbheader"
style="text-align: right;"
width="30%">{{ vE.listordersTotalLbl }}
</th>
</tr>
</thead>
<tbody>
<tr *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>
<tr class="tbdetail" *ngIf="order.taxAmount > 0">
<td class="newOrdertbdetail" style="text-align: right;">Sales Tax</td>
<td class="newOrdertbdetail" style="text-align: right;"></td>
<td class="newOrdertbdetail" style="text-align: right;">{{ order.taxAmount | currency: order.currency.toUpperCase() }}</td>
<td></td>
</tr>
<tr class="tbdetail" *ngIf="order.vatAmount > 0">
<td class="newOrdertbdetail" style="text-align: right;">Value-Added Tax</td>
<td class="newOrdertbdetail" style="text-align: right;"></td>
<td class="newOrdertbdetail" style="text-align: right;">{{ order.vatAmount | currency: order.currency.toUpperCase() }}</td>
<td></td>
</tr>
<tr class="tbdetail" *ngIf="order.tipAmount > 0">
<td class="newOrdertbdetail" style="text-align: right;">Tip</td>
<td class="newOrdertbdetail" style="text-align: right;"></td>
<td class="newOrdertbdetail" style="text-align: right;">{{ order.tipAmount | currency: order.currency.toUpperCase() }}</td>
<td></td>
</tr>
</tbody>
</table>
<div style="display: flex;
justify-content: space-between;
padding-left: 20%;
padding-right: 20%;
margin-top: 10px;">
<span>
<button mat-raised-button class="minibutton" color="primary" (click)="invoice(order)">{{ vE.listordersInvoiceBtn }}</button>
</span>
<span>
<button mat-raised-button class="minibutton" color="primary" (click)="receipt(order)">{{ vE.listordersReceiptBtn }}</button>
</span>
</div>
</mat-expansion-panel>
</mat-accordion>
<p class="text" *ngIf = "orders.length <= 0">{{ vE.listordersNoOrders }}</p>
</div>