Skip to content

G
getme
Commit 84688180 by Adarsh K
Options

Merge branch 'adarsh' into 'master'

Adarsh See merge request !50
parents 7219db02 b25de556
Showing with 1925 additions and 1449 deletions
src/app/app.component.html
...@@ -6,7 +6,10 @@ ...@@ -6,7 +6,10 @@
<ion-menu-toggle *ngIf="userData"> <ion-menu-toggle *ngIf="userData">
<div class="top_banner"> <div class="top_banner">
<div class="top_image"> <div class="top_image">
<img [src]="userData.profilePhoto" /> <img
[src]="userData.profilePhoto"
onerror="this.src='./../assets/asset_avatar.png'"
/>
</div> </div>
<div class="top_detail"> <div class="top_detail">
<h4>{{ userData.name }}</h4> <h4>{{ userData.name }}</h4>
......
src/app/app.component.ts
...@@ -38,6 +38,7 @@ export class AppComponent { ...@@ -38,6 +38,7 @@ export class AppComponent {
menuw: number; menuw: number;
userData: any; userData: any;
tabData = true;
constructor( constructor(
private platform: Platform, private platform: Platform,
...@@ -52,7 +53,9 @@ export class AppComponent { ...@@ -52,7 +53,9 @@ export class AppComponent {
public subjectService: SubjectService, public subjectService: SubjectService,
private route: ActivatedRoute private route: ActivatedRoute
) { ) {
console.log(this.router.url);
this.state = true; this.state = true;
this.initializeApp(); this.initializeApp();
this.subjectService.getLoginData().subscribe(loginData => { this.subjectService.getLoginData().subscribe(loginData => {
this.state = loginData; this.state = loginData;
...@@ -67,13 +70,20 @@ export class AppComponent { ...@@ -67,13 +70,20 @@ export class AppComponent {
console.log(userData); console.log(userData);
} }
}); });
this.subjectService.getTabData().subscribe(tabData => {
console.log(tabData);
if (tabData !== null) {
this.tabData = tabData;
console.log(this.tabData);
}
});
} }
initializeApp() { initializeApp() {
this.platform.ready().then(() => { this.platform.ready().then(() => {
this.statusBar.styleDefault(); this.statusBar.styleDefault();
this.statusBar.overlaysWebView(false); this.statusBar.overlaysWebView(false);
this.statusBar.show();
this.statusBar.backgroundColorByHexString('#29285b'); this.statusBar.backgroundColorByHexString('#29285b');
}); });
} }
...@@ -88,16 +98,22 @@ export class AppComponent { ...@@ -88,16 +98,22 @@ export class AppComponent {
fetchCase() { fetchCase() {
const restrictedUrl = [ const restrictedUrl = [
'',
'productdetail', 'productdetail',
'cart', 'cart',
'nearby', 'nearby',
'verification', 'verification',
'orderplaced' 'orderplaced',
'landing',
'login',
'signup',
'address'
]; ];
const currentUrl = this.router.url.split('/'); const currentUrl = this.router.url.split('/');
const index = restrictedUrl.findIndex(x => x === currentUrl[1]); const index = restrictedUrl.findIndex(x => x === currentUrl[1]);
// console.log(currentUrl[1], index, this.state); // console.log(currentUrl[1], index, this.state);
if (index > -1 || this.state === true) { console.log(this.tabData);
if (index > -1 || this.tabData === false) {
return true; return true;
} else { } else {
return false; return false;
......
src/app/cart/cart.page.html
<ion-content> <ion-content>
<div class="cart_wrapper"> <div class="cart_wrapper">
<div class="cart_head"> <div class="cart_head">
<div class="nav_header"> <div class="nav_header">
<button class="nav_btn nav_back_white floatLeft" (click)="goBack()"> <button class="nav_btn nav_back_white floatLeft" (click)="goBack()">
<img src="../assets/arrow_white.png"> <img src="../assets/arrow_white.png" />
</button> </button>
<div class="nav_title floatLeft"> <div class="nav_title floatLeft">
<h4>CART</h4> <h4>CART</h4>
</div> </div>
<button class="nav_btn floatRight"> <button class="nav_btn floatRight"></button>
<div class="clear"></div>
</button> </div>
<div class="clear"></div> <div class="cart_menu_header">
</div> <ul>
<div class="cart_menu_header"> <li class="textCenter active" [class.active]="currentIndex == 0">
<ul> CART
<li class="textCenter active" [class.active]="currentIndex == 0">CART</li> </li>
<li class="textCenter"> <li class="textCenter">
<hr> <hr />
</li> </li>
<li class="textCenter" [class.active]="currentIndex == 1">CHECKOUT</li> <li class="textCenter" [class.active]="currentIndex == 1">
<li class="textCenter"> CHECKOUT
<hr> </li>
</li> <li class="textCenter">
<li class="textCenter" [class.active]="currentIndex == 2">FINISH</li> <hr />
</ul> </li>
<li class="textCenter" [class.active]="currentIndex == 2">FINISH</li>
</ul>
</div>
<div class="cart_content">
<ion-slides
pager="false"
[options]="cartwizard"
(ionSlideDidChange)="slideChanged()"
>
<ion-slide>
<div class="cart_list" *ngIf="cartService.carts">
<ul *ngIf="cartService.carts.length > 0">
<li *ngFor="let carts of cartService.carts; let i= index">
<div class="close" (click)="cartService.removeItem(i)"></div>
<div class="cart_image">
<img [src]="carts.image" onerror="this.src=''" />
</div>
<div class="cart_detail">
<h4>{{carts.prodName}}</h4>
<h4>{{carts.size}}, {{carts.color}}</h4>
<h5>A$ {{carts.price}}</h5>
</div>
<div class="cart_count">
<div class="add" (click)="cartService.addCount(i)">+</div>
<div class="count">{{carts.qty}}</div>
<div class="remove" (click)="cartService.removeCount(i)">
-
</div>
</div>
<div class="clear"></div>
</li>
</ul>
<div class="total_div" *ngIf="cartService.cartTotal">
<ion-row>
<ion-col>
<p class="textLeft">Total Price:</p>
</ion-col>
<ion-col>
<p class="textRight">A$ {{cartService.cartTotal}}</p>
</ion-col>
</ion-row>
</div>
<div
class="no-items-wrapper"
*ngIf="cartService.carts.length == 0"
>
<img src="../../assets/noitem.png" />
<h1>There is no products added</h1>
<button (click)="goToPage('home')">Shop Now</button>
</div>
</div> </div>
<div class="cart_content"> </ion-slide>
<div class="no-items-wrapper"> <ion-slide>
<img src="../../assets/noitem.png"> <div class="checkout_list">
<h1>There is no products added</h1> <h5>
<button>Shop Now</button> <span class="floatLeft">ITEMS</span>
</div> <span class="floatRight" *ngIf="cartService.cartTotal"
<ion-slides pager="false" [options]="cartwizard" (ionSlideDidChange)="slideChanged()"> >A$ {{cartService.cartTotal}}</span
<ion-slide> >
<div class="cart_list" *ngIf="cartService.carts"> <div class="clear"></div>
<ul *ngIf="cartService.carts.length > 0"> </h5>
<li *ngFor="let carts of cartService.carts; let i= index"> <ion-grid
<div class="close" (click)="cartService.removeItem(i)"></div> class="p0"
<div class="cart_image"><img [src]="carts.image" onerror="this.src=''" /></div> *ngIf="cartService.carts && cartService.carts.length > 0"
<div class="cart_detail"> >
<h4>{{carts.prodName}}</h4> <ion-row *ngFor="let carts of cartService.carts">
<h4>{{carts.size}}, {{carts.color}}</h4> <ion-col size="6" class="p0">
<h5>A$ {{carts.price}}</h5> <h6 class="textLeft">{{carts.prodName}}</h6>
</div> </ion-col>
<div class="cart_count"> <ion-col size="2" class="p0">
<div class="add" (click)="cartService.addCount(i)">+</div> <h6 class="textRight"><strong>{{carts.qty}} X</strong></h6>
<div class="count">{{carts.qty}}</div> </ion-col>
<div class="remove" (click)="cartService.removeCount(i)">-</div> <ion-col size="4" class="p0">
</div> <h6 class="textRight">
<div class="clear"></div> <strong>A$ {{carts.price}}</strong>
</li> </h6>
</ul> </ion-col>
<div class="total_div" *ngIf="cartService.cartTotal"> </ion-row>
<ion-row> </ion-grid>
<ion-col> <hr />
<p class="textLeft">Total Price:</p> <h5>
</ion-col> <span class="floatLeft">DELIVERY</span>
<ion-col> <span class="floatRight" (click)="istoggle()">EDIT</span>
<p class="textRight">A$ {{cartService.cartTotal}}</p> <div class="clear"></div>
</ion-col> </h5>
</ion-row> <ion-grid class="p0" *ngIf="custAddress">
</div> <ion-row>
</div> <ion-col class="p0">
</ion-slide> <h6>
<ion-slide> {{custAddress.building}},<br />
<div class="checkout_list"> {{custAddress.landmark}},<br />
<h5> {{custAddress.address}}
<span class="floatLeft">ITEMS</span> </h6>
<span class="floatRight" *ngIf="cartService.cartTotal">A$ </ion-col>
{{cartService.cartTotal}}</span> </ion-row>
<div class="clear"></div> </ion-grid>
</h5> <hr />
<ion-grid class="p0" *ngIf="cartService.carts && cartService.carts.length > 0"> <h5>
<ion-row *ngFor="let carts of cartService.carts"> <span class="floatLeft">PAYMENT</span>
<ion-col size="6" class="p0"> <span class="floatRight">CHANGE</span>
<h6 class="textLeft">{{carts.prodName}}</h6> <div class="clear"></div>
</ion-col> </h5>
<ion-col size="2" class="p0"> <div class="payment_method">
<h6 class="textRight"><strong>{{carts.qty}} X</strong></h6> <input
</ion-col> type="radio"
<ion-col size="4" class="p0"> name="payments"
<h6 class="textRight"><strong>A$ {{carts.price}}</strong></h6> id="cod"
</ion-col> name="radio-group"
</ion-row> checked="true"
</ion-grid> />
<hr> <label for="paypal">
<h5> <p>COD</p>
<span class="floatLeft">DELIVERY</span> </label>
<span class="floatRight" (click)="istoggle()">EDIT</span> </div>
<div class="clear"></div> <!-- <div class="payment_method">
</h5>
<ion-grid class="p0" *ngIf="custAddress">
<ion-row>
<ion-col class="p0">
<h6>
{{custAddress.building}},<br /> {{custAddress.landmark}},<br /> {{custAddress.address}}
</h6>
</ion-col>
</ion-row>
</ion-grid>
<hr>
<h5>
<span class="floatLeft">PAYMENT</span>
<span class="floatRight">CHANGE</span>
<div class="clear"></div>
</h5>
<div class="payment_method">
<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()"> <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>
...@@ -140,7 +167,7 @@ ...@@ -140,7 +167,7 @@
<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>
Delivery 10 Mnt<br> Delivery 10 Mnt<br>
...@@ -152,126 +179,170 @@ ...@@ -152,126 +179,170 @@
</li> </li>
</ul> </ul>
</div> --> </div> -->
<hr> <hr />
<div class="coupon_code"> <div class="coupon_code">
<input class="" placeholder="COUPON CODE" #promo><button class="add_btn" (click)="promoApply(promo.value)">ADD</button> <input class="" placeholder="COUPON CODE" #promo /><button
<br />&nbsp; class="add_btn"
<h6>GET50</h6> (click)="promoApply(promo.value)"
<span *ngIf="discountApplied" style="color: red">Promocode applied successfully </span> >
</div> ADD
<br /> </button>
<br />&nbsp;
<h6> <h6>GET50</h6>
<span class="floatLeft">PRODUCT COST</span> <span *ngIf="discountApplied" style="color: red"
<span class="floatRight" *ngIf="cartService.cartTotal">A$ >Promocode applied successfully
{{cartService.cartTotal}}</span> </span>
<div class="clear"></div> </div>
</h6> <br />
<h6> <h6>
<span class="floatLeft">DELIVERY CHARGE</span> <span class="floatLeft">PRODUCT COST</span>
<span class="floatRight" *ngIf="cartService.cartTotal">A$ <span class="floatRight" *ngIf="cartService.cartTotal"
{{getDeliveryCharge(cartService.cartTotal)}}</span> >A$ {{cartService.cartTotal}}</span
<div class="clear"></div> >
</h6> <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">
<ion-row>
<ion-col>
<p class="textLeft">Total Price:</p>
</ion-col>
<ion-col>
<p class="textRight" *ngIf="cartService.cartTotal">A$ {{getTotal(cartService.cartTotal)}}
</p>
</ion-col>
</ion-row>
</div>
</div>
</ion-slide>
<ion-slide>
<div class="order_placed_div">
<img src="../assets/[email protected]">
<h4>Order Placed</h4>
<p>{{bookDate}}</p>
<h3>The product will be delivered in</h3>
<h1>60:00 Mins</h1>
<button class="view_order" (click)="goToPage('myorder')">VIEW ORDERS</button><br>
<button class="home_btn" (click)="goToPage('home')">HOME</button>
</div>
</ion-slide>
</ion-slides>
<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">
<ion-row>
<ion-col>
<p class="textLeft">Total Price:</p>
</ion-col>
<ion-col>
<p class="textRight" *ngIf="cartService.cartTotal">
A$ {{getTotal(cartService.cartTotal)}}
</p>
</ion-col>
</ion-row>
</div>
</div> </div>
</div> </ion-slide>
<ion-slide>
<div class="order_placed_div">
<img src="../assets/[email protected]" />
<h4>Order Placed</h4>
<p>{{bookDate}}</p>
<h3>The product will be delivered in</h3>
<h1>60:00 Mins</h1>
<button class="view_order" (click)="goToPage('myorder')">
VIEW ORDERS</button
><br />
<button class="home_btn" (click)="goToPage('home')">HOME</button>
</div>
</ion-slide>
</ion-slides>
</div>
</div> </div>
</div>
</ion-content> </ion-content>
<ion-footer> <ion-footer>
<div class="footer_btnbay" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 0"> <div
<div class="continue" (click)="goToPage('productlist')">CONTINUE SHOPING</div> class="footer_btnbay"
<div class="checkout" (click)="next(1)">CHECKOUT</div> *ngIf="cartService.carts && cartService.carts.length > 0"
</div> [hidden]="currentIndex != 0"
<div class="footer_btn" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 1" (click)="next(2);"> >
PAY <div class="continue" (click)="goToPage('productlist')">
CONTINUE SHOPING
</div> </div>
<!-- <div class="footer_btn" [hidden]="currentIndex != 2" (click)="finishpop()"> <div class="checkout" (click)="next(1)">CHECKOUT</div>
</div>
<div
class="footer_btn"
*ngIf="cartService.carts && cartService.carts.length > 0"
[hidden]="currentIndex != 1"
(click)="next(2);"
>
PAY
</div>
<!-- <div class="footer_btn" [hidden]="currentIndex != 2" (click)="finishpop()">
FINISH FINISH
</div> --> </div> -->
</ion-footer> </ion-footer>
<div class="loader" *ngIf="loader"> <div class="loader" *ngIf="loader">
<div class="lds-ripple"> <div class="lds-ripple">
<div></div> <div></div>
<div></div> <div></div>
</div> </div>
</div> </div>
<div *ngIf="isShow" [@slideInOut]> <div *ngIf="isShow" [@slideInOut]>
<div class="nav_header"> <div class="nav_header">
<button class="nav_btn nav_back floatLeft" (click)="istoggle(); setAddress()"> <button
<img src="../assets/Group17_2.png"> class="nav_btn nav_back floatLeft"
</button> (click)="istoggle(); setAddress()"
<div class="nav_title floatLeft"> >
<h4>CHANGE LOCATION</h4> <img src="../assets/Group17_2.png" />
</div> </button>
<div class="nav_title floatLeft">
<h4>CHANGE LOCATION</h4>
</div>
<div class="clear"></div>
</div>
<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-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
<div class="add_address_wrapper">
<h5>
<span class="floatLeft">NEW ADDRESS</span>
<span class="floatRight" (click)="istoggle(); goToPage('nearby')"
>ADD NEW</span
>
<div class="clear"></div> <div class="clear"></div>
</h5>
<ul
*ngIf="addressService.addressList && addressService.addressList.length > 0"
>
<li *ngFor="let address of addressService.addressList; let i = index">
<div class="floatLeft">
{{address.default}}
<input
class="styled-checkbox"
name="addressId"
id="styled-checkbox-{{i}}"
type="radio"
(click)="setDefault(address.addressId, i)"
[value]="address.addressId"
#addressType
[checked]="address.defaultVal == 1"
/>
<label for="styled-checkbox-{{i}}"> {{address.addressType}} </label>
</div>
<div class="floatLeft">
<p>
{{address.building}}, {{address.landmark}}, {{address.address}}
</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div> </div>
<ion-content class="sort_wrappper"> </ion-content>
<agm-map [zoom]="20" [latitude]="lat" [longitude]="lng" [disableDefaultUI]="false" [zoomControl]="false" [backgroundColor]="'rgba(29, 27, 130,0.2)'"> </div>
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
<div class="add_address_wrapper">
<h5>
<span class="floatLeft">NEW ADDRESS</span>
<span class="floatRight" (click)="istoggle(); goToPage('nearby')">ADD NEW</span>
<div class="clear"></div>
</h5>
<ul *ngIf="addressService.addressList && addressService.addressList.length > 0">
<li *ngFor="let address of addressService.addressList; let i = index">
<div class="floatLeft">{{address.default}}
<input class="styled-checkbox" name="addressId" id="styled-checkbox-{{i}}" type="radio" (click)="setDefault(address.addressId, i)" [value]="address.addressId" #addressType [checked]="address.defaultVal == 1">
<label for="styled-checkbox-{{i}}"> {{address.addressType}}
</label>
</div>
<div class="floatLeft">
<p>
{{address.building}}, {{address.landmark}}, {{address.address}}
</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</ion-content>
</div>
\ No newline at end of file
src/app/cart/cart.page.ts
...@@ -12,7 +12,6 @@ import { AddressList } from './../../config/services/address'; ...@@ -12,7 +12,6 @@ import { AddressList } from './../../config/services/address';
import { trigger, transition, animate, style } from '@angular/animations'; import { trigger, transition, animate, style } from '@angular/animations';
import { zip } from 'rxjs'; import { zip } from 'rxjs';
@Component({ @Component({
selector: 'app-cart', selector: 'app-cart',
templateUrl: './cart.page.html', templateUrl: './cart.page.html',
...@@ -30,7 +29,6 @@ import { zip } from 'rxjs'; ...@@ -30,7 +29,6 @@ import { zip } from 'rxjs';
] ]
}) })
export class CartPage implements OnInit { export class CartPage implements OnInit {
@ViewChild(IonSlides, { static: false }) slides: IonSlides; @ViewChild(IonSlides, { static: false }) slides: IonSlides;
currentIndex: any; currentIndex: any;
isShow = false; isShow = false;
...@@ -70,14 +68,17 @@ export class CartPage implements OnInit { ...@@ -70,14 +68,17 @@ export class CartPage implements OnInit {
this.discountApplied = false; this.discountApplied = false;
this.discount = 0; this.discount = 0;
this.cartService.cartList(); this.cartService.cartList();
const users = this.service.get('user').then((data) => { this.loader = true;
const users = this.service.get('user').then(data => {
if (data) { if (data) {
data = JSON.parse(data); data = JSON.parse(data);
this.custId = data.uid; this.custId = data.uid;
this.addressService.addList(data.uid); this.addressService.addList(data.uid);
} }
}); });
setTimeout(() => {
this.loader = false;
}, 1000);
} }
ngOnInit() { ngOnInit() {
...@@ -85,10 +86,11 @@ export class CartPage implements OnInit { ...@@ -85,10 +86,11 @@ export class CartPage implements OnInit {
this.setAddress(); this.setAddress();
} }
setAddress() { setAddress() {
if (this.addressService.addressList.length > 0) { if (this.addressService.addressList.length > 0) {
let address = this.addressService.addressList.find(x => x.defaultVal === 1); let address = this.addressService.addressList.find(
x => x.defaultVal === 1
);
if (!address) { if (!address) {
address = this.addressService.addressList[0]; address = this.addressService.addressList[0];
} }
...@@ -114,7 +116,7 @@ export class CartPage implements OnInit { ...@@ -114,7 +116,7 @@ export class CartPage implements OnInit {
} }
getTax(amount) { getTax(amount) {
return this.taxAmount = (amount * 10) / 100; return (this.taxAmount = (amount * 10) / 100);
} }
getwaypayk() { getwaypayk() {
...@@ -128,8 +130,6 @@ export class CartPage implements OnInit { ...@@ -128,8 +130,6 @@ export class CartPage implements OnInit {
return await modal.present(); return await modal.present();
} }
goToPage(path, data = null) { goToPage(path, data = null) {
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;
...@@ -146,8 +146,6 @@ export class CartPage implements OnInit { ...@@ -146,8 +146,6 @@ export class CartPage implements OnInit {
this.custAddress = this.addressService.addressList[index]; this.custAddress = this.addressService.addressList[index];
} }
next(index: number = null) { next(index: number = null) {
this.loader = true; this.loader = true;
const This = this; const This = this;
...@@ -158,17 +156,19 @@ export class CartPage implements OnInit { ...@@ -158,17 +156,19 @@ export class CartPage implements OnInit {
if (index === 2) { if (index === 2) {
if (this.custAddress !== undefined) { if (this.custAddress !== undefined) {
const otherCharges = { const otherCharges = {
deliveryCharge : this.deliveryCharge, deliveryCharge: this.deliveryCharge,
taxAmount: this.taxAmount, taxAmount: this.taxAmount,
discount: this.discount, discount: this.discount,
discountApplied: this.discountApplied, discountApplied: this.discountApplied,
totalAmt: this.totalAmt, totalAmt: this.totalAmt,
custAddress: this.custAddress custAddress: this.custAddress
}; };
const state = this.orderService.checkOut(this.cartService.carts, otherCharges).then((data) => { const state = this.orderService
console.log('ready for slide'); .checkOut(this.cartService.carts, otherCharges)
this.slides.slideNext(); .then(data => {
}); console.log('ready for slide');
this.slides.slideNext();
});
} else { } else {
alert('Please choose delivery location'); alert('Please choose delivery location');
} }
...@@ -192,7 +192,6 @@ export class CartPage implements OnInit { ...@@ -192,7 +192,6 @@ export class CartPage implements OnInit {
} }
} }
slideChanged() { slideChanged() {
this.slides.getActiveIndex().then(index => { this.slides.getActiveIndex().then(index => {
this.currentIndex = index; this.currentIndex = index;
...@@ -210,14 +209,15 @@ export class CartPage implements OnInit { ...@@ -210,14 +209,15 @@ export class CartPage implements OnInit {
} }
getTotal(total) { getTotal(total) {
const actualTotal = (this.deliveryCharge + this.taxAmount + total) - this.discount; const actualTotal =
this.deliveryCharge + this.taxAmount + total - this.discount;
this.totalAmt = actualTotal; this.totalAmt = actualTotal;
return actualTotal; return actualTotal;
} }
promoApply(code) { promoApply(code) {
console.log(code); console.log(code);
this.cartService.checkPromo(code).subscribe((value) => { this.cartService.checkPromo(code).subscribe(value => {
if (value.length > 0) { if (value.length > 0) {
const promo = value[0]; const promo = value[0];
this.discountApplied = true; this.discountApplied = true;
...@@ -239,7 +239,20 @@ export class CartPage implements OnInit { ...@@ -239,7 +239,20 @@ export class CartPage implements OnInit {
formatDate() { formatDate() {
const date = new Date(); const date = new Date();
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; const months = [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'June',
'July',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
];
let hours = date.getHours(); let hours = date.getHours();
const minutes = date.getMinutes(); const minutes = date.getMinutes();
const ampm = hours >= 12 ? 'PM' : 'AM'; const ampm = hours >= 12 ? 'PM' : 'AM';
...@@ -247,7 +260,14 @@ export class CartPage implements OnInit { ...@@ -247,7 +260,14 @@ export class CartPage implements OnInit {
hours = hours ? hours : 12; // the hour '0' should be '12' hours = hours ? hours : 12; // the hour '0' should be '12'
const newminutes = minutes < 10 ? '0' + minutes : minutes; const newminutes = minutes < 10 ? '0' + minutes : minutes;
const strTime = hours + ':' + newminutes + ' ' + ampm; const strTime = hours + ':' + newminutes + ' ' + ampm;
return months[date.getMonth()] + ' ' + date.getDate() + ',' + date.getFullYear() + ' ' + strTime; return (
months[date.getMonth()] +
' ' +
date.getDate() +
',' +
date.getFullYear() +
' ' +
strTime
);
} }
} }
src/app/catstorelist/catstorelist.page.ts
import { Component, OnInit } from "@angular/core"; import { Component, OnInit } from '@angular/core';
import { Router } from "@angular/router"; import { Router } from '@angular/router';
import { Location } from "@angular/common"; import { Location } from '@angular/common';
import { ServiceService } from "./../../config/service.service"; import { ServiceService } from './../../config/service.service';
import { ShoppersService } from "./../../config/shopper.service"; import { ShoppersService } from './../../config/shopper.service';
import { SearchService } from "../../config/search.service"; import { SearchService } from '../../config/search.service';
import { trigger, transition, animate, style } from "@angular/animations"; import { trigger, transition, animate, style } from '@angular/animations';
import { ModalController } from '@ionic/angular';
import { SearchmodalPage } from '../searchmodal/searchmodal.page';
import { SubjectService } from './../../config/subject.service';
@Component({ @Component({
selector: "app-catstorelist", selector: 'app-catstorelist',
templateUrl: "./catstorelist.page.html", templateUrl: './catstorelist.page.html',
styleUrls: ["./catstorelist.page.scss"], styleUrls: ['./catstorelist.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%)' }))
]) ])
]) ])
] ]
...@@ -34,17 +37,25 @@ export class CatStorelistPage implements OnInit { ...@@ -34,17 +37,25 @@ export class CatStorelistPage implements OnInit {
public location: Location, public location: Location,
public service: ServiceService, public service: ServiceService,
public shopperService: ShoppersService, public shopperService: ShoppersService,
private searchService: SearchService private searchService: SearchService,
private modalController: ModalController,
private subjectService: SubjectService
) { ) {
this.service.get("params").then(val => { this.service.get('params').then(val => {
this.data = val; this.data = val;
this.shopperService.shopperList(this.data.catId, "catId"); this.shopperService.shopperList(this.data.catId, 'catId');
}); });
} }
clickSearch() { async clickSearch() {
this.searchShow = true; this.subjectService.setTabData(false);
this.searchService.searchList = []; const modal = await this.modalController.create({
component: SearchmodalPage
});
modal.onDidDismiss().then(dataReturned => {
this.subjectService.setTabData(true);
});
return await modal.present();
} }
searchClose() { searchClose() {
...@@ -53,7 +64,7 @@ export class CatStorelistPage implements OnInit { ...@@ -53,7 +64,7 @@ export class CatStorelistPage implements OnInit {
ngOnInit() {} ngOnInit() {}
goToPage(path, data = null) { goToPage(path, data = null) {
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;
} }
......
src/app/home/home.page.ts
...@@ -8,6 +8,7 @@ import { CenterService } from './../../config/center.service'; ...@@ -8,6 +8,7 @@ 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 { SubjectService } from './../../config/subject.service';
import { AddressService } from './../../config/address.service'; import { AddressService } from './../../config/address.service';
import { SearchService } from './../../config/search.service'; import { SearchService } from './../../config/search.service';
import { ProductsService } from './../../config/products.service'; import { ProductsService } from './../../config/products.service';
...@@ -56,7 +57,8 @@ export class HomePage implements OnInit { ...@@ -56,7 +57,8 @@ export class HomePage implements OnInit {
public modalController: ModalController, public modalController: ModalController,
private mapsAPILoader: MapsAPILoader, private mapsAPILoader: MapsAPILoader,
private searchService: SearchService, private searchService: SearchService,
private productsService: ProductsService private productsService: ProductsService,
private subjectService: SubjectService
) {} ) {}
ngOnInit() { ngOnInit() {
...@@ -135,6 +137,8 @@ export class HomePage implements OnInit { ...@@ -135,6 +137,8 @@ export class HomePage implements OnInit {
istoggle() { istoggle() {
this.isShow = !this.isShow; this.isShow = !this.isShow;
console.log(this.isShow);
this.subjectService.setTabData(!this.isShow);
} }
viewPage(datas: any) { viewPage(datas: any) {
...@@ -167,10 +171,13 @@ export class HomePage implements OnInit { ...@@ -167,10 +171,13 @@ export class HomePage implements OnInit {
} }
async searchModal() { async searchModal() {
this.subjectService.setTabData(false);
const modal = await this.modalController.create({ const modal = await this.modalController.create({
component: SearchmodalPage component: SearchmodalPage
}); });
modal.onDidDismiss().then(dataReturned => {}); modal.onDidDismiss().then(dataReturned => {
this.subjectService.setTabData(true);
});
return await modal.present(); return await modal.present();
} }
} }
src/app/landing/landing.page.html
<ion-content> <ion-content>
<div class="start_wizard_wrapper"> <div class="start_wizard_wrapper">
<ion-slides pager="true" [options]="landingOptions" (ionSlideDidChange)="slideChanged()"> <ion-slides
<ion-slide> pager="true"
<div class="wizard_inner_wrapper"> [options]="landingOptions"
<img src="../assets/Group 229_2.png"> (ionSlideDidChange)="slideChanged()"
<div class="wizard_textarea"> >
<h3>EASY PURCHASE</h3> <ion-slide>
<p> <div class="wizard_inner_wrapper">
Purchase your products from your<br> favourite shops <img src="../assets/Group 229_2.png" />
</p> <div class="wizard_textarea">
</div> <h3>EASY PURCHASE</h3>
</div> <p>
</ion-slide> Purchase your products from your<br />
<ion-slide> favourite shops
<div class="wizard_inner_wrapper"> </p>
<img src="../assets/Group 230_2.png"> </div>
<div class="wizard_textarea"> </div>
<h3>1 HOUR DELIVERY</h3> </ion-slide>
<p> <ion-slide>
The products will be delivered<br>within 1 hour <div class="wizard_inner_wrapper">
</p> <img src="../assets/Group 230_2.png" />
</div> <div class="wizard_textarea">
</div> <h3>1 HOUR DELIVERY</h3>
</ion-slide> <p>The products will be delivered<br />within 1 hour</p>
<ion-slide> </div>
<div class="wizard_inner_wrapper"> </div>
<img src="../assets/Group 231_2.png"> </ion-slide>
<div class="wizard_textarea"> <ion-slide>
<h3>EASY PAYMENT</h3> <div class="wizard_inner_wrapper">
<p> <img src="../assets/Group 231_2.png" />
Easy Online payment system <div class="wizard_textarea">
</p> <h3>EASY PAYMENT</h3>
</div> <p>
</div> Easy Online payment system
</ion-slide> </p>
</ion-slides> </div>
<div class="btn_row"> </div>
<div class="btn_bay" [hidden]="currentIndex == 2"> </ion-slide>
<div class="btn_next" (click)="next()"> </ion-slides>
NEXT <div class="btn_row">
</div> <div class="btn_bay" [hidden]="currentIndex == 2">
</div> <div class="btn_next" (click)="next()">
NEXT
</div>
</div>
<div class="btn_bay" [hidden]="currentIndex != 2"> <div class="btn_bay" [hidden]="currentIndex != 2">
<div class="btn_getstarted" (click)="goToPage('login')"> <div class="btn_getstarted" (click)="goToPage('login')">
GET STARTED GET STARTED
</div>
</div>
</div> </div>
</div>
</div>
</div>
<div class="loader" *ngIf="loader">
<div class="lds-ripple">
<div></div>
<div></div>
</div> </div>
</ion-content> </div>
\ No newline at end of file </ion-content>
src/app/landing/landing.page.ts
import { Component, OnInit, ViewChild } from "@angular/core"; import { Component, OnInit, ViewChild } from '@angular/core';
import { IonSlides } from "@ionic/angular"; import { IonSlides } from '@ionic/angular';
import { Router, ActivatedRoute } from "@angular/router"; import { Router, ActivatedRoute } from '@angular/router';
import { ServiceService } from "./../../config/service.service"; import { ServiceService } from './../../config/service.service';
import { SubjectService } from "./../../config/subject.service"; import { SubjectService } from './../../config/subject.service';
@Component({ @Component({
selector: "app-landing", selector: 'app-landing',
templateUrl: "./landing.page.html", templateUrl: './landing.page.html',
styleUrls: ["./landing.page.scss"] styleUrls: ['./landing.page.scss']
}) })
export class LandingPage implements OnInit { export class LandingPage implements OnInit {
loader: boolean;
constructor( constructor(
private router: Router, private router: Router,
private route: ActivatedRoute, private route: ActivatedRoute,
private service: ServiceService, private service: ServiceService,
public subjectService: SubjectService public subjectService: SubjectService
) { ) {
this.service.get("landing").then(data => { this.loader = true;
this.service.get('landing').then(data => {
if (data === true) { if (data === true) {
const user = JSON.parse(localStorage.getItem("user")); const user = JSON.parse(localStorage.getItem('user'));
console.log(user); console.log(user);
if (user) { if (user) {
this.subjectService.sendLoginData(false); this.subjectService.sendLoginData(false);
this.goToPage("home"); this.goToPage('home');
} else { } else {
this.subjectService.sendLoginData(true); this.subjectService.sendLoginData(true);
this.goToPage("login"); this.goToPage('login');
} }
} }
this.loader = false;
}); });
} }
...@@ -49,7 +52,7 @@ export class LandingPage implements OnInit { ...@@ -49,7 +52,7 @@ export class LandingPage implements OnInit {
ngOnInit() {} ngOnInit() {}
goToPage(path, data = null) { goToPage(path, data = null) {
this.service.set("landing", true); this.service.set('landing', true);
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;
} }
......
src/app/login/login.page.html
<div class="nav_header"> <div class="nav_header">
<button class="nav_btn floatLeft"> <button class="nav_btn floatLeft"></button>
</button> <div class="nav_title floatLeft">
<div class="nav_title floatLeft"> <h4>LOGIN</h4>
<h4>LOGIN</h4> </div>
</div> <div class="clear"></div>
<div class="clear"></div>
</div> </div>
<ion-content> <ion-content>
<div class="login_wrapper"> <div class="login_wrapper">
<div class="logo_wrapper"> <div class="logo_wrapper">
<img src="../assets/logo.png"> <img src="../assets/logo.png" />
</div> </div>
<div class="form_div"> <div class="form_div">
<div class="row"> <div class="row">
<input class="" type="text" placeholder="User Name/ Email" #userName required> <input
</div> class=""
<div class="row"> type="text"
<input class="" type="password" placeholder="Password" #userPassword required> placeholder="User Name/ Email"
</div> #userName
<div class="row"> required
<button class="login_btn" (click)="authService.SignIn(userName.value, userPassword.value)">LOGIN</button> />
</div> </div>
<div class="row"> <div class="row">
<hr> <input
<p><span>OR</span></p> class=""
</div> type="password"
<div class="row"> placeholder="Password"
<div class="social_div"> #userPassword
<div class="social_btn" style="border-right:1px solid rgba(215, 213, 228, 1);" (click)="authService.facebook(1)"> required
Facebook />
</div> </div>
<div class="social_btn" (click)="authService.google(1)"> <div class="row">
Google <button
</div> class="login_btn"
</div> (click)="authService.SignIn(userName.value, userPassword.value)"
</div> >
<div class="row"> LOGIN
<h4><strong (click)="goToPage('forgot')">FORGOT PASSWORD?</strong></h4> </button>
<h4>Don't have an account? <strong (click)="goToPage('signup')">SIGNUP</strong></h4> </div>
<div class="row">
</div> <hr />
<!-- <button (click)="goToPage('addaddresss')">Address</button> --> <p><span>OR</span></p>
</div>
<div class="row">
<div class="social_div">
<div
class="social_btn"
style="border-right:1px solid rgba(215, 213, 228, 1);"
(click)="authService.facebook(1)"
>
Facebook
</div>
<div class="social_btn" (click)="authService.google(1)">
Google
</div>
</div> </div>
</div>
<div class="row">
<h4><strong (click)="goToPage('forgot')">FORGOT PASSWORD?</strong></h4>
<h4>
Don't have an account?
<strong (click)="goToPage('signup')">SIGNUP</strong>
</h4>
</div>
<!-- <button (click)="goToPage('addaddresss')">Address</button> -->
</div>
</div>
<div class="loader" *ngIf="authService.loader">
<div class="lds-ripple">
<div></div>
<div></div>
</div> </div>
</ion-content> </div>
\ No newline at end of file </ion-content>
src/app/login/login.page.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router'; import { Router, ActivatedRoute } from '@angular/router';
import { AuthService } from './../../config/auth.service'; import { AuthService } from './../../config/auth.service';
import { MenuController } from '@ionic/angular'; import { MenuController } from '@ionic/angular';
import { async } from 'q'; import { async } from 'q';
@Component({ @Component({
selector: 'app-login', selector: 'app-login',
templateUrl: './login.page.html', templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'], styleUrls: ['./login.page.scss']
}) })
export class LoginPage implements OnInit { export class LoginPage implements OnInit {
constructor( constructor(
private router: Router, private router: Router,
private route: ActivatedRoute, private route: ActivatedRoute,
public authService: AuthService, public authService: AuthService,
public menuCtrl: MenuController public menuCtrl: MenuController
) { } ) {}
ngOnInit() { ngOnInit() {}
}
ionViewWillEnter() { ionViewWillEnter() {
this.menuCtrl.enable(false); this.menuCtrl.enable(false);
...@@ -30,8 +27,4 @@ export class LoginPage implements OnInit { ...@@ -30,8 +27,4 @@ export class LoginPage implements OnInit {
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;
} }
} }
src/app/nearby/nearby.page.html
<div class="nav_header"> <div class="nav_header">
<button class="nav_btn nav_back floatLeft" (click)="goBack()" *ngIf="type === 0"> <button
<img src="../assets/Group17_2.png"> class="nav_btn nav_back floatLeft"
(click)="goBack()"
*ngIf="type === 0"
>
<img src="../assets/Group17_2.png" />
</button> </button>
<div class="nav_title floatLeft"> <div class="nav_title floatLeft">
<h4>NEAR BY STORES</h4> <h4>NEAR BY STORES</h4>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<ion-content> <ion-content>
<div class="nearby_map"> <div class="nearby_map">
<agm-map
<agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="8" [backgroundColor]="'rgba(29, 27, 130,0.2)'"> [latitude]="latitude"
<agm-marker [latitude]="latitude" [longitude]="longitude" [markerDraggable]="true" (dragEnd)="markerDragEnd($event)"></agm-marker> [longitude]="longitude"
</agm-map> [zoom]="8"
<form (ngSubmit)="onSubmit(addressForm.value); addressForm.reset()" #addressForm="ngForm" method="post" class="form-horizontal"> [backgroundColor]="'rgba(29, 27, 130,0.2)'"
<div class="add_address_wrapper"> >
<h5>DELIVERY</h5> <agm-marker
<p>{{address}}</p> [latitude]="latitude"
<input [(ngModel)]="addressForm.building" name="building" #building="ngModel" name="building" required placeholder="House No./ Building No"> [longitude]="longitude"
<div class="md-errors-spacer" [hidden]="building.valid || landmark.pristine" class="ion-padding-start"> [markerDraggable]="true"
Building Name is required (dragEnd)="markerDragEnd($event)"
</div> ></agm-marker>
<input [(ngModel)]="addressForm.landmark" name="landmark" #landmark="ngModel" name="landmark" required placeholder="Landmark"> </agm-map>
<div class="md-errors-spacer" [hidden]="landmark.valid || landmark.pristine" class="ion-padding-start"> <form
Landmark is required (ngSubmit)="onSubmit(addressForm.value); addressForm.reset()"
</div> #addressForm="ngForm"
<ion-grid> method="post"
<ion-row> class="form-horizontal"
<ion-col> >
<h6> <div class="add_address_wrapper">
<input class="styled-checkbox" id="styled-check-1" type="radio" value="Home" [(ngModel)]="addressForm.addressType" name="addressType" #addressType="ngModel" required> <h5>DELIVERY</h5>
<label for="styled-check-1"><span>Home</span></label></h6> <p>{{address}}</p>
</ion-col> <input
<ion-col> [(ngModel)]="addressForm.building"
<h6> name="building"
<input class="styled-checkbox" id="styled-check-2" type="radio" value="Work" [(ngModel)]="addressForm.addressType" name="addressType" #addressType="ngModel" required> #building="ngModel"
<label for="styled-check-2"><span>Office</span></label></h6> name="building"
</ion-col> required
<ion-col> placeholder="House No./ Building No"
<h6> />
<input class="styled-checkbox" id="styled-check-3" type="radio" value="Other" [(ngModel)]="addressForm.addressType" name="addressType" #addressType="ngModel" required> <div
<label for="styled-check-3"><span>Others</span></label></h6> class="md-errors-spacer"
</ion-col> [hidden]="building.valid || landmark.pristine"
</ion-row> class="ion-padding-start"
<div class="md-errors-spacer" [hidden]="addressType.valid || addressType.pristine" class="ion-padding-start"> >
Address Type is required Building Name is required
</div> </div>
</ion-grid> <input
<button class="add_btn" type="submit" [disabled]="!addressForm.form.valid">ADD</button> [(ngModel)]="addressForm.landmark"
</div> name="landmark"
</form> #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 class="loader" *ngIf="loader">
<div class="lds-ripple">
<div></div>
<div></div>
</div> </div>
</ion-content> </div>
\ No newline at end of file </ion-content>
src/app/nearby/nearby.page.ts
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';
...@@ -14,7 +20,6 @@ import * as firebase from 'firebase'; ...@@ -14,7 +20,6 @@ import * as firebase from 'firebase';
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;
...@@ -26,6 +31,7 @@ export class NearbyPage implements OnInit { ...@@ -26,6 +31,7 @@ export class NearbyPage implements OnInit {
successState: boolean; successState: boolean;
uid: string; uid: string;
type: any; type: any;
loader: boolean;
public searchElementRef: ElementRef; public searchElementRef: ElementRef;
constructor( constructor(
...@@ -39,14 +45,14 @@ export class NearbyPage implements OnInit { ...@@ -39,14 +45,14 @@ export class NearbyPage implements OnInit {
) { ) {
this.successState = false; this.successState = false;
this.type = 0; this.type = 0;
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);
this.uid = data.uid; this.uid = data.uid;
} }
}); });
this.service.get('type').then((data) => { this.service.get('type').then(data => {
this.type = data; this.type = data;
}); });
} }
...@@ -109,6 +115,7 @@ export class NearbyPage implements OnInit { ...@@ -109,6 +115,7 @@ export class NearbyPage implements OnInit {
} }
onSubmit(data: any) { onSubmit(data: any) {
this.loader = true;
console.log(data); console.log(data);
const postData: Address = { const postData: Address = {
address: this.address, address: this.address,
...@@ -122,7 +129,9 @@ export class NearbyPage implements OnInit { ...@@ -122,7 +129,9 @@ export class NearbyPage implements OnInit {
}; };
this.addressService.addressCreate(postData); this.addressService.addressCreate(postData);
this.successState = true; this.successState = true;
setTimeout(() => { setTimeout(() => {
this.loader = false;
this.successState = false; this.successState = false;
if (this.type === 1) { if (this.type === 1) {
this.service.set('type', 0); this.service.set('type', 0);
......
src/app/productdetail/productdetail.page.html
...@@ -20,10 +20,7 @@ ...@@ -20,10 +20,7 @@
<div class="featured_badge" *ngIf="product.featured">Featured</div> <div class="featured_badge" *ngIf="product.featured">Featured</div>
<ion-slides pager="true" [options]="bannerOptions" *ngIf="slideData"> <ion-slides pager="true" [options]="bannerOptions" *ngIf="slideData">
<ion-slide *ngFor="let prodImg of slideData"> <ion-slide *ngFor="let prodImg of slideData">
<img <img [src]="prodImg" onerror="this.src='../assets/[email protected]'" />
[src]="prodImg"
onerror="this.src='../assets/[email protected]'"
/>
</ion-slide> </ion-slide>
<!-- <ion-slide> <!-- <ion-slide>
<img <img
...@@ -45,10 +42,13 @@ ...@@ -45,10 +42,13 @@
<h3>{{product.prodName}}</h3> <h3>{{product.prodName}}</h3>
<p> <p>
<strong <strong
><span><img src="../assets/Path61_2.png"/></span>0</strong ><span><img src="../assets/Path61_2.png"/></span
>{{product.rating}}</strong
>&nbsp; {{product.category}}, {{product.subCate}} >&nbsp; {{product.category}}, {{product.subCate}}
<br /> <br />
<span *ngFor="let tag of product.tag">#{{tag}}&nbsp;</span> <span *ngFor="let tag of product.tag"
><span *ngIf="tag !=='No-Tag'">#{{tag}}&nbsp;</span></span
>
</p> </p>
</ion-col> </ion-col>
<ion-col size="4"> <ion-col size="4">
...@@ -265,6 +265,12 @@ ...@@ -265,6 +265,12 @@
</div> </div>
</div> </div>
</div> </div>
<div class="loader" *ngIf="loader">
<div class="lds-ripple">
<div></div>
<div></div>
</div>
</div>
</ion-content> </ion-content>
<ion-footer> <ion-footer>
<div class="footer_div"> <div class="footer_div">
......
src/app/productdetail/productdetail.page.scss
.product_detail_wrapper { .product_detail_wrapper {
.product_banner { .product_banner {
width: 100%; width: 100%;
height: 300px; height: 300px;
position: relative; position: relative;
ion-slides { ion-slides {
height: 100%; height: 100%;
} }
.fav_icon { .fav_icon {
width: 30px; width: 30px;
height: 30px; height: 30px;
background-image: url("../../assets/Group32_2.png"); background-image: url('../../assets/Group32_2.png');
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 24px; background-size: 24px;
position: absolute; position: absolute;
top: 15px; top: 15px;
right: 15px; right: 15px;
z-index: 2; z-index: 2;
} }
.fav_fill { .fav_fill {
width: 30px; width: 30px;
height: 30px; height: 30px;
background-image: url("../../assets/fav_fill.png"); background-image: url('../../assets/fav_fill.png');
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 24px; background-size: 24px;
position: absolute; position: absolute;
top: 15px; top: 15px;
right: 15px; right: 15px;
z-index: 2; z-index: 2;
} }
.featured_badge { .featured_badge {
position: absolute; position: absolute;
bottom: 20px; bottom: 20px;
right: 15px; right: 15px;
color: #fff; color: #fff;
background-color: rgba(41, 40, 91, 1); background-color: rgba(41, 40, 91, 1);
padding: 2px; padding: 2px;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
font-size: 13px; font-size: 13px;
z-index: 2; z-index: 2;
}
img {
width: 100%;
height: 100%;
object-position: center;
object-fit: cover;
}
}
.product_header {
padding: 10px;
h3 {
margin: 0px;
padding: 0px;
color: rgba(41, 40, 91, 1);
font-size: 26px;
font-weight: 900;
padding-bottom: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p {
margin: 0px;
padding: 0px;
color: rgba(121, 119, 139, 1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
strong {
margin-right: 5px;
span {
img {
width: 16px;
}
} }
img { }
}
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
text-align: right;
font-size: 26px;
}
}
.product_div_content {
padding-bottom: 80px;
h5 {
color: rgba(41, 40, 91, 1);
margin: 0px;
padding: 10px;
font-weight: 900;
}
p {
color: rgba(59, 57, 77, 1);
padding: 10px;
text-align: justify;
margin: 0px;
}
.size_div {
padding: 10px;
ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
width: 100%;
height: 100px;
margin: 4px;
display: inline-block;
#custom_check_button {
background-color: #fff;
border-radius: 10px !important;
overflow: auto;
color: #000;
border: 1px dashed rgba(215, 213, 228, 1);
position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
object-position: center; outline: none;
object-fit: cover; font-size: 17px;
}
}
.product_header {
padding: 10px;
h3 {
margin: 0px;
padding: 0px;
color: rgba(41, 40, 91, 1);
font-size: 26px;
font-weight: 900;
padding-bottom: 5px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
}
#custom_check_button p {
margin: 0px;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
padding: 4px;
padding-top: 35px;
padding-bottom: 35px;
text-align: center;
}
#custom_check_button label {
width: 100%;
}
#custom_check_button label span {
text-align: center;
display: block;
}
#custom_check_button label input {
position: absolute;
top: 0px;
opacity: 0;
}
#custom_check_button input:checked + p {
background-color: rgba(41, 40, 91, 1);
color: #fff;
border-radius: 10px !important;
margin: 0px;
}
} }
p { }
}
.color_div {
padding: 10px;
ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
width: 100%;
height: 100px;
margin: 4px;
display: inline-block;
#custom_check_button {
background-color: #fff;
border-radius: 10px !important;
overflow: auto;
color: #000;
border: 1px dashed rgba(215, 213, 228, 1);
position: relative;
width: 100%;
height: 100%;
outline: none;
font-size: 17px;
}
#custom_check_button p {
margin: 0px; margin: 0px;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
color: transparent;
bottom: 0px;
padding: 0px; padding: 0px;
color: rgba(121, 119, 139, 1); text-align: center;
white-space: nowrap; border: 3px solid transparent;
overflow: hidden; img {
text-overflow: ellipsis; width: 100%;
strong { height: 100%;
margin-right: 5px; border-radius: 10px !important;
span { object-fit: cover;
img { object-position: center;
width: 16px;
}
}
} }
} }
h5 { #custom_check_button label {
width: 100%;
}
#custom_check_button label span {
text-align: center;
display: block;
}
#custom_check_button label input {
position: absolute;
top: 0px;
opacity: 0;
}
#custom_check_button input:checked + p {
border: 3px dashed #29285b;
color: transparent;
border-radius: 10px !important;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
color: rgba(59, 57, 77, 1); }
text-align: right;
font-size: 26px;
} }
}
} }
.product_div_content { .review_list {
padding-bottom: 80px; padding: 10px;
h5 { ul {
color: rgba(41, 40, 91, 1); margin: 0px;
margin: 0px; padding: 0px;
padding: 10px; li {
font-weight: 900; list-style: none;
} padding-bottom: 20px;
p { .review_image {
color: rgba(59, 57, 77, 1); width: 35px;
padding: 10px; height: 35px;
text-align: justify; border-radius: 50%;
margin: 0px; float: left;
} background-color: #a8a8a8;
.size_div { img {
padding: 10px; width: 100%;
ul { height: 100%;
margin: 0px; border-radius: 50%;
padding: 0px; object-fit: cover;
li { object-position: center;
list-style: none;
width: 100%;
height: 100px;
margin: 4px;
display: inline-block;
#custom_check_button {
background-color: #fff;
border-radius: 10px !important;
overflow: auto;
color: #000;
border: 1px dashed rgba(215, 213, 228, 1);
position: relative;
width: 100%;
height: 100%;
outline: none;
font-size: 17px;
}
#custom_check_button p {
margin: 0px;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
padding: 4px;
padding-top: 35px;
padding-bottom: 35px;
text-align: center;
}
#custom_check_button label {
width: 100%;
}
#custom_check_button label span {
text-align: center;
display: block;
}
#custom_check_button label input {
position: absolute;
top: 0px;
opacity: 0;
}
#custom_check_button input:checked+p {
background-color: rgba(41, 40, 91, 1);
color: #fff;
border-radius: 10px !important;
margin: 0px;
}
}
} }
} }
.color_div { .review_detail {
padding: 10px; float: left;
ul { width: calc(100% - 35px);
margin: 0px; padding-left: 10px;
padding: 0px; padding-top: 2px;
li { padding-bottom: 7px;
list-style: none; h4 {
width: 100%; margin: 0px;
height: 100px; padding: 0px;
margin: 4px; color: rgba(59, 57, 77, 1);
display: inline-block; span {
#custom_check_button { font-weight: bolder;
background-color: #fff; font-size: 18px;
border-radius: 10px !important; margin-left: 10px;
overflow: auto; img {
color: #000; width: 16px;
border: 1px dashed rgba(215, 213, 228, 1); margin-right: 2px;
position: relative;
width: 100%;
height: 100%;
outline: none;
font-size: 17px;
}
#custom_check_button p {
margin: 0px;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
color: transparent;
bottom: 0px;
padding: 0px;
text-align: center;
border: 3px solid transparent;
img {
width: 100%;
height: 100%;
border-radius: 10px !important;
object-fit: cover;
object-position: center;
}
}
#custom_check_button label {
width: 100%;
}
#custom_check_button label span {
text-align: center;
display: block;
}
#custom_check_button label input {
position: absolute;
top: 0px;
opacity: 0;
}
#custom_check_button input:checked+p {
border: 3px dashed #29285b;
color: transparent;
border-radius: 10px !important;
margin: 0px;
padding: 0px;
}
} }
}
} }
} .review_date {
.review_list { color: rgba(176, 174, 199, 1);
padding: 10px; font-size: 14px;
ul { }
margin: 0px; p {
padding: 0px; margin: 0px;
li { padding: 0px;
list-style: none; color: rgba(59, 57, 77, 1);
padding-bottom: 20px; padding-top: 10px;
.review_image {
width: 35px;
height: 35px;
border-radius: 50%;
float: left;
background-color: #a8a8a8;
img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
}
.review_detail {
float: left;
width: calc(100% - 35px);
padding-left: 10px;
padding-top: 2px;
padding-bottom: 7px;
h4 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
span {
font-weight: bolder;
font-size: 18px;
margin-left: 10px;
img {
width: 16px;
margin-right: 2px;
}
}
}
.review_date {
color: rgba(176, 174, 199, 1);
font-size: 14px;
}
p {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
padding-top: 10px;
}
}
}
} }
}
} }
.related_product_slider { }
ul { }
padding: 10px; .related_product_slider {
padding-bottom: 0px; ul {
padding-top: 0px; padding: 10px;
margin: 0px; padding-bottom: 0px;
li { padding-top: 0px;
width: 100%; margin: 0px;
display: inline-block; li {
border-top: none; width: 100%;
border-bottom: none; display: inline-block;
margin-bottom: 10px; border-top: none;
.product_image { border-bottom: none;
height: 235px; margin-bottom: 10px;
position: relative; .product_image {
.featured_badge { height: 235px;
position: absolute; position: relative;
top: 20px; .featured_badge {
left: 0px; position: absolute;
color: #fff; top: 20px;
background-color: rgba(41, 40, 91, 1); left: 0px;
padding: 2px; color: #fff;
padding-left: 10px; background-color: rgba(41, 40, 91, 1);
padding-right: 10px; padding: 2px;
font-size: 13px; padding-left: 10px;
} padding-right: 10px;
.fav_icon { font-size: 13px;
position: absolute; }
top: 10px; .fav_icon {
right: 10px; position: absolute;
font-size: 27px; top: 10px;
width: 30px; right: 10px;
height: 30px; font-size: 27px;
background-image: url("../../assets/Group32_2.png"); width: 30px;
background-position: center; height: 30px;
background-repeat: no-repeat; background-image: url('../../assets/Group32_2.png');
background-size: 24px; background-position: center;
} background-repeat: no-repeat;
.fav_fill { background-size: 24px;
position: absolute; }
top: 10px; .fav_fill {
right: 10px; position: absolute;
font-size: 27px; top: 10px;
width: 30px; right: 10px;
height: 30px; font-size: 27px;
background-image: url("../../assets/fav_fill.png"); width: 30px;
background-position: center; height: 30px;
background-repeat: no-repeat; background-image: url('../../assets/fav_fill.png');
background-size: 24px; background-position: center;
} background-repeat: no-repeat;
img { background-size: 24px;
width: 100%; }
height: 100%; img {
object-fit: cover; width: 100%;
object-position: center; height: 100%;
} object-fit: cover;
} object-position: center;
h5 { }
margin: 0px; }
padding: 0px; h5 {
color: rgba(59, 57, 77, 1); margin: 0px;
padding-top: 5px; padding: 0px;
padding-bottom: 5px; color: rgba(59, 57, 77, 1);
font-weight: 400; padding-top: 5px;
text-align: left; padding-bottom: 5px;
font-size: 14px; font-weight: 400;
white-space: nowrap; text-align: left;
overflow: hidden; font-size: 14px;
text-overflow: ellipsis; white-space: nowrap;
} overflow: hidden;
p { text-overflow: ellipsis;
margin: 0px; }
padding: 0px; p {
color: rgba(176, 174, 199, 1); margin: 0px;
font-size: 12px; padding: 0px;
span { color: rgba(176, 174, 199, 1);
text-decoration: line-through; font-size: 12px;
margin-left: 10px; span {
color: rgba(215, 213, 228, 1) text-decoration: line-through;
} margin-left: 10px;
.offer { color: rgba(215, 213, 228, 1);
color: #fff; }
background-color: rgba(41, 40, 91, 1); .offer {
border-radius: 4px; color: #fff;
text-decoration: none; background-color: rgba(41, 40, 91, 1);
padding: 3px; border-radius: 4px;
font-size: 13px; text-decoration: none;
} padding: 3px;
} font-size: 13px;
}
} }
}
} }
}
} }
}
} }
.footer_div { .footer_div {
bottom: 0px; bottom: 0px;
height: 50px; height: 50px;
left: 0px; left: 0px;
right: 0px; right: 0px;
min-width: 100%; min-width: 100%;
background-color: #fff; background-color: #fff;
-webkit-box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34); -webkit-box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34);
-moz-box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34); -moz-box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34);
box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34); box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34);
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-top-right-radius: 10px; border-top-right-radius: 10px;
z-index: 99; z-index: 99;
.footer_options { .footer_options {
width: 50%; width: 50%;
float: left; float: left;
height: 100%; height: 100%;
button { button {
width: 33.3%; width: 33.3%;
display: inline-block; display: inline-block;
height: 100%; height: 100%;
border-radius: 10px; border-radius: 10px;
background-color: transparent; background-color: transparent;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 30px; background-size: 30px;
cursor: pointer; cursor: pointer;
} }
.cart { .cart {
background-image: url("../../assets/cart_2.png"); background-image: url('../../assets/cart_2.png');
} }
.fav { .fav {
background-image: url("../../assets/Group56_2.png"); background-image: url('../../assets/Group56_2.png');
}
.share {
background-image: url("../../assets/Group57_2.png");
}
} }
.footer_btn { .share {
width: 50%; background-image: url('../../assets/Group57_2.png');
border-top-right-radius: 10px;
background-color: rgba(41, 40, 91, 1);
color: #fff;
float: right;
text-align: center;
padding: 15px;
font-size: 18px;
height: 100%;
} }
} }
\ No newline at end of file .footer_btn {
width: 50%;
border-top-right-radius: 10px;
background-color: rgba(41, 40, 91, 1);
color: #fff;
float: right;
text-align: center;
padding: 15px;
font-size: 18px;
height: 100%;
}
}
src/app/productdetail/productdetail.page.ts
...@@ -21,6 +21,7 @@ export class ProductdetailPage implements OnInit { ...@@ -21,6 +21,7 @@ export class ProductdetailPage implements OnInit {
order: Order; order: Order;
data: any; data: any;
slideData: any[]; slideData: any[];
loader: boolean;
bannerOptions = { bannerOptions = {
slidesPerView: 1, slidesPerView: 1,
...@@ -45,6 +46,7 @@ export class ProductdetailPage implements OnInit { ...@@ -45,6 +46,7 @@ export class ProductdetailPage implements OnInit {
) { ) {
const params = this.prodService.selItem; const params = this.prodService.selItem;
this.service.state = true; this.service.state = true;
this.loader = true;
this.prodService.similarProd( this.prodService.similarProd(
params.shopperId, params.shopperId,
params.category, params.category,
...@@ -55,6 +57,9 @@ export class ProductdetailPage implements OnInit { ...@@ -55,6 +57,9 @@ export class ProductdetailPage implements OnInit {
this.data = val; this.data = val;
}); });
this.cartService.cartList(); this.cartService.cartList();
setTimeout(() => {
this.loader = false;
}, 1000);
// console.log(this.prodService.fav); // console.log(this.prodService.fav);
} }
...@@ -87,6 +92,7 @@ export class ProductdetailPage implements OnInit { ...@@ -87,6 +92,7 @@ export class ProductdetailPage implements OnInit {
image: params.image, image: params.image,
price: params.price, price: params.price,
qty: params.qty, qty: params.qty,
rating: params.rating,
shopper: params.shopper, shopper: params.shopper,
skuCode: params.skuCode, skuCode: params.skuCode,
status: params.status, status: params.status,
......
src/app/productlist/productlist.page.html
<div class="nav_header"> <div class="nav_header">
<button class="nav_btn nav_back floatLeft" (click)="goBack()"> <button class="nav_btn nav_back floatLeft" (click)="goBack()">
<img src="../assets/Group17_2.png" /> <img src="../assets/Group17_2.png" />
</button> </button>
<div class="nav_title floatLeft"> <div class="nav_title floatLeft">
<input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="clickSearch()" /> <input
</div> class="search_bar"
<button class="nav_btn nav_search floatRight" *ngIf="!searchShow" (click)="clickSearch()"></button> placeholder="Search here.. eg:shirts, retailers etc..."
<button class="nav_btn nav_close floatRight" *ngIf="searchShow" (click)="searchClose()"></button> (click)="clickSearch()"
<div class="clear"></div> />
</div>
<button
class="nav_btn nav_search floatRight"
*ngIf="!searchShow"
(click)="clickSearch()"
></button>
<button
class="nav_btn nav_close floatRight"
*ngIf="searchShow"
(click)="searchClose()"
></button>
<div class="clear"></div>
</div> </div>
<ion-content> <ion-content>
<div class="product_list">
<div class="product_list"> <div class="product_taskbar">
<div class="product_taskbar"> <div class="filter floatLeft" (click)="istoggle()"></div>
<div class="filter floatLeft" (click)="istoggle()"> <div class="viewset floatRight">
<div
</div> class="grid_view grid_act floatRight"
<div class="viewset floatRight"> (click)="gridToggle()"
<div class="grid_view grid_act floatRight" (click)="gridToggle()" [class.line_view]="onGrid"> [class.line_view]="onGrid"
</div> ></div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<div class="product_title" *ngIf="data"> <div class="product_title" *ngIf="data">
{{data.shopName}} {{data.shopName}}
</div>
<ul [class.grid_view]="onGrid" *ngIf="prodService.product && prodService.product.length > 0">
<li *ngFor="let product of prodService.product; let i = index">
<div class="product_image">
<div class="load-back">
<img [src]="product.image" onerror="this.src='../assets/[email protected]'" (click)="prodDetails(i)">
</div>
<div [ngClass]="checkFavStatus(product.prodId)" (click)="changeFav(product.prodId)">
</div>
<div class="featured_badge" *ngIf="product.featured">Featured</div>
</div>
<h5 class="ellipse" (click)="prodDetails(i)">{{product.prodName}}</h5>
<p (click)="prodDetails(i)">A$ {{product.price}}<span class="offer" *ngIf="product.discount > 0">-{{product.discount}}%</span></p>
</li>
</ul>
</div> </div>
<ul [class.grid_view]="onGrid" *ngIf="prodService.product && prodService.product.length > 0"> <ul
<li *ngFor="let product of prodService.product; let i = index"> [class.grid_view]="onGrid"
<div class="product_image"> *ngIf="prodService.product && prodService.product.length > 0"
<img [src]="product.image" onerror="this.src='../assets/[email protected]'" (click)="prodDetails(i)" /> >
<div [ngClass]="checkFavStatus(product.prodId)" (click)="changeFav(product.prodId)"></div> <li *ngFor="let product of prodService.product; let i = index">
<div class="featured_badge" *ngIf="product.featured">Featured</div> <div class="product_image">
</div> <div class="load-back">
<h5 class="ellipse" (click)="prodDetails(i)">{{product.prodName}}</h5> <img
<p (click)="prodDetails(i)"> [src]="product.image"
A$ {{product.price}}<span class="offer" *ngIf="product.discount > 0">-{{product.discount}}%</span onerror="this.src='../assets/[email protected]'"
(click)="prodDetails(i)"
/>
</div>
<div
[ngClass]="checkFavStatus(product.prodId)"
(click)="changeFav(product.prodId)"
></div>
<div class="featured_badge" *ngIf="product.featured">Featured</div>
</div>
<h5 class="ellipse" (click)="prodDetails(i)">{{product.prodName}}</h5>
<p (click)="prodDetails(i)">
A$ {{product.price}}<span class="offer" *ngIf="product.discount > 0"
>-{{product.discount}}%</span
> >
</p> </p>
</li> </li>
</ul> </ul>
</div> </div>
<ul
[class.grid_view]="onGrid"
*ngIf="prodService.product && prodService.product.length > 0"
>
<li *ngFor="let product of prodService.product; let i = index">
<div class="product_image">
<img
[src]="product.image"
onerror="this.src='../assets/[email protected]'"
(click)="prodDetails(i)"
/>
<div
[ngClass]="checkFavStatus(product.prodId)"
(click)="changeFav(product.prodId)"
></div>
<div class="featured_badge" *ngIf="product.featured">Featured</div>
</div>
<h5 class="ellipse" (click)="prodDetails(i)">{{product.prodName}}</h5>
<p (click)="prodDetails(i)">
A$ {{product.price}}<span class="offer" *ngIf="product.discount > 0"
>-{{product.discount}}%</span
>
</p>
</li>
</ul>
<div class="no-result-wrapper" *ngIf="prodService.product.length === 0">
<img src="../../assets/basket.png" />
<h1>No result found</h1>
<button (click)="goToPage('home')">home</button>
</div>
<div class="sort_wrappper" *ngIf="isShow" [@slideInOut]> <div class="sort_wrappper" *ngIf="isShow" [@slideInOut]>
<div class="sort_inner"> <div class="sort_inner">
<h4>Sort By</h4> <h4>Sort By</h4>
...@@ -104,9 +145,20 @@ ...@@ -104,9 +145,20 @@
</div> </div>
</div> </div>
</div> </div>
<div class="loader" *ngIf="loader">
<div class="lds-ripple">
<div></div>
<div></div>
</div>
</div>
</ion-content> </ion-content>
<div class="search_item_list" *ngIf="searchShow" [@slideInOut]> <div class="search_item_list" *ngIf="searchShow" [@slideInOut]>
<ul *ngIf="searchService.searchList"> <ul *ngIf="searchService.searchList">
<li *ngFor="let search of searchService.searchList" (click)="viewPage(search)">{{search.text}}</li> <li
</ul> *ngFor="let search of searchService.searchList"
</div> (click)="viewPage(search)"
\ No newline at end of file >
{{search.text}}
</li>
</ul>
</div>
src/app/productlist/productlist.page.scss
.product_list { .product_list {
padding-bottom: 50px; padding-bottom: 50px;
.product_title { .product_title {
padding: 10px; padding: 10px;
padding-bottom: 20px; padding-bottom: 20px;
padding-top: 20px; padding-top: 20px;
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
color: rgba(41, 40, 91, 1); color: rgba(41, 40, 91, 1);
}
.product_taskbar {
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
height: 45px;
width: calc(100% - 20px);
margin: 0 auto;
background-image: url('../../assets/Group109_2.png');
background-position: left;
background-repeat: no-repeat;
background-size: 12px;
.filter {
width: 45px;
height: 45px;
cursor: pointer;
} }
.product_taskbar { .viewset {
border-bottom: 1px solid rgba(0, 0, 0, 0.16); width: 45px;
height: 45px; height: 45px;
width: calc(100% - 20px); cursor: pointer;
margin: 0 auto; .grid_view {
background-image: url("../../assets/Group109_2.png"); width: 50%;
background-position: left; height: 100%;
cursor: pointer;
background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 12px; background-size: 15px;
.filter { background-image: url('../../assets/Group111_2.png');
width: 45px; }
height: 45px; .line_view {
cursor: pointer; background-image: url('../../assets/Group110_2.png');
cursor: pointer;
}
}
}
.grid_view {
li {
width: 100%;
transition-timing-function: ease-in-out;
transition: 1s;
transform: translateX(0);
.product_image {
height: 390px;
}
}
}
ul {
padding: 10px;
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
li {
width: calc(100% - 50%);
display: inline-block;
border: 10px solid #fff;
border-top: none;
border-bottom: none;
margin-bottom: 20px;
transition-timing-function: ease-in-out;
transform: translateX(2%);
transition: 1s;
.product_image {
height: 235px;
position: relative;
.featured_badge {
position: absolute;
top: 20px;
left: 0px;
color: #fff;
background-color: rgba(41, 40, 91, 1);
padding: 2px;
padding-left: 10px;
padding-right: 10px;
font-size: 13px;
} }
.viewset { .fav_icon {
width: 45px; position: absolute;
height: 45px; top: 10px;
cursor: pointer; right: 10px;
.grid_view { font-size: 27px;
width: 50%; width: 30px;
height: 100%; height: 30px;
cursor: pointer; background-image: url('../../assets/Group32_2.png');
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 15px; background-size: 24px;
background-image: url("../../assets/Group111_2.png");
}
.line_view {
background-image: url("../../assets/Group110_2.png");
cursor: pointer;
}
} }
} .fav_fill {
.grid_view { position: absolute;
li { top: 10px;
width: 100%; right: 10px;
transition-timing-function: ease-in-out; font-size: 27px;
transition: 1s; width: 30px;
transform: translateX(0); height: 30px;
.product_image { background-image: url('../../assets/fav_fill.png');
height: 390px; background-position: center;
} background-repeat: no-repeat;
background-size: 24px;
} }
} img {
ul { width: 100%;
padding: 10px; height: 100%;
padding-bottom: 0px; object-fit: cover;
padding-top: 0px; object-position: center;
}
}
h5 {
margin: 0px; margin: 0px;
li { padding: 0px;
width: calc(100% - 50%); color: rgba(59, 57, 77, 1);
display: inline-block; padding-top: 5px;
border: 10px solid #fff; padding-bottom: 5px;
border-top: none; }
border-bottom: none; p {
margin-bottom: 20px; margin: 0px;
transition-timing-function: ease-in-out; padding: 0px;
transform: translateX(2%); color: rgba(176, 174, 199, 1);
transition: 1s; span {
.product_image { text-decoration: line-through;
height: 235px; margin-left: 10px;
position: relative; color: rgba(215, 213, 228, 1);
.featured_badge {
position: absolute;
top: 20px;
left: 0px;
color: #fff;
background-color: rgba(41, 40, 91, 1);
padding: 2px;
padding-left: 10px;
padding-right: 10px;
font-size: 13px;
}
.fav_icon {
position: absolute;
top: 10px;
right: 10px;
font-size: 27px;
width: 30px;
height: 30px;
background-image: url("../../assets/Group32_2.png");
background-position: center;
background-repeat: no-repeat;
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 {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
padding-top: 5px;
padding-bottom: 5px;
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
span {
text-decoration: line-through;
margin-left: 10px;
color: rgba(215, 213, 228, 1)
}
.offer {
color: #fff;
background-color: rgba(41, 40, 91, 1);
border-radius: 4px;
text-decoration: none;
padding: 3px;
font-size: 13px;
}
}
} }
.offer {
color: #fff;
background-color: rgba(41, 40, 91, 1);
border-radius: 4px;
text-decoration: none;
padding: 3px;
font-size: 13px;
}
}
} }
.ellipse { }
white-space: nowrap; .ellipse {
width: 180px; white-space: nowrap;
overflow: hidden; width: 180px;
text-overflow: ellipsis; overflow: hidden;
} text-overflow: ellipsis;
}
} }
.sort_wrappper { .sort_wrappper {
height: 100vh; height: 100vh;
width: 100%; width: 100%;
position: fixed; position: fixed;
top: 0px; top: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
z-index: 99; z-index: 99;
.sort_inner { .sort_inner {
margin: 0 auto; margin: 0 auto;
width: 280px; width: 280px;
padding: 10px; padding: 10px;
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
padding-bottom: 15px; padding-bottom: 15px;
background-color: #fff; background-color: #fff;
position: relative; position: relative;
-webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
top: 25%; top: 25%;
border-radius: 10px; border-radius: 10px;
h4 { h4 {
text-align: center; text-align: center;
color: rgba(59, 57, 77, 1); color: rgba(59, 57, 77, 1);
margin: 0px; margin: 0px;
font-weight: bold; font-weight: bold;
padding: 10px; padding: 10px;
font-size: 18px; font-size: 18px;
border-bottom: 1px solid rgba(0, 0, 0, 0.16); border-bottom: 1px solid rgba(0, 0, 0, 0.16);
padding-bottom: 20px; padding-bottom: 20px;
} }
ul { ul {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
li { li {
list-style: none; list-style: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.16); border-bottom: 1px solid rgba(0, 0, 0, 0.16);
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
.styled-checkbox { .styled-checkbox {
position: absolute; // take it out of document flow position: absolute; // take it out of document flow
opacity: 0; // hide it opacity: 0; // hide it
&+label { & + label {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
width: 100%; width: 100%;
} }
// Box. // Box.
&+label:before { & + label:before {
content: ''; content: '';
margin-right: 10px; margin-right: 10px;
display: inline-block; display: inline-block;
vertical-align: text-top; vertical-align: text-top;
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 5px; border-radius: 5px;
background: white; background: white;
border: 1px solid rgba(215, 213, 228, 1); border: 1px solid rgba(215, 213, 228, 1);
} }
&:checked+label:before { &:checked + label:before {
background: #29285b; background: #29285b;
} }
// Disabled state label. // Disabled state label.
&:disabled+label { &:disabled + label {
color: #b8b8b8; color: #b8b8b8;
cursor: auto; cursor: auto;
} }
// Disabled box. // Disabled box.
&:disabled+label:before { &:disabled + label:before {
box-shadow: none; box-shadow: none;
background: #ddd; background: #ddd;
} }
// Checkmark. Could be replaced with an image // Checkmark. Could be replaced with an image
&:checked+label:after { &:checked + label:after {
content: ''; content: '';
position: absolute; position: absolute;
left: 6px; left: 6px;
top: 10px; top: 10px;
background: white; background: white;
width: 2px; width: 2px;
height: 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; box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white,
transform: rotate(45deg); 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
} transform: rotate(45deg);
} }
}
}
.sort_footer {
padding-top: 10px;
button {
border-radius: 8px;
height: 40px;
width: 48%;
color: #fff;
font-size: 15px;
font-weight: lighter;
}
.submit {
background-color: rgba(41, 40, 91, 1);
}
.cancel {
background-color: rgba(215, 213, 228, 1);
}
} }
}
}
.sort_footer {
padding-top: 10px;
button {
border-radius: 8px;
height: 40px;
width: 48%;
color: #fff;
font-size: 15px;
font-weight: lighter;
}
.submit {
background-color: rgba(41, 40, 91, 1);
}
.cancel {
background-color: rgba(215, 213, 228, 1);
}
} }
}
} }
.load-back { .load-back {
height: 100%; height: 100%;
width: 100%; width: 100%;
background-image: url("../../assets/giphy.gif"); background-image: url('../../assets/giphy.gif');
background-position: center; background-position: center;
} }
\ No newline at end of file
.no-result-wrapper {
text-align: center;
padding-top: 40%;
img {
width: 100px;
}
h1 {
font-size: 18px;
font-weight: bolder;
text-transform: uppercase;
color: #3b394d;
}
button {
background-color: #29285b;
border-radius: 8px;
height: 50px;
width: 48%;
color: #fff;
font-size: 18px;
font-weight: lighter;
text-transform: uppercase;
margin-top: 10px;
}
}
src/app/productlist/productlist.page.ts
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 { Router, ActivatedRoute, NavigationExtras } from "@angular/router"; import { Router, ActivatedRoute, NavigationExtras } from '@angular/router';
import { ProductsService } from "./../../config/products.service"; import { ProductsService } from './../../config/products.service';
import { ServiceService } from "./../../config/service.service"; import { ServiceService } from './../../config/service.service';
import { SearchService } from "./../../config/search.service"; import { SearchService } from './../../config/search.service';
import { ModalController } from '@ionic/angular';
import { SearchmodalPage } from '../searchmodal/searchmodal.page';
import { SubjectService } from './../../config/subject.service';
@Component({ @Component({
selector: "app-productlist", selector: 'app-productlist',
templateUrl: "./productlist.page.html", templateUrl: './productlist.page.html',
styleUrls: ["./productlist.page.scss"], styleUrls: ['./productlist.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%)' }))
]) ])
]) ])
] ]
...@@ -28,6 +31,7 @@ export class ProductlistPage implements OnInit { ...@@ -28,6 +31,7 @@ export class ProductlistPage implements OnInit {
data: any; data: any;
searchShow = false; searchShow = false;
sortValue: string; sortValue: string;
loader: boolean;
constructor( constructor(
private router: Router, private router: Router,
...@@ -35,12 +39,18 @@ export class ProductlistPage implements OnInit { ...@@ -35,12 +39,18 @@ export class ProductlistPage implements OnInit {
private location: Location, private location: Location,
public prodService: ProductsService, public prodService: ProductsService,
public service: ServiceService, public service: ServiceService,
public searchService: SearchService public searchService: SearchService,
private modalController: ModalController,
private subjectService: SubjectService
) { ) {
this.service.get("params").then(val => { this.loader = true;
this.service.get('params').then(val => {
this.data = val; this.data = val;
console.log(this.data); console.log(this.data);
this.prodService.prodList(this.data.uid); this.prodService.prodList(this.data.uid);
setTimeout(() => {
this.loader = false;
}, 2000);
}); });
} }
...@@ -64,9 +74,15 @@ export class ProductlistPage implements OnInit { ...@@ -64,9 +74,15 @@ export class ProductlistPage implements OnInit {
this.onGrid = !this.onGrid; this.onGrid = !this.onGrid;
} }
clickSearch() { async clickSearch() {
this.searchShow = true; this.subjectService.setTabData(false);
this.searchService.searchList = []; const modal = await this.modalController.create({
component: SearchmodalPage
});
modal.onDidDismiss().then(dataReturned => {
this.subjectService.setTabData(true);
});
return await modal.present();
} }
searchClose() { searchClose() {
...@@ -75,7 +91,7 @@ export class ProductlistPage implements OnInit { ...@@ -75,7 +91,7 @@ export class ProductlistPage implements OnInit {
prodDetails(index: number) { prodDetails(index: number) {
this.prodService.setProd(this.prodService.product[index]); this.prodService.setProd(this.prodService.product[index]);
this.router.navigateByUrl("productdetail"); this.router.navigateByUrl('productdetail');
document.body.scrollTop = document.documentElement.scrollTop = 0; document.body.scrollTop = document.documentElement.scrollTop = 0;
} }
...@@ -85,10 +101,10 @@ export class ProductlistPage implements OnInit { ...@@ -85,10 +101,10 @@ export class ProductlistPage implements OnInit {
console.log(this.prodService.fav); 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');
} else { } else {
this.prodService.fav.push(index); this.prodService.fav.push(index);
this.prodService.changeFav(index, "no"); this.prodService.changeFav(index, 'no');
} }
return; return;
console.log(this.prodService.fav); console.log(this.prodService.fav);
...@@ -106,7 +122,7 @@ export class ProductlistPage implements OnInit { ...@@ -106,7 +122,7 @@ export class ProductlistPage implements OnInit {
checkFavStatus(index) { checkFavStatus(index) {
const state = this.prodService.fav.findIndex(x => x === index); const state = this.prodService.fav.findIndex(x => x === index);
return state > -1 ? "fav_fill" : "fav_icon"; return state > -1 ? 'fav_fill' : 'fav_icon';
} }
searchFun(data: string) { searchFun(data: string) {
...@@ -117,19 +133,19 @@ export class ProductlistPage implements OnInit { ...@@ -117,19 +133,19 @@ export class ProductlistPage implements OnInit {
console.log(datas); console.log(datas);
let data; let data;
let url; let url;
if (datas.type === "shopper") { if (datas.type === 'shopper') {
data = datas.data; data = datas.data;
this.service.set("params", data); this.service.set('params', data);
url = "productlist"; url = 'productlist';
} else if (datas.type === "category") { } else if (datas.type === 'category') {
data = datas.data; data = datas.data;
this.service.set("params", data); this.service.set('params', data);
url = "catstorelist"; url = 'catstorelist';
} else { } else {
data = datas.data; data = datas.data;
data.size = this.service.splitSep(data.size); data.size = this.service.splitSep(data.size);
data.tag = this.service.splitSep(data.tag); data.tag = this.service.splitSep(data.tag);
(data.color = this.service.splitSep(data.color)), (url = "productdetail"); (data.color = this.service.splitSep(data.color)), (url = 'productdetail');
this.prodService.setProd(data); this.prodService.setProd(data);
} }
this.searchClose(); this.searchClose();
......
src/app/profile/profile.page.html
<div class="nav_header"> <div class="nav_header">
<ion-menu-toggle> <ion-menu-toggle>
<button class="nav_btn nav_menu floatLeft"></button> <button class="nav_btn nav_menu floatLeft"></button>
</ion-menu-toggle> </ion-menu-toggle>
<div class="nav_title floatLeft"> <div class="nav_title floatLeft">
<img src="../../assets/Group [email protected]" /> <img src="../../assets/Group [email protected]" />
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<ion-content> <ion-content>
<div class="profile_wrapper" *ngIf="loggedUser"> <div class="profile_wrapper" *ngIf="loggedUser">
<div class="profile_banner"> <div class="profile_banner">
<!-- <div class="profile_circle"> <!-- <div class="profile_circle">
<div class="edit"></div> <div class="edit"></div>
</div> --> </div> -->
<div class="profile_circle"> <div class="profile_circle">
<img [src]="loggedUser.profilePhoto" onerror="this.src='./../../assets/profile_banner.png'" /> <img
<div class="edit"></div> [src]="loggedUser.profilePhoto"
<input type="file" accept="image/*" (change)="fileChange($event)" /> onerror="this.src='./../../assets/profile_banner.png'"
</div> />
<div class="edit"></div>
<input type="file" accept="image/*" (change)="fileChange($event)" />
</div>
<h5>{{loggedUser.name}}</h5> <h5>{{loggedUser.name}}</h5>
<p (click)="istoggle()">LOGOUT</p> <p (click)="istoggle()">LOGOUT</p>
</div> </div>
<div class="account_wrapper"> <div class="account_wrapper">
<div class="account_header"> <div class="account_header">
<h5 class="floatLeft">ACCOUNT INFORMATION</h5> <h5 class="floatLeft">ACCOUNT INFORMATION</h5>
<span class="floatRight" (click)="goToPage('changedetails', user && user)"><img <span
src="../../assets/edit.png" /></span> class="floatRight"
<div class="clear"></div> (click)="goToPage('changedetails', user && user)"
</div> ><img src="../../assets/edit.png"
<div class="row"> /></span>
<ion-row> <div class="clear"></div>
<ion-col class="textLeft p0"> </div>
<p> <div class="row">
Phone <ion-row>
<span *ngIf="loggedUser.phoneVerified == true">Verified</span> <ion-col class="textLeft p0">
<span *ngIf="loggedUser.phoneVerified == false">Not Verified yet</span> <p>
</p> Phone
</ion-col> <span *ngIf="loggedUser.phoneVerified == true">Verified</span>
<ion-col class="textRight p0"> <span *ngIf="loggedUser.phoneVerified == false"
<h6>{{loggedUser.phone}}</h6> >Not Verified yet</span
</ion-col> >
</ion-row> </p>
</div> </ion-col>
<div class="row"> <ion-col class="textRight p0">
<ion-row> <h6>{{loggedUser.phone}}</h6>
<ion-col class="textLeft p0"> </ion-col>
<p> </ion-row>
Email<span *ngIf="userData && userData.emailVerified == true">Verified</span> </div>
<span *ngIf="loggedUser.emailVerified == false">Not Verified yet</span> <div class="row">
</p> <ion-row>
</ion-col> <ion-col class="textLeft p0">
<ion-col class="textRight p0"> <p>
<h6>{{loggedUser.emailId}}</h6> Email<span *ngIf="userData && userData.emailVerified == true"
</ion-col> >Verified</span
</ion-row> >
</div> <span *ngIf="loggedUser.emailVerified == false"
<hr /> >Not Verified yet</span
<ion-row> >
<ion-col class="textLeft p0"> </p>
<p>Wishlist</p> </ion-col>
</ion-col> <ion-col class="textRight p0">
<ion-col class="textRight p0"> <h6>{{loggedUser.emailId}}</h6>
<h6>(3)</h6> </ion-col>
</ion-col> </ion-row>
</ion-row> </div>
<hr /> <hr />
<ion-row> <ion-row>
<ion-col class="textLeft p0"> <ion-col class="textLeft p0">
<p>Address</p> <p>Wishlist</p>
</ion-col> </ion-col>
<ion-col class="textRight p0"> <ion-col class="textRight p0" (click)="goToPage('wishlist')">
<h6>(1)</h6> <h6>(0)</h6>
</ion-col> </ion-col>
</ion-row> </ion-row>
<hr /> <hr />
<ion-row> <ion-row>
<ion-col class="textLeft p0"> <ion-col class="textLeft p0">
<p>My Cards</p> <p>Address</p>
</ion-col> </ion-col>
<ion-col class="textRight p0"> <ion-col class="textRight p0" (click)="goToPage('address')">
<h6> <h6 *ngIf="addressService.addList">
<ion-icon name="arrow-forward"></ion-icon> ({{addressService.addressList.length}})
</h6> </h6>
</ion-col> </ion-col>
</ion-row> </ion-row>
<hr /> <hr />
<ion-row> <!-- <ion-row>
<ion-col class="textLeft p0"> <ion-col class="textLeft p0">
<p>My Order</p> <p>My Cards</p>
</ion-col> </ion-col>
<ion-col class="textRight p0" (click)="goToPage('myorder')"> <ion-col class="textRight p0" (click)="goToPage('addcard')">
<h6> <h6>
<ion-icon name="arrow-forward"></ion-icon> <ion-icon name="arrow-forward"></ion-icon>
</h6> </h6>
</ion-col> </ion-col>
</ion-row> </ion-row>
<hr /> <hr /> -->
<ion-row> <ion-row>
<ion-col class="textLeft p0"> <ion-col class="textLeft p0">
<p>Currency</p> <p>My Order</p>
</ion-col> </ion-col>
<ion-col class="textRight p0"> <ion-col class="textRight p0" (click)="goToPage('myorder')">
<h6> <h6>
<span>AUD</span> <ion-icon name="arrow-forward"></ion-icon>
</h6> </h6>
</ion-col> </ion-col>
</ion-row> </ion-row>
</div> <hr />
<div class="logout-pop-wrapper" *ngIf="isShow" [@slideInOut]> <ion-row>
<div class="logout_inner"> <ion-col class="textLeft p0">
<h4>Logout</h4> <p>Currency</p>
<p>Are you sure to Logout ?</p> </ion-col>
<div class="logout_footer"> <ion-col class="textRight p0">
<button class="btn-cancel floatLeft" (click)="istoggle();"> <h6>
<span>AUD</span>
</h6>
</ion-col>
</ion-row>
</div>
<div class="logout-pop-wrapper" *ngIf="isShow" [@slideInOut]>
<div class="logout_inner">
<h4>Logout</h4>
<p>Are you sure to Logout ?</p>
<div class="logout_footer">
<button class="btn-cancel floatLeft" (click)="istoggle();">
Cancel Cancel
</button> </button>
<button class="btn-logout floatRight" (click)="authService.SignOut(); istoggle()"> <button
class="btn-logout floatRight"
(click)="authService.SignOut(); istoggle()"
>
Logout Logout
</button> </button>
<div class="clear"></div>
</div>
</div>
</div> </div>
<div class="clear"></div>
</div>
</div> </div>
</div> </div>
</ion-content> </ion-content>
\ No newline at end of file
src/app/signup/signup.page.html
...@@ -174,6 +174,12 @@ ...@@ -174,6 +174,12 @@
</div> </div>
</div> </div>
</div> </div>
<div class="loader" *ngIf="register.loader">
<div class="lds-ripple">
<div></div>
<div></div>
</div>
</div>
</ion-content> </ion-content>
<div class="terms_wrapper" *ngIf="menuShow" [@slideInOut]> <div class="terms_wrapper" *ngIf="menuShow" [@slideInOut]>
<div class="terms_inner"> <div class="terms_inner">
......
src/app/storelist/storelist.page.html
...@@ -4,13 +4,13 @@ ...@@ -4,13 +4,13 @@
<input <input
class="search_bar" class="search_bar"
placeholder="Search here.. eg:shirts, retailers etc..." placeholder="Search here.. eg:shirts, retailers etc..."
(click)="clickSearch()" (click)="searchModal()"
/> />
</div> </div>
<button <button
class="nav_btn nav_search floatRight" class="nav_btn nav_search floatRight"
*ngIf="!searchShow" *ngIf="!searchShow"
(click)="clickSearch()" (click)="searchModal()"
></button> ></button>
<button <button
class="nav_btn nav_close floatRight" class="nav_btn nav_close floatRight"
...@@ -78,6 +78,12 @@ ...@@ -78,6 +78,12 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="loader" *ngIf="loader">
<div class="lds-ripple">
<div></div>
<div></div>
</div>
</div>
</ion-content> </ion-content>
<div class="search_item_list" *ngIf="searchShow" [@slideInOut]> <div class="search_item_list" *ngIf="searchShow" [@slideInOut]>
......
src/app/storelist/storelist.page.ts
import { Component, OnInit } from "@angular/core"; import { Component, OnInit } from '@angular/core';
import { trigger, transition, animate, style } from "@angular/animations"; import { trigger, transition, animate, style } from '@angular/animations';
import { Router } from "@angular/router"; import { Router } from '@angular/router';
import { Location } from "@angular/common"; import { Location } from '@angular/common';
import { ServiceService } from "./../../config/service.service"; import { ServiceService } from './../../config/service.service';
import { ShoppersService } from "./../../config/shopper.service"; import { ShoppersService } from './../../config/shopper.service';
import { SearchService } from "../../config/search.service"; import { SearchService } from '../../config/search.service';
import { ModalController } from '@ionic/angular';
import { SearchmodalPage } from '../searchmodal/searchmodal.page';
import { SubjectService } from './../../config/subject.service';
@Component({ @Component({
selector: "app-storelist", selector: 'app-storelist',
templateUrl: "./storelist.page.html", templateUrl: './storelist.page.html',
styleUrls: ["./storelist.page.scss"], styleUrls: ['./storelist.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%)' }))
]) ])
]) ])
] ]
...@@ -27,24 +30,31 @@ export class StorelistPage implements OnInit { ...@@ -27,24 +30,31 @@ export class StorelistPage implements OnInit {
slidesPerView: 1.5 slidesPerView: 1.5
}; };
data: any; data: any;
loader: boolean;
constructor( constructor(
public router: Router, public router: Router,
public location: Location, public location: Location,
public service: ServiceService, public service: ServiceService,
public shopperService: ShoppersService, public shopperService: ShoppersService,
private searchService: SearchService private searchService: SearchService,
private modalController: ModalController,
private subjectService: SubjectService
) { ) {
this.service.get("params").then(val => { this.loader = true;
this.service.get('params').then(val => {
this.data = val; this.data = val;
this.shopperService.shopperList(this.data.cId, "centerId"); this.shopperService.shopperList(this.data.cId, 'centerId');
setTimeout(() => {
this.loader = false;
}, 2000);
}); });
} }
ngOnInit() {} ngOnInit() {}
goToPage(path, data = null) { goToPage(path, data = null) {
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;
} }
...@@ -58,6 +68,17 @@ export class StorelistPage implements OnInit { ...@@ -58,6 +68,17 @@ export class StorelistPage implements OnInit {
this.searchService.searchList = []; this.searchService.searchList = [];
} }
async searchModal() {
this.subjectService.setTabData(false);
const modal = await this.modalController.create({
component: SearchmodalPage
});
modal.onDidDismiss().then(dataReturned => {
this.subjectService.setTabData(true);
});
return await modal.present();
}
searchClose() { searchClose() {
this.searchShow = false; this.searchShow = false;
} }
......
src/app/verification/verification.page.html
<div class="nav_header"> <div class="nav_header">
<button class="nav_btn nav_back floatLeft" (click)="goBack()"> <button class="nav_btn nav_back floatLeft" (click)="goBack()">
<img src="../assets/Group17_2.png"> <img src="../assets/Group17_2.png" />
</button> </button>
<div class="nav_title floatLeft"> <div class="nav_title floatLeft">
<h4>VERIFICATION</h4> <h4>VERIFICATION</h4>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<ion-content> <ion-content>
<div class="verification_div"> <div class="verification_div" *ngIf="authService.userPostData">
<div class="form_div"> <div class="form_div">
<div class="row"> <div class="row">
<p>We have sent and OTP to</p> <p>We have sent and OTP to</p>
<h6>+01 {{authService.userPostData.phone}} </h6> <h6>+01 {{authService.userPostData.phone}}</h6>
</div> </div>
<div class="row"> <div class="row">
<input class="" type="number" placeholder="Type OTP" maxlength="4" #otp required> <input
</div> class=""
<div class="row"> type="number"
<button class="login_btn" (click)="authService.verify(otp.value)">SUBMIT</button> placeholder="Type OTP"
</div> maxlength="4"
<div class="row"> #otp
<button class="resend_btn" (click)="authService.resend()">RESEND</button> required
</div> />
<h6>OTP: {{authService.userPostData.otp}}</h6> </div>
</div> <div class="row">
<button class="login_btn" (click)="authService.verify(otp.value)">
SUBMIT
</button>
</div>
<div class="row">
<button class="resend_btn" (click)="authService.resend()">
RESEND
</button>
</div>
<h6>OTP: {{authService.userPostData.otp}}</h6>
</div>
</div>
<div class="loader" *ngIf="authService.loader">
<div class="lds-ripple">
<div></div>
<div></div>
</div> </div>
</div>
</ion-content> </ion-content>
\ No newline at end of file
src/app/wishlist/wishlist.page.html
<div class="nav_header"> <div class="nav_header">
<button class="nav_btn nav_back floatLeft" (click)="goBack()"> <button class="nav_btn nav_back floatLeft" (click)="goBack()">
<img src="../assets/Group17_2.png"> <img src="../assets/Group17_2.png" />
</button> </button>
<div class="nav_title floatLeft"> <div class="nav_title floatLeft">
<h4>WISHLIST</h4> <h4>WISHLIST</h4>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<ion-content> <ion-content>
<!-- <div class="wishlist-wrapper">
<div class="wishlist-wrapper">
<ul> <ul>
<li> <li>
<div class="wishlist_image"> <div class="wishlist_image">
...@@ -39,17 +38,16 @@ ...@@ -39,17 +38,16 @@
<div class="clear"></div> <div class="clear"></div>
</li> </li>
</ul> </ul>
</div> </div> -->
<div class="empty-wishlist-wrapper">
<img src="../../assets/wishlist.png">
<h1>There is no products added</h1>
<button>shop now</button>
</div>
<div class="footer-btns-wrapper"> <div class="empty-wishlist-wrapper">
<button class="btn-clear">Clear All</button> <img src="../../assets/wishlist.png" />
<button class="btn-cart">add all to cart</button> <h1>There is no products added</h1>
</div> <button (click)="goToPage('home')">shop now</button>
</div>
</ion-content> <div class="footer-btns-wrapper">
\ No newline at end of file <button class="btn-clear">Clear All</button>
<button class="btn-cart">add all to cart</button>
</div>
</ion-content>
src/app/wishlist/wishlist.page.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common'; import { Location } from '@angular/common';
import { Router, ActivatedRoute } from '@angular/router';
@Component({ @Component({
selector: 'app-wishlist', selector: 'app-wishlist',
...@@ -7,11 +8,16 @@ import { Location } from '@angular/common'; ...@@ -7,11 +8,16 @@ import { Location } from '@angular/common';
styleUrls: ['./wishlist.page.scss'] styleUrls: ['./wishlist.page.scss']
}) })
export class WishlistPage implements OnInit { export class WishlistPage implements OnInit {
constructor(private location: Location) {} constructor(private location: Location, private router: Router) {}
ngOnInit() {} ngOnInit() {}
goBack() { goBack() {
this.location.back(); this.location.back();
} }
goToPage(path, data = null) {
this.router.navigateByUrl(path, { queryParams: data });
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
} }
src/config/auth.service.ts
import { Injectable } from "@angular/core"; import { Injectable } from '@angular/core';
import { User, Signup, Address } from "./services/user"; import { User, Signup, Address } from './services/user';
import { auth } from "firebase/app"; import { auth } from 'firebase/app';
import { Router, ActivatedRoute } from "@angular/router"; import { Router, ActivatedRoute } from '@angular/router';
import { AngularFireAuth } from "@angular/fire/auth"; import { AngularFireAuth } from '@angular/fire/auth';
import { import {
AngularFirestore, AngularFirestore,
AngularFirestoreDocument, AngularFirestoreDocument,
AngularFirestoreCollection AngularFirestoreCollection
} from "@angular/fire/firestore"; } from '@angular/fire/firestore';
import { ServiceService } from "./../config/service.service"; import { ServiceService } from './../config/service.service';
import { SubjectService } from "./../config/subject.service"; import { SubjectService } from './../config/subject.service';
import { GooglePlus } from "@ionic-native/google-plus/ngx"; import { GooglePlus } from '@ionic-native/google-plus/ngx';
import { take } from "rxjs/operators"; import { take } from 'rxjs/operators';
import { from } from "rxjs"; import { from } from 'rxjs';
@Injectable({ @Injectable({
providedIn: "root" providedIn: 'root'
}) })
export class AuthService { export class AuthService {
loader: boolean;
constructor( constructor(
public afs: AngularFirestore, public afs: AngularFirestore,
public afAuth: AngularFireAuth, public afAuth: AngularFireAuth,
...@@ -26,30 +27,36 @@ export class AuthService { ...@@ -26,30 +27,36 @@ export class AuthService {
private subjectService: SubjectService, private subjectService: SubjectService,
private googlePlus: GooglePlus private googlePlus: GooglePlus
) { ) {
this.loader = true;
this.type = 1; this.type = 1;
this.afAuth.authState.subscribe(user => { this.afAuth.authState.subscribe(user => {
console.log('here');
console.log(user);
if (user) { if (user) {
this.subjectService.sendLoginData(false); this.subjectService.sendLoginData(false);
this.userData = user; this.userData = user;
console.log(this.userData); console.log(this.userData);
this.service.set("user", JSON.stringify(this.userData)); this.service.set('user', JSON.stringify(this.userData));
this.SetUserData(user); this.SetUserData(user);
this.loader = false;
if (this.type === 1) { if (this.type === 1) {
this.router.navigateByUrl("home"); this.router.navigateByUrl('home');
} else { } else {
this.router.navigateByUrl("verification"); this.router.navigateByUrl('verification');
} }
} else { } else {
console.log('here too');
this.loader = false;
this.subjectService.sendLoginData(true); this.subjectService.sendLoginData(true);
this.service.set("user", null); this.service.set('user', null);
JSON.parse(localStorage.getItem("user")); JSON.parse(localStorage.getItem('user'));
this.router.navigateByUrl("login"); this.router.navigateByUrl('login');
} }
}); });
} }
get isLoggedIn(): boolean { get isLoggedIn(): boolean {
const user = JSON.parse(localStorage.getItem("user")); const user = JSON.parse(localStorage.getItem('user'));
return user !== null && user.emailVerified !== false ? true : false; return user !== null && user.emailVerified !== false ? true : false;
} }
userData: any; userData: any;
...@@ -59,25 +66,25 @@ export class AuthService { ...@@ -59,25 +66,25 @@ export class AuthService {
public asyc; public asyc;
public async SignIn(email: string, password: string) { public async SignIn(email: string, password: string) {
this.loader = true;
return this.afAuth.auth return this.afAuth.auth
.signInWithEmailAndPassword(email, password) .signInWithEmailAndPassword(email, password)
.then(result => { .then(result => {
console.log("success"); console.log('success');
document.body.scrollTop = document.documentElement.scrollTop = 0; document.body.scrollTop = document.documentElement.scrollTop = 0;
this.SetUserData(result.user); this.SetUserData(result.user);
}) })
.catch(error => { .catch(error => {
this.loader = false;
window.alert(error.message); window.alert(error.message);
}); });
} }
public async verify(otp: string) { public async verify(otp: string) {
console.log(this.userData.uid, otp); this.loader = true;
// tslint:disable-next-line:radix
// const otpnew = parseInt(otp);
const custRef: AngularFirestoreCollection<any> = this.afs.collection( const custRef: AngularFirestoreCollection<any> = this.afs.collection(
"customers", 'customers',
ref => ref.where("otp", "==", otp).where("uid", "==", this.userData.uid) ref => ref.where('otp', '==', otp).where('uid', '==', this.userData.uid)
); );
custRef custRef
.valueChanges() .valueChanges()
...@@ -85,31 +92,34 @@ export class AuthService { ...@@ -85,31 +92,34 @@ export class AuthService {
.subscribe((value: User[]) => { .subscribe((value: User[]) => {
if (value.length > 0) { if (value.length > 0) {
this.afs this.afs
.collection("customers") .collection('customers')
.doc(this.userData.uid) .doc(this.userData.uid)
.update({ otp: "", phoneVerified: true }); .update({ otp: '', phoneVerified: true });
this.service.set("type", 1); this.service.set('type', 1);
this.router.navigateByUrl("nearby"); this.loader = false;
this.router.navigateByUrl('nearby');
} else { } else {
window.alert("Please input valid OTP"); this.loader = false;
window.alert('Please input valid OTP');
} }
}); });
} }
profilePic(pic) { profilePic(pic) {
this.afs this.afs
.collection("customers") .collection('customers')
.doc(this.userData.uid) .doc(this.userData.uid)
.update({ profilePhoto: pic }); .update({ profilePhoto: pic });
} }
public async google(type: number) { public async google(type: number) {
this.loader = true;
this.type = type; this.type = type;
// this.googlePlus.login({}).then(res => console.log(res)).catch(err => console.error(err)); // this.googlePlus.login({}).then(res => console.log(res)).catch(err => console.error(err));
this.afAuth.auth this.afAuth.auth
.signInWithPopup(new auth.GoogleAuthProvider()) .signInWithPopup(new auth.GoogleAuthProvider())
.then(result => { .then(result => {
console.log("success"); console.log('success');
console.log(result.additionalUserInfo.isNewUser); console.log(result.additionalUserInfo.isNewUser);
if ( if (
result.additionalUserInfo && result.additionalUserInfo &&
...@@ -117,17 +127,34 @@ export class AuthService { ...@@ -117,17 +127,34 @@ export class AuthService {
) { ) {
this.socialSignUp(result); this.socialSignUp(result);
} }
})
.catch(err => {
this.loader = false;
}); });
} }
public async facebook(type: number) { public async facebook(type: number) {
console.log('here fab');
this.loader = true;
this.type = type; this.type = type;
this.afAuth.auth const This = this;
.signInWithPopup(new auth.FacebookAuthProvider()) setTimeout(() => {
.then(result => { This.loader = false;
console.log("success"); }, 3000);
console.log(result); try {
}); this.afAuth.auth
.signInWithPopup(new auth.FacebookAuthProvider())
.then(result => {
this.loader = false;
console.log('success');
console.log(result);
})
.catch(err => {
alert(err.message);
});
} catch (error) {
This.loader = false;
}
} }
SetUserData(user: any) { SetUserData(user: any) {
...@@ -135,6 +162,7 @@ export class AuthService { ...@@ -135,6 +162,7 @@ export class AuthService {
`customers/${user.uid}` `customers/${user.uid}`
); );
userRef.valueChanges().subscribe(value => { userRef.valueChanges().subscribe(value => {
console.log(value);
const userData: User = { const userData: User = {
uid: value.uid, uid: value.uid,
emailId: value.emailId, emailId: value.emailId,
...@@ -149,17 +177,19 @@ export class AuthService { ...@@ -149,17 +177,19 @@ export class AuthService {
loginType: value.loginType loginType: value.loginType
}; };
this.loggedUser = userData; this.loggedUser = userData;
this.service.set("userData", JSON.stringify(this.loggedUser)); this.service.set('userData', JSON.stringify(this.loggedUser));
this.subjectService.sendUserData(JSON.stringify(this.loggedUser)); this.subjectService.sendUserData(JSON.stringify(this.loggedUser));
console.log(this.loggedUser); console.log(this.loggedUser);
}); });
} }
public async SignOut() { public async SignOut() {
this.loader = true;
return this.afAuth.auth.signOut().then(() => { return this.afAuth.auth.signOut().then(() => {
this.subjectService.sendLoginData(true); this.subjectService.sendLoginData(true);
this.service.remove("user"); this.service.remove('user');
console.log("logout"); this.loader = false;
console.log('logout');
}); });
} }
...@@ -167,9 +197,9 @@ export class AuthService { ...@@ -167,9 +197,9 @@ export class AuthService {
this.type = 2; this.type = 2;
console.log(userData.user); console.log(userData.user);
const currencyData = { const currencyData = {
currId: "123", currId: '123',
currName: "Australian dollar", currName: 'Australian dollar',
symbol: "A$" symbol: 'A$'
}; };
const otp = Math.floor(1000 + Math.random() * 9000); const otp = Math.floor(1000 + Math.random() * 9000);
userData = userData.user; userData = userData.user;
...@@ -189,15 +219,16 @@ export class AuthService { ...@@ -189,15 +219,16 @@ export class AuthService {
this.userPostData = postData; this.userPostData = postData;
console.log(postData); console.log(postData);
this.afs this.afs
.collection("customers") .collection('customers')
.doc(userData.uid) .doc(userData.uid)
.set(postData) .set(postData)
.then(() => { .then(() => {
console.log("successs"); console.log('successs');
}); });
} }
signup(userData: Signup) { signup(userData: Signup) {
this.loader = true;
this.type = 2; this.type = 2;
console.log(userData); console.log(userData);
const otp = Math.floor(1000 + Math.random() * 9000); const otp = Math.floor(1000 + Math.random() * 9000);
...@@ -207,15 +238,15 @@ export class AuthService { ...@@ -207,15 +238,15 @@ export class AuthService {
console.log(result.user); console.log(result.user);
this.afAuth.auth.currentUser.sendEmailVerification(); this.afAuth.auth.currentUser.sendEmailVerification();
const currencyData = { const currencyData = {
currId: "123", currId: '123',
currName: "Australian dollar", currName: 'Australian dollar',
symbol: "A$" symbol: 'A$'
}; };
const custData = result.user; const custData = result.user;
const postData: User = { const postData: User = {
uid: custData.uid, uid: custData.uid,
status: true, status: true,
profilePhoto: "", profilePhoto: '',
phoneVerified: false, phoneVerified: false,
phone: userData.phone, phone: userData.phone,
name: userData.name, name: userData.name,
...@@ -228,14 +259,16 @@ export class AuthService { ...@@ -228,14 +259,16 @@ export class AuthService {
this.userPostData = postData; this.userPostData = postData;
console.log(postData); console.log(postData);
this.afs this.afs
.collection("customers") .collection('customers')
.doc(custData.uid) .doc(custData.uid)
.set(postData) .set(postData)
.then(() => { .then(() => {
console.log("successs"); console.log('successs');
}); });
this.loader = false;
}) })
.catch(error => { .catch(error => {
this.loader = false;
window.alert(error.message); window.alert(error.message);
}); });
} }
...@@ -243,9 +276,9 @@ export class AuthService { ...@@ -243,9 +276,9 @@ export class AuthService {
createAddress(addressData: Address) { createAddress(addressData: Address) {
console.log(addressData); console.log(addressData);
console.log(this.userData.uid); console.log(this.userData.uid);
this.loader = true;
this.afs this.afs
.collection("address") .collection('address')
.add({ .add({
uid: this.userData.uid uid: this.userData.uid
}) })
...@@ -269,15 +302,19 @@ export class AuthService { ...@@ -269,15 +302,19 @@ export class AuthService {
const neworderId = docRef.id; const neworderId = docRef.id;
console.log(addrData); console.log(addrData);
this.afs this.afs
.collection("address") .collection('address')
.doc(neworderId) .doc(neworderId)
.set(addrData) .set(addrData)
.then(() => { .then(() => {
console.log("Address add Successfully"); console.log('Address add Successfully');
this.service.set("user", JSON.stringify(this.userData)); this.service.set('user', JSON.stringify(this.userData));
this.router.navigateByUrl("home"); this.router.navigateByUrl('home');
document.body.scrollTop = document.documentElement.scrollTop = 0; document.body.scrollTop = document.documentElement.scrollTop = 0;
})
.catch(err => {
this.loader = false;
}); });
this.loader = false;
}); });
return false; return false;
} }
......
src/config/products.service.ts
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from '@angular/fire/firestore'; import {
AngularFirestore,
AngularFirestoreCollection,
AngularFirestoreDocument
} from '@angular/fire/firestore';
import { take } from 'rxjs/operators'; import { take } from 'rxjs/operators';
import { ServiceService } from './../config/service.service'; import { ServiceService } from './../config/service.service';
import { Products } from './services/product'; import { Products } from './services/product';
...@@ -30,7 +34,7 @@ export class ProductsService { ...@@ -30,7 +34,7 @@ export class ProductsService {
const state = true; const state = true;
// firebase query // firebase query
return new Promise (resolve => { return new Promise(resolve => {
const prodRef: AngularFirestoreCollection<any> = this.afs.collection( const prodRef: AngularFirestoreCollection<any> = this.afs.collection(
`product_gallery`, `product_gallery`,
ref => ref.where('skuId', '==', skuID) ref => ref.where('skuId', '==', skuID)
...@@ -39,7 +43,7 @@ export class ProductsService { ...@@ -39,7 +43,7 @@ export class ProductsService {
this.prodSlideImg = []; this.prodSlideImg = [];
const res = value; const res = value;
if (res.length > 0) { if (res.length > 0) {
res.forEach((item) => { res.forEach(item => {
this.prodSlideImg.push(item.downloadURL); this.prodSlideImg.push(item.downloadURL);
}); });
resolve(this.prodSlideImg); resolve(this.prodSlideImg);
...@@ -83,6 +87,7 @@ export class ProductsService { ...@@ -83,6 +87,7 @@ export class ProductsService {
shopper: item.shopper, shopper: item.shopper,
skuCode: item.skuCode, skuCode: item.skuCode,
status: item.status, status: item.status,
rating: item.rating,
size: this.service.splitSep(item.size), size: this.service.splitSep(item.size),
subCate: item.subCate, subCate: item.subCate,
tag: this.service.splitSep(item.tag) tag: this.service.splitSep(item.tag)
...@@ -143,6 +148,7 @@ export class ProductsService { ...@@ -143,6 +148,7 @@ export class ProductsService {
image: item.image, image: item.image,
price: item.price, price: item.price,
qty: item.qty, qty: item.qty,
rating: item.rating,
shopper: item.shopper, shopper: item.shopper,
skuCode: item.skuCode, skuCode: item.skuCode,
status: item.status, status: item.status,
...@@ -196,6 +202,7 @@ export class ProductsService { ...@@ -196,6 +202,7 @@ export class ProductsService {
price: item.price, price: item.price,
qty: item.qty, qty: item.qty,
shopper: item.shopper, shopper: item.shopper,
rating: item.rating,
skuCode: item.skuCode, skuCode: item.skuCode,
status: item.status, status: item.status,
size: this.service.splitSep(item.size), size: this.service.splitSep(item.size),
......
src/config/services/product.ts
export interface Products { export interface Products {
brand: string; brand: string;
category: string; category: string;
color: any; color: any;
discount: number; discount: number;
featured: boolean; featured: boolean;
image: string; image: string;
price: number; price: number;
prodCode: string; prodCode: string;
prodDesc: string; prodDesc: string;
prodId: string; prodId: string;
prodName: string; prodName: string;
prodStatus: boolean; prodStatus: boolean;
shopperId: string; shopperId: string;
qty: number; qty: number;
shopper: string; shopper: string;
size: string[]; size: string[];
skuCode: string; skuCode: string;
status: boolean; status: boolean;
subCate: boolean; subCate: boolean;
tag: string[]; rating: string;
tag: string[];
} }
src/config/subject.service.ts
...@@ -8,6 +8,7 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject'; ...@@ -8,6 +8,7 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject';
export class SubjectService { export class SubjectService {
private loginState = new BehaviorSubject<any>(null); private loginState = new BehaviorSubject<any>(null);
private DataState = new BehaviorSubject<any>(null); private DataState = new BehaviorSubject<any>(null);
private TabState = new BehaviorSubject<any>(null);
sendLoginData(state: any) { sendLoginData(state: any) {
this.loginState.next(state); this.loginState.next(state);
...@@ -24,4 +25,12 @@ export class SubjectService { ...@@ -24,4 +25,12 @@ export class SubjectService {
getUserData(): Observable<any> { getUserData(): Observable<any> {
return this.DataState.asObservable(); return this.DataState.asObservable();
} }
setTabData(state: any) {
return this.TabState.next(state);
}
getTabData(): Observable<any> {
return this.TabState.asObservable();
}
} }
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