Skip to content

G
getme
Commit b25de556 by Adarsh K
Options

customer

parents db948c9b 7219db02
Showing with 918 additions and 403 deletions
src/app/app-routing.module.ts
...@@ -97,7 +97,9 @@ const routes: Routes = [ ...@@ -97,7 +97,9 @@ const routes: Routes = [
loadChildren: './searchmodal/searchmodal.module#SearchmodalPageModule' loadChildren: './searchmodal/searchmodal.module#SearchmodalPageModule'
}, { path: 'noresult', loadChildren: './noresult/noresult.module#NoresultPageModule' }, }, { path: 'noresult', loadChildren: './noresult/noresult.module#NoresultPageModule' },
{ path: 'feedback', loadChildren: './feedback/feedback.module#FeedbackPageModule' }, { path: 'feedback', loadChildren: './feedback/feedback.module#FeedbackPageModule' },
{ path: 'address', loadChildren: './address/address.module#AddressPageModule' } { path: 'address', loadChildren: './address/address.module#AddressPageModule' },
{ path: 'success', loadChildren: './success/success.module#SuccessPageModule' },
{ path: 'failed', loadChildren: './failed/failed.module#FailedPageModule' }
]; ];
@NgModule({ @NgModule({
......
src/app/cart/cart.page.html
<ion-content> <ion-content>
<div class="cart_wrapper"> <div class="cart_wrapper">
<div class="cart_head"> <div class="cart_head">
<div class="nav_header"> <div class="nav_header">
<button class="nav_btn nav_back_white floatLeft" (click)="goBack()"> <button class="nav_btn nav_back_white floatLeft" (click)="goBack()">
<img src="../assets/arrow_white.png"> <img src="../assets/arrow_white.png" />
</button> </button>
<div class="nav_title floatLeft"> <div class="nav_title floatLeft">
<h4>CART</h4> <h4>CART</h4>
</div> </div>
<button class="nav_btn floatRight"> <button class="nav_btn floatRight"></button>
<div class="clear"></div>
</button> </div>
<div class="clear"></div> <div class="cart_menu_header">
</div> <ul>
<div class="cart_menu_header"> <li class="textCenter active" [class.active]="currentIndex == 0">
<ul> CART
<li class="textCenter active" [class.active]="currentIndex == 0">CART</li> </li>
<li class="textCenter"> <li class="textCenter">
<hr> <hr />
</li> </li>
<li class="textCenter" [class.active]="currentIndex == 1">CHECKOUT</li> <li class="textCenter" [class.active]="currentIndex == 1">
<li class="textCenter"> CHECKOUT
<hr> </li>
</li> <li class="textCenter">
<li class="textCenter" [class.active]="currentIndex == 2">FINISH</li> <hr />
</ul> </li>
<li class="textCenter" [class.active]="currentIndex == 2">FINISH</li>
</ul>
</div>
<div class="cart_content">
<ion-slides
pager="false"
[options]="cartwizard"
(ionSlideDidChange)="slideChanged()"
>
<ion-slide>
<div class="cart_list" *ngIf="cartService.carts">
<ul *ngIf="cartService.carts.length > 0">
<li *ngFor="let carts of cartService.carts; let i= index">
<div class="close" (click)="cartService.removeItem(i)"></div>
<div class="cart_image">
<img [src]="carts.image" onerror="this.src=''" />
</div>
<div class="cart_detail">
<h4>{{carts.prodName}}</h4>
<h4>{{carts.size}}, {{carts.color}}</h4>
<h5>A$ {{carts.price}}</h5>
</div>
<div class="cart_count">
<div class="add" (click)="cartService.addCount(i)">+</div>
<div class="count">{{carts.qty}}</div>
<div class="remove" (click)="cartService.removeCount(i)">
-
</div>
</div>
<div class="clear"></div>
</li>
</ul>
<div class="total_div" *ngIf="cartService.cartTotal">
<ion-row>
<ion-col>
<p class="textLeft">Total Price:</p>
</ion-col>
<ion-col>
<p class="textRight">A$ {{cartService.cartTotal}}</p>
</ion-col>
</ion-row>
</div>
<div
class="no-items-wrapper"
*ngIf="cartService.carts.length == 0"
>
<img src="../../assets/noitem.png" />
<h1>There is no products added</h1>
<button (click)="goToPage('home')">Shop Now</button>
</div>
</div> </div>
<div class="cart_content"> </ion-slide>
<ion-slides pager="false" [options]="cartwizard" (ionSlideDidChange)="slideChanged()"> <ion-slide>
<ion-slide> <div class="checkout_list">
<div class="cart_list" *ngIf="cartService.carts"> <h5>
<ul *ngIf="cartService.carts.length > 0"> <span class="floatLeft">ITEMS</span>
<li *ngFor="let carts of cartService.carts; let i= index"> <span class="floatRight" *ngIf="cartService.cartTotal"
<div class="close" (click)="cartService.removeItem(i)"></div> >A$ {{cartService.cartTotal}}</span
<div class="cart_image"><img [src]="carts.image" onerror="this.src=''" /></div> >
<div class="cart_detail"> <div class="clear"></div>
<h4>{{carts.prodName}}</h4> </h5>
<h4>{{carts.size}}, {{carts.color}}</h4> <ion-grid
<h5>A$ {{carts.price}}</h5> class="p0"
</div> *ngIf="cartService.carts && cartService.carts.length > 0"
<div class="cart_count"> >
<div class="add" (click)="cartService.addCount(i)">+</div> <ion-row *ngFor="let carts of cartService.carts">
<div class="count">{{carts.qty}}</div> <ion-col size="6" class="p0">
<div class="remove" (click)="cartService.removeCount(i)">-</div> <h6 class="textLeft">{{carts.prodName}}</h6>
</div> </ion-col>
<div class="clear"></div> <ion-col size="2" class="p0">
</li> <h6 class="textRight"><strong>{{carts.qty}} X</strong></h6>
</ul> </ion-col>
<div class="total_div" *ngIf="cartService.cartTotal"> <ion-col size="4" class="p0">
<ion-row> <h6 class="textRight">
<ion-col> <strong>A$ {{carts.price}}</strong>
<p class="textLeft">Total Price:</p> </h6>
</ion-col> </ion-col>
<ion-col> </ion-row>
<p class="textRight">A$ {{cartService.cartTotal}}</p> </ion-grid>
</ion-col> <hr />
</ion-row> <h5>
</div> <span class="floatLeft">DELIVERY</span>
</div> <span class="floatRight" (click)="istoggle()">EDIT</span>
</ion-slide> <div class="clear"></div>
<ion-slide> </h5>
<div class="checkout_list"> <ion-grid class="p0" *ngIf="custAddress">
<h5> <ion-row>
<span class="floatLeft">ITEMS</span> <ion-col class="p0">
<span class="floatRight" *ngIf="cartService.cartTotal">A$ {{cartService.cartTotal}}</span> <h6>
<div class="clear"></div> {{custAddress.building}},<br />
</h5> {{custAddress.landmark}},<br />
<ion-grid class="p0" *ngIf="cartService.carts && cartService.carts.length > 0"> {{custAddress.address}}
<ion-row *ngFor="let carts of cartService.carts"> </h6>
<ion-col size="6" class="p0"> </ion-col>
<h6 class="textLeft">{{carts.prodName}}</h6> </ion-row>
</ion-col> </ion-grid>
<ion-col size="2" class="p0"> <hr />
<h6 class="textRight"><strong>{{carts.qty}} X</strong></h6> <h5>
</ion-col> <span class="floatLeft">PAYMENT</span>
<ion-col size="4" class="p0"> <span class="floatRight">CHANGE</span>
<h6 class="textRight"><strong>A$ {{carts.price}}</strong></h6> <div class="clear"></div>
</ion-col> </h5>
</ion-row> <div class="payment_method">
</ion-grid> <input
<hr> type="radio"
<h5> name="payments"
<span class="floatLeft">DELIVERY</span> id="cod"
<span class="floatRight" (click)="istoggle()">EDIT</span> name="radio-group"
<div class="clear"></div> checked="true"
</h5> />
<ion-grid class="p0" *ngIf="custAddress"> <label for="paypal">
<ion-row> <p>COD</p>
<ion-col class="p0"> </label>
<h6> </div>
{{custAddress.building}},<br/> {{custAddress.landmark}},<br/> {{custAddress.address}} <!-- <div class="payment_method">
</h6>
</ion-col>
</ion-row>
</ion-grid>
<hr>
<h5>
<span class="floatLeft">PAYMENT</span>
<span class="floatRight">CHANGE</span>
<div class="clear"></div>
</h5>
<div class="payment_method">
<input type="radio" name="payments" id="cod" name="radio-group" checked="true">
<label for="paypal">
<p>COD</p>
</label>
</div>
<!-- <div class="payment_method">
<input type="radio" name="payments" id="paypal" name="radio-group" checked (click)="getwaypaypal()"> <input type="radio" name="payments" id="paypal" name="radio-group" checked (click)="getwaypaypal()">
<label for="test1"> <label for="test1">
<p>PayPal</p> <p>PayPal</p>
...@@ -134,7 +167,7 @@ ...@@ -134,7 +167,7 @@
<div class="card_div" [hidden]="gateway !=3"> <div class="card_div" [hidden]="gateway !=3">
<input class="card_no borderNone widthFull" placeholder="PafyK ID"> <input class="card_no borderNone widthFull" placeholder="PafyK ID">
</div> --> </div> -->
<!-- <div class="delivery_time"> <!-- <div class="delivery_time">
<ul> <ul>
<li> <li>
Delivery 10 Mnt<br> Delivery 10 Mnt<br>
...@@ -146,121 +179,170 @@ ...@@ -146,121 +179,170 @@
</li> </li>
</ul> </ul>
</div> --> </div> -->
<hr> <hr />
<div class="coupon_code"> <div class="coupon_code">
<input class="" placeholder="COUPON CODE" #promo><button class="add_btn" (click)="promoApply(promo.value)">ADD</button> <input class="" placeholder="COUPON CODE" #promo /><button
<br/>&nbsp;<h6>GET50</h6> class="add_btn"
<span *ngIf="discountApplied" style="color: red">Promocode applied successfully </span> (click)="promoApply(promo.value)"
</div> >
<br/> ADD
</button>
<br />&nbsp;
<h6>GET50</h6>
<span *ngIf="discountApplied" style="color: red"
>Promocode applied successfully
</span>
</div>
<br />
<h6> <h6>
<span class="floatLeft">PRODUCT COST</span> <span class="floatLeft">PRODUCT COST</span>
<span class="floatRight" *ngIf="cartService.cartTotal">A$ {{cartService.cartTotal}}</span> <span class="floatRight" *ngIf="cartService.cartTotal"
<div class="clear"></div> >A$ {{cartService.cartTotal}}</span
</h6> >
<div class="clear"></div>
</h6>
<h6> <h6>
<span class="floatLeft">DELIVERY CHARGE</span> <span class="floatLeft">DELIVERY CHARGE</span>
<span class="floatRight" *ngIf="cartService.cartTotal">A$ {{getDeliveryCharge(cartService.cartTotal)}}</span> <span class="floatRight" *ngIf="cartService.cartTotal"
<div class="clear"></div> >A$ {{getDeliveryCharge(cartService.cartTotal)}}</span
</h6> >
<h6> <div class="clear"></div>
<span class="floatLeft">GST/TAX</span> </h6>
<span class="floatRight" *ngIf="cartService.cartTotal">A$ {{getTax(cartService.cartTotal)}}</span> <h6>
<div class="clear"></div> <span class="floatLeft">GST/TAX</span>
</h6> <span class="floatRight" *ngIf="cartService.cartTotal"
<h6 *ngIf="discountApplied"> >A$ {{getTax(cartService.cartTotal)}}</span
<span class="floatLeft">DISCOUNT</span> >
<span class="floatRight">(-) A$ {{discount}}</span> <div class="clear"></div>
<div class="clear"></div> </h6>
</h6> <h6 *ngIf="discountApplied">
<hr> <span class="floatLeft">DISCOUNT</span>
<div class="total_div"> <span class="floatRight">(-) A$ {{discount}}</span>
<ion-row> <div class="clear"></div>
<ion-col> </h6>
<p class="textLeft">Total Price:</p> <hr />
</ion-col> <div class="total_div">
<ion-col> <ion-row>
<p class="textRight" *ngIf="cartService.cartTotal">A$ {{getTotal(cartService.cartTotal)}}</p> <ion-col>
</ion-col> <p class="textLeft">Total Price:</p>
</ion-row> </ion-col>
</div> <ion-col>
</div> <p class="textRight" *ngIf="cartService.cartTotal">
</ion-slide> A$ {{getTotal(cartService.cartTotal)}}
<ion-slide> </p>
<div class="order_placed_div"> </ion-col>
<img src="../assets/[email protected]"> </ion-row>
<h4>Order Placed</h4> </div>
<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-slide>
<ion-slide>
<div class="order_placed_div">
<img src="../assets/[email protected]" />
<h4>Order Placed</h4>
<p>{{bookDate}}</p>
<h3>The product will be delivered in</h3>
<h1>60:00 Mins</h1>
<button class="view_order" (click)="goToPage('myorder')">
VIEW ORDERS</button
><br />
<button class="home_btn" (click)="goToPage('home')">HOME</button>
</div>
</ion-slide>
</ion-slides>
</div>
</div> </div>
</div>
</ion-content> </ion-content>
<ion-footer> <ion-footer>
<div class="footer_btnbay" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 0"> <div
<div class="continue" (click)="goToPage('productlist')">CONTINUE SHOPING</div> class="footer_btnbay"
<div class="checkout" (click)="next(1)">CHECKOUT</div> *ngIf="cartService.carts && cartService.carts.length > 0"
</div> [hidden]="currentIndex != 0"
<div class="footer_btn" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 1" (click)="next(2);"> >
PAY <div class="continue" (click)="goToPage('productlist')">
CONTINUE SHOPING
</div> </div>
<!-- <div class="footer_btn" [hidden]="currentIndex != 2" (click)="finishpop()"> <div class="checkout" (click)="next(1)">CHECKOUT</div>
</div>
<div
class="footer_btn"
*ngIf="cartService.carts && cartService.carts.length > 0"
[hidden]="currentIndex != 1"
(click)="next(2);"
>
PAY
</div>
<!-- <div class="footer_btn" [hidden]="currentIndex != 2" (click)="finishpop()">
FINISH FINISH
</div> --> </div> -->
</ion-footer> </ion-footer>
<div class="loader" *ngIf="loader"> <div class="loader" *ngIf="loader">
<div class="lds-ripple"> <div class="lds-ripple">
<div></div> <div></div>
<div></div> <div></div>
</div> </div>
</div> </div>
<div *ngIf="isShow" [@slideInOut]> <div *ngIf="isShow" [@slideInOut]>
<div class="nav_header"> <div class="nav_header">
<button class="nav_btn nav_back floatLeft" (click)="istoggle(); setAddress()"> <button
<img src="../assets/Group17_2.png"> class="nav_btn nav_back floatLeft"
</button> (click)="istoggle(); setAddress()"
<div class="nav_title floatLeft"> >
<h4>CHANGE LOCATION</h4> <img src="../assets/Group17_2.png" />
</div> </button>
<div class="nav_title floatLeft">
<h4>CHANGE LOCATION</h4>
</div>
<div class="clear"></div>
</div>
<ion-content class="sort_wrappper">
<agm-map
[zoom]="20"
[latitude]="lat"
[longitude]="lng"
[disableDefaultUI]="false"
[zoomControl]="false"
[backgroundColor]="'rgba(29, 27, 130,0.2)'"
>
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
<div class="add_address_wrapper">
<h5>
<span class="floatLeft">NEW ADDRESS</span>
<span class="floatRight" (click)="istoggle(); goToPage('nearby')"
>ADD NEW</span
>
<div class="clear"></div> <div class="clear"></div>
</h5>
<ul
*ngIf="addressService.addressList && addressService.addressList.length > 0"
>
<li *ngFor="let address of addressService.addressList; let i = index">
<div class="floatLeft">
{{address.default}}
<input
class="styled-checkbox"
name="addressId"
id="styled-checkbox-{{i}}"
type="radio"
(click)="setDefault(address.addressId, i)"
[value]="address.addressId"
#addressType
[checked]="address.defaultVal == 1"
/>
<label for="styled-checkbox-{{i}}"> {{address.addressType}} </label>
</div>
<div class="floatLeft">
<p>
{{address.building}}, {{address.landmark}}, {{address.address}}
</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div> </div>
<ion-content class="sort_wrappper"> </ion-content>
<agm-map [zoom]="20" [latitude]="lat" [longitude]="lng" [disableDefaultUI]="false" [zoomControl]="false" [backgroundColor]="'rgba(29, 27, 130,0.2)'">
<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> </div>
src/app/cart/cart.page.scss
...@@ -403,6 +403,30 @@ ...@@ -403,6 +403,30 @@
font-weight: 900; font-weight: 900;
} }
} }
.no-items-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/failed/failed.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 { FailedPage } from './failed.page';
const routes: Routes = [
{
path: '',
component: FailedPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [FailedPage]
})
export class FailedPageModule {}
src/app/failed/failed.page.html 0 → 100644
<ion-content>
<div class="orderfailed-wrapper">
<div class="head">
<img src="../../assets/failed.png">
<h1>Order Failed</h1>
</div>
<div class="content">
<h1>Something went wrong</h1>
<h2>Please check your network or details you <br> provided and try again</h2>
</div>
<button>View Orders</button>
<h3>home</h3>
</div>
</ion-content>
\ No newline at end of file
src/app/failed/failed.page.scss 0 → 100644
.orderfailed-wrapper {
padding: 20px;
text-align: center;
.head {
img {
width: 60px;
}
h1 {
font-size: 18px;
text-transform: uppercase;
color: #29285B;
font-weight: bolder;
margin-top: 15px;
}
}
.content {
margin-top: 30px;
h1 {
color: #B0AEC7;
font-weight: bolder;
margin: 0;
font-size: 16px;
}
h2 {
color: #B0AEC7;
margin-top: 5px;
font-size: 16px;
}
}
button {
background-color: #29285b;
border-radius: 8px;
height: 50px;
width: 48%;
color: #fff;
font-size: 18px;
font-weight: lighter;
text-transform: uppercase;
margin-top: 25px;
margin-bottom: 50px;
}
h3 {
color: #29285b;
background: none;
font-size: 20px;
font-weight: bolder;
text-transform: uppercase;
margin-top: 50px;
margin-bottom: 50px;
}
}
\ No newline at end of file
src/app/failed/failed.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FailedPage } from './failed.page';
describe('FailedPage', () => {
let component: FailedPage;
let fixture: ComponentFixture<FailedPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ FailedPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(FailedPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/failed/failed.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-failed',
templateUrl: './failed.page.html',
styleUrls: ['./failed.page.scss'],
})
export class FailedPage implements OnInit {
constructor() { }
ngOnInit() {
}
}
src/app/productlist/productlist.page.html
...@@ -44,11 +44,13 @@ ...@@ -44,11 +44,13 @@
> >
<li *ngFor="let product of prodService.product; let i = index"> <li *ngFor="let product of prodService.product; let i = index">
<div class="product_image"> <div class="product_image">
<img <div class="load-back">
[src]="product.image" <img
onerror="this.src='../assets/[email protected]'" [src]="product.image"
(click)="prodDetails(i)" onerror="this.src='../assets/[email protected]'"
/> (click)="prodDetails(i)"
/>
</div>
<div <div
[ngClass]="checkFavStatus(product.prodId)" [ngClass]="checkFavStatus(product.prodId)"
(click)="changeFav(product.prodId)" (click)="changeFav(product.prodId)"
...@@ -63,11 +65,37 @@ ...@@ -63,11 +65,37 @@
</p> </p>
</li> </li>
</ul> </ul>
<div class="no-result-wrapper" *ngIf="prodService.product.length === 0"> </div>
<img src="../../assets/basket.png" /> <ul
<h1>No result found</h1> [class.grid_view]="onGrid"
<button (click)="goToPage('home')">home</button> *ngIf="prodService.product && prodService.product.length > 0"
</div> >
<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>
<div class="sort_wrappper" *ngIf="isShow" [@slideInOut]> <div class="sort_wrappper" *ngIf="isShow" [@slideInOut]>
<div class="sort_inner"> <div class="sort_inner">
......
src/app/productlist/productlist.page.scss
...@@ -259,6 +259,13 @@ ...@@ -259,6 +259,13 @@
} }
} }
.load-back {
height: 100%;
width: 100%;
background-image: url('../../assets/giphy.gif');
background-position: center;
}
.no-result-wrapper { .no-result-wrapper {
text-align: center; text-align: center;
padding-top: 40%; padding-top: 40%;
......
src/app/profile/profile.page.html
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<ion-content> <ion-content>
<div class="profile_wrapper" *ngIf="loggedUser"> <div class="profile_wrapper" *ngIf="loggedUser">
<div class="profile_banner"> <div class="profile_banner">
...@@ -123,21 +124,21 @@ ...@@ -123,21 +124,21 @@
</ion-col> </ion-col>
</ion-row> </ion-row>
</div> </div>
</div> <div class="logout-pop-wrapper" *ngIf="isShow" [@slideInOut]>
<div class="logout-pop-wrapper" *ngIf="isShow" [@slideInOut]> <div class="logout_inner">
<div class="logout_inner"> <h4>Logout</h4>
<h4>Logout</h4> <p>Are you sure to Logout ?</p>
<p>Are you sure to Logout ?</p> <div class="logout_footer">
<div class="logout_footer"> <button class="btn-cancel floatLeft" (click)="istoggle();">
<button class="btn-cancel floatLeft" (click)="istoggle();"> Cancel
Cancel </button>
</button> <button
<button class="btn-logout floatRight"
class="btn-logout floatRight" (click)="authService.SignOut(); istoggle()"
(click)="authService.SignOut(); istoggle()" >
> Logout
Logout </button>
</button> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
......
src/app/profile/profile.page.scss
.profile_wrapper { .profile_wrapper {
.profile_banner { .profile_banner {
width: 100%;
background-image: url('../../assets/profile_banner.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
padding-top: 40px;
.profile_circle {
width: 100px;
height: 100px;
background-color: #fff;
border-radius: 50%;
position: relative;
margin: 0 auto;
img {
width: 100%; width: 100%;
background-image: url('../../assets/profile_banner.png'); height: 100%;
background-position: center; object-fit: cover;
background-repeat: no-repeat; object-position: center;
background-size: cover; border-radius: 50%;
text-align: center;
padding-top: 40px;
.profile_circle {
width: 100px;
height: 100px;
background-color: #fff;
border-radius: 50%;
position: relative;
margin: 0 auto;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 50%;
}
input {
width: 80px;
height: 100%;
opacity: 0;
cursor: pointer;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
.edit {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
object-position: center;
background-color: #000;
background-image: url('../../assets/edit_icon.png');
background-size: cover;
cursor: pointer;
position: absolute;
top: 0px;
right: 0px;
}
}
h5 {
text-align: center;
color: #fff;
margin: 0px;
padding-top: 15px;
font-weight: 600;
padding-bottom: 5px;
}
p {
color: rgba(206, 153, 76, 1);
text-align: center;
margin: 0px;
padding-bottom: 20px;
font-weight: 700;
}
}
.account_wrapper {
width: calc(100% - 40px);
margin: 0 auto;
padding-top: 20px;
padding-bottom: 100px;
.account_header {
padding-bottom: 15px;
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
font-weight: 900;
}
span {
color: rgba(59, 57, 77, 1);
img {
width: 20px;
}
}
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
font-size: 18px;
span {
color: rgba(206, 153, 76, 1);
margin-left: 10px;
}
}
h6 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
font-size: 18px;
ion-icon {
color: rgba(176, 174, 199, 1);
}
}
.row {
padding-bottom: 20px;
}
hr {
border-bottom: 1px solid rgba(176, 174, 199, 0.5);
height: 0px;
border-top: none;
margin-top: 15px;
margin-bottom: 15px;
}
} }
.logout-pop-wrapper { input {
height: 100vh; width: 80px;
width: 100%; height: 100%;
position: fixed; opacity: 0;
cursor: pointer;
position: absolute;
top: 0px; top: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
background: rgba(0, 0, 0, 0.6); }
z-index: 99; .edit {
.logout_inner { width: 30px;
margin: 0 auto; height: 30px;
width: 280px; border-radius: 50%;
padding: 10px; object-fit: cover;
padding-left: 15px; object-position: center;
padding-right: 15px; background-color: #000;
padding-bottom: 15px; background-image: url('../../assets/edit_icon.png');
background-size: cover;
cursor: pointer;
position: absolute;
top: 0px;
right: 0px;
}
}
h5 {
text-align: center;
color: #fff;
margin: 0px;
padding-top: 15px;
font-weight: 600;
padding-bottom: 5px;
}
p {
color: rgba(206, 153, 76, 1);
text-align: center;
margin: 0px;
padding-bottom: 20px;
font-weight: 700;
}
}
.account_wrapper {
width: calc(100% - 40px);
margin: 0 auto;
padding-top: 20px;
padding-bottom: 100px;
.account_header {
padding-bottom: 15px;
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
font-weight: 900;
}
span {
color: rgba(59, 57, 77, 1);
img {
width: 20px;
}
}
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
font-size: 18px;
span {
color: rgba(206, 153, 76, 1);
margin-left: 10px;
}
}
h6 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
font-size: 18px;
ion-icon {
color: rgba(176, 174, 199, 1);
}
}
.row {
padding-bottom: 20px;
}
hr {
border-bottom: 1px solid rgba(176, 174, 199, 0.5);
height: 0px;
border-top: none;
margin-top: 15px;
margin-bottom: 15px;
}
}
.logout-pop-wrapper {
height: 100vh;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: rgba(0, 0, 0, 0.6);
z-index: 99;
.logout_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: 50%;
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;
}
p {
text-align: center;
}
.logout_footer {
padding-top: 10px;
button {
border-radius: 8px;
height: 40px;
width: 48%;
color: #fff;
font-size: 15px;
font-weight: lighter;
text-transform: uppercase;
}
.btn-cancel {
border: 1px solid #29285B;
background-color: #29285B;
}
.btn-logout {
background-color: #fff; background-color: #fff;
position: relative; border: 1px solid rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3); color: #000;
-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: 50%;
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;
}
p {
text-align: center;
}
.logout_footer {
padding-top: 10px;
button {
border-radius: 8px;
height: 40px;
width: 48%;
color: #fff;
font-size: 15px;
font-weight: lighter;
text-transform: uppercase;
}
.btn-cancel {
border: 1px solid #29285B;
background-color: #29285B;
}
.btn-logout {
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.16);
color: #000;
}
}
} }
} }
} }
\ No newline at end of file }
}
\ No newline at end of file
src/app/success/success.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 { SuccessPage } from './success.page';
const routes: Routes = [
{
path: '',
component: SuccessPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [SuccessPage]
})
export class SuccessPageModule {}
src/app/success/success.page.html 0 → 100644
<ion-content>
<div class="success_wrapper">
<div class="cart_head">
<div class="cart_menu_header">
<ul>
<li class="textCenter active">CART</li>
<li class="textCenter">
<hr>
</li>
<li class="textCenter">CHECKOUT</li>
<li class="textCenter">
<hr>
</li>
<li class="textCenter">FINISH</li>
</ul>
</div>
<div class="success-set">
<img src="../../assets/white_tick.png">
<h1>Order is placed</h1>
<h2>June 26th 2019, 03:00 PM</h2>
</div>
</div>
<div class="product-countdown">
<h1>The product will be delivered in</h1>
<h2>00:59<span>30</span></h2>
<button>View Orders</button>
<h3>home</h3>
</div>
</div>
</ion-content>
\ No newline at end of file
src/app/success/success.page.scss 0 → 100644
.success_wrapper {
width: 100%;
.cart_head {
width: 100%;
height: auto;
background-image: url("../../assets/[email protected]");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 35px;
.nav_header {
position: static;
background-color: transparent;
.nav_title {
h4 {
color: #FFF;
}
}
}
.cart_menu_header {
padding: 50px 20px 20px 20px;
ul {
margin: 0px;
padding: 10px;
background-color: rgba(273, 273, 273, 0.1);
border-radius: 10px;
li {
list-style: none;
color: #FFF;
width: 20%;
display: inline-block;
font-weight: 700;
font-size: 13px;
hr {
height: 0px;
border-top: none;
width: 90%;
margin-top: 0px;
margin-bottom: 0px;
position: relative;
margin: 0 auto;
border-bottom: 2px dashed rgba(176, 174, 199, 1);
bottom: 4px;
}
}
}
}
.success-set {
text-align: center;
margin-top: 50px;
img {
width: 75px;
}
h1 {
color: #fff;
font-size: 18px;
font-weight: bolder;
margin-top: 5px;
margin-bottom: 0;
text-transform: uppercase;
}
h2 {
color: #fff;
font-size: 12px;
font-weight: lighter;
margin-top: 2px;
}
}
}
.product-countdown {
padding: 20px;
text-align: center;
margin-top: 25px;
h1 {
color: #B0AEC7;
font-size: 16px;
margin-top: 10px;
}
h2 {
color: #3B394D;
font-size: 40px;
font-weight: bolder;
margin-top: 15px;
span {
font-size: 16px;
font-weight: lighter;
}
}
button {
background-color: #29285b;
border-radius: 8px;
height: 50px;
width: 48%;
color: #fff;
font-size: 18px;
font-weight: lighter;
text-transform: uppercase;
margin-top: 25px;
margin-bottom: 50px;
}
h3 {
color: #29285b;
background: none;
font-size: 20px;
font-weight: bolder;
text-transform: uppercase;
margin-top: 20px;
margin-bottom: 50px;
}
}
}
@media only screen and (max-width: 350px) {
.cart_head {
padding-bottom: 15px !important;
.cart_menu_header {
padding: 20px !important;
ul {
li {
font-size: 12px !important;
}
}
}
.success-set {
margin-top: 0 !important;
}
}
}
\ No newline at end of file
src/app/success/success.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SuccessPage } from './success.page';
describe('SuccessPage', () => {
let component: SuccessPage;
let fixture: ComponentFixture<SuccessPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SuccessPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SuccessPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/success/success.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-success',
templateUrl: './success.page.html',
styleUrls: ['./success.page.scss'],
})
export class SuccessPage implements OnInit {
constructor() { }
ngOnInit() {
}
}
src/config/products.service.ts
...@@ -148,6 +148,7 @@ export class ProductsService { ...@@ -148,6 +148,7 @@ export class ProductsService {
image: item.image, image: item.image,
price: item.price, price: item.price,
qty: item.qty, qty: item.qty,
rating: item.rating,
shopper: item.shopper, shopper: item.shopper,
skuCode: item.skuCode, skuCode: item.skuCode,
status: item.status, status: item.status,
...@@ -201,6 +202,7 @@ export class ProductsService { ...@@ -201,6 +202,7 @@ export class ProductsService {
price: item.price, price: item.price,
qty: item.qty, qty: item.qty,
shopper: item.shopper, shopper: item.shopper,
rating: item.rating,
skuCode: item.skuCode, skuCode: item.skuCode,
status: item.status, status: item.status,
size: this.service.splitSep(item.size), size: this.service.splitSep(item.size),
......
src/global.scss
...@@ -416,6 +416,10 @@ app-deliverypop { ...@@ -416,6 +416,10 @@ app-deliverypop {
padding: 0px !important; padding: 0px !important;
} }
app-success {
padding: 0px !important;
}
.nav_header { .nav_header {
position: fixed; position: fixed;
top: 0px; top: 0px;
......
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