From 99bec8f73962c5f9d9599af36eb26828d9f6a4f7 Mon Sep 17 00:00:00 2001
From: Rene Vergara <rene@vergara.network>
Date: Fri, 5 Nov 2021 16:32:01 -0500
Subject: [PATCH] Implement list of orders

Also corrects font in css files
---
 backend/app.js                                | 19 +++++++
 src/app/app-routing.module.ts                 |  2 +
 src/app/app.module.ts                         |  9 +++-
 src/app/cancel/cancel.component.css           |  2 +-
 src/app/checkout/checkout.component.css       |  2 +-
 src/app/header/header.component.css           |  2 +-
 .../item-create/item-create.component.css     |  2 +-
 .../item-delete/item-delete.component.css     |  2 +-
 .../items/item-list/item-list.component.css   |  4 +-
 .../items/item-list/item-list.component.html  |  4 +-
 src/app/listorders/listorders.component.css   | 22 ++++++++
 src/app/listorders/listorders.component.html  | 40 ++++++++++++++
 src/app/listorders/listorders.component.ts    | 53 +++++++++++++++++++
 src/app/login/login.component.css             |  2 +-
 src/app/order/order.component.css             |  2 +-
 src/app/order/order.service.ts                | 22 +++++++-
 src/app/settings/settings.component.css       |  3 ++
 src/app/viewer/viewer.component.css           |  2 +-
 src/app/viewer/viewer.component.html          |  1 +
 19 files changed, 180 insertions(+), 15 deletions(-)
 create mode 100644 src/app/listorders/listorders.component.css
 create mode 100644 src/app/listorders/listorders.component.html
 create mode 100644 src/app/listorders/listorders.component.ts

diff --git a/backend/app.js b/backend/app.js
index e58d7ca..707df10 100644
--- a/backend/app.js
+++ b/backend/app.js
@@ -352,6 +352,25 @@ app.get('/api/price', (req, res, next) => {
 	});
 });
 
