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