Skip to content

G
getme
Commit 5e21eaa0 by Adarsh K
Options

new changes

parent 50b77964
Showing with 733 additions and 17 deletions
src/app/app-routing.module.ts
......@@ -59,6 +59,10 @@ const routes: Routes = [
loadChildren: './productlist/productlist.module#ProductlistPageModule'
},
{
path: 'keywordlist',
loadChildren: './keywordlist/keywordlist.module#KeywordlistPageModule'
},
{
path: 'productdetail',
loadChildren: './productdetail/productdetail.module#ProductdetailPageModule'
},
......
src/app/cart/cart.module.ts
......@@ -23,10 +23,10 @@ const routes: Routes = [
IonicModule,
AgmDirectionModule,
AgmCoreModule.forRoot({
apiKey: 'AIzaSyBn6hOlr6YHcZAmbptlsmbhvH5iQllWflE'
apiKey: 'AIzaSyBnCzDk6ec1OJFcW5FYgxP3LWVHMNumGDM'
}),
RouterModule.forChild(routes)
],
declarations: [CartPage]
})
export class CartPageModule {}
export class CartPageModule { }
src/app/cart/cart.page.html
......@@ -314,8 +314,7 @@
<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" />
(click)="setDefault(address.addressId, i)" [value]="address.addressId" #addressType />
<label for="styled-checkbox-{{i}}"> {{address.addressType}} </label>
</div>
<div class="floatLeft">
......
src/app/changeaddress/changeaddress.module.ts
......@@ -23,7 +23,7 @@ const routes: Routes = [
IonicModule,
AgmDirectionModule,
AgmCoreModule.forRoot({
apiKey: 'AIzaSyBn6hOlr6YHcZAmbptlsmbhvH5iQllWflE',
apiKey: 'AIzaSyBnCzDk6ec1OJFcW5FYgxP3LWVHMNumGDM',
libraries: ['geometry']
}),
RouterModule.forChild(routes)
......
src/app/home/home.module.ts
......@@ -27,7 +27,7 @@ const routes: Routes = [
IonicModule,
AgmDirectionModule,
AgmCoreModule.forRoot({
apiKey: 'AIzaSyBn6hOlr6YHcZAmbptlsmbhvH5iQllWflE'
apiKey: 'AIzaSyBnCzDk6ec1OJFcW5FYgxP3LWVHMNumGDM'
}),
RouterModule.forChild(routes)
],
......
src/app/keywordlist/keywordlist.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { KeywordlistPage } from './keywordlist.page';
const routes: Routes = [
{
path: '',
component: KeywordlistPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [KeywordlistPage]
})
export class KeywordlistPageModule { }
src/app/keywordlist/keywordlist.page.html 0 → 100644
<ion-header>
<div class="nav_header">
<ion-grid class="no-gutter">
<ion-row class="no-gutter">
<ion-col class="no-gutter" size="2">
<button class="nav_btn nav_back floatLeft" (click)="goBack()">
<img src="../assets/Group17_2.png" />
</button>
</ion-col>
<ion-col class="no-gutter" size="8">
<div class="nav_title floatLeft">
<input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="goToPage('searchmodal')" />
</div>
</ion-col>
<ion-col class="no-gutter" size="2">
<button class="nav_btn nav_search floatRight" *ngIf="!searchShow" (click)="goToPage('searchmodal')"></button>
<button class="nav_btn nav_close floatRight" *ngIf="searchShow" (click)="searchClose()"></button>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-header>
<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)" [innerHTML]="unEscape(product.prodName)"></h5>
<p (click)="prodDetails(i)">
A$ {{service.formatNumber(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>
<ul>
<!-- <li>
<input class="styled-checkbox" id="styled-checkbox-1" type="radio" value="popular" name="sort" (click)="setValue($event.target.value)">
<label for="styled-checkbox-1">Popularity</label>
</li> -->
<!-- <li>
<input class="styled-checkbox" id="styled-checkbox-2" type="radio" value="relevance" name="sort" (click)="setValue($event.target.value)">
<label for="styled-checkbox-2">Relevence</label>
</li> -->
<li>
<input class="styled-checkbox" id="styled-checkbox-1" type="radio" value="newest" name="sort" (click)="setValue($event.target.value)" />
<label for="styled-checkbox-1">Newest First</label>
</li>
<li>
<input class="styled-checkbox" id="styled-checkbox-5" type="radio" value="a-z" name="sort" (click)="setValue($event.target.value)" />
<label for="styled-checkbox-5">Name A - Z</label>
</li>
<li>
<input class="styled-checkbox" id="styled-checkbox-3" type="radio" value="low" name="sort" (click)="setValue($event.target.value)" />
<label for="styled-checkbox-3">Price Low - High</label>
</li>
<li>
<input class="styled-checkbox" id="styled-checkbox-4" type="radio" value="high" name="sort" (click)="setValue($event.target.value)" />
<label for="styled-checkbox-4">Price High - Low</label>
</li>
<!-- <li>
<input class="styled-checkbox" id="styled-checkbox-5" type="radio" value="rate" name="sort" (click)="setValue($event.target.value)">
<label for="styled-checkbox-5">Rating</label>
</li> -->
</ul>
<div class="sort_footer">
<button class="cancel floatLeft" (click)="istoggle()">CANCEL</button>
<button class="submit floatRight" (click)="istoggle(); submit()">
SUBMIT
</button>
<div class="clear"></div>
</div>
</div>
</div>
<div class="loader" *ngIf="loader">
<div class="lds-ripple">
<div></div>
<div></div>
</div>
</div>
</ion-content>
\ No newline at end of file
src/app/keywordlist/keywordlist.page.scss 0 → 100644
.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);
}
.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;
}
.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;
}
}
}
.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;
}
.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: contain;
object-position: center;
background-color: #fff;
}
}
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;
}
}
}
}
.ellipse {
white-space: nowrap;
width: 150px;
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);
}
}
}
}
.load-back {
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;
}
}
@media only screen and (max-width: 350px) {
.product_list {
.ellipse {
width: 135px !important;
}
}
}
\ No newline at end of file
src/app/keywordlist/keywordlist.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { KeywordlistPage } from './keywordlist.page';
describe('ProductlistPage', () => {
let component: KeywordlistPage;
let fixture: ComponentFixture<KeywordlistPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [KeywordlistPage],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(KeywordlistPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/keywordlist/keywordlist.page.ts 0 → 100644
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-keywordlist',
templateUrl: './keywordlist.page.html',
styleUrls: ['./keywordlist.page.scss'],
animations: [
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%)' }))
])
])
]
})
export class KeywordlistPage implements OnInit {
onGrid = false;
isShow = false;
data: any;
searchShow = false;
sortValue: string;
loader: boolean;
keyword: any;
custId: any;
shopperId: any;
constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location,
public prodService: ProductsService,
public service: ServiceService,
public searchService: SearchService,
private modalController: ModalController,
private subjectService: SubjectService
) {
this.loader = true;
const users = this.service.get('userData').then(data => {
if (data) {
data = JSON.parse(data);
this.custId = data.uid;
}
});
}
ngOnInit() { }
ionViewWillEnter() {
console.log('logged');
this.service.get('keywordParams').then(val => {
if (val) {
this.data = val;
this.keyword = this.data.text;
console.log(this.data);
this.prodService.prodList(this.data.text, 'keyword');
setTimeout(() => {
this.loader = false;
}, 2000);
} else {
this.goToPage('home');
}
});
const users = this.service.get('user').then(data => {
console.log(data);
if (data) {
data = JSON.parse(data);
this.custId = data.uid;
this.prodService.getFavlist(data.uid);
}
});
}
goToPage(path, data = null) {
this.router.navigateByUrl(path, { queryParams: data });
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
istoggle() {
this.isShow = !this.isShow;
}
goBack() {
// this.location.back();
window.history.back();
}
unEscape(text: string) {
const regex = '%uFFFD';
return unescape(text.replace(/%uFFFD/g, ''));
}
gridToggle() {
this.onGrid = !this.onGrid;
}
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() {
this.searchShow = false;
}
prodDetails(index: number) {
this.prodService.setProd(this.prodService.product[index]);
this.router.navigateByUrl('productdetail');
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
changeFav(index) {
const state = this.prodService.fav.findIndex(x => x === index);
console.log(state);
console.log(this.prodService.fav);
if (state > -1) {
this.prodService.fav.splice(state, 1);
this.prodService.changeFav(index, 'yes', this.custId);
} else {
this.prodService.fav.push(index);
this.prodService.changeFav(index, 'no', this.custId);
}
return;
console.log(this.prodService.fav);
}
setValue(value) {
this.sortValue = value;
console.log(this.sortValue);
}
submit() {
console.log(this.sortValue);
this.prodService.filterSearch(this.sortValue, this.shopperId);
}
checkFavStatus(index) {
const state = this.prodService.fav.findIndex(x => x === index);
return state > -1 ? 'fav_fill' : 'fav_icon';
}
searchFun(data: string) {
this.searchService.search(data);
}
viewPage(datas: any) {
console.log(datas);
let data;
let url;
if (datas.type === 'shopper') {
data = datas.data;
this.service.set('shopParams', data);
url = 'productlist';
} else if (datas.type === 'category') {
data = datas.data;
this.service.set('catParams', data);
url = 'catstorelist';
} else {
data = datas.data;
data.size = this.service.splitSep(data.size);
data.tag = this.service.splitSep(data.tag);
(data.color = this.service.splitSep(data.color)), (url = 'productdetail');
this.prodService.setProd(data);
}
this.searchClose();
this.router.navigateByUrl(url, { queryParams: data });
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
}
src/app/searchmodal/searchmodal.page.ts
......@@ -63,6 +63,10 @@ export class SearchmodalPage implements OnInit {
data = datas.data;
this.service.set('catParams', data);
url = 'catstorelist';
} else if (datas.type === 'keyword') {
data = datas.data;
this.service.set('keywordParams', data);
url = 'keywordlist';
} else {
data = datas.data;
data.size = this.service.splitSep(data.size);
......
src/app/wishlist/wishlist.page.scss
......@@ -11,12 +11,12 @@
width: 120px;
height: 125px;
float: left;
background-color: #a8a8a8;
background-color: #fff;
border-radius: 8px;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-fit: contain;
object-position: center;
}
}
......
src/assets/[email protected]
src/assets/model1@3x.png

8.91 KB | W: | H:

src/assets/model1@3x.png

4.64 KB | W: | H:

src/assets/model1@3x.png
src/assets/model1@3x.png
src/assets/model1@3x.png
src/assets/model1@3x.png
  • 2-up
  • Swipe
  • Onion skin
src/config/products.service.ts
......@@ -55,18 +55,30 @@ export class ProductsService {
});
}
public async prodList(shopperId: string) {
public async prodList(shopperId: string, type = null) {
const This = this;
const state = true;
// console.log(shopperId);
const prodRef: AngularFirestoreCollection<any> = this.afs.collection(
`products`,
ref =>
ref
.orderBy('category', 'asc')
.where('shopperId', '==', shopperId)
.where('status', '==', state)
);
let prodRef: AngularFirestoreCollection<any>;
if (type === null) {
prodRef = this.afs.collection(
`products`,
ref =>
ref
.orderBy('category', 'asc')
.where('shopperId', '==', shopperId)
.where('status', '==', state)
);
} else {
prodRef = this.afs.collection(
`products`,
ref =>
ref
.where('keyword', 'array-contains', shopperId)
.where('status', '==', state)
);
}
prodRef.valueChanges().subscribe(value => {
this.product = [];
const res = value;
......
src/config/search.service.ts
......@@ -76,6 +76,32 @@ export class SearchService {
});
// tslint:disable-next-line:max-line-length
const keywordRef: AngularFirestoreCollection<any> = this.afs.collection(
'keyword',
ref =>
ref
.orderBy('searchName')
.startAt(inputText.toLowerCase())
.endAt(inputText.toLowerCase() + '\uf8ff')
.limit(5)
);
keywordRef.valueChanges().subscribe(values => {
const result = values;
if (result.length > 0) {
result.forEach(item => {
console.log(item);
const prod: Search = {
text: item.text,
data: item,
type: 'keyword'
};
this.searchList.push(prod);
});
console.log(this.searchList);
}
});
// tslint:disable-next-line:max-line-length
const feaRef: AngularFirestoreCollection<any> = this.afs.collection(
'shopcategory',
ref =>
......
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