Partial commit - bug fixes

package-lock.json

@@ -1310,6 +1310,21 @@
         "@types/cordova": "^0.0.34"
       }
     },
+    "@ionic-native/geolocation": {
+      "version": "5.15.1",
+      "resolved": "https://registry.npmjs.org/@ionic-native/geolocation/-/geolocation-5.15.1.tgz",
+      "integrity": "sha512-RzNyuYLN4h+owqv55b2V4KKvs+H3G4F/3C6gD2PU39gvaeoLcW0Pj6dKnnV9qOVSUmq/b5MjPFH950Y7OcTthQ==",
+      "requires": {
+        "@types/cordova": "^0.0.34"
+      },
+      "dependencies": {
+        "@types/cordova": {
+          "version": "0.0.34",
+          "resolved": "https://registry.npmjs.org/@types/cordova/-/cordova-0.0.34.tgz",
+          "integrity": "sha1-6nrd907Ow9dimCegw54smt3HPQQ="
+        }
+      }
+    },
     "@ionic-native/splash-screen": {
       "version": "5.11.0",
       "resolved": "https://registry.npmjs.org/@ionic-native/splash-screen/-/splash-screen-5.11.0.tgz",
@@ -1457,6 +1472,11 @@
         "@types/node": "*"
       }
     },
+    "@types/googlemaps": {
+      "version": "3.38.0",
+      "resolved": "https://registry.npmjs.org/@types/googlemaps/-/googlemaps-3.38.0.tgz",
+      "integrity": "sha512-Rp7FnrwyYGnjoxM+/q/4DRqUzvV9JKK1SBRXx8APxU6NNMtYMsWmOMsQOV2U6z8aMFzlUbRv3EDixLcDep8t9w=="
+    },
     "@types/jasmine": {
       "version": "3.3.16",
       "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-3.3.16.tgz",
@@ -3226,6 +3246,11 @@
       "integrity": "sha1-/Ajzci5n7ve2xnv8mag99q3Quro=",
       "dev": true
     },
+    "cordova-plugin-geolocation": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-geolocation/-/cordova-plugin-geolocation-4.0.2.tgz",
+      "integrity": "sha512-QGThnPKzPxESHkruZlpE0+5aFBVOet8al0vIJ7laSUOQHIC1dd/JY6peVIbtLboKi5Dap1wCKRubOqPqH8xcQA=="
+    },
     "cordova-plugin-ionic-keyboard": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/cordova-plugin-ionic-keyboard/-/cordova-plugin-ionic-keyboard-2.1.3.tgz",
@@ -4998,9 +5023,9 @@
       "dev": true
     },
     "https-proxy-agent": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.2.tgz",
-      "integrity": "sha512-c8Ndjc9Bkpfx/vCJueCPy0jlP4ccCCSNDp8xwCZzPjKJUm+B+u9WX2x98Qx4n1PiMNTWo3D7KK5ifNV/yJyRzg==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.3.tgz",
+      "integrity": "sha512-Ytgnz23gm2DVftnzqRRz2dOXZbGd2uiajSw/95bPp6v53zPRspQjLm/AfBgqbJ2qfeRXWIOMVLpp86+/5yX39Q==",
       "dev": true,
       "requires": {
         "agent-base": "^4.3.0",

package.json

@@ -23,11 +23,14 @@
     "@angular/router": "~8.1.2",
     "@angular/service-worker": "~8.1.2",
     "@ionic-native/core": "^5.0.0",
+    "@ionic-native/geolocation": "^5.15.1",
     "@ionic-native/splash-screen": "^5.0.0",
     "@ionic-native/status-bar": "^5.0.0",
     "@ionic/angular": "^4.7.1",
     "@ionic/storage": "^2.2.0",
+    "@types/googlemaps": "^3.38.0",
     "cordova-android": "8.0.0",
+    "cordova-plugin-geolocation": "^4.0.2",
     "cordova-sqlite-storage": "^3.4.0",
     "core-js": "^2.5.4",
     "moment": "^2.24.0",
@@ -79,10 +82,11 @@
         "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
       },
       "cordova-plugin-ionic-keyboard": {},
-      "cordova-sqlite-storage": {}
+      "cordova-sqlite-storage": {},
+      "cordova-plugin-geolocation": {}
     },
     "platforms": [
       "android"
     ]
   }
-}
+}

src/app/app-routing.module.ts

