Cart page completed

package-lock.json

@@ -3256,6 +3256,19 @@
       "integrity": "sha1-tehezbv+Wu3tQKG/TuI3LmfZb7Q=",
       "dev": true
     },
+    "cordova-sqlite-storage": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/cordova-sqlite-storage/-/cordova-sqlite-storage-3.4.0.tgz",
+      "integrity": "sha512-Uavq3HulVIYXxTFCp5aafiQhYrZF0/cGlyN76RYhIftcD5IRhza9+ghhV5abJYvuGlzY+p9dM5hPcjnYxfAH+g==",
+      "requires": {
+        "cordova-sqlite-storage-dependencies": "2.1.0"
+      }
+    },
+    "cordova-sqlite-storage-dependencies": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cordova-sqlite-storage-dependencies/-/cordova-sqlite-storage-dependencies-2.1.0.tgz",
+      "integrity": "sha512-m0cPOWPzckAqS0/e7v+xtcM+FrHrw63qgh5T91JdkXMKCK8sN9bDoqVNJHZ5E9y7sRO7liMUIDm6Dz439RYqGA=="
+    },
     "core-js": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz",
@@ -4691,9 +4704,9 @@
       "dev": true
     },
     "handlebars": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.1.2.tgz",
-      "integrity": "sha512-nvfrjqvt9xQ8Z/w0ijewdD/vvWDTOweBUm96NTr66Wfvo1mJenBLwcYmPs3TIBP5ruzYGD7Hx/DaM9RmhroGPw==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.3.3.tgz",
+      "integrity": "sha512-VupOxR91xcGojfINrzMqrvlyYbBs39sXIrWa7YdaQWeBudOlvKEGvCczMfJPgnuwHE/zyH1M6J+IUP6cgDVyxg==",
       "dev": true,
       "requires": {
         "neo-async": "^2.6.0",
@@ -7211,6 +7224,11 @@
         }
       }
     },
+    "moment": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",

package.json

@@ -28,7 +28,9 @@
     "@ionic/angular": "^4.7.1",
     "@ionic/storage": "^2.2.0",
     "cordova-android": "8.0.0",
+    "cordova-sqlite-storage": "^3.4.0",
     "core-js": "^2.5.4",
+    "moment": "^2.24.0",
     "rxjs": "~6.5.1",
     "tslib": "^1.9.0",
     "uuid": "^3.3.2",
@@ -76,7 +78,8 @@
       "cordova-plugin-ionic-webview": {
         "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
       },
