Add to cart functionality completed

src/app/mocks/menu-items.ts

@@ -13,26 +13,15 @@ export const MENU_ITEMS_1 = [new MenuItem({
     tags: ['burger', 'breakfast']
 }), new MenuItem({
     id: '0002',
-    name: 'McAloo Tikki',
+    name: 'McChicken Tikki',
     image_url: 'https://www.mcdonalds.com.my/images/nasi_lemak/burger/burger.jpg?id=bb965dd67df3afa52033',
-    description: 'the patties are very unique and is prepared mainly with mashed potatoes and green peas. the flagship mcaloo tikki recipe from McDonalds involves a special sauce which is basically a combination of tomato sauce and mayonnaise. aloo tikki burger recipe.',
-    is_vegeterian: true,
-    wait_duration: 13,
-    price: 120,
-    discount: 50,
-    rating: 4.0,
-    tags: ['spicy', 'dinner']
-}), new MenuItem({
-    id: '0003',
-    name: 'McPork',
-    image_url: 'https://www.mcdonalds.com.my/images/nasi_lemak/burger/burger.jpg?id=bb965dd67df3afa52033',
-    description: 'the patties are very unique and is prepared mainly with mashed potatoes and green peas. the flagship mcaloo tikki recipe from McDonalds involves a special sauce which is basically a combination of tomato sauce and mayonnaise. aloo tikki burger recipe.',
+    description: 'the patties are very unique and is prepared mainly with mashed potatoes and green peas. the flagship McChicken tikki recipe from McDonalds involves a special sauce which is basically a combination of tomato sauce and mayonnaise. Chicken Tikka burger recipe.',
     is_vegeterian: false,
-    wait_duration: 20,
-    price: 300,
-    discount: 5,
-    rating: 4.9,
-    tags: ['spicy', 'dinner', 'pork']
+    wait_duration: 10,
+    price: 90,
+    discount: 10,
+    rating: 4,
+    tags: ['burger', 'spicy', 'chicken']
 })];
 
 export const MENU_ITEMS_2 = [new MenuItem({

src/app/mocks/outlets.ts

@@ -7,7 +7,7 @@ export const OUTLETS: Outlet[] = [new Outlet({
     image_url: 'https://images.markets.businessinsider.com/image/5a74835585cdd489228b47be-900/shutterstock643079686.jpg',
     name: 'McDonalds',
     description: 'Veg / Non-Veg Food Restaurant',
-    tags: ['dinner', 'spicy', 'breakfast', 'pork'],
+    tags: ['dinner', 'spicy', 'chicken', 'pork'],
     menu_items: MENU_ITEMS_1.map((menu_item) => menu_item.id),
     offers: OFFERS.map((offer) => offer.id),
     outlet_type: OutletType.FOOD,

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

@@ -81,7 +81,13 @@
                     <span class="discounted"> @ Rs {{ calculateDiscount(item.price, item.discount) }}/-* </span>
                     <span class="actual-price"> Rs {{ item.price }}/- </span>
                 </div>
-                <button class="cart-button"> Add to Cart </button>
+                <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>
+                    <div class="count"> {{ getItemCount(item.id) }} </div>
+                    <ion-button (click)="increaseCartItemCount(item.id)"> <ion-icon name="add"></ion-icon> </ion-button>
+                </div>
             </div>
 
         </div>

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

@@ -401,3 +401,28 @@
         object-fit: cover;
     }
 }
+
+.count-buttons-holder {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #efefef;
+
+    ion-button {
+        margin: 0;
+        width: 30px;
+        height: 30px;
+        --padding-start: 0;
+        --padding-end: 0;
+        --padding-top: 0;
+        --padding-bottom: 0;
+        font-size: 10px;
+        --background: var(--brand-blue);
+    }
+
+    .count {
+        color: var(--brand-dark-grey);
+        font-size: 12px;
+    }
+}

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

@@ -6,6 +6,7 @@ import { IMall } from '../models/mall';
 import CartItem from '../models/cart-item';
 import { IOutlet } from '../models/outlet';
 import MenuItem from '../models/menu-item';
+import { CartItemService } from '../services/cart-item.service';
 
 @Component({
     selector: 'app-outlet-details',
@@ -22,18 +23,23 @@ export class OutletDetailsPage implements OnInit {
     selected_description: string = null;
     show_sort_popup: boolean = false;
     selected_sort: string = null;
-    cart: Array<CartItem> = [];
+    cart_items: Array<CartItem>;
 
     constructor(
         private route: ActivatedRoute,
         private location: Location,
         private mallService: MallService,
+        private cartService: CartItemService
     ) { }
 
     ngOnInit() {
         let mall_id = this.route.snapshot.paramMap.get('mall_id');
         let outlet_id = this.route.snapshot.paramMap.get('outlet_id');
 
+        this.cartService.getAllCartItems().then((data: Array<CartItem>) => {
+            this.cart_items = data;
+        });
+
         this.mallService.getMallByID(mall_id).then((data: IMall) => {
             this.mall_details = data;
             this.outlet_details = this.mall_details.outlets.find((outlet) => outlet.id === outlet_id);
@@ -45,6 +51,65 @@ export class OutletDetailsPage implements OnInit {
         this.location.back();
     }
 
+    addToCart(item: MenuItem) {
+        this.cart_items.push({
+            menu_item: item.id,
+            quantity: 1,
+            pickup_time: new Date(new Date().setMinutes(new Date().getMinutes() + item.wait_duration)),
+            outlet_id: this.outlet_details.id,
+            mall_id: this.mall_details.id,
+            is_parcel: false,
+            total_price: this.calculateDiscount(item.price, item.discount)
+        });
+
+        this.cartService.updateCartItems(this.cart_items);
+    }
+
+    checkIfPresentInCart(id: string) {
+        let i: number;
+        for (i = 0; i < this.cart_items.length; i += 1) {
+            if (this.cart_items[i].menu_item === id) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+
+    getItemCount(id: string) {
+        let i: number;
+        for (i = 0; i < this.cart_items.length; i += 1) {
+            if (this.cart_items[i].menu_item === id) {
+                return this.cart_items[i].quantity;
+            }
+        }
+        return 0;
+    }
+
+
+    increaseCartItemCount(id: string) {
+        let i: number;
+        for (i = 0; i < this.cart_items.length; i += 1) {
+            if (this.cart_items[i].menu_item === id) {
+                this.cart_items[i].quantity += 1;
+            }
+        }
+        this.cartService.updateCartItems(this.cart_items);
+    }
+
+    decreaseCartItemCount(id: string) {
+        let i: number;
+        for (i = 0; i < this.cart_items.length; i += 1) {
+            if (this.cart_items[i].menu_item === id) {
+                this.cart_items[i].quantity -= 1;
+                if (this.cart_items[i].quantity === 0) {
+                    this.cart_items.splice(i, 1);
+                }
+            }
+        }
+        this.cartService.updateCartItems(this.cart_items);
+    }
+
     onScroll(event: any) {
         if (event.detail.scrollTop > 100) {
             this.show_top_bar = true;

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

@@ -1,9 +1,21 @@
 import { Injectable } from '@angular/core';
+import CartItem from '../models/cart-item';
 
 @Injectable({
-  providedIn: 'root'
+    providedIn: 'root'
 })
 export class CartItemService {
+    cart_items: Array<CartItem> = [];
+
+    constructor() { }
+
+    async updateCartItems(cart_items: Array<CartItem>) {
+        this.cart_items = cart_items;
+        return await this.cart_items;
+    }
+
+    async getAllCartItems() {
+        return await this.cart_items;
+    }
 
-  constructor() { }
 }

src/app/services/mall.service.ts

@@ -13,9 +13,7 @@ export class MallService {
     constructor(
         private offerService: OfferService,
         private outletService: OutletService
-    ) {
-        this.fetchMalls();
-    }
+    ) { }
 
     private getDenormalizedMall = async (mall: Mall) => {
         const offers = await Promise.all(mall.offers.map(offer_id => this.offerService.getOfferByID(offer_id)));
@@ -28,15 +26,13 @@ export class MallService {
         };
     }
 
-    private async fetchMalls() {
-        this.malls = await Promise.all(MALLS.map(this.getDenormalizedMall));
-    }
-
     public async getAllMalls() {
+        this.malls = await Promise.all(MALLS.map(this.getDenormalizedMall));
         return this.malls;
     }
 
     public async getMallByID(id: string) {
+        this.malls = await Promise.all(MALLS.map(this.getDenormalizedMall));
         return this.malls.find((mall) => mall.id === id);
     }
 }

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

@@ -6,7 +6,7 @@ import MenuItem from '../models/menu-item';
     providedIn: 'root'
 })
 export class MenuItemService {
-    menu_items: Array<MenuItem> = MENU_ITEMS_1 && MENU_ITEMS_2;
+    menu_items: Array<MenuItem> = MENU_ITEMS_1.concat(MENU_ITEMS_2);
 
     constructor() { }