@@ -11,6 +11,7 @@ const routes: Routes = [
   { path: 'cart', loadChildren: './cart/cart.module#CartPageModule' },
   { path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' },
   { path: 'bookmark', loadChildren: './bookmark/bookmark.module#BookmarkPageModule' },
+  { path: 'near', loadChildren: './near/near.module#NearPageModule' },
 ];
 
 @NgModule({

src/app/app.component.html

@@ -25,7 +25,7 @@
             <ion-icon src="assets/custom/cart.svg"></ion-icon>
             <span> CART </span>
         </button>
-        <button>
+        <button (click)="navigateTo('near')">
             <ion-icon src="assets/custom/004-map.svg"></ion-icon>
             <span> NEAR </span>
         </button>

src/app/app.module.ts

@@ -21,6 +21,9 @@ import { AppRoutingModule } from './app-routing.module';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
 
+// Native Plugins
+import { Geolocation } from '@ionic-native/geolocation/ngx';
+
 @NgModule({
     declarations: [AppComponent],
     entryComponents: [],
@@ -40,6 +43,7 @@ import { environment } from '../environments/environment';
         CartItemService,
         UserDataService,
 		OrderService,
+		Geolocation,
         { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
     ],
     bootstrap: [AppComponent]

src/app/cart/cart.page.html

@@ -14,14 +14,21 @@
         </ion-button>
     </div>
 
-    <ul class="cart-item-list">
-        <li class="cart-item" *ngFor="let item of cart_items; let i = index;">
+    <ul class="cart-item-list" *ngFor="let outlet of cart_outlets">
+		<header class="outlet"> {{ outlet.name }} </header>
+        <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>
-					<label> {{ getPickupTimeFormat(item.pickup_time) }} </label>
-				</li>
+				<li>
+                    <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>
 
             <ul class="breakups" *ngIf="show_order_details">

src/app/cart/cart.page.scss

@@ -90,17 +90,16 @@ ul {
 .cart-item-list {
     width: 90%;
     margin: 0 auto;
+	padding-bottom: 15px;
     border-bottom: 1px solid #efefef;
 
     .cart-item {
-        border-bottom: 1px solid #efefef;
-        padding-bottom: 15px;
-		margin-bottom: 10px;
+		display: none;
+		margin-top: 20px;
 
-        &:last-child {
-            border-bottom: 0;
-			margin-bottom: 0;
-        }
+		&.show {
+			display: block;
+		}
     }
 
     header {
@@ -111,6 +110,13 @@ ul {
         font-weight: bold;
         color: dimgrey;
 
+		&.outlet {
+			background-color: #efefef;
+			color: var(--brand-grey);
+			margin-bottom: -10px;
+			padding: 5px 10px;
+		}
+
         ion-button {
             --padding-end: 0;
             --color: var(--brand-blue);
@@ -196,7 +202,8 @@ ul {
 		--color: var(--brand-dark-grey);
 		font-weight: 500;
 		position: relative;
-		right: -30px;
+		right: -35px;
+		height: 20px;
 
 		a {
 			margin: 0 5px;

src/app/cart/cart.page.ts

@@ -28,6 +28,7 @@ export class CartPage implements OnInit {
 	mall_details: IMall;
     outlet_details: IOutlet;
 	new_pickup_time: Date;
+	cart_outlets: any = [];
 
     constructor(
         private location: Location,
@@ -58,14 +59,20 @@ export class CartPage implements OnInit {
         this.cartService.getAllCartItems().then((cart_items: Array<CartItem>) => {
             this.cart_items = cart_items;
 
-            let i: number;
+            let i: number, j: 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;
+
+				if (this.cart_outlets.filter((cart_outlet: any) => cart_outlet.id === this.cart_items[i].outlet_id).length === 0) {
+					this.cart_outlets.push({id: this.cart_items[i].outlet_id, name: outlet.name});
+				}
             }
+
+			console.log(this.cart_outlets);
         });
 	}
 

src/app/near/near.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { NearPage } from './near.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: NearPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [NearPage]
+})
+export class NearPageModule {}

src/app/near/near.page.html

@@ -0,0 +1,11 @@
+<ion-content>
+	<div class="header-bar">
+        <div class="heading-holder">
+            <button (click)="back()"> <ion-icon name="arrow-back"></ion-icon> </button>
+            <h3> Near </h3>
+        </div>
+    </div>
+
+	<div id="map"></div>
+
+</ion-content>

src/app/near/near.page.scss

@@ -0,0 +1,55 @@
+.header-bar {
+    background-image: url('../../assets/custom/background-5.svg');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: left top;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 15px;
+    height: 75px;
+    z-index: 3;
+    top: 0;
+    left: 0;
+    width: 100%;
+    position: sticky;
+    box-shadow: 0px 3px 5px var(--brand-grey);
+
+    .heading-holder {
+        display: flex;
+        align-items: center;
+    }
+
+    button, a {
+        background-color: white;
+        color: var(--brand-blue);
+        font-size: 18px;
+        padding: 5px;
+        border-radius: 50%;
+        height: 30px;
+        width: 30px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &.active {
+            color: white;
+            background-color: var(--brand-blue);
+        }
+    }
+
+    h3 {
+        font-size: 16px;
+        color: white;
+        letter-spacing: 0.5px;
+        margin-left: 10px;
+        font-weight: 600;
+    }
+}
+
+
+#map {
+	height: calc(100vh - 75px);
+	width: 100vw;
+	background-color: #efefef;
+}

src/app/near/near.page.spec.ts

@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NearPage } from './near.page';
+
+describe('NearPage', () => {
+  let component: NearPage;
+  let fixture: ComponentFixture<NearPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NearPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NearPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/near/near.page.ts

@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { Geolocation } from '@ionic-native/geolocation/ngx';
+import { } from 'googlemaps';
+
+@Component({
+	selector: 'app-near',
+	templateUrl: './near.page.html',
+	styleUrls: ['./near.page.scss'],
+})
+export class NearPage implements OnInit {
+	user_location = {
+		lat: 0,
+		lng: 0
+	};
+
+	constructor(
+		private location: Location,
+		private geolocation: Geolocation
+	) { }
+
+	ngOnInit() {
+		// this.geolocation.getCurrentPosition().then((resp) => {
+		// 	this.user_location = {
+		// 		lat: 12.962690,
+		// 		lng: 77.523338
+		// 	};
+		// }).catch((error) => {
+		// 	console.log('Error getting location', error);
+		// });
+		// let map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: this.user_location });
+		// let marker = new google.maps.Marker({ position: this.user_location, map: map });
+	}
+
+	back() {
+		this.location.back();
+	}
+
+}

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

@@ -1,143 +1,165 @@
 <ion-content [scrollEvents]="true" *ngIf="outlet_details" (ionScroll)="onScroll($event)">
-    <div class="overlay" [ngClass]="{ 'active' : show_sort_popup }"></div>
-
-    <div class="header-bar" [ngClass]="{'active' : show_top_bar }">
-        <div class="heading-holder">
-            <button (click)="back()"> <ion-icon name="arrow-back"></ion-icon> </button>
-            <h3> {{ outlet_details.name }} </h3>
-        </div>
-        <div class="stats-holder">
-            <div class="stat"> <ion-icon name="star"></ion-icon> {{ outlet_details.rating }} </div>
-        </div>
-        <div class="utilities-buttons-holder" (click)="toggleBookmark()">
-            <button [ngClass]="{'active' : outlet_details.is_bookmarked }"> <ion-icon name="bookmark"></ion-icon> </button>
-            <button> <ion-icon name="share"></ion-icon> </button>
-        </div>
-    </div>
-
-    <div class="upfold-holder">
-        <img src="{{ outlet_details.image_url }}">
-        <div class="icons-holder">
-            <div>
-                <button (click)="back()"> <ion-icon name="arrow-back"></ion-icon> </button>
-            </div>
-            <div class="action-buttons-holder">
-                <button [ngClass]="{'active' : outlet_details.is_bookmarked }" (click)="toggleBookmark()">
-                    <ion-icon name="bookmark"></ion-icon>
-                </button>
-                <button> <ion-icon name="share"></ion-icon> </button>
-            </div>
-        </div>
-    </div>
-
-    <div class="card-holder">
-        <div class="card">
-            <h3>
+	<div class="overlay" [ngClass]="{ 'active' : show_sort_popup }"></div>
+
+	<div class="header-bar" [ngClass]="{'active' : show_top_bar }">
+		<div class="heading-holder">
+			<button (click)="back()">
+				<ion-icon name="arrow-back"></ion-icon>
+			</button>
+			<h3> {{ outlet_details.name }} </h3>
+		</div>
+		<div class="stats-holder">
+			<div class="stat">
+				<ion-icon name="star"></ion-icon> {{ outlet_details.rating }}
+			</div>
+		</div>
+		<div class="utilities-buttons-holder" (click)="toggleBookmark()">
+			<button [ngClass]="{'active' : outlet_details.is_bookmarked }">
+				<ion-icon name="bookmark"></ion-icon>
+			</button>
+			<button>
+				<ion-icon name="share"></ion-icon>
+			</button>
+		</div>
+	</div>
+
+	<div class="upfold-holder">
+		<img src="{{ outlet_details.image_url }}">
+		<div class="icons-holder">
+			<div>
+				<button (click)="back()">
+					<ion-icon name="arrow-back"></ion-icon>
+				</button>
+			</div>
+			<div class="action-buttons-holder">
+				<button [ngClass]="{'active' : outlet_details.is_bookmarked }" (click)="toggleBookmark()">
+					<ion-icon name="bookmark"></ion-icon>
+				</button>
+				<button>
+					<ion-icon name="share"></ion-icon>
+				</button>
+			</div>
+		</div>
+	</div>
+
+	<div class="card-holder">
+		<div class="card">
+			<h3>
 				{{ outlet_details.name }}
-				<ion-button size="small" fill="clear"> <ion-icon name="information-circle"></ion-icon> </ion-button>
+				<ion-button size="small" fill="clear">
+					<ion-icon name="information-circle"></ion-icon>
+				</ion-button>
 			</h3>
 			<p> {{ outlet_details.description }} </p>
-            <div class="stats-holder">
-                <div class="stat"> <ion-icon name="star"></ion-icon> {{ outlet_details.rating }} </div>
-            </div>
-        </div>
-    </div>
-
-    <div class="menu-card-holder">
-        <header>
-            <div>
+			<div class="stats-holder">
+				<div class="stat">
+					<ion-icon name="star"></ion-icon> {{ outlet_details.rating }}
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="menu-card-holder">
+		<header>
+			<div>
 				<button color="default" fill="clear" (click)="show_filter_popup = true"> FILTER </button>
 				<button color="default" fill="clear" (click)="show_sort_popup = true"> SORT </button>
-            </div>
-            <div class="toggle" (click)="show_only_veg = !show_only_veg"> VEG MENU <ion-toggle [(ngModel)]="show_only_veg"></ion-toggle> </div>
-        </header>
+			</div>
+			<div class="toggle" (click)="show_only_veg = !show_only_veg"> VEG MENU <ion-toggle [(ngModel)]="show_only_veg"></ion-toggle>
+			</div>
+		</header>
 
 		<div class="details-header">
 			<span class="count"> {{ temp_outlet_details.menu_items.length }} FOOD ITEMS </span>
 			<div class="display-formats">
-				<button [ngClass]="{'active' : !show_grid }" (click)="show_grid = false"> <ion-icon name="list"></ion-icon> </button>
-				<button [ngClass]="{'active' : show_grid }" (click)="show_grid = true"> <ion-icon name="grid"></ion-icon> </button>
+				<button [ngClass]="{'active' : !show_grid }" (click)="show_grid = false">
+					<ion-icon name="list"></ion-icon>
+				</button>
+				<button [ngClass]="{'active' : show_grid }" (click)="show_grid = true">
+					<ion-icon name="grid"></ion-icon>
+				</button>
 			</div>
 		</div>
 
-        <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="stats-holder" *ngIf="show_grid">
-					<div class="stat"> <ion-icon name="stopwatch"></ion-icon> <span> {{ item.wait_duration }} min </span> </div>
-                	<div class="stat"> <ion-icon name="star"></ion-icon> <span> {{ item.rating }} </span> </div>
-                </div>
-                <div class="image-holder">
-                	<img [src]="item.image_url">
+		<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="stats-holder" *ngIf="show_grid">
+					<div class="stat">
+						<ion-icon name="stopwatch"></ion-icon> <span> {{ item.wait_duration }} min </span>
+					</div>
+					<div class="stat">
+						<ion-icon name="star"></ion-icon> <span> {{ item.rating }} </span>
+					</div>
+				</div>
+				<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>
-                </div>
+						<div class="category" [ngClass]="{'non-veg' : !item.is_vegeterian, 'veg' : item.is_vegeterian }"></div>
+					</div>
+				</div>
 
-                <div class="content-holder">
+				<div class="content-holder">
 					<h5> {{ 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>
-	                	<div class="stat"> <ion-icon name="star"></ion-icon> <span> {{ item.rating }} </span> </div>
-	                </div>
-
-	                <div class="price">
-	                    <span> ₹ {{ calculateDiscount(item.price, item.discount) }} </span>
+						<div class="stat">
+							<ion-icon name="stopwatch"></ion-icon> <span> {{ item.wait_duration }} min </span>
+						</div>
+						<div class="stat">
+							<ion-icon name="star"></ion-icon> <span> {{ item.rating }} </span>
+						</div>
+					</div>
+
+					<div class="price">
+						<span> ₹ {{ calculateDiscount(item.price, item.discount) }} </span>
 						<button class="cart-button" (click)="addToCart(item)" *ngIf="!checkIfPresentInCart(item.id)">
 							<ion-icon name="cart"></ion-icon>
 						</button>
-						<div class="count-buttons-holder" *ngIf="checkIfPresentInCart(item.id)">
-		                    <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)"> <ion-icon name="add"></ion-icon> </ion-button>
-		                </div>
-	                </div>
-                </div>
-
-            </div>
-        </section>
-    </div>
-
-    <div class="advertisement">
-        <img src="https://d2z1w4aiblvrwu.cloudfront.net/ad/IO1u/mcdonalds-2-mcdouble-and-fries-too-good-to-last-large-6.jpg" alt="">
-    </div>
-
-
-    <div class="common-semi-modal sort-holder" [ngClass]="{'active' : show_sort_popup }">
-        <header>
-            SORT <button (click)="show_sort_popup = false"> Done </button>
-        </header>
-
-        <div class="sort-buttons-holder">
-            <button [ngClass]="{'active' : selected_sort === 'name'}"
-            (click)="sortBy('name')">
-                <div class="icon-holder"> A-Z </div>
-                <span> NAME </span>
-            </button>
-            <button [ngClass]="{'active' : selected_sort === 'rating'}"
-            (click)="sortBy('rating')">
-                <div class="icon-holder"> <ion-icon name="star"></ion-icon> </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>
-            </button>
-        </div>
-    </div>
+					</div>
+				</div>
+			</div>
+		</section>
+	</div>
+
+	<div class="advertisement">
+		<img src="https://d2z1w4aiblvrwu.cloudfront.net/ad/IO1u/mcdonalds-2-mcdouble-and-fries-too-good-to-last-large-6.jpg" alt="">
+	</div>
+
+
+	<div class="common-semi-modal sort-holder" [ngClass]="{'active' : show_sort_popup }">
+		<header>
+			SORT <button (click)="show_sort_popup = false"> Done </button>
+		</header>
+
+		<div class="sort-buttons-holder">
+			<button [ngClass]="{'active' : selected_sort === 'name'}" (click)="sortBy('name')">
+				<div class="icon-holder"> A-Z </div>
+				<span> NAME </span>
+			</button>
+			<button [ngClass]="{'active' : selected_sort === 'rating'}" (click)="sortBy('rating')">
+				<div class="icon-holder">
+					<ion-icon name="star"></ion-icon>
+				</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>
+			</button>
+		</div>
+	</div>
 
 	<div class="common-semi-modal filter-holder" [ngClass]="{'active' : show_filter_popup }">
 		<header>
-            FILTER <button (click)="show_filter_popup = false"> Done </button>
-        </header>
+			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-checkbox slot="start" [checked]="selected_tag === tag"></ion-checkbox>
@@ -146,4 +168,10 @@
 		</ion-list>
 	</div>
 
+	<ion-fab *ngIf="cart_items.length > 0" (click)="goToCart()">
+		<ion-fab-button>
+			<ion-icon name="cart"></ion-icon>
+		</ion-fab-button>
+	</ion-fab>
+
 </ion-content>

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

@@ -456,3 +456,33 @@
         object-fit: cover;
     }
 }
+
+
+ion-fab {
+	position: fixed;
+	right: 20px;
+	bottom: 70px;
+	border-radius: 50%;
+	animation: ripple-effect 1s linear;
+	animation-iteration-count: 3;
+
+
+	ion-button {
+		--background: var(--brand-blue);
+	}
+}
+
+@keyframes ripple-effect {
+	0% {
+		box-shadow: 0 0 0 10px rgba(black, 0.5);
+	}
+	30% {
+		box-shadow: 0 0 0 20px rgba(black, 0.3);
+	}
+	60% {
+		box-shadow: 0 0 0 30px rgba(black, 0.1);
+	}
+	100% {
+		box-shadow: 0 0 0 50px rgba(black, 0);
+	}
+}

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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Location } from '@angular/common';
 import { MallService } from '../services/mall.service';
 import { IMall } from '../models/mall';
@@ -29,6 +29,7 @@ export class OutletDetailsPage implements OnInit {
 
     constructor(
         private route: ActivatedRoute,
+		private router: Router,
         private location: Location,
         private mallService: MallService,
         private cartService: CartItemService
@@ -181,4 +182,8 @@ export class OutletDetailsPage implements OnInit {
         }
     }
 
+	goToCart() {
+		this.router.navigate(['/cart']);
+	}
+
 }

src/index.d.ts

@@ -0,0 +1 @@
+declare module 'googlemaps';

src/index.html

@@ -25,6 +25,7 @@
 <body>
   <app-root></app-root>
   <noscript>Please enable JavaScript to continue using this application.</noscript>
+  <!-- <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDashQX2QI_kg6uco1WF4hnrLpxj0q3Oec"></script> -->
 </body>
 
 </html>