Commit fcccf70a by Adarsh K

Merge branch 'adarsh' into 'master'

Adarsh See merge request !31
parents 36a03ba3 847ae234
...@@ -394,7 +394,8 @@ ...@@ -394,7 +394,8 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
...@@ -603,12 +604,14 @@ ...@@ -603,12 +604,14 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
...@@ -627,6 +630,7 @@ ...@@ -627,6 +630,7 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
...@@ -806,7 +810,8 @@ ...@@ -806,7 +810,8 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
...@@ -862,6 +867,7 @@ ...@@ -862,6 +867,7 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
...@@ -905,12 +911,14 @@ ...@@ -905,12 +911,14 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
} }
} }
}, },
...@@ -1691,6 +1699,11 @@ ...@@ -1691,6 +1699,11 @@
"@types/node": "*" "@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": { "@types/jasmine": {
"version": "3.3.16", "version": "3.3.16",
"resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-3.3.16.tgz", "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-3.3.16.tgz",
...@@ -6801,7 +6814,8 @@ ...@@ -6801,7 +6814,8 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
...@@ -6844,7 +6858,8 @@ ...@@ -6844,7 +6858,8 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
...@@ -6855,7 +6870,8 @@ ...@@ -6855,7 +6870,8 @@
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
...@@ -6972,7 +6988,8 @@ ...@@ -6972,7 +6988,8 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
...@@ -6984,6 +7001,7 @@ ...@@ -6984,6 +7001,7 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
...@@ -7013,6 +7031,7 @@ ...@@ -7013,6 +7031,7 @@
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
...@@ -7031,6 +7050,7 @@ ...@@ -7031,6 +7050,7 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
...@@ -7111,7 +7131,8 @@ ...@@ -7111,7 +7131,8 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
...@@ -7123,6 +7144,7 @@ ...@@ -7123,6 +7144,7 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
...@@ -7208,7 +7230,8 @@ ...@@ -7208,7 +7230,8 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
...@@ -7244,6 +7267,7 @@ ...@@ -7244,6 +7267,7 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
...@@ -7263,6 +7287,7 @@ ...@@ -7263,6 +7287,7 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
...@@ -7306,12 +7331,14 @@ ...@@ -7306,12 +7331,14 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
} }
} }
}, },
...@@ -12465,7 +12492,8 @@ ...@@ -12465,7 +12492,8 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
...@@ -12493,6 +12521,7 @@ ...@@ -12493,6 +12521,7 @@
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
...@@ -12507,7 +12536,8 @@ ...@@ -12507,7 +12536,8 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
...@@ -12518,7 +12548,8 @@ ...@@ -12518,7 +12548,8 @@
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
...@@ -12635,7 +12666,8 @@ ...@@ -12635,7 +12666,8 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
...@@ -12647,6 +12679,7 @@ ...@@ -12647,6 +12679,7 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
...@@ -12661,6 +12694,7 @@ ...@@ -12661,6 +12694,7 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
...@@ -12668,12 +12702,14 @@ ...@@ -12668,12 +12702,14 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
...@@ -12692,6 +12728,7 @@ ...@@ -12692,6 +12728,7 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
...@@ -12772,7 +12809,8 @@ ...@@ -12772,7 +12809,8 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
...@@ -12784,6 +12822,7 @@ ...@@ -12784,6 +12822,7 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
...@@ -12869,7 +12908,8 @@ ...@@ -12869,7 +12908,8 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
...@@ -12905,6 +12945,7 @@ ...@@ -12905,6 +12945,7 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
...@@ -12924,6 +12965,7 @@ ...@@ -12924,6 +12965,7 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
...@@ -12967,12 +13009,14 @@ ...@@ -12967,12 +13009,14 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
} }
} }
}, },
......
...@@ -31,6 +31,7 @@ ...@@ -31,6 +31,7 @@
"@ionic-native/status-bar": "^5.12.0", "@ionic-native/status-bar": "^5.12.0",
"@ionic/angular": "^4.7.1", "@ionic/angular": "^4.7.1",
"@ionic/storage": "^2.2.0", "@ionic/storage": "^2.2.0",
"@types/googlemaps": "^3.38.0",
"agm-direction": "^0.7.8", "agm-direction": "^0.7.8",
"cordova-android": "^8.0.0", "cordova-android": "^8.0.0",
"cordova-plugin-device": "^2.0.2", "cordova-plugin-device": "^2.0.2",
......
...@@ -49,6 +49,7 @@ export class AddaddresssPage implements OnInit { ...@@ -49,6 +49,7 @@ export class AddaddresssPage implements OnInit {
) { } ) { }
ngOnInit() { ngOnInit() {
} }
goToPage(path, data = null) { goToPage(path, data = null) {
......
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
<h6 class="textLeft">{{carts.prodName}}</h6> <h6 class="textLeft">{{carts.prodName}}</h6>
</ion-col> </ion-col>
<ion-col size="2" class="p0"> <ion-col size="2" class="p0">
<h6 class="textRight"><strong>1 X</strong></h6> <h6 class="textRight"><strong>{{carts.qty}} X</strong></h6>
</ion-col> </ion-col>
<ion-col size="4" class="p0"> <ion-col size="4" class="p0">
<h6 class="textRight"><strong>A$ {{carts.price}}</strong></h6> <h6 class="textRight"><strong>A$ {{carts.price}}</strong></h6>
...@@ -89,7 +89,7 @@ ...@@ -89,7 +89,7 @@
<ion-row> <ion-row>
<ion-col class="p0"> <ion-col class="p0">
<h6> <h6>
Shamjith KS<br> +00 0000 888 888<br> Carnival Infopark Infopark Kochi<br> 682030, Kerala, India {{custAddress.building}},<br/> {{custAddress.landmark}},<br/> {{custAddress.address}}
</h6> </h6>
</ion-col> </ion-col>
</ion-row> </ion-row>
...@@ -101,7 +101,13 @@ ...@@ -101,7 +101,13 @@
<div class="clear"></div> <div class="clear"></div>
</h5> </h5>
<div class="payment_method"> <div class="payment_method">
<input type="radio" id="test1" name="radio-group" checked (click)="getwaypaypal()"> <input type="radio" name="payments" id="cod" name="radio-group" checked="true">
<label for="paypal">
<p>COD</p>
</label>
</div>
<!-- <div class="payment_method">
<input type="radio" name="payments" id="paypal" name="radio-group" checked (click)="getwaypaypal()">
<label for="test1"> <label for="test1">
<p>PayPal</p> <p>PayPal</p>
</label> </label>
...@@ -110,7 +116,7 @@ ...@@ -110,7 +116,7 @@
<input class="card_no borderNone widthFull" placeholder="PayPal ID"> <input class="card_no borderNone widthFull" placeholder="PayPal ID">
</div> </div>
<div class="payment_method"> <div class="payment_method">
<input type="radio" id="test2" name="radio-group" (click)="getwayafterpay()"> <input type="radio" name="payments" id="afterpay" name="radio-group" (click)="getwayafterpay()">
<label for="test2"> <label for="test2">
<p>AfterPay</p> <p>AfterPay</p>
</label> </label>
...@@ -120,14 +126,14 @@ ...@@ -120,14 +126,14 @@
<input class="cv_number" placeholder="CVV"> <input class="cv_number" placeholder="CVV">
</div> </div>
<div class="payment_method"> <div class="payment_method">
<input type="radio" id="test3" name="radio-group" (click)="getwaypayk()"> <input type="radio" name="payments" id="payk" name="radio-group" (click)="getwaypayk()">
<label for="test3"> <label for="test3">
<p>PayK</p> <p>PayK</p>
</label> </label>
</div> </div>
<div class="card_div" [hidden]="gateway !=3"> <div class="card_div" [hidden]="gateway !=3">
<input class="card_no borderNone widthFull" placeholder="PafyK ID"> <input class="card_no borderNone widthFull" placeholder="PafyK ID">
</div> </div> -->
<div class="delivery_time"> <div class="delivery_time">
<ul> <ul>
<li> <li>
...@@ -144,13 +150,37 @@ ...@@ -144,13 +150,37 @@
<div class="coupon_code"> <div class="coupon_code">
<input class="" placeholder="COUPON CODE"><button class="add_btn">ADD</button> <input class="" placeholder="COUPON CODE"><button class="add_btn">ADD</button>
</div> </div>
<br/>
<h6>
<span class="floatLeft">PRODUCT COST</span>
<span class="floatRight" *ngIf="cartService.cartTotal">A$ {{cartService.cartTotal}}</span>
<div class="clear"></div>
</h6>
<h6>
<span class="floatLeft">DELIVERY CHARGE</span>
<span class="floatRight" *ngIf="cartService.cartTotal">A$ {{getDeliveryCharge(cartService.cartTotal)}}</span>
<div class="clear"></div>
</h6>
<h6>
<span class="floatLeft">GST/TAX</span>
<span class="floatRight" *ngIf="cartService.cartTotal">A$ {{getTax(cartService.cartTotal)}}</span>
<div class="clear"></div>
</h6>
<h6 *ngIf="discountApplied">
<span class="floatLeft">DISCOUNT</span>
<span class="floatRight">(-) A$ {{discount}}</span>
<div class="clear"></div>
</h6>
<hr>
<div class="total_div"> <div class="total_div">
<ion-row> <ion-row>
<ion-col> <ion-col>
<p class="textLeft">Total Price:</p> <p class="textLeft">Total Price:</p>
</ion-col> </ion-col>
<ion-col> <ion-col>
<p class="textRight" *ngIf="cartService.cartTotal">A$ {{cartService.cartTotal}}</p> <p class="textRight" *ngIf="cartService.cartTotal">A$ {{getTotal(cartService.cartTotal)}}</p>
</ion-col> </ion-col>
</ion-row> </ion-row>
</div> </div>
......
...@@ -6,6 +6,10 @@ import { CartsService } from './../../config/cart.service'; ...@@ -6,6 +6,10 @@ import { CartsService } from './../../config/cart.service';
import { OrdersService } from './../../config/order.service'; import { OrdersService } from './../../config/order.service';
import { ModalController } from '@ionic/angular'; import { ModalController } from '@ionic/angular';
import { DeliverypopPage } from '../deliverypop/deliverypop.page'; import { DeliverypopPage } from '../deliverypop/deliverypop.page';
import { ServiceService } from './../../config/service.service';
import { AddressService } from './../../config/address.service';
import { AddressList } from './../../config/services/address'
import { zip } from 'rxjs';
@Component({ @Component({
...@@ -20,11 +24,18 @@ export class CartPage implements OnInit { ...@@ -20,11 +24,18 @@ export class CartPage implements OnInit {
count: any; count: any;
gateway: any; gateway: any;
loader = false; loader = false;
custId: any;
custAddress: AddressList;
cartwizard = { cartwizard = {
initialSlide: 0, initialSlide: 0,
speed: 1000, speed: 1000,
allowTouchMove: false allowTouchMove: false
}; };
deliveryCharge: number;
taxAmount: number;
discountApplied: boolean;
discount: number;
totalAmt: number;
constructor( constructor(
private router: Router, private router: Router,
...@@ -32,16 +43,36 @@ export class CartPage implements OnInit { ...@@ -32,16 +43,36 @@ export class CartPage implements OnInit {
private location: Location, private location: Location,
public cartService: CartsService, public cartService: CartsService,
public orderService: OrdersService, public orderService: OrdersService,
public modalController: ModalController public modalController: ModalController,
public service: ServiceService,
public addressService: AddressService
) { ) {
this.currentIndex = 0; this.currentIndex = 0;
this.count = 1; this.count = 1;
this.gateway = 1; this.gateway = 1;
this.deliveryCharge = 0;
this.taxAmount = 0;
this.discountApplied = false;
this.discount = 0;
this.cartService.cartList(); this.cartService.cartList();
const users = this.service.get('user').then((data) => {
if (data) {
data = JSON.parse(data);
this.custId = data.uid;
this.addressService.addList(data.uid);
}
});
} }
ngOnInit() { ngOnInit() {
let address = this.addressService.addressList.find(x => x.defaultVal === 1);
if (!address) {
address = this.addressService.addressList[0];
}
this.custAddress = address;
console.log(address);
} }
getwaypaypal() { getwaypaypal() {
...@@ -52,6 +83,19 @@ export class CartPage implements OnInit { ...@@ -52,6 +83,19 @@ export class CartPage implements OnInit {
this.gateway = 2; this.gateway = 2;
} }
getDeliveryCharge(amount) {
if (amount >= 150) {
this.deliveryCharge = 0;
} else {
this.deliveryCharge = 10;
}
return this.deliveryCharge;
}
getTax(amount) {
return this.taxAmount = (amount * 10) / 100;
}
getwaypayk() { getwaypayk() {
this.gateway = 3; this.gateway = 3;
} }
...@@ -125,4 +169,10 @@ export class CartPage implements OnInit { ...@@ -125,4 +169,10 @@ export class CartPage implements OnInit {
}); });
} }
getTotal(total) {
const actualTotal = (this.deliveryCharge + this.taxAmount + total) - this.discount;
this.totalAmt = actualTotal;
return actualTotal;
}
} }
...@@ -9,6 +9,7 @@ import { HomePage } from './home.page'; ...@@ -9,6 +9,7 @@ import { HomePage } from './home.page';
import { AgmCoreModule } from '@agm/core'; import { AgmCoreModule } from '@agm/core';
import { AgmDirectionModule } from 'agm-direction'; import { AgmDirectionModule } from 'agm-direction';
import { from } from 'rxjs'; import { from } from 'rxjs';
......
...@@ -5,10 +5,12 @@ ...@@ -5,10 +5,12 @@
</ion-menu-toggle> </ion-menu-toggle>
<div class="nav_title floatLeft relative"> <div class="nav_title floatLeft relative">
<input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="clickSearch()"> <input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="clickSearch()" (input)="searchFun($event.target.value)" #searchText>
</div> </div>
<button class="nav_btn nav_search floatRight"> <button class="nav_btn nav_search floatRight" *ngIf="!searchShow">
</button>
<button class="nav_btn nav_exit floatRight" *ngIf="searchShow" (click)="searchClose()">
</button> </button>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
...@@ -21,7 +23,7 @@ ...@@ -21,7 +23,7 @@
<img src="../assets/Group 11_2.png"> <img src="../assets/Group 11_2.png">
</ion-col> </ion-col>
<ion-col class="textRight"> <ion-col class="textRight">
<p class="floatRight" (click)="istoggle()">Territory Queens</p> <p class="floatRight" (click)="istoggle()">{{address}}</p>
</ion-col> </ion-col>
</ion-row> </ion-row>
</div> </div>
...@@ -116,49 +118,25 @@ ...@@ -116,49 +118,25 @@
</div> </div>
<ion-content class="sort_wrappper"> <ion-content class="sort_wrappper">
<agm-map [zoom]="20" [latitude]="lat" [longitude]="lng" [disableDefaultUI]="false" [zoomControl]="false" [backgroundColor]="'rgba(29, 27, 130,0.2)'"> <agm-map [zoom]="20" [latitude]="lat" [longitude]="lng" [disableDefaultUI]="false" [zoomControl]="false" [backgroundColor]="'rgba(29, 27, 130,0.2)'">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map> </agm-map>
<div class="add_address_wrapper"> <div class="add_address_wrapper">
<h5> <h5>
<span class="floatLeft">NEW ADDRESS</span> <span class="floatLeft">NEW ADDRESS</span>
<span class="floatRight">ADD NEW</span> <span class="floatRight" (click)="istoggle(); goToPage('nearby')">ADD NEW</span>
<div class="clear"></div> <div class="clear"></div>
</h5> </h5>
<ul> <ul *ngIf="addressService.addressList && addressService.addressList.length > 0">
<li> <li *ngFor="let address of addressService.addressList; let i = index">
<div class="floatLeft"> <div class="floatLeft">{{address.default}}
<input class="styled-checkbox " id="styled-checkbox-1" type="radio" value="value1"> <input class="styled-checkbox" name="addressId" id="styled-checkbox-{{i}}" type="radio" (click)="setDefault(address.addressId)" [value]="address.addressId" #addressType [checked]="address.defaultVal == 1">
<label for="styled-checkbox-1"> <label for="styled-checkbox-{{i}}"> {{address.addressType}}
</label>
</div>
<div class="floatLeft">
<p>
Shamjith KS<br> Carnival Infopark, Infopark Kochi <br> 682030, Kerala, India
</p>
</div>
<div class="clear"></div>
</li>
<li>
<div class="floatLeft">
<input class="styled-checkbox " id="styled-checkbox-2" type="radio" value="value2">
<label for="styled-checkbox-2">
</label>
</div>
<div class="floatLeft">
<p>
Shamjith KS<br> Carnival Infopark, Infopark Kochi <br> 682030, Kerala, India
</p>
</div>
<div class="clear"></div>
</li>
<li>
<div class="floatLeft">
<input class="styled-checkbox " id="styled-checkbox-3" type="radio" value="value3">
<label for="styled-checkbox-3">
</label> </label>
</div> </div>
<div class="floatLeft"> <div class="floatLeft">
<p> <p>
Shamjith KS<br> Carnival Infopark, Infopark Kochi <br> 682030, Kerala, India {{address.building}}, {{address.landmark}}, {{address.address}}
</p> </p>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
...@@ -172,10 +150,7 @@ ...@@ -172,10 +150,7 @@
<div class="search_item_list" *ngIf="searchShow" [@slideInOut]> <div class="search_item_list" *ngIf="searchShow" [@slideInOut]>
<ul (click)="clickSearch()"> <ul *ngIf="searchService.searchList">
<li>Listing 1</li> <li *ngFor="let search of searchService.searchList" (click)="viewPage(search)">{{search.text}}</li>
<li>Listing 2</li>
<li>Listing 3</li>
<li>Listing 4</li>
</ul> </ul>
</div> </div>
\ No newline at end of file
...@@ -267,7 +267,8 @@ ...@@ -267,7 +267,8 @@
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
color: rgba(176, 174, 199, 1); color: rgba(176, 174, 199, 1);
padding-left: 5px; padding-top:5px;
padding-bottom: 5px;
} }
.styled-checkbox { .styled-checkbox {
position: absolute; // take it out of document flow position: absolute; // take it out of document flow
......
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common'; import { Location } from '@angular/common';
import { trigger, transition, animate, style } from '@angular/animations'; import { trigger, transition, animate, style } from '@angular/animations';
import { MapsAPILoader, MouseEvent } from '@agm/core';
import { Router, ActivatedRoute } from '@angular/router'; import { Router, ActivatedRoute } from '@angular/router';
import { MenuController } from '@ionic/angular'; import { MenuController } from '@ionic/angular';
import { CenterService } from './../../config/center.service'; import { CenterService } from './../../config/center.service';
import { ShoppersService } from './../../config/shopper.service'; import { ShoppersService } from './../../config/shopper.service';
import { CategoriesService } from './../../config/category.service'; import { CategoriesService } from './../../config/category.service';
import { ServiceService } from './../../config/service.service'; import { ServiceService } from './../../config/service.service';
import { AddressService } from './../../config/address.service';
import { SearchService } from './../../config/search.service';
import { ProductsService } from './../../config/products.service';
import { from } from 'rxjs'; import { from } from 'rxjs';
import { ModalController } from "@ionic/angular"; import { ModalController } from '@ionic/angular';
@Component({ @Component({
selector: "app-home", selector: 'app-home',
templateUrl: "./home.page.html", templateUrl: './home.page.html',
styleUrls: ["./home.page.scss"], styleUrls: ['./home.page.scss'],
animations: [ animations: [
trigger("slideInOut", [ trigger('slideInOut', [
transition(":enter", [ transition(':enter', [
style({ transform: "translateY(100%)" }), style({ transform: 'translateY(100%)' }),
animate("200ms ease-in", style({ transform: "translateY(0%)" })) animate('200ms ease-in', style({ transform: 'translateY(0%)' }))
]), ]),
transition(":leave", [ transition(':leave', [
animate("200ms ease-out", style({ transform: "translateY(100%)" })) animate('200ms ease-out', style({ transform: 'translateY(100%)' }))
]) ])
]) ])
] ]
}) })
export class HomePage implements OnInit { export class HomePage implements OnInit {
isShow = false; isShow = false;
searchShow = false; searchShow = false;
public lat = 51.678418; public lat = 51.678418;
public lng = 7.809007; public lng = 7.809007;
address: any;
custId: any;
private geoCoder;
slideOpts = { slideOpts = {
slidesPerView: 1.5 slidesPerView: 1.5
}; };
...@@ -44,25 +52,83 @@ export class HomePage implements OnInit { ...@@ -44,25 +52,83 @@ export class HomePage implements OnInit {
public centerService: CenterService, public centerService: CenterService,
public shopperService: ShoppersService, public shopperService: ShoppersService,
public categoriesService: CategoriesService, public categoriesService: CategoriesService,
public addressService: AddressService,
public service: ServiceService, public service: ServiceService,
public modalController: ModalController public modalController: ModalController,
) {} private mapsAPILoader: MapsAPILoader,
private searchService: SearchService,
private productsService: ProductsService
) {
}
ngOnInit() { ngOnInit() {
this.mapsAPILoader.load().then(() => {
this.setCurrentLocation();
this.geoCoder = new google.maps.Geocoder();
});
this.menuCtrl.enable(true); this.menuCtrl.enable(true);
const users = this.service.get('user').then((data) => {
if (data) {
data = JSON.parse(data);
this.custId = data.uid;
this.addressService.addList(data.uid);
}
});
}
private setCurrentLocation() {
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition(position => {
this.lat = position.coords.latitude;
this.lng = position.coords.longitude;
this.getAddress(this.lat, this.lng);
});
}
}
getAddress(latitude, longitude) {
this.geoCoder.geocode(
{ location: { lat: latitude, lng: longitude } },
(results, status) => {
console.log(results);
console.log(status);
if (status === 'OK') {
if (results[0]) {
const addressData = results[0].formatted_address.split(', ');
this.address = addressData[0] + ', ' + addressData[1];
console.log(this.address);
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
}
);
}
setDefault(addressId: any) {
this.addressService.setDefaultAddress(addressId, this.custId);
} }
clickSearch() { clickSearch() {
this.searchShow = !this.searchShow; this.searchShow = true;
this.searchService.searchList = [];
}
searchClose() {
this.searchShow = false;
} }
ionViewWillEnter() { ionViewWillEnter() {
this.menuCtrl.enable(true); this.menuCtrl.enable(true);
} }
goToPage(path, data = null) { goToPage(path, data = null) {
console.log(data); console.log(data);
this.service.set("params", data); this.service.set('params', data);
this.router.navigateByUrl(path, { queryParams: data }); this.router.navigateByUrl(path, { queryParams: data });
document.body.scrollTop = document.documentElement.scrollTop = 0; document.body.scrollTop = document.documentElement.scrollTop = 0;
} }
...@@ -74,5 +140,34 @@ export class HomePage implements OnInit { ...@@ -74,5 +140,34 @@ export class HomePage implements OnInit {
istoggle() { istoggle() {
this.isShow = !this.isShow; this.isShow = !this.isShow;
} }
viewPage(datas: any) {
console.log(datas);
let data;
let url;
if (datas.type === 'shopper') {
data = datas.data;
this.service.set('params', data);
url = 'productlist';
} else if (datas.type === 'category') {
data = datas.data;
this.service.set('params', data);
url = 'catstorelist';
} else {
data = datas.data;
data.size = this.service.splitSep(data.size);
data.tag = this.service.splitSep(data.tag);
data.color = this.service.splitSep(data.color),
url = 'productdetail';
this.productsService.setProd(data);
}
this.searchClose();
this.router.navigateByUrl(url, { queryParams: data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
searchFun(data: string) {
this.searchService.search(data);
}
} }
...@@ -10,15 +10,45 @@ ...@@ -10,15 +10,45 @@
<ion-content> <ion-content>
<div class="nearby_map"> <div class="nearby_map">
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="15" [backgroundColor]="'rgba(29, 27, 130,0.2)'"> <agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="8" [backgroundColor]="'rgba(29, 27, 130,0.2)'">
<agm-marker [latitude]="latitude" [longitude]="longitude" [markerDraggable]="true" (dragEnd)="markerDragEnd($event)"></agm-marker> <agm-marker [latitude]="latitude" [longitude]="longitude" [markerDraggable]="true" (dragEnd)="markerDragEnd($event)"></agm-marker>
</agm-map> </agm-map>
<form (ngSubmit)="onSubmit(addressForm.value); addressForm.reset()" #addressForm="ngForm" method="post" class="form-horizontal">
<div class="add_address_wrapper"> <div class="add_address_wrapper">
<h5>DELIVERY</h5> <h5>DELIVERY</h5>
<p>{{address}}</p> <p>{{address}}</p>
<input class="" placeholder="House No./ Building No"> <input [(ngModel)]="addressForm.building" name="building" #building="ngModel" name="building" required placeholder="House No./ Building No">
<input class="" placeholder="Landmark"> <div class="md-errors-spacer" [hidden]="building.valid || landmark.pristine" class="ion-padding-start">
<button class="add_btn">ADD</button> Building Name is required
</div> </div>
<input [(ngModel)]="addressForm.landmark" name="landmark" #landmark="ngModel" name="landmark" required placeholder="Landmark">
<div class="md-errors-spacer" [hidden]="landmark.valid || landmark.pristine" class="ion-padding-start">
Landmark is required
</div>
<ion-grid>
<ion-row>
<ion-col>
<h6>
<input class="styled-checkbox" id="styled-check-1" type="radio" value="Home" [(ngModel)]="addressForm.addressType" name="addressType" #addressType="ngModel" required>
<label for="styled-check-1"><span>Home</span></label></h6>
</ion-col>
<ion-col>
<h6>
<input class="styled-checkbox" id="styled-check-2" type="radio" value="Work" [(ngModel)]="addressForm.addressType" name="addressType" #addressType="ngModel" required>
<label for="styled-check-2"><span>Office</span></label></h6>
</ion-col>
<ion-col>
<h6>
<input class="styled-checkbox" id="styled-check-3" type="radio" value="Other" [(ngModel)]="addressForm.addressType" name="addressType" #addressType="ngModel" required>
<label for="styled-check-3"><span>Others</span></label></h6>
</ion-col>
</ion-row>
<div class="md-errors-spacer" [hidden]="addressType.valid || addressType.pristine" class="ion-padding-start">
Address Type is required
</div>
</ion-grid>
<button class="add_btn" type="submit" [disabled]="!addressForm.form.valid">ADD</button>
</div>
</form>
</div> </div>
</ion-content> </ion-content>
\ No newline at end of file
...@@ -63,4 +63,54 @@ ...@@ -63,4 +63,54 @@
color: #fff; color: #fff;
border-radius: 4px; border-radius: 4px;
} }
}
.styled-checkbox {
position: absolute; // take it out of document flow
opacity: 0; // hide it
&+label {
position: relative;
cursor: pointer;
padding: 0;
}
// Box.
&+label:before {
content: '';
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
width: 20px;
height: 20px;
border-radius: 10px;
background: white;
border: 1px solid rgba(215, 213, 228, 1);
}
// Box hover
// Box checked
&:checked+label:before {
background: #29285b;
}
// Disabled state label.
&:disabled+label {
color: #b8b8b8;
cursor: auto;
}
// Disabled box.
&:disabled+label:before {
box-shadow: none;
background: #ddd;
}
// Checkmark. Could be replaced with an image
&:checked+label:after {
content: '';
position: absolute;
left: 6px;
top: 11px;
background: white;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
transform: rotate(45deg);
}
} }
\ No newline at end of file
import {Component,OnInit,ViewChild,ElementRef,NgZone} from "@angular/core"; import {Component, OnInit, ViewChild, ElementRef, NgZone} from '@angular/core';
import { Location } from '@angular/common'; import { Location } from '@angular/common';
import { Router, ActivatedRoute } from '@angular/router'; import { Router, ActivatedRoute } from '@angular/router';
import { MapsAPILoader, MouseEvent } from "@agm/core"; import { MapsAPILoader, MouseEvent } from '@agm/core';
import { Address } from './../../config/services/address';
import { AddressService } from './../../config/address.service';
import { ServiceService } from './../../config/service.service';
import { NgForm } from '@angular/forms';
import * as firebase from 'firebase';
import { google } from '@agm/core/services/google-maps-types'; import { google } from '@agm/core/services/google-maps-types';
@Component({ @Component({
selector: "app-nearby", selector: 'app-nearby',
templateUrl: "./nearby.page.html", templateUrl: './nearby.page.html',
styleUrls: ["./nearby.page.scss"] styleUrls: ['./nearby.page.scss']
}) })
export class NearbyPage implements OnInit { export class NearbyPage implements OnInit {
latitude: number; latitude: number;
longitude: number; longitude: number;
zoom: number; zoom: number;
address: string; address: string;
private geoCoder; private geoCoder;
addressForm: NgForm;
addressData = new Address('', '', '', '', true, '', 0, '');
successState: boolean;
uid: string;
public searchElementRef: ElementRef; public searchElementRef: ElementRef;
constructor( constructor(
...@@ -23,11 +32,21 @@ export class NearbyPage implements OnInit { ...@@ -23,11 +32,21 @@ export class NearbyPage implements OnInit {
private route: ActivatedRoute, private route: ActivatedRoute,
private location: Location, private location: Location,
private mapsAPILoader: MapsAPILoader, private mapsAPILoader: MapsAPILoader,
private ngZone: NgZone private ngZone: NgZone,
) {} public addressService: AddressService,
public service: ServiceService
) {
this.successState = false;
const users = this.service.get('user').then((data) => {
if (data) {
data = JSON.parse(data);
this.uid = data.uid;
}
});
}
ngOnInit() { ngOnInit() {
//load Places Autocomplete // load Places Autocomplete
this.mapsAPILoader.load().then(() => { this.mapsAPILoader.load().then(() => {
this.setCurrentLocation(); this.setCurrentLocation();
this.geoCoder = new google.maps.Geocoder(); this.geoCoder = new google.maps.Geocoder();
...@@ -36,7 +55,7 @@ export class NearbyPage implements OnInit { ...@@ -36,7 +55,7 @@ export class NearbyPage implements OnInit {
// google maps zoom level // google maps zoom level
private setCurrentLocation() { private setCurrentLocation() {
if ("geolocation" in navigator) { if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition(position => { navigator.geolocation.getCurrentPosition(position => {
this.latitude = position.coords.latitude; this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude; this.longitude = position.coords.longitude;
...@@ -59,15 +78,16 @@ export class NearbyPage implements OnInit { ...@@ -59,15 +78,16 @@ export class NearbyPage implements OnInit {
(results, status) => { (results, status) => {
console.log(results); console.log(results);
console.log(status); console.log(status);
if (status === "OK") { if (status === 'OK') {
if (results[0]) { if (results[0]) {
this.zoom = 12; this.zoom = 12;
this.address = results[0].formatted_address; this.address = results[0].formatted_address;
console.log(this.address);
} else { } else {
window.alert("No results found"); window.alert('No results found');
} }
} else { } else {
window.alert("Geocoder failed due to: " + status); window.alert('Geocoder failed due to: ' + status);
} }
} }
); );
...@@ -81,9 +101,28 @@ export class NearbyPage implements OnInit { ...@@ -81,9 +101,28 @@ export class NearbyPage implements OnInit {
goBack() { goBack() {
window.history.back(); window.history.back();
} }
onSubmit(data: any) {
console.log(data);
const postData: Address = {
address: this.address,
addressType: data.addressType,
building: data.building,
landmark: data.landmark,
defaultVal: 0,
uid: this.uid,
latLng: new firebase.firestore.GeoPoint(this.latitude, this.longitude),
status: true
};
this.addressService.addressCreate(postData);
this.successState = true;
setTimeout(() => {
this.successState = false;
}, 3000);
}
} }
interface marker { interface Marker {
lat: number; lat: number;
lng: number; lng: number;
label?: string; label?: string;
......
...@@ -5,14 +5,14 @@ ...@@ -5,14 +5,14 @@
<div class="nav_title floatLeft"> <div class="nav_title floatLeft">
</div> </div>
<button class="nav_btn nav_cart floatRight" (click)="goToPage('cart')"> <button class="nav_btn nav_cart floatRight" (click)="goToPage('cart')">
<div class="not">1</div> <div class="not" *ngIf="cartService.carts">{{cartService.carts.length}}</div>
</button> </button>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<ion-content> <ion-content>
<div class="product_detail_wrapper" *ngIf="product"> <div class="product_detail_wrapper" *ngIf="product">
<div class="product_banner"> <div class="product_banner">
<div class="fav_icon"></div> <div [ngClass]="checkFavStatus(product.prodId)" (click)="changeFav(product.prodId)"></div>
<div class="featured_badge" *ngIf="product.featured">Featured</div> <div class="featured_badge" *ngIf="product.featured">Featured</div>
<img [src]="product.image" onerror="this.src='../assets/[email protected]'"> <img [src]="product.image" onerror="this.src='../assets/[email protected]'">
</div> </div>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<h3>{{product.prodName}}</h3> <h3>{{product.prodName}}</h3>
<p><strong><span><img src="../assets/Path61_2.png"></span>0</strong>&nbsp; {{product.category}}, {{product.subCate}} <p><strong><span><img src="../assets/Path61_2.png"></span>0</strong>&nbsp; {{product.category}}, {{product.subCate}}
<br/> <br/>
<span *ngFor="let tag of product.tag">#{{tag}}</span> <span *ngFor="let tag of product.tag">#{{tag}}&nbsp;</span>
</p> </p>
</ion-col> </ion-col>
<ion-col size="4"> <ion-col size="4">
...@@ -31,7 +31,25 @@ ...@@ -31,7 +31,25 @@
</ion-col> </ion-col>
</ion-row> </ion-row>
</div> </div>
<div class="product_div_content"> <div class="product_div_content">
<h5>Color</h5>
<div class="size_div">
<ul *ngIf="product.size">
<ion-slides pager="false" [options]="slideOpts">
<ion-slide *ngFor="let color of product.color; let i = index">
<li>
<button id="custom_check_button">
<label>
<input id="{{color}}" type="radio" name="color" value="{{color}}" (click)="cartService.choose_color(color)" [checked]="i==0">
<p>{{color}}</p>
</label>
</button>
</li>
</ion-slide>
</ion-slides>
</ul>
</div>
<h5>Size</h5> <h5>Size</h5>
<div class="size_div"> <div class="size_div">
<ul *ngIf="product.size"> <ul *ngIf="product.size">
...@@ -184,8 +202,7 @@ ...@@ -184,8 +202,7 @@
<li (click)="viewProd(similar)"> <li (click)="viewProd(similar)">
<div class="product_image"> <div class="product_image">
<img [src]="similar.image" onerror="this.src='../assets/[email protected]'"> <img [src]="similar.image" onerror="this.src='../assets/[email protected]'">
<div class="fav_icon"> <div [ngClass]="checkFavStatus(similar.prodId)" (click)="changeFav(similar.prodId)"></div>
</div>
</div> </div>
<h5>{{similar.prodName}}</h5> <h5>{{similar.prodName}}</h5>
<p>{{similar.price}}</p> <p>{{similar.price}}</p>
......
...@@ -14,6 +14,17 @@ ...@@ -14,6 +14,17 @@
top: 15px; top: 15px;
right: 15px; right: 15px;
} }
.fav_fill {
width: 30px;
height: 30px;
background-image: url("../../assets/fav_fill.png");
background-position: center;
background-repeat: no-repeat;
background-size: 24px;
position: absolute;
top: 15px;
right: 15px;
}
.featured_badge { .featured_badge {
position: absolute; position: absolute;
bottom: 20px; bottom: 20px;
...@@ -297,6 +308,18 @@ ...@@ -297,6 +308,18 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 24px; background-size: 24px;
} }
.fav_fill {
position: absolute;
top: 10px;
right: 10px;
font-size: 27px;
width: 30px;
height: 30px;
background-image: url("../../assets/fav_fill.png");
background-position: center;
background-repeat: no-repeat;
background-size: 24px;
}
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
......
...@@ -39,6 +39,8 @@ export class ProductdetailPage implements OnInit { ...@@ -39,6 +39,8 @@ export class ProductdetailPage implements OnInit {
this.service.get('params').then((val) => { this.service.get('params').then((val) => {
this.data = val; this.data = val;
}); });
this.cartService.cartList();
console.log(this.prodService.fav);
} }
ngOnInit() { ngOnInit() {
...@@ -103,6 +105,7 @@ export class ProductdetailPage implements OnInit { ...@@ -103,6 +105,7 @@ export class ProductdetailPage implements OnInit {
} else { } else {
// alert('Product added to cart'); // alert('Product added to cart');
} }
this.cartService.cartList();
}); });
} }
...@@ -110,4 +113,24 @@ export class ProductdetailPage implements OnInit { ...@@ -110,4 +113,24 @@ export class ProductdetailPage implements OnInit {
this.getProd(prod); this.getProd(prod);
} }
checkFavStatus(index) {
const state = this.prodService.fav.findIndex(x => x === index);
return state > -1 ? 'fav_fill' : 'fav_icon';
}
changeFav(index) {
const state = this.prodService.fav.findIndex(x => x === index);
console.log(state);
console.log(this.prodService.fav);
if (state > -1) {
this.prodService.fav.splice(state, 1);
this.prodService.changeFav(index, 'yes');
} else {
this.prodService.fav.push(index);
this.prodService.changeFav(index, 'no');
}
return;
console.log(this.prodService.fav);
}
} }
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<li *ngFor="let product of prodService.product; let i = index"> <li *ngFor="let product of prodService.product; let i = index">
<div class="product_image"> <div class="product_image">
<img [src]="product.image" onerror="this.src='../assets/[email protected]'" (click)="prodDetails(i)"> <img [src]="product.image" onerror="this.src='../assets/[email protected]'" (click)="prodDetails(i)">
<div class="fav_fill" (click)="changeFav(product.prodId)" *ngIf="checkFavStatus(product.prodId)"> <div [ngClass]="checkFavStatus(product.prodId)" (click)="changeFav(product.prodId)">
</div> </div>
<div class="featured_badge" *ngIf="product.featured">Featured</div> <div class="featured_badge" *ngIf="product.featured">Featured</div>
</div> </div>
...@@ -43,30 +43,30 @@ ...@@ -43,30 +43,30 @@
<div class="sort_inner"> <div class="sort_inner">
<h4>Sort By</h4> <h4>Sort By</h4>
<ul> <ul>
<li> <!-- <li>
<input class="styled-checkbox" id="styled-checkbox-1" type="radio" value="value1"> <input class="styled-checkbox" id="styled-checkbox-1" type="radio" value="popular" name="sort" (click)="setValue($event.target.value)">
<label for="styled-checkbox-1">Popularity</label> <label for="styled-checkbox-1">Popularity</label>
</li> </li> -->
<li> <!-- <li>
<input class="styled-checkbox" id="styled-checkbox-2" type="radio" value="value2"> <input class="styled-checkbox" id="styled-checkbox-2" type="radio" value="relevance" name="sort" (click)="setValue($event.target.value)">
<label for="styled-checkbox-2">Relevence</label> <label for="styled-checkbox-2">Relevence</label>
</li> </li> -->
<li> <li>
<input class="styled-checkbox" id="styled-checkbox-3" type="radio" value="value3"> <input class="styled-checkbox" id="styled-checkbox-3" type="radio" value="low" name="sort" (click)="setValue($event.target.value)">
<label for="styled-checkbox-3">Price Low - High</label> <label for="styled-checkbox-3">Price Low - High</label>
</li> </li>
<li> <li>
<input class="styled-checkbox" id="styled-checkbox-4" type="radio" value="value4"> <input class="styled-checkbox" id="styled-checkbox-4" type="radio" value="high" name="sort" (click)="setValue($event.target.value)">
<label for="styled-checkbox-4">Price High - Low</label> <label for="styled-checkbox-4">Price High - Low</label>
</li> </li>
<li> <!-- <li>
<input class="styled-checkbox" id="styled-checkbox-5" type="radio" value="value5"> <input class="styled-checkbox" id="styled-checkbox-5" type="radio" value="rate" name="sort" (click)="setValue($event.target.value)">
<label for="styled-checkbox-5">Rating</label> <label for="styled-checkbox-5">Rating</label>
</li> </li> -->
</ul> </ul>
<div class="sort_footer"> <div class="sort_footer">
<button class="cancel floatLeft" (click)="istoggle()">CANCEL</button> <button class="cancel floatLeft" (click)="istoggle()">CANCEL</button>
<button class="submit floatRight" (click)="istoggle()">SUBMIT</button> <button class="submit floatRight" (click)="istoggle(); submit()">SUBMIT</button>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
</div> </div>
......
...@@ -26,6 +26,7 @@ export class ProductlistPage implements OnInit { ...@@ -26,6 +26,7 @@ export class ProductlistPage implements OnInit {
onGrid = false; onGrid = false;
isShow = false; isShow = false;
data: any; data: any;
sortValue: string;
constructor( constructor(
private router: Router, private router: Router,
...@@ -34,7 +35,6 @@ export class ProductlistPage implements OnInit { ...@@ -34,7 +35,6 @@ export class ProductlistPage implements OnInit {
public prodService: ProductsService, public prodService: ProductsService,
public service: ServiceService public service: ServiceService
) { ) {
this.service.state = false;
this.service.get('params').then((val) => { this.service.get('params').then((val) => {
this.data = val; this.data = val;
console.log(this.data); console.log(this.data);
...@@ -70,6 +70,8 @@ export class ProductlistPage implements OnInit { ...@@ -70,6 +70,8 @@ export class ProductlistPage implements OnInit {
changeFav(index) { changeFav(index) {
const state = this.prodService.fav.findIndex(x => x === index); const state = this.prodService.fav.findIndex(x => x === index);
console.log(state);
console.log(this.prodService.fav);
if (state > -1) { if (state > -1) {
this.prodService.fav.splice(state, 1); this.prodService.fav.splice(state, 1);
this.prodService.changeFav(index, 'yes'); this.prodService.changeFav(index, 'yes');
...@@ -77,12 +79,22 @@ export class ProductlistPage implements OnInit { ...@@ -77,12 +79,22 @@ export class ProductlistPage implements OnInit {
this.prodService.fav.push(index); this.prodService.fav.push(index);
this.prodService.changeFav(index, 'no'); this.prodService.changeFav(index, 'no');
} }
return;
console.log(this.prodService.fav); console.log(this.prodService.fav);
} }
setValue(value) {
this.sortValue = value;
console.log(this.sortValue);
}
submit() {
console.log(this.sortValue);
this.prodService.filterSearch(this.sortValue);
}
checkFavStatus(index) { checkFavStatus(index) {
const state = this.prodService.fav.findIndex(x => x === index); const state = this.prodService.fav.findIndex(x => x === index);
console.log(state); return state > -1 ? 'fav_fill' : 'fav_icon';
return state > -1 ? true : true;
} }
} }
import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { AddressList, Address } from './services/address';
import { database } from 'firebase';
import { take } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class AddressService {
addressList: AddressList[] = [];
constructor(
public afs: AngularFirestore
) {
}
public async addList(userId: string) {
const This = this;
const state = true;
const orderRef: AngularFirestoreCollection<any> = this.afs.collection('address', ref => ref.where('status', '==', state)
.where('uid', '==', userId));
orderRef.valueChanges().pipe(
take(1) // Here you can limit to only emit once, using the take operator
).subscribe((value) => {
this.addressList = [];
const res = value;
if (res.length > 0) {
res.forEach((item) => {
console.log(item);
const address: AddressList = {
address: item.address,
addressType: item.addressType,
latLng: item.latLng,
defaultVal: item.defaultVal,
building: item. building,
landmark: item.landmark,
addressId: item.addressId
};
this.addressList.push(address);
});
console.log(this.addressList);
} else {
// alert('No Orders Found');
}
});
}
addressCreate(data: Address) {
this.afs.collection('address').add({}).then((docRef) => {
data.addressId = docRef.id;
this.afs.collection('address').doc(data.addressId).set(data).then(() => {
console.log('Address created Successfully');
});
});
}
setDefaultAddress(addId: string, userId: string) {
this.afs.collection('address', ref => ref.where('uid', '==', userId)).get().forEach((item) => {
return item.docs.map(m => {
return this.afs.doc(`address/${m.id}`).update({defaultVal: 0});
});
});
this.afs.collection('address').doc(addId).update({defaultVal: 1}).then(() => {
console.log('Address updated Successfully');
});
}
}
...@@ -8,6 +8,7 @@ import * as firebase from 'firebase'; ...@@ -8,6 +8,7 @@ import * as firebase from 'firebase';
import { take } from 'rxjs/operators'; import { take } from 'rxjs/operators';
import { User } from './services/user'; import { User } from './services/user';
import { from } from 'rxjs'; import { from } from 'rxjs';
import undefined = require('firebase/empty-import');
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
...@@ -27,8 +28,8 @@ export class CartsService { ...@@ -27,8 +28,8 @@ export class CartsService {
public router: Router, public router: Router,
public service: ServiceService public service: ServiceService
) { ) {
this.size = 'Small';
this.custId = ''; this.custId = '';
this.carts = [];
const users = this.service.get('user').then((data) => { const users = this.service.get('user').then((data) => {
if (data) { if (data) {
data = JSON.parse(data); data = JSON.parse(data);
...@@ -44,18 +45,20 @@ export class CartsService { ...@@ -44,18 +45,20 @@ export class CartsService {
this.prodId = product.prodId; this.prodId = product.prodId;
const prodRef = firebase.firestore().collection('products').doc(this.prodId); const prodRef = firebase.firestore().collection('products').doc(this.prodId);
this.size = this.size === undefined ? product.size[0] : this.size;
this.color = this.color === undefined ? product.color[0] : this.color;
const cartRef: AngularFirestoreCollection<any> = this.afs.collection('carts', ref => ref.where('size', '==', this.size) const cartRef: AngularFirestoreCollection<any> = this.afs.collection('carts', ref => ref.where('size', '==', this.size)
.where('color', '==', Object.keys(product.color)[0]) .where('color', '==', this.color)
.where('custId', '==', this.custId) .where('custId', '==', this.custId)
.where('product', '==', prodRef) .where('product', '==', prodRef)
); );
;
cartRef.valueChanges().pipe(take(1)).subscribe((value) => { cartRef.valueChanges().pipe(take(1)).subscribe((value) => {
console.log(value); console.log(value);
if (value.length === 0) { if (value.length === 0) {
product.image = product.image === undefined ? '../assets/[email protected]' : product.image; product.image = product.image === undefined ? '../assets/[email protected]' : product.image;
const cart: Cart = { const cart: Cart = {
color: Object.keys(product.color)[0], color: this.color,
custId: this.custId, custId: this.custId,
shopperId: product.shopperId, shopperId: product.shopperId,
product: firebase.firestore().doc(`products/${this.prodId}`), product: firebase.firestore().doc(`products/${this.prodId}`),
...@@ -87,7 +90,6 @@ export class CartsService { ...@@ -87,7 +90,6 @@ export class CartsService {
console.log('Booking Successfully'); console.log('Booking Successfully');
document.body.scrollTop = document.documentElement.scrollTop = 0; document.body.scrollTop = document.documentElement.scrollTop = 0;
}); });
} }
}); });
} }
...@@ -137,6 +139,10 @@ export class CartsService { ...@@ -137,6 +139,10 @@ export class CartsService {
this.size = size; this.size = size;
} }
choose_color(color: string) {
this.color = color;
}
removeCount(index) { removeCount(index) {
// tslint:disable-next-line:radix // tslint:disable-next-line:radix
const qty = this.carts[index].qty > 1 ? this.carts[index].qty - 1 : this.carts[index].qty; const qty = this.carts[index].qty > 1 ? this.carts[index].qty - 1 : this.carts[index].qty;
......
...@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core'; ...@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreDocument, AngularFirestoreCollection } from '@angular/fire/firestore'; import { AngularFirestore, AngularFirestoreDocument, AngularFirestoreCollection } from '@angular/fire/firestore';
import { Products } from './services/product'; import { Products } from './services/product';
import { ServiceService } from './../config/service.service'; import { ServiceService } from './../config/service.service';
import { take } from 'rxjs/operators';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
...@@ -16,6 +17,8 @@ export class ProductsService { ...@@ -16,6 +17,8 @@ export class ProductsService {
public afs: AngularFirestore, public afs: AngularFirestore,
public service: ServiceService public service: ServiceService
) { ) {
this.product = [];
this.fav = [];
this.service.get('user').then(data => { this.service.get('user').then(data => {
this.user = JSON.parse(data); this.user = JSON.parse(data);
this.getFavlist(this.user.uid); this.getFavlist(this.user.uid);
...@@ -43,6 +46,68 @@ export class ProductsService { ...@@ -43,6 +46,68 @@ export class ProductsService {
brand: item.brand, brand: item.brand,
category: item.category, category: item.category,
shopperId: item.shopperId, shopperId: item.shopperId,
color: this.service.splitSep(item.color),
discount: item.discount,
featured: item.featured,
image: item.image,
price: item.price,
qty: item.qty,
shopper: item.shopper,
skuCode: item.skuCode,
status: item.status,
size: this.service.splitSep(item.size),
subCate: item.subCate,
tag: this.service.splitSep(item.tag)
};
this.product.push(prod);
});
console.log(this.product);
} else {
// alert('No Products Found');
}
});
}
public async filterSearch(sortValue: string) {
const This = this;
const state = true;
console.log(sortValue);
let field, order;
if (sortValue === 'low') {
field = 'price';
order = 'asc';
}
if (sortValue === 'high') {
field = 'price';
order = 'desc';
}
if (sortValue === 'rate') {
// field = 'price';
// order = 'desc';
}
// tslint:disable-next-line:max-line-length
const prodRef: AngularFirestoreCollection<any> = this.afs.collection(`products`, ref => ref.where('status', '==', state).orderBy(field, order));
prodRef.valueChanges().subscribe((value) => {
this.product = [];
const res = value;
if (res.length > 0) {
res.forEach((item) => {
console.log(item.size);
const prod: Products = {
prodId: item.prodId,
prodName: item.prodName,
prodCode: item.prodCode,
prodDesc: item.prodDesc,
prodStatus: item.prodStatus,
brand: item.brand,
category: item.category,
shopperId: item.shopperId,
color: item.color, color: item.color,
discount: item.discount, discount: item.discount,
featured: item.featured, featured: item.featured,
...@@ -66,6 +131,8 @@ export class ProductsService { ...@@ -66,6 +131,8 @@ export class ProductsService {
} }
similarProd(shopperId, category, subCate, prodId) { similarProd(shopperId, category, subCate, prodId) {
const This = this; const This = this;
const state = true; const state = true;
...@@ -117,24 +184,49 @@ export class ProductsService { ...@@ -117,24 +184,49 @@ export class ProductsService {
public async getFavlist(userId: string) { public async getFavlist(userId: string) {
const favRef: AngularFirestoreDocument<any> = this.afs.collection(`favourite`).doc(userId); const favRef: AngularFirestoreDocument<any> = this.afs.collection(`favourite`).doc(userId);
favRef.valueChanges().subscribe((value) => { favRef.valueChanges().pipe(
take(1) // Here you can limit to only emit once, using the take operator
).subscribe((value) => {
if (value !== undefined) {
if (Object.keys(value).length > 0) { if (Object.keys(value).length > 0) {
this.fav = this.service.splitSep(value); this.fav = this.service.splitSep(value);
console.log(this.fav); console.log(this.fav);
} }
console.log(value); console.log(value);
}
}); });
} }
public async changeFav(index, type) { public async changeFav(index, type) {
console.log(index, type); console.log(index, type, this.user.uid);
if (type === 'yes') { if (type === 'no') {
this.afs.collection('favourite').doc(this.user.uid).update({ this.afs.collection('favourite').doc(this.user.uid).valueChanges().pipe(
take(1) // Here you can limit to only emit once, using the take operator
).subscribe((value) => {
if (value === undefined) {
this.afs.collection('favourite').doc(this.user.uid).set({
[index]: true [index]: true
}); });
} else { } else {
this.afs.collection(`favourite`).doc(this.user.uid).update({ console.log(value);
[index]: null value[index] = true;
console.log(value);
this.afs.collection('favourite').doc(this.user.uid).set(value);
}
});
} else {
this.afs.collection('favourite').doc(this.user.uid).valueChanges().pipe(
take(1) // Here you can limit to only emit once, using the take operator
).subscribe((value) => {
console.log(value);
if (value !== undefined) {
value[index] = undefined;
Object.keys(value).forEach(key => value[key] === undefined ? delete value[key] : '');
console.log(value);
this.afs.collection('favourite').doc(this.user.uid).set(value);
} else {
console.log(value);
}
}); });
} }
} }
......
import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { Search } from './services/search';
import { database } from 'firebase';
import { take } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class SearchService {
searchList: Search[] = [];
constructor(
public afs: AngularFirestore
) {
}
public async search(inputText: string) {
if (inputText === '') {
this.searchList = [];
return;
}
const This = this;
const state = true;
this.searchList = [];
// tslint:disable-next-line:max-line-length
const orderRef: AngularFirestoreCollection<any> = this.afs.collection('shoppers', ref => ref.where('status', '==', state).orderBy('name').startAt(inputText).endAt(inputText + '\uf8ff').limit(5));
orderRef.valueChanges().subscribe((value) => {
const res = value;
if (res.length > 0) {
res.forEach((item) => {
console.log(item);
const shopper: Search = {
text: item.name,
data: item,
type: 'shopper'
};
this.searchList.push(shopper);
});
}
});
// tslint:disable-next-line:max-line-length
const prodRef: AngularFirestoreCollection<any> = this.afs.collection('products', ref => ref.where('status', '==', state).orderBy('prodName').startAt(inputText).endAt(inputText + '\uf8ff').limit(5));
prodRef.valueChanges().subscribe((values) => {
const result = values;
if (result.length > 0) {
result.forEach((item) => {
console.log(item);
const prod: Search = {
text: item.prodName,
data: item,
type: 'product'
};
this.searchList.push(prod);
});
console.log(this.searchList);
}
});
// tslint:disable-next-line:max-line-length
const feaRef: AngularFirestoreCollection<any> = this.afs.collection('category', ref => ref.where('status', '==', state).orderBy('catName').startAt(inputText).endAt(inputText + '\uf8ff').limit(5));
feaRef.valueChanges().subscribe((values) => {
const result = values;
if (result.length > 0) {
result.forEach((item) => {
console.log(item);
const prod: Search = {
text: item.catName,
data: item,
type: 'category'
};
this.searchList.push(prod);
});
console.log(this.searchList);
}
});
}
}
export class Address {
constructor(
public address: string,
public building: string,
public addressType: string,
public landmark: string,
public status: boolean,
public uid: string,
public defaultVal: number,
public latLng: any,
public addressId?: string,
) {
}
}
export interface AddressList {
addressId: string;
address: string;
addressType: string;
defaultVal: number;
building: string;
latLng: any;
landmark: string;
}
export interface Search {
type: string;
data: any;
text: any;
}
...@@ -505,6 +505,14 @@ app-deliverypop { ...@@ -505,6 +505,14 @@ app-deliverypop {
} }
} }
.nav_exit {
background-image: url("./assets/Group17_2.png");
img {
width: 25px;
display: none;
}
}
.nav_cart { .nav_cart {
background-image: url("./assets/cart_icon.png"); background-image: url("./assets/cart_icon.png");
img { img {
......
...@@ -2,7 +2,9 @@ ...@@ -2,7 +2,9 @@
"extends": "./tsconfig.json", "extends": "./tsconfig.json",
"compilerOptions": { "compilerOptions": {
"outDir": "./out-tsc/app", "outDir": "./out-tsc/app",
"types": [] "types": [
"googlemaps"
]
}, },
"include": [ "include": [
"src/**/*.ts" "src/**/*.ts"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment