Merge branch 'zgo-test' of gitlab.com:pitmutt/zgo into zgo-test

This commit is contained in:
Rene Vergara 2022-07-18 15:30:34 -05:00
commit f4d8619239
Signed by: pitmutt
GPG key ID: 65122AD495A7F5B2
12 changed files with 451 additions and 239 deletions

View file

@ -13,7 +13,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
### Changed
- (2022-07-14) Order list reformated - some unused css classes removed.
- Added viewing key field to owner model
- (2022-07-11) Order's list UI updated (Alpha version)
+ Paid status icons added to order's title

View file

@ -35,17 +35,15 @@ p.price{
text-align: right;
}
/* Style buttons */
.btn {
background-color: DodgerBlue; /* Blue background */
border: none; /* Remove borders */
color: white; /* White text */
padding: 12px 16px; /* Some padding */
font-size: 16px; /* Set a font size */
cursor: pointer; /* Mouse pointer on hover */
}
/* Darker background on mouse-over */
.btn:hover {
background-color: RoyalBlue;
.buttons-class-cart{
background-color: #ff4700;
color: white;
font-size: 18px;
font-weight: 700;
height: 25px !important;
width: 50px !important;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

View file

@ -49,8 +49,10 @@
</fa-icon>
</button>
-->
<button mat-raised-button color="primary" class="icons" (click)="addToOrder(item._id!)">
<mat-icon>shopping_cart</mat-icon>
<button mat-raised-button color="primary"
class="buttons-class-cart"
(click)="addToOrder(item._id!)">
<mat-icon [inline]="true">shopping_cart</mat-icon>
</button>
</td>
</tr>
@ -61,5 +63,9 @@
</div>
<p *ngIf = "items.length <= 0">No items yet!</p>
<br>
<button class="text" mat-raised-button (click)="openDialog()">
<mat-icon class="icon">add</mat-icon>Add item</button>
<button class="text"
mat-raised-button
(click)="openDialog()">
<mat-icon class="icon">add</mat-icon>
Add item
</button>

View file

@ -1,5 +1,8 @@
import { Component, OnInit, Input } from '@angular/core';
import { MatDialog, MatDialogConfig} from '@angular/material/dialog';
import { faCartShopping } from '@fortawesome/free-solid-svg-icons';
import { Observable } from 'rxjs';
import { Item } from '../item.model';
import { Owner } from '../../owner.model';
@ -20,10 +23,12 @@ import { ItemAddComponent } from '../item-add/item-add.component';
export class ItemListComponent implements OnInit{
@Input()
zecPrice: number = 1;
@Input() zecPrice: number = 1;
public items: Item[] = [];
faCartShopping = faCartShopping;
owner: Owner = {
_id: '',
name: '',
@ -50,6 +55,7 @@ export class ItemListComponent implements OnInit{
payconf: false,
viewkey: ''
};
public ownerUpdate: Observable<Owner>;
public itemsUpdate: Observable<Item[]>;

View file

@ -0,0 +1,6 @@
export interface newLineItem {
line_id: number;
qty: number;
name: string;
cost: number;
}

View file

@ -51,15 +51,58 @@ img.icon{
}
.total{
font-size: 15px;
font-family: 'Roboto Mono', monospace;
font-family: Roboto Mono;
margin: auto;
}
img.total{
margin-bottom: -15px !important;
.tbheader {
font-family: Roboto Mono;
font-size: 14px;
font-weight: 700;
}
.central{
max-width: 450px;
.tbdetail {
font-family: Roboto Mono;
font-size: 14px;
font-weight: 400;
}
.totalsTbl {
margin-top: 15px;
border-bottom: solid;
border-color: lightgray;
border-width: 2px;
background: lightcyan;
}
.totalsHdr {
font-family: Roboto Mono !important;
text-align: center;
margin-bottom: 50px;
}
.totalsHdrTitle {
font-size: 18px;
font-weight: 700;
}
.totalsHdrDetail {
font-size: 16px;
font-weight: 600;
margin-bottom: 5px;
}
.orderList {
font-family: Roboto Mono !important;
}
.orderListTitle {
font-size: 16px;
font-weight: 600;
}
.orderListTitleDescr {
font-size: 16px;
font-weight: 600;
text-align: justify;
}

View file

@ -5,73 +5,63 @@
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">
<table class="totalsTbl" width="100%">
<tr class="totalsHdr">
<td width="10%"></td>
<td width="40%" >
<div class="totalsHdrTitle">Today's Total:</div>
<div class="totalsHdrDetail">
<img src="/assets/zec_rv.png"
style='height: 16px !important;
margin: -2px;'/>
{{todayTotal | number: '1.06'}}
style="height: 16px !important;
margin-bottom: -2px;">{{todayTotal | number: '1.06'}}
</div>
</td>
<td width="50%" align="center">
<h3>Overall Total:</h3>
<div class="total">
<td width="40%" >
<div class="totalsHdrTitle">Overall Total:</div>
<div class="totalsHdrDetail">
<img src="/assets/zec_rv.png"
style='height: 16px !important;
margin: -2px;'/>
{{total | number: '1.06'}}
style="height: 16px !important;
margin-bottom: -2px;">{{total | number: '1.06'}}
</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]="'30px'" [expandedHeight]="'30px'" >
<mat-panel-title>
<div class="orderListTitle">
<img src="/assets/zec_rv.png"
style="height: 16px;
margin-bottom: -2px;"
>{{order.totalZec | number: '1.06'}}
</div>
</mat-panel-title>
<mat-panel-description>
<table width="100%">
<tr>
<td>
<fa-icon [icon]="getIcon(order)" [style]="getIconStyle(order)" ></fa-icon>
</td>
<td align="center">
{{order.timestamp | date: 'short'}}
</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;
font-size: 16px;
height: 20px;">
<td width="50%">Order Total:</td>
<td align="right"
@ -81,7 +71,7 @@
</td>
</tr>
<tr style="font-family: Roboto Mono;
font-size: 16px;
font-size: 15px;
font-weight: 400;
height: 18px;">
<td width="50%">
@ -92,44 +82,31 @@
>1.0 = {{ order.price | currency: order.currency.toUpperCase()}}
</td>
<td width="50%" align="right">
{{ order.total | number: '1.02' | currency: order.currency.toUpperCase()}}
{{ order.total | 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;"
<th class="tbheader"
style="text-align: left;"
width="55%">Item
</th>
<th style= "font-family: Roboto Mono;
font-size: 14px;
font-weight: 700;
text-align: left;"
<th class="tbheader"
style="text-align: left;"
width="15%">Qty.
</th>
<th style= "font-family: Roboto Mono;
font-size: 14px;
font-weight: 700;
text-align: right;"
<th class="tbheader"
style="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">
<tbody>
<tr *ngFor="let item of order.lines">
<td class="tbdetail"
style="text-align: left;"
width="55%">{{item.name}}
@ -145,17 +122,7 @@
</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>

View file

@ -6,11 +6,12 @@ import { UserService } from '../user.service';
import {Owner} from '../owner.model';
import { OrderService } from '../order/order.service';
import { faTimes } from '@fortawesome/free-solid-svg-icons'
import { faTimesCircle } from '@fortawesome/free-solid-svg-icons'
import { faCheck } from '@fortawesome/free-solid-svg-icons'
import { faCheckCircle } from '@fortawesome/free-solid-svg-icons'
import { faHourglass } from '@fortawesome/free-solid-svg-icons'
import { faTimes } from '@fortawesome/free-solid-svg-icons';
import { faTimesCircle } from '@fortawesome/free-solid-svg-icons';
import { faCheck } from '@fortawesome/free-solid-svg-icons';
import { faCheckCircle } from '@fortawesome/free-solid-svg-icons';
import { faHourglass } from '@fortawesome/free-solid-svg-icons';
import { faTrash } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-list-orders',
@ -32,6 +33,7 @@ export class ListOrdersComponent implements OnInit, OnDestroy{
faCheck = faCheck;
faCheckCircle = faCheckCircle;
faHourglass = faHourglass;
faTrash = faTrash;
// -------------------------------------

View file

@ -11,14 +11,64 @@ img.icon{
height: 18px;
}
.tbheader {
.noOrderMsg {
font-family: Roboto Mono;
font-size: 14px;
font-weight: 700;
margin-top: 5px;
align-items: center;
}
.newOrder {
font-family: Roboto Mono !important;
}
.newOrderTitle1 {
font-size: 19px;
font-weight: 700;
height: 20px;
}
.newOrderTitle2 {
font-size: 16px;
font-weight: 400;
height: 18px;
}
.newOrdertbheader {
font-size: 14px;
font-weight: 700;
}
.tbdetail {
font-family: Roboto Mono;
.newOrdertbdetail {
font-size: 14px;
font-weight: 400;
}
.lineTrashCan {
cursor: pointer;
}
.buttons-class {
background-color: #ff4700;
color: white;
font-weight: 700;
height: 25px !important;
width: 80px !important;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin: auto;
}
.button-cancel-class {
font-weight: 700;
height: 25px !important;
width: 80px !important;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin: auto;
}

View file

@ -1,20 +1,14 @@
<div align="center"
style="font-family: Roboto Mono;
font-size: 14PX;
font-weight: 700;
margin-top: 5px;" *ngIf="order.address.length == 0">
<div class="noOrderMsg"
*ngIf="order.address.length == 0">
No open order!
</div>
<mat-card style="margin-top: 10px;" *ngIf="order.address.length" >
<div>
<div class="newOrder">
<mat-card-title>
<table style="width: 100%;"
cellspacing="0">
<tr style="font-family: Roboto Mono;
font-size: 19px;
font-weight: 700;
height: 20px;">
<tr class="newOrderTitle1">
<td width="50%">Order Total:</td>
<td align="right"
width="50%">
@ -22,17 +16,13 @@
>{{(total/price) | number: '1.0-6'}}
</td>
</tr>
<tr style="font-family: Roboto Mono;
font-size: 16px;
font-weight: 400;
height: 18px;">
<tr class="newOrderTitle2">
<td width="50%">
<img class="icon"
style="color: lightgray;
margin-bottom: -3px;"
src="/assets/zec_rv.png"
>1.0 &cong; {{ price | currency: getCurrency()}}
</td>
<td width="50%" align="right">
{{total | currency: getCurrency()}}
@ -41,69 +31,97 @@
</table>
</mat-card-title>
<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 class="newOrdertbheader"
style="text-align: left;"
width="50%">Item
</th>
<th style= "font-family: Roboto Mono;
font-size: 14px;
font-weight: 700;
text-align: left;"
<th class="newOrdertbheader"
style="text-align: left;"
width="15%">Qty.
</th>
<th style= "font-family: Roboto Mono;
font-size: 14px;
font-weight: 700;
text-align: right;"
<th class="newOrdertbheader"
style="text-align: right;"
width="30%">Total
</th>
<th></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"
<tbody>
<tr style="height: 30px;"
*ngFor="let item of oLines">
<td class="newOrdertbdetail"
style="text-align: left;"
width="55%">{{item.name}}
width="50%">{{item.name}}
</td>
<td class="tbdetail"
<td class="newOrdertbdetail"
style="text-align: left;"
width="15%">{{item.qty}}
</td>
<td class="tbdetail"
<td class="newOrdertbdetail"
style="text-align: right;"
width="30%">{{item.qty * item.cost | number:'1.02' | currency: getCurrency() }}
</td>
<td class="lineTrashCan">
<a (click)='trashCanClicked(item,oLines)' >
<fa-icon [icon]="faTrashAlt"
style="color: lightslategrey;
font-size: 14px;
margin: auto;">
</fa-icon>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="container" style="margin: 2px;
height: 35px;
background: lightblue;
border-top: 2px solid lightgray;
border-bottom: 2px solid lightgray;
align-content: center;
justify-content: center;">
<!--
<mat-card-actions>
<table cellspacing="0" width="100%">
<tr>
-->
<table style="margin-top: 4px;" cellspacing="0" width="100%">
<tr style="height: 16px;
margin-top: 10px">
<td>
<button mat-raised-button class="text" (click)="cancelOrder()">Cancel</button>
<button mat-raised-button
class="button-cancel-class"
(click)="cancelOrder()">
Cancel
</button>
</td>
<td>
<button mat-raised-button class="text" (click)="invoice()"><fa-icon [icon]="faInvoice" size="2x"></fa-icon> Invoice</button>
<button mat-raised-button
class="buttons-class"
(click)="invoice()">
<fa-icon [icon]="faInvoice" ></fa-icon> Invoice
</button>
</td>
<td align="right">
<button mat-raised-button
class="buttons-class"
(click)="checkout()">
Checkout
</button>
<!--
<button mat-raised-button class="text" color="primary" (click)="checkout()">Checkout</button>
-->
</td>
</tr>
</table>
<!--
</mat-card-actions>
-->
</div>
</mat-card>
<div style="font-family: Roboto Mono;
font-size: 18px;

View file

@ -1,6 +1,8 @@
import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogConfig} from '@angular/material/dialog';
import { Observable } from 'rxjs';
import { LineItem } from '../items/lineitem.model';
import { newLineItem } from '../items/newlineitem.model';
import { Order } from './order.model';
import { FullnodeService } from '../fullnode.service';
import { OrderService } from './order.service';
@ -10,6 +12,12 @@ import { PromptInvoiceComponent } from '../prompt-invoice/prompt-invoice.compone
import { ReceiptQRComponent} from '../receipt-qr/receipt-qr.component';
import { faFileInvoiceDollar } from '@fortawesome/free-solid-svg-icons';
import { faTrash } from '@fortawesome/free-solid-svg-icons';
import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
import { faSignOut } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-order',
templateUrl: './order.component.html',
@ -17,6 +25,10 @@ import { faFileInvoiceDollar } from '@fortawesome/free-solid-svg-icons';
})
export class OrderComponent implements OnInit{
public oLines : newLineItem[] = [];
public myLines : LineItem[] = [];
faInvoice = faFileInvoiceDollar;
public order: Order = {
address: '',
@ -42,6 +54,15 @@ export class OrderComponent implements OnInit{
public priceUpdate: Observable<number>;
public totalUpdate: Observable<number>;
// ------------------------------------
//
faTrash = faTrash;
faTrashAlt = faTrashAlt;
faChevronRight = faChevronRight;
faSignOut = faSignOut;
// -------------------------------------
constructor(
public fullnodeService: FullnodeService,
public orderService: OrderService,
@ -54,11 +75,32 @@ export class OrderComponent implements OnInit{
this.orderUpdate = orderService.orderUpdate;
this.orderUpdate.subscribe((order) => {
this.order = order;
// ------------------------------------------------
this.oLines = [];
this.myLines = this.order.lines;
var nl = {} as newLineItem;
for ( let i = 0; i < this.myLines.length; i++ )
{
// console.log("Loop : " + i + " - name : " + this.myLines[i].name);
nl = this.fillLineData(i,this.myLines[i].name,
this.myLines[i].qty,
this.myLines[i].cost) ;
// console.log(">> line_id: " + nl.line_id +
// " name: " + nl.name +
// " qty: " + nl.qty +
// " cost: " + nl.cost + " <<"
// )
this.oLines.push(nl);
// this.oLines[i].cost = this.myLines[i].cost;
}
// ------------------------------------------------
});
this.totalUpdate = orderService.totalUpdate;
this.totalUpdate.subscribe((total) => {
this.total = total;
});
}
ngOnInit() {
@ -82,6 +124,7 @@ export class OrderComponent implements OnInit{
console.log('Returning to page');
}
this.orderService.getOrder();
this.oLines = [];
});
}
@ -113,6 +156,7 @@ export class OrderComponent implements OnInit{
dialogRef2.afterClosed().subscribe( val => {
if (val) {
console.log('Receipt closed.');
this.oLines = [];
}
});
} else {
@ -136,6 +180,7 @@ export class OrderComponent implements OnInit{
dialogRef.afterClosed().subscribe((val) => {
if (val) {
this.orderService.closeOrder(false);
this.oLines = [];
} else {
console.log('Returning to order');
}
@ -145,4 +190,44 @@ export class OrderComponent implements OnInit{
getCurrency(){
return this.order.currency.toUpperCase();
}
fillLineData(i: number,
iname: string,
iqty: number,
icost: number) : newLineItem {
const a = { line_id: i,
name: iname,
qty: iqty,
cost: icost } as newLineItem;
return a;
}
trashCanClicked(item : newLineItem, lines: newLineItem[]) {
const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;
dialogConfig.data = {title: 'Remove Item?',
msg: 'Are you sure you want to remove <<' +
item.name + ' x ' + item.qty +
'>> from this order?'};
const dialogRef = this.dialog.open(CancelComponent, dialogConfig);
dialogRef.afterClosed().subscribe((val) => {
if (val) {
// console.log('Deleting item at line: '
// + (item.line_id +1)
// + " => (" + item.name +")");
this.orderService.updateOrder(item.line_id,lines);
this.orderService.getOrder();
} else {
console.log('Returning to order');
}
});
}
}

View file

@ -6,7 +6,8 @@ import { UserService } from '../user.service';
import { FullnodeService } from '../fullnode.service';
import { User } from '../user.model';
import { Owner } from '../owner.model';
import { LineItem} from '../items/lineitem.model';
import { LineItem } from '../items/lineitem.model';
import { newLineItem } from '../items/newlineitem.model';
import { ConfigData } from '../configdata';
@ -235,4 +236,34 @@ export class OrderService {
return obs;
}
updateOrder(itemid: number, iLines : newLineItem[]) {
if(this.dataStore.order._id != null) {
var item = {} as LineItem;
this.dataStore.order.lines = [];
for ( let i = 0; i < iLines.length; i++)
{
if ( i !== itemid )
{
item = this.fillItemData(iLines[i].name, iLines[i].qty, iLines[i].cost);
// console.log("Push => ", item);
this.dataStore.order.lines.push(item);
}
}
let obs = this.http.post(this.beUrl+'api/order', { payload: this.dataStore.order }, { headers: this.reqHeaders });
obs.subscribe((orderData) => {
this.getOrder();
});
}
}
fillItemData(iname:string, iqty: number, icost: number) : LineItem {
const a = { name: iname,
qty: iqty,
cost: icost } as LineItem;
return a;
}
}