Cart page Partial UI Completed

src/app/cart/cart.page.html

@@ -1,4 +1,4 @@
-<!-- <ion-content>
+<ion-content>
     <div class="header-bar">
         <div class="heading-holder">
             <button (click)="back()"> <ion-icon name="arrow-back"></ion-icon> </button>
@@ -7,7 +7,7 @@
     </div>
 
     <div class="cart-utilities-holder">
-        <h5> {{ cart_items.length }} ITEM(S) </h5>
+        <h5> {{ userCart.orderedlist.length }} ITEM(S) </h5>
         <ion-button fill="clear" (click)="show_order_details=!show_order_details">
             <span *ngIf="!show_order_details"> Show Order Details <ion-icon name="ios-arrow-down"></ion-icon> </span>
             <span *ngIf="show_order_details"> Hide Order Details <ion-icon name="ios-arrow-up"></ion-icon> </span>
@@ -15,24 +15,26 @@
     </div>
 
     <ul class="cart-item-list" *ngFor="let outlet of cart_outlets">
-		<header class="outlet"> {{ outlet.name }} </header>
+		<header class="outlet"> {{ getMallDetails(outlet.mall_id).mall.mall_name }} &gt; {{ getOutletDetails(outlet).outlet_name }} </header>
 
-		<ul class="breakups">
-			<li *ngFor="let item of cart_items" [ngClass]="{'hidden' : item.pickup_time !== isMaxDeliveryTime(outlet.id).pickup_time}">
-				<label> Pickup Time </label>
-				<ion-item class="time-holder">
-					{{ getPickupTimeFormat(item.pickup_time) }}
-					<a> Schedule time </a>
-					<ion-datetime displayFormat="hh:mm a" [(ngModel)]="item.pickup_time"
-					placeholder="Select Date"></ion-datetime>
-				</ion-item>
-			</li>
-		</ul>
-
-        <li class="cart-item" [ngClass]="{'show' : outlet.id === item.outlet_id }" *ngFor="let item of cart_items; let i = index;">
-            <header> {{ i + 1 }}. {{ item.menu_details.name }} </header>
-            <ul class="breakups" *ngIf="!show_order_details">
-                <li> <label> {{ item.quantity }} X &#8377; {{ item.menu_details.price }} </label> <span class="total"> &#8377;  {{ item.total_price }} </span> </li>
+        <li class="cart-item" *ngFor="let item of userCart.orderedlist; let i = index;" [ngClass]="{'show' : item.outlet_id === outlet.outlet_id && item.mall_id === outlet.mall_id }">
+            <header *ngIf="getItemDetails(item)"> {{ i + 1 }}. {{ getItemDetails(item).menu_item_name }} </header>
+            <ul class="breakups" *ngIf="!show_order_details && getItemDetails(item)">
+                <li>
+                    <label>
+                        {{ item.quantity }} X &#8377; {{ getItemDetails(item).item_price - getItemDetails(item).item_discount }}
+                    </label>
+                    <span class="total"> &#8377;  {{ item.total_price }} </span>
+                </li>
+                <li>
+                    <label> Pickup Time </label>
+    				<ion-item class="time-holder" (click)="hideMenuButton()">
+    					{{ getFormatterDateTime(item.pickup_time, 'hh:mm a') }}
+    					<a> Schedule time </a>
+    					<ion-datetime displayFormat="hh:mm a" [(ngModel)]="item.pickup_time"
+    					placeholder="Select Date" (ionChange)="showMenuButton()"></ion-datetime>
+    				</ion-item>
+                </li>
             </ul>
 
             <ul class="breakups" *ngIf="show_order_details">
@@ -51,12 +53,12 @@
                     </div>
                 </li>
             </ul>
-        </li>
 
-		<ion-button *ngFor="let item of cart_items" fill="outline" shape="round" class="add-on-button" (click)="openInstantMenu(item)" [ngClass]="{'show' : item.pickup_time === isMaxDeliveryTime(outlet.id).pickup_time}"> Add on </ion-button>
+            <ion-button fill="outline" shape="round" class="add-on-button show" (click)="openInstantMenu(outlet)"> Add on </ion-button>
+        </li>
     </ul>
 
-    <div class="total-price-breakup">
+    <!-- <div class="total-price-breakup">
         <ul class="breakups">
             <li> <label> Total after discounts </label> <span> &#8377;  {{ total_cart_amount }} </span> </li>
 			<li> <label> Promocode </label> <span>
@@ -73,17 +75,17 @@
         <div class="total-price">
             <span> Total </span> <span> &#8377;  {{ (total_cart_amount + 20) + (total_cart_amount + 20) * (18 / 100) }} </span>
         </div>
-    </div>
+    </div> -->
 
