kj
/
mall-app
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Partial commit - bug fixes

master
kj1352 6 years ago
parent
859ca310f0
commit
c0bf2da873
18 changed files with 415 additions and 137 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +28
    -3
      package-lock.json
  2. +6
    -2
      package.json
  3. +1
    -0
      src/app/app-routing.module.ts
  4. +1
    -1
      src/app/app.component.html
  5. +4
    -0
      src/app/app.module.ts
  6. +12
    -5
      src/app/cart/cart.page.html
  7. +15
    -8
      src/app/cart/cart.page.scss
  8. +8
    -1
      src/app/cart/cart.page.ts
  9. +26
    -0
      src/app/near/near.module.ts
  10. +11
    -0
      src/app/near/near.page.html
  11. +55
    -0
      src/app/near/near.page.scss
  12. +27
    -0
      src/app/near/near.page.spec.ts
  13. +39
    -0
      src/app/near/near.page.ts
  14. +144
    -116
      src/app/outlet-details/outlet-details.page.html
  15. +30
    -0
      src/app/outlet-details/outlet-details.page.scss
  16. +6
    -1
      src/app/outlet-details/outlet-details.page.ts
  17. +1
    -0
      src/index.d.ts
  18. +1
    -0
      src/index.html

+ 28
- 3
package-lock.json View File

@@ -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",


+ 6
- 2
package.json View File

@@ -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"
]
}
}
}

+ 1
- 0
src/app/app-routing.module.ts View File

@@ -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({


+ 1
- 1
src/app/app.component.html View File

@@ -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>


+ 4
- 0
src/app/app.module.ts View File

@@ -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]


+ 12
- 5
src/app/cart/cart.page.html View File

@@ -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">


+ 15
- 8
src/app/cart/cart.page.scss View File

@@ -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;


+ 8
- 1
src/app/cart/cart.page.ts View File

@@ -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);
});
}



+ 26
- 0
src/app/near/near.module.ts View File

@@ -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 {}

+ 11
- 0
src/app/near/near.page.html View File

@@ -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>

+ 55
- 0
src/app/near/near.page.scss View File

@@ -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;
}

+ 27
- 0
src/app/near/near.page.spec.ts View File

@@ -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();
});
});

+ 39
- 0
src/app/near/near.page.ts View File

@@ -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();
}

}

+ 144
- 116
src/app/outlet-details/outlet-details.page.html View File

@@ -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>

+ 30
- 0
src/app/outlet-details/outlet-details.page.scss View File

@@ -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);
}
}

+ 6
- 1
src/app/outlet-details/outlet-details.page.ts View File

@@ -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']);
}

}

+ 1
- 0
src/index.d.ts View File

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

+ 1
- 0
src/index.html View File

@@ -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>

Write Preview
Loading…
Cancel
Save