22-11-2019

src/app/home/home.page.html

@@ -10,7 +10,7 @@
     </div>
     <button class="nav_btn nav_search floatRight" *ngIf="!searchShow">
     </button>
-    <button class="nav_btn nav_exit floatRight" *ngIf="searchShow" (click)="searchClose()">
+    <button class="nav_btn nav_close floatRight" *ngIf="searchShow" (click)="searchClose()">
     </button>
     <div class="clear"></div>
 </div>

src/app/productdetail/productdetail.page.html

@@ -14,14 +14,24 @@
         <div class="product_banner">
             <div [ngClass]="checkFavStatus(product.prodId)" (click)="changeFav(product.prodId)"></div>
             <div class="featured_badge" *ngIf="product.featured">Featured</div>
+            <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 class="product_header">
             <ion-row>
                 <ion-col size="8">
                     <h3>{{product.prodName}}</h3>
                     <p><strong><span><img src="../assets/Path61_2.png"></span>0</strong>&nbsp; {{product.category}}, {{product.subCate}}
-                        <br/>
+                        <br />
                         <span *ngFor="let tag of product.tag">#{{tag}}&nbsp;</span>
                     </p>
                 </ion-col>
@@ -41,7 +51,8 @@
                             <li>
                                 <button id="custom_check_button">
                                     <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}}"
+                                            (click)="cartService.choose_color(color)" [checked]="i==0">
                                         <p>{{color}}</p>
                                     </label>
                                 </button>
@@ -58,7 +69,8 @@
                             <li>
                                 <button id="custom_check_button">
                                     <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}}"
+                                            (click)="cartService.choose_size(size)" [checked]="i==0">
                                         <p>{{size}}</p>
                                     </label>
                                 </button>
@@ -202,7 +214,8 @@
                             <li (click)="viewProd(similar)">
                                 <div class="product_image">
                                     <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>
                                 <h5>{{similar.prodName}}</h5>
                                 <p>{{similar.price}}</p>

src/app/productdetail/productdetail.page.scss

@@ -13,6 +13,7 @@
             position: absolute;
             top: 15px;
             right: 15px;