-    <div class="cart-utilities-holder total-savings">
+    <!-- <div class="cart-utilities-holder total-savings">
         <h5> Your Total Savings </h5>
         <ion-button fill="clear"> &#8377;  {{ total_savings }} </ion-button>
-    </div>
+    </div> -->
 
-    <ion-button shape="round" expand="block" class="pay-button" (click)="placeOrder()"
-	[disabled]="cart_items.length === 0"> Pay Now </ion-button>
+    <!-- <ion-button shape="round" expand="block" class="pay-button" (click)="placeOrder()"
+	[disabled]="cart_items.length === 0"> Pay Now </ion-button> -->
 
-	<div class="common-semi-modal filter-holder with-border" [ngClass]="{'active' : show_promocodes }">
+	<!-- <div class="common-semi-modal filter-holder with-border" [ngClass]="{'active' : show_promocodes }">
 		<header>
             APPLY PROMOCODE <button (click)="show_promocodes = false; calculateTotalAfterPromo()"> Done </button>
         </header>
@@ -107,14 +109,14 @@
 				</ion-label>
 			</ion-item>
 		</ion-list>
-	</div>
+	</div> -->
 
-	<div class="common-semi-modal instant-menu" [ngClass]="{'active' : instant_menu }" *ngIf="temp_outlet_details">
+	<div class="common-semi-modal instant-menu" [ngClass]="{'active' : showInstantMenu }" *ngIf="temp_outlet_details">
 		<header>
-            Add On <button (click)="instant_menu = false;"> Done </button>
+            Add On <button (click)="showInstantMenu = false;"> Done </button>
         </header>
 		<section class="items-holder">
-            <div class="item" *ngFor="let item of temp_outlet_details.menu_items"
+            <div class="item" *ngFor="let item of temp_outlet_details.menuitems"
             [ngClass]="{'hide' : !item.is_vegeterian && show_only_veg }">
                 <div class="stats-holder" *ngIf="show_grid">
 					<div class="stat"> <ion-icon name="stopwatch"></ion-icon> <span> {{ item.wait_duration }} min </span> </div>
@@ -128,7 +130,7 @@
                 </div>
 
                 <div class="content-holder">
-					<h5> {{ item.name }} </h5>
+					<h5> {{ item.menu_item_name }} </h5>
 
 					<div class="stats-holder" *ngIf="!show_grid">
 						<div class="stat"> <ion-icon name="stopwatch"></ion-icon> <span> {{ item.wait_duration }} min </span> </div>
@@ -136,8 +138,8 @@
 	                </div>
 
 	                <div class="price">
-	                    <span> ₹ {{ calculateDiscount(item.price, item.discount) }} </span>
-						<button class="cart-button" (click)="addToCart(item)" *ngIf="!checkIfPresentInCart(item.id)">
+	                    <span> ₹ {{ item.item_price - item.item_discount }} </span>
+						<button class="cart-button">
 							<ion-icon name="cart"></ion-icon>
 						</button>
 	                </div>
@@ -146,4 +148,4 @@
         </section>
 	</div>
 
-</ion-content> -->
+</ion-content>

src/app/cart/cart.page.ts

@@ -3,6 +3,7 @@ import { Location } from '@angular/common';
 import { MallService } from '../services/mall.service';
 import { Router } from '@angular/router';
 import { ToastController } from '@ionic/angular';
