Connected orders data to dashboard

src/app/dashboard/dashboard.component.html

@@ -2,8 +2,8 @@
 	<section class="order-stats">
 		<div class="widget-heading-holder">
 			<header> Dashboard </header>
-			<app-custom-selector header="Date" [options]="filterOptions" width="200"
-			[defaultOptionId]="filterOptions[1].id"></app-custom-selector>
+			<!-- <app-custom-selector header="Date" [options]="filterOptions" width="200"
+			[defaultOptionId]="filterOptions[1].id"></app-custom-selector> -->
 		</div>
 
 		<ul>
@@ -15,7 +15,7 @@
 					</div>
 
 					<div class="column">
-						<div class="count"> 2 </div> Nos
+						<div class="count"> {{ getFilteredOrders('pending').length }} </div> Nos
 					</div>
 				</div>
 
@@ -32,7 +32,7 @@
 					</div>
 
 					<div class="column">
-						<div class="count"> 5 </div> Nos
+						<div class="count"> {{ getFilteredOrders('confirmed').length }} </div> Nos
 					</div>
 				</div>
 
@@ -44,12 +44,12 @@
 			<li>
 				<div class="column-holder">
 					<div class="column">
-						<header> Ready to Pick </header>
-						<p> Waiting for the Customer </p>
+						<header> Delivered </header>
+						<p> Waiting for the Customer / Delivered </p>
 					</div>
 
 					<div class="column">
-						<div class="count"> 10 </div> Nos
+						<div class="count"> {{ getFilteredOrders('delivered').length }} </div> Nos
 					</div>
 				</div>
 
@@ -60,121 +60,41 @@
 		</ul>
 	</section>
 
-	<ul class="pending-orders">
+	<ul class="pending-orders" *ngIf="getFilteredOrders('pending').length > 0">
 		<div class="heading">
 			<header> Pending Orders: </header>
 			<a> View All </a>
 		</div>
-		<li>
+		<li *ngFor="let order of getFilteredOrders('pending')">
 			<div class="info">
-				<label> Order ID: 34343 </label>
+				<label> Order ID: {{ order.orders_id }} </label>
 			</div>
-			<div class="name-holder">
-				<div class="name"> Mc Chicken Regular Meals  </div>
-				<div class="info">
-					<label> Quantity </label>
-					<span> 2 </span>
-				</div>
-			</div>
-
-			<div class="info">
-				<label> Pickup Time </label>
-				<span> Today at 10:30 AM </span>
-			</div>
-
-			<div class="info">
-				<label> Parcel </label>
-				<span> No </span>
-			</div>
-
-			<div class="action-buttons">
-				<button class="round-button"> Confirm </button>
-				<button class="round-button"> Reject </button>
-			</div>
-		</li>
-
-		<li>
-			<div class="info">
-				<label> Order ID: 34343 </label>
-			</div>
-			<div class="name-holder">
-				<div class="name"> Mc Chicken Regular Meals  </div>
-				<div class="info">
-					<label> Quantity </label>
-					<span> 2 </span>
-				</div>
-			</div>
-
-			<div class="info">
-				<label> Pickup Time </label>
-				<span> Today at 10:30 AM </span>
-			</div>
-
-			<div class="info">
-				<label> Parcel </label>
-				<span> No </span>
-			</div>
-
-			<div class="action-buttons">
-				<button class="round-button"> Confirm </button>
-				<button class="round-button"> Reject </button>
-			</div>
-		</li>
 
-		<li>
-			<div class="info">
-				<label> Order ID: 34343 </label>
-			</div>
-			<div class="name-holder">
-				<div class="name"> Mc Chicken Regular Meals  </div>
-				<div class="info">
-					<label> Quantity </label>
-					<span> 2 </span>
-				</div>
-			</div>
+            <div *ngFor="let item of order.orderedlist">
+                <div class="name-holder">
+                    <div class="name"> {{ item.menu_item_name }}  </div>
+                    <div class="info">
+                        <label> Quantity </label>
+                        <span> {{ item.quantity }} </span>
+                    </div>
+                </div>
 
-			<div class="info">
-				<label> Pickup Time </label>
-				<span> Today at 10:30 AM </span>
-			</div>
+                <div class="info">
+                    <label> Pickup Time </label>
+                    <span> {{ getFormattedDate(item.pickup_time, 'DD MMM @ hh:mm a') }} </span>
+                </div>
 
-			<div class="info">
-				<label> Parcel </label>
-				<span> No </span>
-			</div>
+                <div class="info">
+                    <label> Parcel </label>
+                    <span *ngIf="!item.take_away"> No </span>
+                    <span *ngIf="item.take_away"> Yes </span>
+                </div>
+            </div>
 
-			<div class="action-buttons">
-				<button class="round-button"> Confirm </button>
-				<button class="round-button"> Reject </button>
-			</div>
-		</li>
-
-
-		<li>
-			<div class="info">
-				<label> Order ID: 34343 </label>
-			</div>
-			<div class="name-holder">
-				<div class="name"> Mc Chicken Regular Meals  </div>
-				<div class="info">
-					<label> Quantity </label>
-					<span> 2 </span>
-				</div>
-			</div>
-
-			<div class="info">
-				<label> Pickup Time </label>
-				<span> Today at 10:30 AM </span>
-			</div>
-
-			<div class="info">
-				<label> Parcel </label>
-				<span> No </span>
-			</div>
 
 			<div class="action-buttons">
