outlet details page complete

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

@@ -61,7 +61,7 @@
     </div>
 
     <ion-list lines="none" class="result-list" *ngIf="selected_tab === 'food'">
-        <ion-item *ngFor="let outlet of mall_details.outlet">
+        <ion-item *ngFor="let outlet of mall_details.outlet" (click)="outletDetails(outlet)">
             <img src="{{ outlet.image_url }}" slot="start">
             <ion-label>
                 <h3>

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

@@ -37,8 +37,8 @@ export class MallDetailsPage implements OnInit {
         }
     }
 
-    outletDetails(mall_id: string, outlet_id: string) {
-        this.router.navigate(['/outlet-details', { mall_id: mall_id, outlet_id: outlet_id }]);
+    outletDetails(outlet: any) {
+        this.router.navigate(['/outlet-details', { outlet: JSON.stringify(outlet) }]);
     }
 
     sortBy(type: string) {

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

@@ -6,7 +6,7 @@
 			<button (click)="back()">
 				<ion-icon name="arrow-back"></ion-icon>
 			</button>
-			<h3> {{ outlet_details.name }} </h3>
+			<h3> {{ outlet_details.outlet_name }} </h3>
 		</div>
 		<div class="stats-holder">
 			<div class="stat">
@@ -45,7 +45,7 @@
 	<div class="card-holder">
 		<div class="card">
 			<h3>
-				{{ outlet_details.name }}
+				{{ outlet_details.outlet_name }}
 				<ion-button size="small" fill="clear">
 					<ion-icon name="information-circle"></ion-icon>
 				</ion-button>
@@ -69,8 +69,8 @@
 			</div>
 		</header>
 
-		<div class="details-header">
-			<span class="count"> {{ temp_outlet_details.menu_items.length }} FOOD ITEMS </span>
+		<div class="details-header" *ngIf="outlet_details.menuitems">
+			<span class="count"> {{ outlet_details.menuitems.length }} FOOD ITEMS </span>
 			<div class="display-formats">
 				<button [ngClass]="{'active' : !show_grid }" (click)="show_grid = false">
 					<ion-icon name="list"></ion-icon>
@@ -83,10 +83,10 @@
 
 		<section class="items-holder" [ngClass]="{'list-mode' : !show_grid }">
 
-			<div class="item" *ngFor="let item of temp_outlet_details.menu_items" [ngClass]="{'hide' : !item.is_vegeterian && show_only_veg }">
+			<div class="item" *ngFor="let item of outlet_details.menuitems" [ngClass]="{'hide' : !item.is_vegetarian && 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>
+						<ion-icon name="stopwatch"></ion-icon> <span> {{ item.wait_duration }} </span>
 					</div>
 					<div class="stat">
 						<ion-icon name="star"></ion-icon> <span> {{ item.rating }} </span>
@@ -95,16 +95,16 @@
 				<div class="image-holder">
 					<img [src]="item.image_url">
 					<div class="label-holder">
-						<div class="category" [ngClass]="{'non-veg' : !item.is_vegeterian, 'veg' : item.is_vegeterian }"></div>
+						<div class="category" [ngClass]="{'non-veg' : !item.is_vegetarian, 'veg' : item.is_vegetarian }"></div>
 					</div>
 				</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>
+							<ion-icon name="stopwatch"></ion-icon> <span> {{ item.wait_duration }} </span>
 						</div>
 						<div class="stat">
 							<ion-icon name="star"></ion-icon> <span> {{ item.rating }} </span>
@@ -112,8 +112,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>
@@ -143,12 +143,6 @@
 				</div>
 				<span> RATING </span>
 			</button>
-			<button [ngClass]="{'active' : selected_sort === 'duration'}" (click)="sortBy('duration')">
-				<div class="icon-holder">
-					<ion-icon name="time"></ion-icon>
-				</div>
-				<span> WAITING TIME </span>
-			</button>
 			<button [ngClass]="{'active' : selected_sort === 'price'}" (click)="sortBy('price')">
 				<div class="icon-holder"> &#8377; </div>
 				<span> PRICE </span>
@@ -161,17 +155,17 @@
 			FILTER <button (click)="show_filter_popup = false"> Done </button>
 		</header>
 		<ion-list>
-			<ion-item *ngFor="let tag of outlet_details.tags" (click)="filterByTag(tag)">
+			<ion-item *ngFor="let tag of outlet_details.item_categories">
 				<ion-checkbox slot="start" [checked]="selected_tag === tag"></ion-checkbox>
 				<ion-label> {{ tag }} </ion-label>
 			</ion-item>
 		</ion-list>
 	</div>
 
-	<ion-fab *ngIf="cart_items.length > 0" (click)="goToCart()">
+	<!-- <ion-fab *ngIf="cart_items.length > 0" (click)="goToCart()">
 		<ion-fab-button>
 			<ion-icon name="cart"></ion-icon>
 		</ion-fab-button>
-	</ion-fab>
+	</ion-fab> -->
 
 </ion-content>

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

@@ -394,8 +394,7 @@
             font-weight: bold;
             letter-spacing: 0.5px;
             margin: 10px 0;
-            white-space: nowrap;
-            text-overflow: ellipsis;
+            white-space: wrap;
         }
     }
 

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