+            z-index: 2;
         }
         .fav_fill {
             width: 30px;
@@ -24,6 +25,7 @@
             position: absolute;
             top: 15px;
             right: 15px;
+            z-index: 2;
         }
         .featured_badge {
             position: absolute;
@@ -35,6 +37,7 @@
             padding-left: 5px;
             padding-right: 5px;
             font-size: 13px;
+            z-index: 2;
         }
         img {
             width: 100%;

src/app/productdetail/productdetail.page.ts

-import { Component, OnInit } from '@angular/core';
-import { Location } from '@angular/common';
-import { Router, ActivatedRoute } from '@angular/router';
-import { Products } from './../../config/services/product';
-import { Order } from './../../config/services/order';
-import { CartsService } from './../../config/cart.service';
-import { ProductsService } from './../../config/products.service';
-import { ServiceService } from './../../config/service.service';
-import { map } from 'rxjs/operators';
+import { Component, OnInit } from "@angular/core";
+import { Location } from "@angular/common";
+import { Router, ActivatedRoute } from "@angular/router";
+import { Products } from "./../../config/services/product";
+import { Order } from "./../../config/services/order";
+import { CartsService } from "./../../config/cart.service";
+import { ProductsService } from "./../../config/products.service";
+import { ServiceService } from "./../../config/service.service";
+import { map } from "rxjs/operators";
 
 @Component({
-  selector: 'app-productdetail',
-  templateUrl: './productdetail.page.html',
-  styleUrls: ['./productdetail.page.scss'],
+  selector: "app-productdetail",
+  templateUrl: "./productdetail.page.html",
+  styleUrls: ["./productdetail.page.scss"]
 })
 export class ProductdetailPage implements OnInit {
   product: Products;
   order: Order;
   data: any;
+
+  bannerOptions = {
+    slidesPerView: 1,
+    speed: 2000,
+    autoplay: true
+  };
   slideOpts = {
     slidesPerView: 3.5
   };
@@ -35,8 +41,13 @@ export class ProductdetailPage implements OnInit {
   ) {
     const params = this.prodService.selItem;
     this.service.state = true;
-    this.prodService.similarProd(params.shopperId, params.category, params.subCate, params.prodId);
-    this.service.get('params').then((val) => {
+    this.prodService.similarProd(
+      params.shopperId,
+      params.category,
+      params.subCate,
+      params.prodId
+    );
+    this.service.get("params").then(val => {
       this.data = val;
     });
     this.cartService.cartList();
@@ -101,7 +112,7 @@ export class ProductdetailPage implements OnInit {
   buyNow(product: any, type: number) {
     this.cartService.buyNow(product).then(() => {
       if (type === 1) {
-        this.router.navigateByUrl('cart');
+        this.router.navigateByUrl("cart");
       } else {
         // alert('Product added to cart');
       }
@@ -115,7 +126,7 @@ export class ProductdetailPage 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";
   }
 
   changeFav(index) {
@@ -124,13 +135,12 @@ export class ProductdetailPage 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);
   }
-
 }

src/config/cart.service.ts

-import { Injectable } from '@angular/core';
-import { AngularFirestore, AngularFirestoreDocument, AngularFirestoreCollection } from '@angular/fire/firestore';
-import { Router, ActivatedRoute } from '@angular/router';
-import { Products } from './services/product';
-import { Cart, CartItem } from './services/cart';
-import { ServiceService } from './service.service';
-import * as firebase from 'firebase';
-import { take } from 'rxjs/operators';
-import { User } from './services/user';
-import { from } from 'rxjs';
-import undefined = require('firebase/empty-import');
+import { Injectable } from "@angular/core";
+import {
+  AngularFirestore,
+  AngularFirestoreDocument,
+  AngularFirestoreCollection
+} from "@angular/fire/firestore";
+import { Router, ActivatedRoute } from "@angular/router";
+import { Products } from "./services/product";
+import { Cart, CartItem } from "./services/cart";
+import { ServiceService } from "./service.service";
+import * as firebase from "firebase";
+import { take } from "rxjs/operators";
+import { User } from "./services/user";
+import { from } from "rxjs";
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: "root"
 })
 export class CartsService {
   size: string;
@@ -28,35 +31,48 @@ export class CartsService {
     public router: Router,
     public service: ServiceService
   ) {
-    this.custId = '';
+    this.custId = "";
     this.carts = [];
-    const users = this.service.get('user').then((data) => {
+    const users = this.service.get("user").then(data => {
       if (data) {
         data = JSON.parse(data);
         this.custId = data.uid;
         console.log(this.custId);
       } else {
-        this.custId = 'WwHnLICVY2dvZGUHuKqasiTB91a2';
+        this.custId = "WwHnLICVY2dvZGUHuKqasiTB91a2";
       }
     });
   }
 
   public async buyNow(product: Products) {
     this.prodId = product.prodId;
-    const prodRef = firebase.firestore().collection('products').doc(this.prodId);
+    const prodRef = firebase
+      .firestore()
+      .collection("products")
+      .doc(this.prodId);
 
     this.size = this.size === undefined ? product.size[0] : this.size;
     this.color = this.color === undefined ? product.color[0] : this.color;
 
-    const cartRef: AngularFirestoreCollection<any> = this.afs.collection('carts', ref => ref.where('size', '==', this.size)
-    .where('color', '==', this.color)
-    .where('custId', '==', this.custId)
-    .where('product', '==', prodRef)
+    const cartRef: AngularFirestoreCollection<any> = this.afs.collection(
+      "carts",
+      ref =>
+        ref
+          .where("size", "==", this.size)
+          .where("color", "==", this.color)
+          .where("custId", "==", this.custId)
+          .where("product", "==", prodRef)
     );
-    cartRef.valueChanges().pipe(take(1)).subscribe((value) => {
+    cartRef
+      .valueChanges()
+      .pipe(take(1))
+      .subscribe(value => {
         console.log(value);
         if (value.length === 0) {
-        product.image = product.image === undefined ? '../assets/[email protected]' : product.image;
+          product.image =
+            product.image === undefined
+              ? "../assets/[email protected]"
+              : product.image;
           const cart: Cart = {
             color: this.color,
             custId: this.custId,
@@ -71,14 +87,22 @@ export class CartsService {
             size: this.size
           };
           console.log(cart);
-        this.afs.collection('carts').add(cart).then((docRef) => {
+          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');
+              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);
+            })
+            .catch(error => {
+              console.error("Error adding document: ", error);
             });
         } else {
           console.log(value);
@@ -86,8 +110,12 @@ export class CartsService {
           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');
+          this.afs
+            .collection("carts")
+            .doc(cartId)
+            .update({ qty: `${qty}` })
+            .then(() => {
+              console.log("Booking Successfully");
               document.body.scrollTop = document.documentElement.scrollTop = 0;
             });
         }
@@ -95,13 +123,16 @@ export class CartsService {
   }
 
   public async cartList() {
-    const cartRef: AngularFirestoreCollection<any> = this.afs.collection('carts', ref => ref.where('custId', '==', this.custId));
-    cartRef.valueChanges().subscribe((value) => {
+    const cartRef: AngularFirestoreCollection<any> = this.afs.collection(
+      "carts",
+      ref => ref.where("custId", "==", this.custId)
+    );
+    cartRef.valueChanges().subscribe(value => {
       this.carts = [];
       const res = value;
       this.cartTotal = 0;
       if (res.length > 0) {
-        res.forEach((item) => {
+        res.forEach(item => {
           const cartItem: CartItem = {
             cartId: item.cartId,
             color: item.color,
@@ -112,7 +143,7 @@ export class CartsService {
             prodName: item.prodName,
             image: item.image,
             qty: item.qty,
-            size: item.size,
+            size: item.size
           };
           console.log(item.price, item.qty);
           if (item.price) {
@@ -145,30 +176,36 @@ export class CartsService {
 
   removeCount(index) {
     // 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;
     console.log(this.carts[index].qty);
-    this.afs.collection('carts').doc(this.carts[index].cartId).update({
+    this.afs
+      .collection("carts")
+      .doc(this.carts[index].cartId)
+      .update({
         qty: this.carts[index].qty
       });
-
   }
 
   addCount(index) {
     const qty = this.carts[index].qty + 1;
     this.cartTotal = 0;
     this.carts[index].qty = qty;
-    this.afs.collection('carts').doc(this.carts[index].cartId).update({
+    this.afs
+      .collection("carts")
+      .doc(this.carts[index].cartId)
+      .update({
         qty: this.carts[index].qty
       });
   }
 
   removeItem(index) {
-    this.afs.collection('carts').doc(this.carts[index].cartId).delete();
+    this.afs
+      .collection("carts")
+      .doc(this.carts[index].cartId)
+      .delete();
   }
-
-
-
-
-
 }

src/global.scss

@@ -141,6 +141,30 @@ button {
     }
 }
 
+.product_banner {
+    ion-slides {
+        .swiper-pagination-bullets {
+            left: auto;
+            width: auto;
+            right: 15px;
+            bottom: 15px;
+        }
+        .swiper-pagination {
+            .swiper-pagination-bullet {
+                background-color: #fff;
+                width: 14px;
+                height: 3px;
+                border-radius: 0px;
+                opacity: 1;
+                margin: 0px;
+            }
+            .swiper-pagination-bullet-active {
+                background-color: rgba(41, 37, 81, 1);
+            }
+        }
+    }
+}
+
 
 /*-------------------------------
 
@@ -513,6 +537,14 @@ app-deliverypop {
     }
 }
 
+.nav_close {
+    background-image: url("./assets/close.png");
+    img {
+        width: 25px;
+        display: none;
+    }
+}
+
 .nav_cart {
     background-image: url("./assets/cart_icon.png");
     img {