-      "cordova-plugin-ionic-keyboard": {}
+      "cordova-plugin-ionic-keyboard": {},
+      "cordova-sqlite-storage": {}
     },
     "platforms": [
       "android"

src/app/app.module.ts

@@ -5,6 +5,7 @@ import { RouteReuseStrategy } from '@angular/router';
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
+import { IonicStorageModule } from '@ionic/storage';
 
 // Services import
 import { MallService } from './services/mall.service';
@@ -25,6 +26,7 @@ import { environment } from '../environments/environment';
         BrowserModule,
         IonicModule.forRoot(),
         AppRoutingModule,
+        IonicStorageModule.forRoot(),
         ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })],
     providers: [
         StatusBar,

src/app/cart/cart.page.html

@@ -7,7 +7,7 @@
     </div>
 
     <div class="cart-utilities-holder">
-        <h5> ITEMS </h5>
+        <h5> {{ cart_items.length }} ITEMS </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,32 +15,34 @@
     </div>
 
     <ul class="cart-item-list">
-        <li class="cart-item">
-            <header> 1. Mc Chicken Meals <ion-button fill="clear"> Change </ion-button> </header>
+        <li class="cart-item" *ngFor="let item of cart_items; let i = index;">
+            <header> {{ i + 1 }}. {{ item.menu_details.name }}
+                <ion-button fill="clear" (click)="goToOutlet(item.mall_id, item.outlet_id)"> Change </ion-button>
+            </header>
             <ul class="breakups" *ngIf="!show_order_details">
-                <li> <label> 1X Rs.170 </label> <span class="total"> Rs. 170 </span> </li>
-                <li> <label> Today @ 10:am </label> </li>
+                <li> <label> {{ item.quantity }} X Rs.{{ item.menu_details.price }} </label> <span class="total"> Rs. {{ item.total_price }} </span> </li>
+                <li> <label> {{ getPickupTimeFormat(item.pickup_time) }} </label> </li>
             </ul>
 
             <ul class="breakups" *ngIf="show_order_details">
                 <li>
                     <label> Quantity </label>
                     <div class="quantity-scale-holder">
-                        <button> <ion-icon name="remove"></ion-icon> </button>
-                        <div class="quantity"> 0 </div>
-                        <button> <ion-icon name="add"></ion-icon> </button>
+                        <button (click)="decreaseCartItemCount(item)"> <ion-icon name="remove"></ion-icon> </button>
+                        <div class="quantity"> {{ item.quantity }} </div>
+                        <button (click)="increaseCartItemCount(item)"> <ion-icon name="add"></ion-icon> </button>
                     </div>
                 </li>
                 <li>
                     <label> Pickup Time </label>
                     <div class="time-holder">
-                        Today @ 10:00 am <a> Schedule Time </a>
+                        {{ getPickupTimeFormat(item.pickup_time) }}
                     </div>
                 </li>
                 <li>
                     <label> Takeaway </label>
                     <div class="toggle">
-                        <ion-toggle></ion-toggle>
+                        <ion-toggle [(ngModel)]="item.take_away"></ion-toggle>
                     </div>
                 </li>
             </ul>
@@ -56,19 +58,19 @@
 
     <div class="total-price-breakup">
         <ul class="breakups">
-            <li> <label> Item Total </label> <span> Rs. 170 </span> </li>
-            <li> <label> Taxes </label> <span> Rs.6.80 </span> </li>
+            <li> <label> Total after discounts </label> <span> Rs. {{ total_cart_amount }} </span> </li>
             <li> <label> Packaging </label> <span> Rs.20 </span> </li>
+            <li> <label> GST </label> <span> 18% </span> </li>
         </ul>
 
         <div class="total-price">
-            <span> Total </span> <span> Rs. 197 </span>
+            <span> Total </span> <span> Rs. {{ (total_cart_amount + 20) + (total_cart_amount + 20) * (18 / 100) }} </span>
         </div>
     </div>
 
     <div class="cart-utilities-holder">
         <h5> Your total savings </h5>
-        <ion-button fill="clear"> Rs. 85 </ion-button>
+        <ion-button fill="clear"> Rs. 0 </ion-button>
     </div>
 
     <ion-button shape="round" expand="block" class="pay-button"> Pay Now </ion-button>

src/app/cart/cart.page.scss

@@ -8,7 +8,7 @@
     justify-content: space-between;
     padding: 15px;
     height: 75px;
-    z-index: 2;
+    z-index: 3;
     top: 0;
     left: 0;
     width: 100%;
@@ -85,6 +85,12 @@ ul {
 
     .cart-item {
         margin-bottom: 20px;
+        border-bottom: 1px solid #efefef;
+        padding-bottom: 20px;
+
+        &:last-child {
+            border-bottom: 0;
+        }
     }
 
     header {
@@ -126,7 +132,7 @@ ul {
     }
 
     .total {
-        color: dimgrey;
+        color: black;
     }
 
     .quantity-scale-holder {
@@ -156,6 +162,9 @@ ul {
 
     .time-holder {
         font-size: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
 
         a {
             text-decoration: underline;

src/app/cart/cart.page.ts

@@ -1,5 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
+import CartItem from '../models/cart-item';
+import { CartItemService } from '../services/cart-item.service';
+import { MallService } from '../services/mall.service';
+import { IMall } from '../models/mall';
+import * as moment from 'moment';
+import { Router } from '@angular/router';
+import MenuItem from '../models/menu-item';
 
 @Component({
     selector: 'app-cart',
@@ -8,16 +15,91 @@ import { Location } from '@angular/common';
 })
 export class CartPage implements OnInit {
     show_order_details: boolean = false;
+    cart_items: any = [];
+    all_malls: Array<IMall> = [];
+    total_cart_amount: number = 0;
+    total_discount: number = 0;
 
     constructor(
-        private location: Location
+        private location: Location,
+        private cartService: CartItemService,
+        private mallService: MallService,
+        private router: Router
     ) { }
 
-    ngOnInit() {
+    ngOnInit() {}
+
+    ionViewDidEnter() {
+
+        this.mallService.getAllMalls().then((malls: Array<IMall>) => {
+            this.all_malls = malls;
+        });
+
+        this.cartService.getAllCartItems().then((cart_items: Array<CartItem>) => {
+            this.cart_items = cart_items;
+
+            let i: number;
+
+            for (i = 0; i < this.cart_items.length; i += 1) {
+                let mall = this.all_malls.find(mall => mall.id === this.cart_items[i].mall_id);
+                let outlet = mall.outlets.find(outlet => outlet.id === this.cart_items[i].outlet_id);
+                this.cart_items[i].menu_details = outlet.menu_items.find(item => item.id === this.cart_items[i].menu_item);
+                this.total_cart_amount += this.cart_items[i].total_price;
+            }
+        });
+
+    }
+
+    increaseCartItemCount(item: any) {
+        let i: number, cart_items;
+        for (i = 0; i < this.cart_items.length; i += 1) {
+            if (this.cart_items[i].menu_item === item.menu_item) {
+                this.cart_items[i].quantity += 1;
+                this.cart_items[i].total_price = this.calculateDiscount(item.menu_details.price, item.menu_details.discount) * this.cart_items[i].quantity;
+                this.total_cart_amount = this.total_cart_amount + this.calculateDiscount(item.menu_details.price, item.menu_details.discount);
+            }
+        }
+        cart_items = JSON.parse(JSON.stringify(this.cart_items));
+        for (i = 0; i < cart_items.length; i += 1) {
+            delete cart_items[i]['menu_details'];
+        }
+        this.cartService.updateCartItems(cart_items);
+    }
+
+    decreaseCartItemCount(item: any) {
+        let i: number, cart_items;
+        for (i = 0; i < this.cart_items.length; i += 1) {
+            if (this.cart_items[i].menu_item === item.menu_item) {
+                this.cart_items[i].quantity -= 1;
+                this.cart_items[i].total_price = this.calculateDiscount(item.menu_details.price, item.menu_details.discount) * this.cart_items[i].quantity;
+                this.total_cart_amount = this.total_cart_amount - this.calculateDiscount(item.menu_details.price, item.menu_details.discount);
+                if (this.cart_items[i].quantity === 0) {
+                    this.cart_items.splice(i, 1);
+                }
+            }
+        }
+        cart_items = JSON.parse(JSON.stringify(this.cart_items));
+        for (i = 0; i < cart_items.length; i += 1) {
+            delete cart_items[i]['menu_details'];
+        }
+        console.log(cart_items);
+        this.cartService.updateCartItems(cart_items);
+    }
+
+    getPickupTimeFormat(date: Date) {
+        return moment(date).calendar();
     }
 
     back() {
         this.location.back();
     }
 
+    goToOutlet(mall_id: string, outlet_id: string) {
+        this.router.navigate(['/outlet-details', { mall_id: mall_id, outlet_id: outlet_id }]);
+    }
+
+    calculateDiscount(price: number, discount: number) {
+        return price - (price * discount / 100);
+    }
+
 }

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

@@ -84,9 +84,9 @@
                 <button class="cart-button" (click)="addToCart(item)"
                 *ngIf="!checkIfPresentInCart(item.id)"> Add to Cart </button>
                 <div class="count-buttons-holder" *ngIf="checkIfPresentInCart(item.id)">
-                    <ion-button (click)="decreaseCartItemCount(item.id)"> <ion-icon name="remove"></ion-icon> </ion-button>
+                    <ion-button (click)="decreaseCartItemCount(item)"> <ion-icon name="remove"></ion-icon> </ion-button>
                     <div class="count"> {{ getItemCount(item.id) }} </div>
-                    <ion-button (click)="increaseCartItemCount(item.id)"> <ion-icon name="add"></ion-icon> </ion-button>
+                    <ion-button (click)="increaseCartItemCount(item)"> <ion-icon name="add"></ion-icon> </ion-button>
                 </div>
             </div>
 

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

@@ -23,7 +23,7 @@ export class OutletDetailsPage implements OnInit {
     selected_description: string = null;
     show_sort_popup: boolean = false;
     selected_sort: string = null;
-    cart_items: Array<CartItem>;
+    cart_items: Array<CartItem> = [];
 
     constructor(
         private route: ActivatedRoute,
@@ -38,6 +38,7 @@ export class OutletDetailsPage implements OnInit {
 
         this.cartService.getAllCartItems().then((data: Array<CartItem>) => {
             this.cart_items = data;
+            console.log(data);
         });
 
         this.mallService.getMallByID(mall_id).then((data: IMall) => {
@@ -87,21 +88,23 @@ export class OutletDetailsPage implements OnInit {
     }
 
 
-    increaseCartItemCount(id: string) {
+    increaseCartItemCount(item: MenuItem) {
         let i: number;
         for (i = 0; i < this.cart_items.length; i += 1) {
-            if (this.cart_items[i].menu_item === id) {
+            if (this.cart_items[i].menu_item === item.id) {
                 this.cart_items[i].quantity += 1;
+                this.cart_items[i].total_price = this.calculateDiscount(item.price, item.discount) * this.cart_items[i].quantity;
             }
         }
         this.cartService.updateCartItems(this.cart_items);
     }
 
-    decreaseCartItemCount(id: string) {
+    decreaseCartItemCount(item: MenuItem) {
         let i: number;
         for (i = 0; i < this.cart_items.length; i += 1) {
-            if (this.cart_items[i].menu_item === id) {
+            if (this.cart_items[i].menu_item === item.id) {
                 this.cart_items[i].quantity -= 1;
+                this.cart_items[i].total_price = this.calculateDiscount(item.price, item.discount) * this.cart_items[i].quantity;
                 if (this.cart_items[i].quantity === 0) {
                     this.cart_items.splice(i, 1);
                 }

src/app/services/cart-item.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import CartItem from '../models/cart-item';
+import { Storage } from '@ionic/storage';
 
 @Injectable({
     providedIn: 'root'
@@ -7,15 +8,24 @@ import CartItem from '../models/cart-item';
 export class CartItemService {
     cart_items: Array<CartItem> = [];
 
-    constructor() { }
+    constructor(
+        private storage: Storage
+    ) { }
 
     async updateCartItems(cart_items: Array<CartItem>) {
         this.cart_items = cart_items;
+        this.storage.set('cart_items', JSON.stringify(this.cart_items));
         return await this.cart_items;
     }
 
     async getAllCartItems() {
-        return await this.cart_items;
+        return await this.storage.get('cart_items').then((data: string) => {
+            if (data) {
+                return JSON.parse(data);
+            } else {
+                return [];
+            }
+        });
     }
 
 }

src/global.scss

@@ -26,8 +26,9 @@
 @import "~@ionic/angular/css/flex-utils.css";
 
 
-// @import url('');
-// @import url('');
+ion-content {
+    --padding-bottom: 30px;
+}
 
 ion-button, button, a, p, div, input {
     font-family: 'Roboto', sans-serif;