@@ -1,12 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Location } from '@angular/common';
-import { MallService } from '../services/mall.service';
-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',
@@ -14,25 +8,20 @@ import { CartItemService } from '../services/cart-item.service';
     styleUrls: ['./outlet-details.page.scss'],
 })
 export class OutletDetailsPage implements OnInit {
-    mall_details: IMall;
-    outlet_details: IOutlet;
-    temp_outlet_details: IOutlet;
     show_top_bar: boolean = false;
     show_only_veg: boolean = false;
     selected_tag: string = null;
     selected_description: string = null;
     show_sort_popup: boolean = false;
     selected_sort: string = null;
-    cart_items: Array<CartItem> = [];
-	show_grid: boolean = true;
+    show_grid: boolean = true;
 	show_filter_popup: boolean = false;
+    outlet_details: any;
 
     constructor(
         private route: ActivatedRoute,
 		private router: Router,
         private location: Location,
-        private mallService: MallService,
-        private cartService: CartItemService
     ) { }
 
     ngOnInit() {
@@ -40,85 +29,14 @@ export class OutletDetailsPage implements OnInit {
     }
 
 	ionViewDidEnter() {
-		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);
-            this.temp_outlet_details = JSON.parse(JSON.stringify(this.outlet_details));
-        });
+		this.outlet_details = JSON.parse(this.route.snapshot.paramMap.get('outlet'));
+        console.log(this.outlet_details);
 	}
 
     back() {
         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,
-            take_away: true,
-            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(item: MenuItem) {
-        let i: number;
-        for (i = 0; i < this.cart_items.length; i += 1) {
-            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(item: MenuItem) {
-        let i: number;
-        for (i = 0; i < this.cart_items.length; i += 1) {
-            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);
-                }
-            }
-        }
-        this.cartService.updateCartItems(this.cart_items);
-    }
-
     onScroll(event: any) {
         if (event.detail.scrollTop > 100) {
             this.show_top_bar = true;
@@ -127,55 +45,40 @@ export class OutletDetailsPage implements OnInit {
         }
     }
 
-    calculateDiscount(price: number, discount: number) {
-        return price - (price * discount / 100);
-    }
-
-    toggleBookmark() {
-        this.outlet_details.is_bookmarked = !this.outlet_details.is_bookmarked;
-    }
-
-
-    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;
-        }
-    }
+    // 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) {
-            case 'name': this.temp_outlet_details.menu_items.sort(function(a, b){
-                if(a.name < b.name) { return -1; }
-                if(a.name > b.name) { return 1; }
+            case 'name': this.outlet_details.menuitems.sort(function(a, b){
+                if(a.menu_item_name < b.menu_item_name) { return -1; }
+                if(a.menu_item_name > b.menu_item_name) { return 1; }
                 return 0;
             });
             break;
-            case 'rating': this.temp_outlet_details.menu_items.sort(function(a, b){
+            case 'rating': this.outlet_details.menuitems.sort(function(a, b){
                 if(a.rating < b.rating) { return -1; }
                 if(a.rating > b.rating) { return 1; }
                 return 0;
             }).reverse();
             break;
-            case 'price': this.temp_outlet_details.menu_items.sort(function(a, b){
-                if(a.price < b.price) { return -1; }
-                if(a.price > b.price) { return 1; }
-                return 0;
-            });
-            break;
-            case 'duration': this.temp_outlet_details.menu_items.sort(function(a, b){
-                if(a.wait_duration < b.wait_duration) { return -1; }
-                if(a.wait_duration > b.wait_duration) { return 1; }
+            case 'price': this.outlet_details.menuitems.sort(function(a, b){
+                if((a.item_price - a.item_discount) < (b.item_price - b.item_discount)) { return -1; }
+                if((a.item_price - a.item_discount) > (b.item_price - b.item_discount)) { return 1; }
                 return 0;
             });
             break;