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

Cart page completed

master
kj1352 6 years ago
parent
4eeb9a3887
commit
9c44d9a319
10 changed files with 163 additions and 33 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +21
    -3
      package-lock.json
  2. +4
    -1
      package.json
  3. +2
    -0
      src/app/app.module.ts
  4. +16
    -14
      src/app/cart/cart.page.html
  5. +11
    -2
      src/app/cart/cart.page.scss
  6. +84
    -2
      src/app/cart/cart.page.ts
  7. +2
    -2
      src/app/outlet-details/outlet-details.page.html
  8. +8
    -5
      src/app/outlet-details/outlet-details.page.ts
  9. +12
    -2
      src/app/services/cart-item.service.ts
  10. +3
    -2
      src/global.scss

+ 21
- 3
package-lock.json View File

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


+ 4
- 1
package.json View File

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


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

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


+ 16
- 14
src/app/cart/cart.page.html View File

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


+ 11
- 2
src/app/cart/cart.page.scss View File

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


+ 84
- 2
src/app/cart/cart.page.ts View File

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

}

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

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



+ 8
- 5
src/app/outlet-details/outlet-details.page.ts View File

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


+ 12
- 2
src/app/services/cart-item.service.ts View File

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

}

+ 3
- 2
src/global.scss View File

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


Write Preview
Loading…
Cancel
Save