+import * as moment from 'moment';
 
 export type ICart = {
     orderedlist: Array<{
@@ -25,13 +26,124 @@ export type ICart = {
 })
 
 export class CartPage implements OnInit {
+    userCart: ICart = {
+        orderedlist: []
+    };
+    show_order_details: boolean = false;
+    cart_outlets: any = [];
+    allMalls: any = [];
+    tempPickupTime: any;
+    showInstantMenu: boolean = false;
+    temp_outlet_details: any;
+
     constructor(
         private location: Location,
-        private mallService: MallService,
         private router: Router,
-		public toastController: ToastController
+		public toastController: ToastController,
+        private mallService: MallService
     ) { }
 
     ngOnInit() {}
 
+    ionViewDidEnter() {
+		this.fetchCartItems();
+        this.allMalls = JSON.parse(localStorage.allMalls);
+	}
+
+    fetchCartItems() {
+        this.cart_outlets = [];
+
+        if (localStorage.userCart) {
+            this.userCart = JSON.parse(localStorage.userCart);
+        } else {
+            localStorage.userCart = JSON.stringify(this.userCart);
+        }
+
+        // this.cart_malls = this.userCart.orderedlist.map(order => order.mall_id);
+
+        for (let i = 0; i < this.userCart.orderedlist.length; i += 1) {
+            let tempOutlet = this.cart_outlets.find((outlet) => {
+                return outlet.outlet_id === this.userCart.orderedlist[i].outlet_id &&
+                outlet.mall_id === this.userCart.orderedlist[i].mall_id
+            });
+
+            if (!tempOutlet) {
+                this.cart_outlets.push({
+                    outlet_id: this.userCart.orderedlist[i].outlet_id,
+                    mall_id: this.userCart.orderedlist[i].mall_id
+                })
+            }
+        }
+    }
+
+    hideMenuButton() {
+        document.querySelector('.menu-icon-holder').classList.add('hide');
+    }
+
+    showMenuButton() {
+        setTimeout(() => {
+            document.querySelector('.menu-icon-holder').classList.remove('hide');
+        }, 1000);
+    }
+
+    checkIfTimeFeasible(oldTime, newTime) {
+        return moment(newTime) > moment(oldTime);
+    }
+
+    getOutletDetails(cartOutlet: any) {
+        let mall, outlet;
+        mall = this.allMalls.find((mall) => {
+            return mall.mall.mall_id === cartOutlet.mall_id;
+        });
+
+        if (mall) {
+            return outlet = mall.mall.outlet.find((outlet) => {
+                return outlet.outlet_id === cartOutlet.outlet_id;
+            });
+        }
+    }
+
+    getMallDetails(mallId: number) {
+        return this.allMalls.find((mall) => {
+            return mall.mall.mall_id === mallId;
+        });
+    }
+
+    getItemDetails(item) {
+        let mall, outlet, outletitem;
+        mall = this.allMalls.find((mall) => {
+            return mall.mall.mall_id === item.mall_id;
+        });
+
+        if (mall) {
+            outlet = mall.mall.outlet.find((outlet) => {
+                return outlet.outlet_id === item.outlet_id;
+            });
+        }
+
+        if (outlet) {
+            return outletitem = outlet.menuitems.find((menu) => {
+                return menu.menuitem_id === item.item_id;
+            });
+        }
+    }
+
+    ionViewDidLeave() {
+        localStorage.userCart = JSON.stringify(this.userCart);
+    }
+
+    getFormatterDateTime(date: any, format: string) {
+        return moment(date).format(format);
+    }
+
+    back() {
+        this.location.back();
+    }
+
+    openInstantMenu(outlet) {
+        this.showInstantMenu = true;
+        this.temp_outlet_details = this.getOutletDetails(outlet);
+        console.log(this.temp_outlet_details);
+    }
+
 }

src/app/malls/malls.page.ts

@@ -54,7 +54,7 @@ export class MallsPage implements OnInit {
             this.allMalls = JSON.parse(localStorage.allMalls);
             this.tempMalls = JSON.parse(localStorage.allMalls);
         }, (error) => {
-            console.log(error)
+            console.log(error);
         });
     }
 

src/app/outlet-details/outlet-details.page.ts

@@ -9,6 +9,7 @@ import * as moment from 'moment';
     templateUrl: './outlet-details.page.html',
     styleUrls: ['./outlet-details.page.scss'],
 })
+
 export class OutletDetailsPage implements OnInit {
     show_top_bar: boolean = false;
     show_only_veg: boolean = false;
@@ -62,7 +63,7 @@ export class OutletDetailsPage implements OnInit {
             pickup_time: moment().add(moment.duration(item.wait_duration).asMinutes(), 'minutes').format(),
             take_away: true,
             order_status: false,
-            total_price: item.item_price,
+            total_price: item.item_price - item.item_discount,
             soft_delete: false
         });
     }
@@ -87,22 +88,6 @@ export class OutletDetailsPage implements OnInit {
         }
     }
 
-    // filterByTag(tag: string) {
-    //     if (this.selected_tag === tag) {
-    //         this.selected_tag = null;
-    //         this.temp_outlet_details.menu_items = JSON.parse(JSON.stringify(this.outlet_details.menu_items));
-    //     } else {
-    //         this.selected_tag = tag;
-    //         let menu_items: Array<MenuItem> = [];
-    //         for (let i = 0; i < this.outlet_details.menu_items.length; i += 1) {
-    //             if (this.outlet_details.menu_items[i].tags.includes(tag)) {
-    //                 menu_items.push(this.outlet_details.menu_items[i]);
-    //             }
-    //         }
-    //         this.temp_outlet_details.menu_items = menu_items;
-    //     }
-    // }
-
     sortBy(type: string) {
         this.selected_sort = type;
         switch(this.selected_sort) {
@@ -128,6 +113,7 @@ export class OutletDetailsPage implements OnInit {
     }
 
 	goToCart() {
+        localStorage.userCart = JSON.stringify(this.userCart);
 		this.router.navigate(['/cart']);
 	}