-				<button class="round-button"> Confirm </button>
-				<button class="round-button"> Reject </button>
+				<button class="round-button" (click)="order.orderstatus.orderstatus_id = 1; updateOrder(order)"> Confirm </button>
+				<button class="round-button" (click)="order.orderstatus.orderstatus_id = 4; updateOrder(order)"> Reject </button>
 			</div>
 		</li>
 	</ul>

src/app/dashboard/dashboard.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { IFilterOption } from '../models/filter-option';
+import { OrderService } from '../services/order.service';
+import * as moment from 'moment';
 
 @Component({
 	selector: 'app-dashboard',
@@ -8,8 +10,12 @@ import { IFilterOption } from '../models/filter-option';
 })
 export class DashboardComponent implements OnInit {
 	filterOptions: Array<IFilterOption>;
+    orderList: any = [];
+    orderStatus: any = [];
 
-	constructor() { }
+	constructor(
+        private orderService: OrderService
+    ) { }
 
 	ngOnInit() {
 		this.filterOptions = [{
@@ -19,6 +25,47 @@ export class DashboardComponent implements OnInit {
 			name: 'Today',
 			id: 'today'
 		}];
+
+        this.orderService.getOrders().then((data) => {
+            this.orderList = data;
+
+            this.orderList = this.orderList.filter((order) => {
+                return order.orderstatus;
+            });
+        }, () => {
+            alert("Error getting the orders");
+        });
 	}
 
+    getFormattedDate(date: any, format: string) {
+        return moment(date).format(format);
+    }
+
+    getFilteredOrders(type: 'pending' | 'delivered' | 'confirmed') {
+        switch(type) {
+            case 'pending':
+                return this.orderList.filter((order) => {
+                    return order.orderstatus.orderstatus_id === 6;
+                });
+            case 'delivered':
+                return this.orderList.filter((order) => {
+                    return order.orderstatus.orderstatus_id === 3;
+                });
+            case 'confirmed':
+                return this.orderList.filter((order) => {
+                    return order.orderstatus.orderstatus_id === 1;
+                });
+            default: return [];
+        }
+    }
+
+    updateOrder(order) {
+        this.orderService.updateOrder(order).then((data) => {
+            console.log(data);
+        }, (err) => {
+            console.log(err)
+            alert("Failed to update order");
+        })
+    }
+
 }

src/app/orders/orders.component.ts

@@ -12,9 +12,7 @@ export class OrdersComponent implements OnInit {
 	statusOptions: Array<IFilterOption>;
 	dateOptions: Array<IFilterOption>;
 	showRejectionPopup: boolean = false;
-
-    orderList: any;
-
+    orderList: any = [];
     orderStatus: any = [];
 
 	constructor(
@@ -32,13 +30,7 @@ export class OrdersComponent implements OnInit {
 			id: 'today'
 		}];
 
-
-        let vendor_info = JSON.parse(localStorage.vendor_info);
-
-        console.log(vendor_info);
-
         this.orderService.getOrders().then((data) => {
-            console.log(data);
             this.orderList = data;
 
             this.orderList = this.orderList.filter((order) => {

src/app/services/order.service.ts

@@ -44,7 +44,7 @@ export class OrderService {
         return this.http.get(URL + '/api/maioraservice/orders/getorders/user_id/' + uid + '/', httpOptions).toPromise();
     }
 
-    updateOrder(data: any) {
+    updateOrder(data: any) {        
         const httpOptions = {
 			headers: new HttpHeaders({
 				'Access-Control-Allow-Origin': '*',
@@ -52,6 +52,6 @@ export class OrderService {
 				'Authorization': 'Bearer ' + localStorage.vendor_token
 			})
 		};
-        return this.http.post(URL + '/api/maioraservice/orders/v1/update', data , httpOptions).toPromise();
+        return this.http.put(URL + '/api/maioraservice/orders/v1/update', data , httpOptions).toPromise();
     }
 }

src/app/widgets-holder/widgets-holder.component.html

@@ -14,9 +14,10 @@
 	<section class="side-navigation">
 		<section class="user-info">
 			<img>
-			<div class="name"> John Doe </div>
-			<div class="other-info"> Member ID: 03293 </div>
-			<div class="other-info"> Restaurant Rating: 4.0 <i class="icon ion-ios-star"></i> </div>
+			<div class="name"> {{ vendor_info.vendorName }} </div>
+			<div class="other-info"> Vendor ID: {{ vendor_info.vendor_Id }} </div>
+            <div class="other-info">  {{ vendor_info.outlet.length }} Outlets </div>
+			<div class="other-info"> Average Rating: 4.0 <i class="icon ion-ios-star"></i> </div>
 		</section>
 
 		<ul>

src/app/widgets-holder/widgets-holder.component.ts

@@ -6,11 +6,14 @@ import { Component, OnInit } from '@angular/core';
 	styleUrls: ['./widgets-holder.component.scss']
 })
 export class WidgetsHolderComponent implements OnInit {
-	selected_nav: string = 'orders';
+	selected_nav: string = 'dashboard';
+    vendor_info: any;
 
 	constructor() { }
 
 	ngOnInit() {
+        let data = JSON.parse(localStorage.vendor_info);
+        this.vendor_info = data['Info Info'];
 	}
 
 	getNavPage(page: string) {