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

Updating order display UI

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