Merge branch 'amal' into 'master'
22-11-2019
See merge request !32
Showing
This diff is collapsed.
Click to expand it.
| ... | @@ -6,7 +6,7 @@ | ... | @@ -6,7 +6,7 @@ |
| </div> | </div> | ||
| <button class="nav_btn nav_cart floatRight" (click)="goToPage('cart')"> | <button class="nav_btn nav_cart floatRight" (click)="goToPage('cart')"> | ||
| <div class="not" *ngIf="cartService.carts">{{cartService.carts.length}}</div> | <div class="not" *ngIf="cartService.carts">{{cartService.carts.length}}</div> | ||
| </button> | </button> | ||
| <div class="clear"></div> | <div class="clear"></div> | ||
| </div> | </div> | ||
| <ion-content> | <ion-content> | ||
| ... | @@ -14,14 +14,24 @@ | ... | @@ -14,14 +14,24 @@ |
| <div class="product_banner"> | <div class="product_banner"> | ||
| <div [ngClass]="checkFavStatus(product.prodId)" (click)="changeFav(product.prodId)"></div> | <div [ngClass]="checkFavStatus(product.prodId)" (click)="changeFav(product.prodId)"></div> | ||
| <div class="featured_badge" *ngIf="product.featured">Featured</div> | <div class="featured_badge" *ngIf="product.featured">Featured</div> | ||
| <img [src]="product.image" onerror="this.src='../assets/[email protected]'"> | <ion-slides pager="true" [options]="bannerOptions"> | ||
| <ion-slide> | |||
| <img [src]="product.image" onerror="this.src='../assets/[email protected]'"> | |||
| </ion-slide> | |||
| <ion-slide> | |||
| <img [src]="product.image" onerror="this.src='../assets/[email protected]'"> | |||
| </ion-slide> | |||
| <ion-slide> | |||
| <img [src]="product.image" onerror="this.src='../assets/[email protected]'"> | |||
| </ion-slide> | |||
| </ion-slides> | |||
| </div> | </div> | ||
| <div class="product_header"> | <div class="product_header"> | ||
| <ion-row> | <ion-row> | ||
| <ion-col size="8"> | <ion-col size="8"> | ||
| <h3>{{product.prodName}}</h3> | <h3>{{product.prodName}}</h3> | ||
| <p><strong><span><img src="../assets/Path61_2.png"></span>0</strong> {{product.category}}, {{product.subCate}} | <p><strong><span><img src="../assets/Path61_2.png"></span>0</strong> {{product.category}}, {{product.subCate}} | ||
| <br/> | <br /> | ||
| <span *ngFor="let tag of product.tag">#{{tag}} </span> | <span *ngFor="let tag of product.tag">#{{tag}} </span> | ||
| </p> | </p> | ||
| </ion-col> | </ion-col> | ||
| ... | @@ -31,25 +41,26 @@ | ... | @@ -31,25 +41,26 @@ |
| </ion-col> | </ion-col> | ||
| </ion-row> | </ion-row> | ||
| </div> | </div> | ||
| <div class="product_div_content"> | <div class="product_div_content"> | ||
| <h5>Color</h5> | <h5>Color</h5> | ||
| <div class="size_div"> | <div class="size_div"> | ||
| <ul *ngIf="product.size"> | <ul *ngIf="product.size"> | ||
| <ion-slides pager="false" [options]="slideOpts"> | <ion-slides pager="false" [options]="slideOpts"> | ||
| <ion-slide *ngFor="let color of product.color; let i = index"> | <ion-slide *ngFor="let color of product.color; let i = index"> | ||
| <li> | <li> | ||
| <button id="custom_check_button"> | <button id="custom_check_button"> | ||
| <label> | <label> | ||
| <input id="{{color}}" type="radio" name="color" value="{{color}}" (click)="cartService.choose_color(color)" [checked]="i==0"> | <input id="{{color}}" type="radio" name="color" value="{{color}}" | ||
| <p>{{color}}</p> | (click)="cartService.choose_color(color)" [checked]="i==0"> | ||
| </label> | <p>{{color}}</p> | ||
| </label> | |||
| </button> | </button> | ||
| </li> | </li> | ||
| </ion-slide> | </ion-slide> | ||
| </ion-slides> | </ion-slides> | ||
| </ul> | </ul> | ||
| </div> | </div> | ||
| <h5>Size</h5> | <h5>Size</h5> | ||
| <div class="size_div"> | <div class="size_div"> | ||
| <ul *ngIf="product.size"> | <ul *ngIf="product.size"> | ||
| ... | @@ -57,11 +68,12 @@ | ... | @@ -57,11 +68,12 @@ |
| <ion-slide *ngFor="let size of product.size; let i = index"> | <ion-slide *ngFor="let size of product.size; let i = index"> | ||
| <li> | <li> | ||
| <button id="custom_check_button"> | <button id="custom_check_button"> | ||
| <label> | <label> | ||
| <input id="{{size}}" type="radio" name="services" value="{{size}}" (click)="cartService.choose_size(size)" [checked]="i==0"> | <input id="{{size}}" type="radio" name="services" value="{{size}}" | ||
| <p>{{size}}</p> | (click)="cartService.choose_size(size)" [checked]="i==0"> | ||
| </label> | <p>{{size}}</p> | ||
| </button> | </label> | ||
| </button> | |||
| </li> | </li> | ||
| </ion-slide> | </ion-slide> | ||
| </ion-slides> | </ion-slides> | ||
| ... | @@ -76,7 +88,7 @@ | ... | @@ -76,7 +88,7 @@ |
| <button id="custom_check_button"> | <button id="custom_check_button"> | ||
| <label> | <label> | ||
| <input id="1" type="radio" name="services" value="1"> | <input id="1" type="radio" name="services" value="1"> | ||
| <p><img src="../../assets/c1.png"></p> | <p><img src="../../assets/c1.png"></p> | ||
| </label> | </label> | ||
| </button> | </button> | ||
| </li> | </li> | ||
| ... | @@ -86,7 +98,7 @@ | ... | @@ -86,7 +98,7 @@ |
| <button id="custom_check_button"> | <button id="custom_check_button"> | ||
| <label> | <label> | ||
| <input id="2" type="radio" name="services" value="2"> | <input id="2" type="radio" name="services" value="2"> | ||
| <p><img src="../../assets/c2.png"></p> | <p><img src="../../assets/c2.png"></p> | ||
| </label> | </label> | ||
| </button> | </button> | ||
| </li> | </li> | ||
| ... | @@ -202,7 +214,8 @@ | ... | @@ -202,7 +214,8 @@ |
| <li (click)="viewProd(similar)"> | <li (click)="viewProd(similar)"> | ||
| <div class="product_image"> | <div class="product_image"> | ||
| <img [src]="similar.image" onerror="this.src='../assets/[email protected]'"> | <img [src]="similar.image" onerror="this.src='../assets/[email protected]'"> | ||
| <div [ngClass]="checkFavStatus(similar.prodId)" (click)="changeFav(similar.prodId)"></div> | <div [ngClass]="checkFavStatus(similar.prodId)" (click)="changeFav(similar.prodId)"> | ||
| </div> | |||
| </div> | </div> | ||
| <h5>{{similar.prodName}}</h5> | <h5>{{similar.prodName}}</h5> | ||
| <p>{{similar.price}}</p> | <p>{{similar.price}}</p> | ||
| ... | ... |
| import { Injectable } from '@angular/core'; | import { Injectable } from "@angular/core"; | ||
| import { AngularFirestore, AngularFirestoreDocument, AngularFirestoreCollection } from '@angular/fire/firestore'; | import { | ||
| import { Router, ActivatedRoute } from '@angular/router'; | AngularFirestore, | ||
| import { Products } from './services/product'; | AngularFirestoreDocument, | ||
| import { Cart, CartItem } from './services/cart'; | AngularFirestoreCollection | ||
| import { ServiceService } from './service.service'; | } from "@angular/fire/firestore"; | ||
| import * as firebase from 'firebase'; | import { Router, ActivatedRoute } from "@angular/router"; | ||
| import { take } from 'rxjs/operators'; | import { Products } from "./services/product"; | ||
| import { User } from './services/user'; | import { Cart, CartItem } from "./services/cart"; | ||
| import { from } from 'rxjs'; | import { ServiceService } from "./service.service"; | ||
| import undefined = require('firebase/empty-import'); | import * as firebase from "firebase"; | ||
| import { take } from "rxjs/operators"; | |||
| import { User } from "./services/user"; | |||
| import { from } from "rxjs"; | |||
| @Injectable({ | @Injectable({ | ||
| providedIn: 'root' | providedIn: "root" | ||
| }) | }) | ||
| export class CartsService { | export class CartsService { | ||
| size: string; | size: string; | ||
| ... | @@ -28,80 +31,108 @@ export class CartsService { | ... | @@ -28,80 +31,108 @@ export class CartsService { |
| public router: Router, | public router: Router, | ||
| public service: ServiceService | public service: ServiceService | ||
| ) { | ) { | ||
| this.custId = ''; | this.custId = ""; | ||
| this.carts = []; | this.carts = []; | ||
| const users = this.service.get('user').then((data) => { | const users = this.service.get("user").then(data => { | ||
| if (data) { | if (data) { | ||
| data = JSON.parse(data); | data = JSON.parse(data); | ||
| this.custId = data.uid; | this.custId = data.uid; | ||
| console.log(this.custId); | console.log(this.custId); | ||
| } else { | } else { | ||
| this.custId = 'WwHnLICVY2dvZGUHuKqasiTB91a2'; | this.custId = "WwHnLICVY2dvZGUHuKqasiTB91a2"; | ||
| } | } | ||
| }); | }); | ||
| } | } | ||
| public async buyNow(product: Products) { | public async buyNow(product: Products) { | ||
| this.prodId = product.prodId; | this.prodId = product.prodId; | ||
| const prodRef = firebase.firestore().collection('products').doc(this.prodId); | const prodRef = firebase | ||
| .firestore() | |||
| .collection("products") | |||
| .doc(this.prodId); | |||
| this.size = this.size === undefined ? product.size[0] : this.size; | this.size = this.size === undefined ? product.size[0] : this.size; | ||
| this.color = this.color === undefined ? product.color[0] : this.color; | this.color = this.color === undefined ? product.color[0] : this.color; | ||
| const cartRef: AngularFirestoreCollection<any> = this.afs.collection('carts', ref => ref.where('size', '==', this.size) | const cartRef: AngularFirestoreCollection<any> = this.afs.collection( | ||
| .where('color', '==', this.color) | "carts", | ||
| .where('custId', '==', this.custId) | ref => | ||
| .where('product', '==', prodRef) | ref | ||
| .where("size", "==", this.size) | |||
| .where("color", "==", this.color) | |||
| .where("custId", "==", this.custId) | |||
| .where("product", "==", prodRef) | |||
| ); | ); | ||
| cartRef.valueChanges().pipe(take(1)).subscribe((value) => { | cartRef | ||
| console.log(value); | .valueChanges() | ||
| if (value.length === 0) { | .pipe(take(1)) | ||
| product.image = product.image === undefined ? '../assets/[email protected]' : product.image; | .subscribe(value => { | ||
| const cart: Cart = { | |||
| color: this.color, | |||
| custId: this.custId, | |||
| shopperId: product.shopperId, | |||
| product: firebase.firestore().doc(`products/${this.prodId}`), | |||
| image: product.image, | |||
| prodId: product.prodId, | |||
| price: product.price, | |||
| prodName: product.prodName, | |||
| shopper: product.shopper, | |||
| qty: 1, | |||
| size: this.size | |||
| }; | |||
| console.log(cart); | |||
| this.afs.collection('carts').add(cart).then((docRef) => { | |||
| const neworderId = docRef.id; | |||
| this.afs.collection('carts').doc(neworderId).update({cartId: docRef.id}).then(() => { | |||
| console.log('Booking Successfully'); | |||
| document.body.scrollTop = document.documentElement.scrollTop = 0; | |||
| }); | |||
| }).catch((error) => { | |||
| console.error('Error adding document: ', error); | |||
| }); | |||
| } else { | |||
| console.log(value); | console.log(value); | ||
| // alert('Item already added in the cart'); | if (value.length === 0) { | ||
| const cartId = value[0].cartId; | product.image = | ||
| // tslint:disable-next-line:radix | product.image === undefined | ||
| const qty = parseInt(value[0].qty) + 1; | ? "../assets/[email protected]" | ||
| this.afs.collection('carts').doc(cartId).update({qty: `${qty}`}).then(() => { | : product.image; | ||
| console.log('Booking Successfully'); | const cart: Cart = { | ||
| document.body.scrollTop = document.documentElement.scrollTop = 0; | color: this.color, | ||
| }); | custId: this.custId, | ||
| } | shopperId: product.shopperId, | ||
| }); | product: firebase.firestore().doc(`products/${this.prodId}`), | ||
| image: product.image, | |||
| prodId: product.prodId, | |||
| price: product.price, | |||
| prodName: product.prodName, | |||
| shopper: product.shopper, | |||
| qty: 1, | |||
| size: this.size | |||
| }; | |||
| console.log(cart); | |||
| this.afs | |||
| .collection("carts") | |||
| .add(cart) | |||
| .then(docRef => { | |||
| const neworderId = docRef.id; | |||
| this.afs | |||
| .collection("carts") | |||
| .doc(neworderId) | |||
| .update({ cartId: docRef.id }) | |||
| .then(() => { | |||
| console.log("Booking Successfully"); | |||
| document.body.scrollTop = document.documentElement.scrollTop = 0; | |||
| }); | |||
| }) | |||
| .catch(error => { | |||
| console.error("Error adding document: ", error); | |||
| }); | |||
| } else { | |||
| console.log(value); | |||
| // alert('Item already added in the cart'); | |||
| const cartId = value[0].cartId; | |||
| // tslint:disable-next-line:radix | |||
| const qty = parseInt(value[0].qty) + 1; | |||
| this.afs | |||
| .collection("carts") | |||
| .doc(cartId) | |||
| .update({ qty: `${qty}` }) | |||
| .then(() => { | |||
| console.log("Booking Successfully"); | |||
| document.body.scrollTop = document.documentElement.scrollTop = 0; | |||
| }); | |||
| } | |||
| }); | |||
| } | } | ||
| public async cartList() { | public async cartList() { | ||
| const cartRef: AngularFirestoreCollection<any> = this.afs.collection('carts', ref => ref.where('custId', '==', this.custId)); | const cartRef: AngularFirestoreCollection<any> = this.afs.collection( | ||
| cartRef.valueChanges().subscribe((value) => { | "carts", | ||
| ref => ref.where("custId", "==", this.custId) | |||
| ); | |||
| cartRef.valueChanges().subscribe(value => { | |||
| this.carts = []; | this.carts = []; | ||
| const res = value; | const res = value; | ||
| this.cartTotal = 0; | this.cartTotal = 0; | ||
| if (res.length > 0) { | if (res.length > 0) { | ||
| res.forEach((item) => { | res.forEach(item => { | ||
| const cartItem: CartItem = { | const cartItem: CartItem = { | ||
| cartId: item.cartId, | cartId: item.cartId, | ||
| color: item.color, | color: item.color, | ||
| ... | @@ -112,7 +143,7 @@ export class CartsService { | ... | @@ -112,7 +143,7 @@ export class CartsService { |
| prodName: item.prodName, | prodName: item.prodName, | ||
| image: item.image, | image: item.image, | ||
| qty: item.qty, | qty: item.qty, | ||
| size: item.size, | size: item.size | ||
| }; | }; | ||
| console.log(item.price, item.qty); | console.log(item.price, item.qty); | ||
| if (item.price) { | if (item.price) { | ||
| ... | @@ -130,7 +161,7 @@ export class CartsService { | ... | @@ -130,7 +161,7 @@ export class CartsService { |
| this.carts.push(cartItem); | this.carts.push(cartItem); | ||
| }); | }); | ||
| } else { | } else { | ||
| // alert('No Products Found'); | // alert('No Products Found'); | ||
| } | } | ||
| }); | }); | ||
| } | } | ||
| ... | @@ -145,30 +176,36 @@ export class CartsService { | ... | @@ -145,30 +176,36 @@ export class CartsService { |
| removeCount(index) { | removeCount(index) { | ||
| // tslint:disable-next-line:radix | // tslint:disable-next-line:radix | ||
| const qty = this.carts[index].qty > 1 ? this.carts[index].qty - 1 : this.carts[index].qty; | const qty = | ||
| this.carts[index].qty > 1 | |||
| ? this.carts[index].qty - 1 | |||
| : this.carts[index].qty; | |||
| this.carts[index].qty = qty; | this.carts[index].qty = qty; | ||
| console.log(this.carts[index].qty); | console.log(this.carts[index].qty); | ||
| this.afs.collection('carts').doc(this.carts[index].cartId).update({ | this.afs | ||
| qty: this.carts[index].qty | .collection("carts") | ||
| }); | .doc(this.carts[index].cartId) | ||
| .update({ | |||
| qty: this.carts[index].qty | |||
| }); | |||
| } | } | ||
| addCount(index) { | addCount(index) { | ||
| const qty = this.carts[index].qty + 1; | const qty = this.carts[index].qty + 1; | ||
| this.cartTotal = 0; | this.cartTotal = 0; | ||
| this.carts[index].qty = qty; | this.carts[index].qty = qty; | ||
| this.afs.collection('carts').doc(this.carts[index].cartId).update({ | this.afs | ||
| qty: this.carts[index].qty | .collection("carts") | ||
| }); | .doc(this.carts[index].cartId) | ||
| .update({ | |||
| qty: this.carts[index].qty | |||
| }); | |||
| } | } | ||
| removeItem(index) { | removeItem(index) { | ||
| this.afs.collection('carts').doc(this.carts[index].cartId).delete(); | this.afs | ||
| .collection("carts") | |||
| .doc(this.carts[index].cartId) | |||
| .delete(); | |||
| } | } | ||
| } | } |
Please
register
or
sign in
to comment