Vergara_Tech/zgo
Vergara_Tech
/
zgo
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 5 Wiki Activity

Updating order display UI

This commit is contained in:
Rene V. Vergara A. 2022-07-12 19:08:13 -05:00
parent 2f32bbae47
commit e407ecdf29
2 changed files with 55 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/order/order.component.css
View File

@ -5,6 +5,19 @@
.number{
font-family: 'Roboto Mono', monospace;
}
img.icon{
margin-bottom: -3px;
}
.tbheader {
font-family: Roboto Mono;
font-size: 14px;
font-weight: 700;
}
.tbdetail {
font-family: Roboto Mono;
font-size: 14px;
font-weight: 400;
}

53
src/app/order/order.component.html
View File

@ -1,27 +1,51 @@
<div align="center">
<p *ngIf="order.address.length == 0">No open order!</p>
<div align="center"
style="font-family: Roboto Mono;
font-size: 14PX;
font-weight: 700;
margin-top: 5px;" *ngIf="order.address.length == 0">
No open order!
</div>
<mat-card class="text" *ngIf="order.address.length > 0">
<div align="center">
<mat-card style="margin-top: 10px;" *ngIf="order.address.length" >
<div>
<mat-card-title>
<table cellspacing="0" width="100%">
<tr>
<td>Order Total:</td>
<td align="right">
<p class="number">{{total | currency: getCurrency()}}</p>
<p class="number"><img class="icon" src="/assets/spartan-zec.png" width="15px" />{{(total/price) | number: '1.0-6'}}</p>
<p class="number"><img class="icon" src="/assets/zec_rv.png" width="15px" />{{(total/price) | number: '1.0-6'}}</p>
</td>
</tr>
</table>
</mat-card-title>
<table>
<tr>
<th>Qty.</th>
<th>Items</th>
<table width="100%">
<tr style="background: lightblue;">
<th class="tbheader"
style="text-align: left;"
width="55%">Item
</th>
<th class="tbheader"
style="text-align: left;"
width="15%">Qty.
</th>
<th class="tbheader"
style="text-align: right;"
width="30%">Total
</th>
</tr>
<tr *ngFor="let item of order.lines">
<td align="right">{{item.qty}}</td>
<td>{{item.name}}</td>
<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'}}
</td>
</tr>
</table>
</div>
@ -41,4 +65,11 @@
</table>
</mat-card-actions>
</mat-card>
<div style="font-family: Roboto Mono;
font-size: 14PX;
font-weight: 700;
margin-left: 10px;
margin-top: 5px;" >
Available Items:
</div>