+app.get('/api/allorders', (req, res, next) => {
+	console.log('Get /api/allorders');
+	if (req.query.address.length > 0) {
+		const orders = ordermodel.find({address: req.query.address, closed: true}).then((documents) => {
+			if (documents != null) {
+				res.status(200).json({
+					message: 'orders found!',
+					orders: documents
+				});
+			} else {
+				res.status(204).json({
+					message: 'no orders found',
+					orders: null
+				});
+			}
+		});
+	}
+});
+
 app.get('/api/order', (req, res, next) => {
 	console.log('Get /api/order');
 	if (req.query.session.length > 0) {
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index cb3f577..cff4598 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { ViewerComponent } from './viewer/viewer.component';
 import { LoginComponent } from './login/login.component';
+import { ListOrdersComponent } from './listorders/listorders.component';
 import { AuthGuardService } from './auth-guard.service';
 import { NodeResolverService } from './node-resolver.service';
 
@@ -9,6 +10,7 @@ const routes: Routes = [
 	{ path: '', component: LoginComponent, resolve: { response: NodeResolverService} },
 	//{ path: 'create', component: PostCreateComponent, canActivate: [AuthGuardService]},
 	{ path: 'shop', component: ViewerComponent, canActivate: [AuthGuardService]},
+	{ path: 'orders', component: ListOrdersComponent, canActivate: [AuthGuardService]},
 	{ path: 'login', component: LoginComponent}
 ];
 
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 549dd14..c973846 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -9,6 +9,8 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import { HttpClientModule } from '@angular/common/http';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatListModule } from '@angular/material/list';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -23,7 +25,7 @@ import { OrderComponent } from './order/order.component';
 import { CancelComponent } from './cancel/cancel.component';
 import { CheckoutComponent } from './checkout/checkout.component';
 import { SettingsComponent } from './settings/settings.component';
-//import { NameDialogComponent } from './namedialog/namedialog.component';
+import { ListOrdersComponent } from './listorders/listorders.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
@@ -39,7 +41,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 	ItemAddComponent,
 	CancelComponent,
 	CheckoutComponent,
-	SettingsComponent
+	SettingsComponent,
+	ListOrdersComponent
   ],
   imports: [
     BrowserModule,
@@ -54,6 +57,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
     MatToolbarModule,
     MatExpansionModule,
 	MatDialogModule,
+	MatDividerModule,
+	MatListModule,
     BrowserAnimationsModule
   ],
   exports: [
diff --git a/src/app/cancel/cancel.component.css b/src/app/cancel/cancel.component.css
index 8955a94..c921a22 100644
--- a/src/app/cancel/cancel.component.css
+++ b/src/app/cancel/cancel.component.css
@@ -1,3 +1,3 @@
 .text {
-	font-family: "Roboto-Mono", monospace;
+	font-family: "Roboto Mono", monospace;
 }
diff --git a/src/app/checkout/checkout.component.css b/src/app/checkout/checkout.component.css
index 8955a94..c921a22 100644
--- a/src/app/checkout/checkout.component.css
+++ b/src/app/checkout/checkout.component.css
@@ -1,3 +1,3 @@
 .text {
-	font-family: "Roboto-Mono", monospace;
+	font-family: "Roboto Mono", monospace;
 }
diff --git a/src/app/header/header.component.css b/src/app/header/header.component.css
index 548904e..a2fe255 100644
--- a/src/app/header/header.component.css
+++ b/src/app/header/header.component.css
@@ -1,5 +1,5 @@
 .text {
-	font-family: 'Roboto-Mono', monospace;
+	font-family: 'Roboto Mono', monospace;
 }
 
 a{
diff --git a/src/app/items/item-create/item-create.component.css b/src/app/items/item-create/item-create.component.css
index bfe9e5d..043c7e9 100644
--- a/src/app/items/item-create/item-create.component.css
+++ b/src/app/items/item-create/item-create.component.css
@@ -1,5 +1,5 @@
 .text {
-	font-family: 'Roboto-Mono', monospace;
+	font-family: 'Roboto Mono', monospace;
 }
 
 input[type=number]{
diff --git a/src/app/items/item-delete/item-delete.component.css b/src/app/items/item-delete/item-delete.component.css
index 3267c9b..57c4236 100644
--- a/src/app/items/item-delete/item-delete.component.css
+++ b/src/app/items/item-delete/item-delete.component.css
@@ -1,3 +1,3 @@
 .text {
-	font-family: 'Roboto-Mono', monospace;
+	font-family: 'Roboto Mono', monospace;
 }
diff --git a/src/app/items/item-list/item-list.component.css b/src/app/items/item-list/item-list.component.css
index ad0540a..ad00bab 100644
--- a/src/app/items/item-list/item-list.component.css
+++ b/src/app/items/item-list/item-list.component.css
@@ -1,9 +1,9 @@
 .card {
-	font-family: 'Roboto-Mono', monospace;
+	font-family: 'Roboto Mono', monospace;
 }
 
 .text {
-	font-family: 'Roboto-Mono', monospace;
+	font-family: 'Roboto Mono', monospace;
 }
 .small {
 	font-size: 75%;
diff --git a/src/app/items/item-list/item-list.component.html b/src/app/items/item-list/item-list.component.html
index 850f895..dc1518c 100644
--- a/src/app/items/item-list/item-list.component.html
+++ b/src/app/items/item-list/item-list.component.html
@@ -37,5 +37,5 @@
 </div>
 <p *ngIf = "items.length <= 0">No items yet!</p>
 <br>
-<button mat-raised-button (click)="openDialog()">
-	<mat-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>
diff --git a/src/app/listorders/listorders.component.css b/src/app/listorders/listorders.component.css
new file mode 100644
index 0000000..121ab70
--- /dev/null
+++ b/src/app/listorders/listorders.component.css
@@ -0,0 +1,22 @@
+.text{
+	font-family: 'Roboto Mono', monospace;
+}
+img.icon{
+	margin-bottom: -2px;
+}
+.price{
+	display: flex;
+	align-items: center;
+}
+.mini{
+	font-size: x-small;
+	align-items: center;
+	display: flex;
+	padding: 3px;
+}
+.small{
+	font-size: small;
+}
+.total{
+	font-size: large;
+}
diff --git a/src/app/listorders/listorders.component.html b/src/app/listorders/listorders.component.html
new file mode 100644
index 0000000..f6fa94a
--- /dev/null
+++ b/src/app/listorders/listorders.component.html
@@ -0,0 +1,40 @@
+<app-header></app-header>
+<div align="center">
+	<h1 class="text">{{(ownerUpdate | async)!.name}}</h1>
+	<button class="text" mat-raised-button [routerLink]="['/shop']" color="primary">
+		Back to Shop
+	</button>
+</div>
+<mat-divider></mat-divider>
+<div align="center">
+	<table class="text" width="75%">
+		<tr>
+			<td width="50%" align="center">
+				<h3>Today's Total:</h3>
+				<p class="total"><img src="/assets/zec-roboto.png" height="14px" />{{todayTotal}}</p>
+			</td>
+			<td width="50%" align="center">
+				<h3>Overall Total:</h3>
+				<p class="total"><img src="/assets/zec-roboto.png" height="14px" />{{total}}</p>
+			</td>
+		</tr>
+	</table>
+</div>
+<mat-divider></mat-divider>
+<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"><img src="/assets/zec-roboto.png" height="50%" />{{order.totalZec}}</span> <span class="mini"> (@{{order.price | currency: 'USD'}})</span>
+			</mat-panel-title>
+			<mat-panel-description>
+				{{order.timestamp | date: 'medium'}}
+			</mat-panel-description>
+		</mat-expansion-panel-header>
+		<p class="text">Order: {{order._id}}</p>
+		<mat-list>
+			<mat-list-item class="text small" *ngFor="let item of order.lines">{{item.qty}} x {{item.name}}</mat-list-item>
+		</mat-list>
+	</mat-expansion-panel>
+</mat-accordion>
+<p class="text" *ngIf = "orders.length <= 0">No orders</p>
diff --git a/src/app/listorders/listorders.component.ts b/src/app/listorders/listorders.component.ts
new file mode 100644
index 0000000..c9d5302
--- /dev/null
+++ b/src/app/listorders/listorders.component.ts
@@ -0,0 +1,53 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Order } from '../order/order.model';
+import { FullnodeService } from '../fullnode.service';
+import { UserService } from '../user.service';
+import {Owner} from '../owner.model';
+import { OrderService } from '../order/order.service';
+
+@Component({
+	selector: 'app-list-orders',
+	templateUrl: './listorders.component.html',
+	styleUrls: ['./listorders.component.css']
+})
+
+export class ListOrdersComponent implements OnInit, OnDestroy{
+	public todayTotal: number = 0;
+	public total: number = 0;
+	public orders: Order[] = [];
+	public ownerUpdate: Observable<Owner>;
+	public ordersUpdate: Observable<Order[]>;
+
+	constructor(
+		public orderService: OrderService,
+		public userService: UserService
+	){
+		this.ownerUpdate = userService.ownerUpdate;
+		this.orderService.getAllOrders();
+		this.ordersUpdate = orderService.allOrdersUpdate;
+	}
+
+	ngOnInit(){
+		this.ordersUpdate.subscribe((orders) => {
+			this.total = 0;
+			this.todayTotal = 0;
+			var today = new Date();
+			this.orders = orders;
+			console.log('lisord', this.orders.length);
+			for (let i=0; i < this.orders.length; i++){
+				this.total += this.orders[i].totalZec;
+				var date = new Date(this.orders[i]!.timestamp!);
+				var diff = (today.getTime() / 1000) - (date.getTime()/1000);
+				if (diff < (24*3600)){
+					this.todayTotal += this.orders[i].totalZec;
+				}
+			}
+		});
+	}
+
+	ngOnDestroy(){
+		this.total = 0;
+		this.todayTotal = 0;
+	}
+}
diff --git a/src/app/login/login.component.css b/src/app/login/login.component.css
index d99b529..94ef346 100644
--- a/src/app/login/login.component.css
+++ b/src/app/login/login.component.css
@@ -1,5 +1,5 @@
 * {
-	font-family: 'Roboto-Mono', monospace;
+	font-family: 'Roboto Mono', monospace;
 }
 mat-card.coolcard{
 	background-color: #FF5722;
diff --git a/src/app/order/order.component.css b/src/app/order/order.component.css
index a0b4f5c..d3b08a9 100644
--- a/src/app/order/order.component.css
+++ b/src/app/order/order.component.css
@@ -1,5 +1,5 @@
 .text {
-	font-family: "Roboto-Mono", monospace;
+	font-family: "Roboto Mono", monospace;
 }
 
 img.icon{
diff --git a/src/app/order/order.service.ts b/src/app/order/order.service.ts
index b40321a..14e5052 100644
--- a/src/app/order/order.service.ts
+++ b/src/app/order/order.service.ts
@@ -10,7 +10,8 @@ import { LineItem} from '../items/lineitem.model';
 @Injectable({providedIn: 'root'})
 
 export class OrderService {
-	private dataStore: { user: User, order: Order } = {
+	private dataStore: {allOrders: Order[], user: User, order: Order } = {
+		allOrders: [],
 		user:{
 			address: '',
 			session: '',
@@ -37,6 +38,8 @@ export class OrderService {
 	public readonly orderUpdate: Observable<Order> = this._orderUpdated.asObservable();
 	private _totalUpdated: BehaviorSubject<number> = new BehaviorSubject(this.dataStore.order.total);
 	public readonly totalUpdate: Observable<number> = this._totalUpdated.asObservable();
+	private _allOrdersUpdated: BehaviorSubject<Order[]> = new BehaviorSubject(this.dataStore.allOrders);
+	public readonly allOrdersUpdate: Observable<Order[]> = this._allOrdersUpdated.asObservable();
 	public userUpdate: Observable<User>;
 
 	constructor(
@@ -74,6 +77,23 @@ export class OrderService {
 		return obs;
 	}
 
+	getAllOrders(){
+		var address = this.dataStore.user.address;
+		const params = new HttpParams().append('address', address);
+		let obs = this.http.get<{message: string, orders: any}>('http://localhost:3000/api/allorders', { headers:{}, params:params, observe: 'response'});
+		obs.subscribe((OrdersData) => {
+			if (OrdersData.status == 200 ){
+				console.log('getAllOrder:', OrdersData.body);
+				this.dataStore.allOrders = OrdersData.body!.orders;
+				this._allOrdersUpdated.next(Object.assign({}, this.dataStore).allOrders);
+			} else {
+				console.log('No orders');
+			}
+		});
+
+		return obs;
+	}
+
 	addToOrder(lineItem: LineItem) {
 		if(this.dataStore.order._id != null) {
 			let obs = this.http.post<{message: string}>('http://localhost:3000/api/lineitem', { order_id: this.dataStore.order._id, line: lineItem });
diff --git a/src/app/settings/settings.component.css b/src/app/settings/settings.component.css
index e69de29..57c4236 100644
--- a/src/app/settings/settings.component.css
+++ b/src/app/settings/settings.component.css
@@ -0,0 +1,3 @@
+.text {
+	font-family: 'Roboto Mono', monospace;
+}
diff --git a/src/app/viewer/viewer.component.css b/src/app/viewer/viewer.component.css
index 0676c66..f6d0e97 100644
--- a/src/app/viewer/viewer.component.css
+++ b/src/app/viewer/viewer.component.css
@@ -1,3 +1,3 @@
 * {
-	font-family: 'Roboto-Mono', monospace;
+	font-family: 'Roboto Mono', monospace;
 }
diff --git a/src/app/viewer/viewer.component.html b/src/app/viewer/viewer.component.html
index 4452d98..e4cd943 100644
--- a/src/app/viewer/viewer.component.html
+++ b/src/app/viewer/viewer.component.html
@@ -1,6 +1,7 @@
 <app-header></app-header>
 <div align="center">
 	<h1>{{(ownerUpdate | async)!.name}}</h1>
+	<button mat-raised-button [routerLink]="['/orders']">View Orders</button>
 </div>
 <table cellspacing="0" width="100%">
 	<tr>