Skip to content

G
getme
Commit 9e070769 by Adarsh K
Options

latest push

parents 28c6ade0 e34368fe
Showing with 751 additions and 608 deletions
src/app/app.component.html
...@@ -87,9 +87,13 @@ ...@@ -87,9 +87,13 @@
(click)="setActive3()" (click)="setActive3()"
></div> ></div>
</li> </li>
<!-- <li (click)="goToPage('cart')"> <li (click)="goToPage('cart')">
<div class="icon_sec m4_icon" [class.m4_icon_act]="sec_active4" (click)="setActive4()"></div> <div
</li> --> class="icon_sec m4_icon"
[class.m4_icon_act]="sec_active4"
(click)="setActive4()"
></div>
</li>
<li (click)="goToPage('myorder')"> <li (click)="goToPage('myorder')">
<div <div
class="icon_sec m5_icon" class="icon_sec m5_icon"
......
src/app/app.component.scss
@import url('https://fonts.googleapis.com/css?family=Abel&display=swap'); @import url('https://fonts.googleapis.com/css?family=Abel&display=swap');
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
* { * {
font-family: 'Abel', sans-serif; font-family: 'Abel', sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
.side_menu_wrapper { .side_menu_wrapper {
background: rgba(41, 40, 91, 1); background: rgba(41, 40, 91, 1);
width: 100%; width: 100%;
height: 100vh; height: 100vh;
padding-left: 20px; padding-left: 20px;
padding-top: 20px; padding-top: 20px;
padding-right: 10px; padding-right: 10px;
.top_banner { .top_banner {
.top_image { .top_image {
width: 60px; width: 60px;
height: 60px; height: 60px;
float: left; float: left;
border-radius: 50%; border-radius: 50%;
background-color: #fff; background-color: #fff;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
object-position: center; object-position: center;
border-radius: 50%; border-radius: 50%;
} }
} }
.top_detail { .top_detail {
width: calc(100% - 60px); width: calc(100% - 60px);
float: left; float: left;
padding: 7px; padding: 7px;
padding-left: 15px; padding-left: 15px;
h4 { h4 {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
color: #fff; color: #fff;
} }
p { p {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
color: #fff; color: #fff;
color: rgba(176, 174, 199, 1); color: rgba(176, 174, 199, 1);
} }
}
} }
}
} }
.sidemenu_list { .sidemenu_list {
padding-top: 30px; padding-top: 30px;
ul { ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
color: #fff;
font-weight: 200;
font-size: 15px;
padding: 10px;
font-size: 16px;
&:focus {
background-color: rgba(40, 36, 88, 1);
}
&:hover {
background-color: rgba(40, 36, 88, 1);
}
.version {
color: rgba(176, 174, 199, 1);
font-size: 14px;
}
}
.sub_menu {
padding-left: 25px;
margin-bottom: 40px;
padding-top: 10px;
ul {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
li { li {
list-style: none; list-style: none;
color: rgba(176, 174, 199, 1); color: #fff;
font-weight: 200;
font-size: 15px;
padding: 10px;
font-size: 16px;
&:focus {
background-color: rgba(40, 36, 88, 1);
}
&:hover {
background-color: rgba(40, 36, 88, 1);
}
.version {
color: rgba(176, 174, 199, 1);
font-size: 14px;
}
}
.sub_menu {
padding-left: 25px;
margin-bottom: 40px;
padding-top: 10px;
ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
color: rgba(176, 174, 199, 1);
}
}
} }
}
} }
}
} }
.common_tab { .common_tab {
position: fixed; position: fixed;
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
width: 100%;
height: 50px;
background-color: #fff;
-webkit-box-shadow: 0px 0px 5px 7px rgba(215, 213, 228, 0.5);
-moz-box-shadow: 0px 0px 5px 7px rgba(215, 213, 228, 0.5);
box-shadow: 0px 0px 5px 7px rgba(215, 213, 228, 0.5);
ul {
margin: 0px;
padding: 0px;
width: 100%; width: 100%;
height: 100%; height: 50px;
li { background-color: #fff;
list-style: none; -webkit-box-shadow: 0px 0px 5px 7px rgba(215, 213, 228, 0.5);
display: inline-block; -moz-box-shadow: 0px 0px 5px 7px rgba(215, 213, 228, 0.5);
width: 20%; box-shadow: 0px 0px 5px 7px rgba(215, 213, 228, 0.5);
height: 100%; ul {
text-align: center; margin: 0px;
background-repeat: no-repeat; padding: 0px;
background-position: center; width: 100%;
background-size: 25px; height: 100%;
} display: flex;
.icon_sec { justify-content: space-between;
width: 50px; li {
height: 50px; list-style: none;
background-image: url('../assets/icon_sprite.png'); display: inline-block;
margin: 0 auto; height: 100%;
background-repeat: no-repeat; text-align: center;
background-size: 450px; background-repeat: no-repeat;
} background-position: center;
.m1_icon { background-size: 25px;
background-position: top -6px left -249px; }
} .icon_sec {
.m1_icon_act { width: 50px;
background-image: url('../assets/icon_sprite_active.png') !important; height: 50px;
background-position: top -6px left -249px; background-image: url('../assets/icon_sprite.png');
} margin: 0 auto;
.m2_icon { background-repeat: no-repeat;
background-position: top -3px left -88px; background-size: 450px;
} }
.m2_icon_act { .m1_icon {
background-image: url('../assets/icon_sprite_active.png') !important; background-position: top -6px left -249px;
background-position: top -3px left -88px; }
} .m1_icon_act {
.m3_icon { background-image: url('../assets/icon_sprite_active.png') !important;
background-position: top -6px left -167px; background-position: top -6px left -249px;
} }
.m3_icon_act { .m2_icon {
background-image: url('../assets/icon_sprite_active.png') !important; background-position: top -3px left -88px;
background-position: top -6px left -167px; }
} .m2_icon_act {
.m4_icon { background-image: url('../assets/icon_sprite_active.png') !important;
background-position: top -6px left -5px; background-position: top -3px left -88px;
} }
.m4_icon_act { .m3_icon {
background-image: url('../assets/icon_sprite_active.png') !important; background-position: top -6px left -167px;
background-position: top -6px left -5px; }
} .m3_icon_act {
.m5_icon { background-image: url('../assets/icon_sprite_active.png') !important;
background-position: top -6px left -325px; background-position: top -6px left -167px;
} }
.m5_icon_act { .m4_icon {
background-image: url('../assets/icon_sprite_active.png') !important; background-position: top -6px left -5px;
background-position: top -6px left -325px; }
} .m4_icon_act {
.m6_icon { background-image: url('../assets/icon_sprite_active.png') !important;
background-position: top -6px left -398px; background-position: top -6px left -5px;
} }
.m6_icon_act { .m5_icon {
background-image: url('../assets/icon_sprite_active.png') !important; background-position: top -6px left -325px;
background-position: top -6px left -398px; }
.m5_icon_act {
background-image: url('../assets/icon_sprite_active.png') !important;
background-position: top -6px left -325px;
}
.m6_icon {
background-position: top -6px left -398px;
}
.m6_icon_act {
background-image: url('../assets/icon_sprite_active.png') !important;
background-position: top -6px left -398px;
}
} }
} }
} \ No newline at end of file
src/app/app.component.ts
...@@ -89,10 +89,6 @@ export class AppComponent { ...@@ -89,10 +89,6 @@ export class AppComponent {
}); });
} }
hideTab() {
alert('asdasdas');
}
async finishpop(data: any) { async finishpop(data: any) {
const modal = await this.modalController.create({ const modal = await this.modalController.create({
component: DeliverypopPage, component: DeliverypopPage,
......
src/app/cart/cart.page.ts
...@@ -48,6 +48,7 @@ export class CartPage implements OnInit { ...@@ -48,6 +48,7 @@ export class CartPage implements OnInit {
discount: number; discount: number;
totalAmt: number; totalAmt: number;
bookDate: any; bookDate: any;
timeinterval: any;
constructor( constructor(
private router: Router, private router: Router,
...@@ -59,6 +60,7 @@ export class CartPage implements OnInit { ...@@ -59,6 +60,7 @@ export class CartPage implements OnInit {
public service: ServiceService, public service: ServiceService,
public addressService: AddressService public addressService: AddressService
) { ) {
console.log('cart loaded');
this.bookDate = this.formatDate(); this.bookDate = this.formatDate();
this.currentIndex = 0; this.currentIndex = 0;
this.count = 1; this.count = 1;
...@@ -67,7 +69,7 @@ export class CartPage implements OnInit { ...@@ -67,7 +69,7 @@ export class CartPage implements OnInit {
this.taxAmount = 0; this.taxAmount = 0;
this.discountApplied = false; this.discountApplied = false;
this.discount = 0; this.discount = 0;
this.cartService.cartList(); // this.cartService.cartList();
this.loader = true; this.loader = true;
const users = this.service.get('user').then(data => { const users = this.service.get('user').then(data => {
if (data) { if (data) {
...@@ -86,6 +88,15 @@ export class CartPage implements OnInit { ...@@ -86,6 +88,15 @@ export class CartPage implements OnInit {
this.setAddress(); this.setAddress();
} }
ionViewWillEnter() {
const users = this.service.get('user').then(data => {
if (data) {
data = JSON.parse(data);
this.cartService.cartList();
}
});
}
setAddress() { setAddress() {
if (this.addressService.addressList.length > 0) { if (this.addressService.addressList.length > 0) {
let address = this.addressService.addressList.find( let address = this.addressService.addressList.find(
...@@ -171,6 +182,10 @@ export class CartPage implements OnInit { ...@@ -171,6 +182,10 @@ export class CartPage implements OnInit {
.checkOut(this.cartService.carts, otherCharges) .checkOut(this.cartService.carts, otherCharges)
.then(data => { .then(data => {
console.log('ready for slide'); console.log('ready for slide');
const timeStamp = Math.floor(Date.now() / 1000);
this.timeinterval = setInterval(() => {
this.getDeliveryTime(timeStamp);
}, 1000);
this.slides.slideNext(); this.slides.slideNext();
}); });
} else { } else {
...@@ -181,6 +196,31 @@ export class CartPage implements OnInit { ...@@ -181,6 +196,31 @@ export class CartPage implements OnInit {
} }
} }
getDeliveryTime(timeStamp) {
console.log(timeStamp);
const endDate = new Date(timeStamp * 1000);
console.log(endDate);
endDate.setHours(endDate.getHours() + 1);
const t = this.getTimeRemaining(endDate, new Date());
const minutes = t.minutes < 10 ? '0' + t.minutes : t.minutes;
const seconds = t.seconds < 10 ? '0' + t.seconds : t.seconds;
this.deliveryTime = minutes + ' : ' + seconds;
if (t.t <= 0) {
clearInterval(this.timeinterval);
}
}
getTimeRemaining(endtime, currDate) {
const t = Date.parse(endtime) - Date.parse(currDate);
const seconds = Math.floor((t / 1000) % 60);
const minutes = Math.floor((t / 1000 / 60) % 60);
return {
t,
minutes,
seconds
};
}
prev() { prev() {
this.slides.slidePrev(); this.slides.slidePrev();
} }
......
src/app/nearby/nearby.page.scss
.nearby_map { .nearby_map {
width: 100%;
height: 100vh;
.overlay {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: rgba(29, 27, 130, 0.2);
}
agm-map {
width: 100%; width: 100%;
height: 100vh; height: 100%;
.overlay { position: relative;
position: absolute; }
top: 0px; .click_marker {
left: 0px; min-width: 200px;
right: 0px; padding: 10px;
bottom: 0px; h5 {
background: rgba(29, 27, 130, 0.2); margin: 0px;
} padding: 0px;
agm-map {
width: 100%;
height: 100%;
position: relative;
} }
.click_marker { p {
min-width: 200px; margin: 0px;
padding: 10px; padding: 0px;
h5 {
margin: 0px;
padding: 0px;
}
p {
margin: 0px;
padding: 0px;
}
} }
}
} }
.add_address_wrapper { .add_address_wrapper {
position: fixed; position: fixed;
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
padding: 20px; padding: 20px;
border-top-left-radius: 15px; border-top-left-radius: 15px;
border-top-right-radius: 15px; border-top-right-radius: 15px;
background: #fff; background: #fff;
-webkit-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
h5 { h5 {
color: rgba(41, 40, 91, 1); color: rgba(41, 40, 91, 1);
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
font-weight: 800; font-weight: 800;
} }
p {} p {
input { }
width: 100%; input {
height: 45px; width: 100%;
border: 1px solid #E1E0EB; height: 45px;
border-radius: 4px; border: 1px solid #e1e0eb;
padding-left: 10px; border-radius: 4px;
padding-right: 10px; padding-left: 10px;
margin-bottom: 20px; padding-right: 10px;
} margin-bottom: 20px;
.add_btn { }
width: 100%; .add_btn {
height: 45px; width: 100%;
background-color: #29285B; height: 45px;
color: #fff; background-color: #29285b;
border-radius: 4px; color: #fff;
} border-radius: 4px;
}
} }
.styled-checkbox { .styled-checkbox {
position: absolute; // take it out of document flow position: absolute; // take it out of document flow
opacity: 0; // hide it opacity: 0; // hide it
&+label { & + label {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
} }
// Box. // Box.
&+label:before { & + label:before {
content: ''; content: '';
margin-right: 10px; margin-right: 10px;
display: inline-block; display: inline-block;
vertical-align: text-top; vertical-align: text-top;
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 10px; border-radius: 10px;
background: white; background: white;
border: 1px solid rgba(215, 213, 228, 1); border: 1px solid rgba(215, 213, 228, 1);
} }
// Box hover // Box hover
// Box checked // Box checked
&:checked+label:before { &:checked + label:before {
background: #29285b; background: #29285b;
} }
// Disabled state label. // Disabled state label.
&:disabled+label { &:disabled + label {
color: #b8b8b8; color: #b8b8b8;
cursor: auto; cursor: auto;
} }
// Disabled box. // Disabled box.
&:disabled+label:before { &:disabled + label:before {
box-shadow: none; box-shadow: none;
background: #ddd; background: #ddd;
} }
// Checkmark. Could be replaced with an image // Checkmark. Could be replaced with an image
&:checked+label:after { &:checked + label:after {
content: ''; content: '';
position: absolute; position: absolute;
left: 6px; left: 6px;
top: 11px; top: 11px;
background: white; background: white;
width: 2px; width: 2px;
height: 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; box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white,
transform: rotate(45deg); 4px -6px 0 white, 4px -8px 0 white;
} transform: rotate(45deg);
} }
\ No newline at end of file }
src/app/ordercancelled/ordercancelled.page.html
<ion-content> <ion-content>
<div class="cart_wrapper"> <div class="cart_wrapper" *ngIf="data">
<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
<img src="../assets/arrow_white.png"> class="nav_btn nav_back_white floatLeft"
(click)="goToPage('myorder')"
>
<img src="../assets/arrow_white.png" />
</button> </button>
<div class="nav_title floatLeft"> <div class="nav_title floatLeft">
<h4></h4> <h4></h4>
</div>
<button class="nav_btn floatRight">
</button>
<div class="clear"></div>
</div>
<img [src]="data.product[0].image" onerror="this.src='../assets/[email protected]'">
<h4>ORDER CANCELLED</h4>
<p>June 26th 2019, 03:00 PM</p>
</div>
<div class="nearby_shop_list">
<ul>
<li (click)="goToPage('productlist')">
<div class="nearby_image">
<img src="../assets/[email protected]">
</div>
<div class="nearby_detail">
<h5>
<span class="floatLeft">Carnival Life</span>
<span class="floatRight">4
<img src="../assets/Path61_2.png">
</span>
<div class="clear"></div>
</h5>
<p>Men's & Women's Fashion</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
<div class="product_detail">
<h6>Green, Small</h6>
<h5>Quantity : <span>3</span></h5>
<h5>Amount : <strong>AU$99.00</strong></h5>
<h5>Delivery time : <span>Delivery in 1 hour</span></h5>
<h4>DELIVERY</h4>
<h5>
Shamjith KS<br> +00 0000 888 888<br> Carnival Infopark Infopark Kochi<br> 682030, Kerala, India
</h5>
<button class="cancel_btn" (click)="goToPage('productdetail')">BUY NOW</button>
<hr>
</div> </div>
<button class="nav_btn floatRight"></button>
<div class="related_product_slider"> <div class="clear"></div>
</div>
<img onerror="this.src='../assets/[email protected]'" />
<h4>ORDER CANCELLED</h4>
<p>{{orderCancelled | date:'MMMM dd, y'}}</p>
</div>
<div class="nearby_shop_list">
<ul>
<li (click)="goToPage('productlist')">
<div class="nearby_image">
<img
[src]="data.product[0].image"
onerror="this.src='../assets/[email protected]'"
/>
</div>
<div class="nearby_detail">
<h5> <h5>
<span class="floatLeft">Related Products</span><span class="floatRight">MORE</span> <span class="floatLeft">{{data.shopperName}}</span>
<div class="clear"></div> <span class="floatRight"
>4
<img src="../assets/Path61_2.png" />
</span>
<div class="clear"></div>
</h5> </h5>
<ul> <p>Men's & Women's Fashion</p>
<ion-slides pager="false" [options]="relatedProd"> </div>
<ion-slide> <div class="clear"></div>
<li (click)="goToPage('productdetail')"> </li>
<div class="product_image"> </ul>
<img src="../assets/[email protected]">
<div class="fav_icon">
</div>
</div>
<h5>European Style V Neck</h5>
<p>AU$99.00</p>
</li>
</ion-slide>
<ion-slide>
<li (click)="goToPage('productdetail')">
<div class="product_image">
<img src="../assets/Recommended-Ball-Gown-Floor-Length-V-Neck-Lace-Organza-Prom-Dress-OD850662@3x.png">
<div class="fav_icon">
</div>
</div>
<h5>European Style V Neck</h5>
<p>AU$99.00</p>
</li>
</ion-slide>
<ion-slide>
<li (click)="goToPage('productdetail')">
<div class="product_image">
<img src="../assets/[email protected]">
<div class="fav_icon">
</div>
</div>
<h5>European Style V Neck</h5>
<p>AU$99.00 <span class="offer">-8%</span></p>
</li>
</ion-slide>
<ion-slide>
<li (click)="goToPage('productdetail')">
<div class="product_image">
<img src="../assets/[email protected]">
<div class="fav_icon">
</div>
<div class="featured_badge">Featured</div>
</div>
<h5>European Style V Neck</h5>
<p>AU$99.00<span>AU$110.00</span></p>
</li>
</ion-slide>
</ion-slides>
</ul>
</div>
</div> </div>
</ion-content> <div class="product_detail" *ngFor="let product of data.product">
\ No newline at end of file <h6>
<span *ngIf="product.color !== 'No-Color'">{{product.color}}, </span>
<span *ngIf="product.size !== 'Any-Size'">{{product.size}}</span>
</h6>
<h5>Quantity : <span>{{product.qty}}</span></h5>
<h5>Amount : <strong>A$ {{product.price}}</strong></h5>
<h5>Delivery time : <span> 1 hour</span></h5>
<h4>DELIVERY</h4>
<h5 *ngIf="data.deliveryAddress">
{{data.deliveryAddress.addressType}},<br />{{data.deliveryAddress.address}},
<br />
{{data.deliveryAddress.building}}, <br />
{{data.deliveryAddress.landmark}}
</h5>
<!-- <button
class="cancel_btn"
(click)="goToPage('ordercancelled')"
>
BUY NOW
</button> -->
<!-- <hr /> -->
</div>
<!-- <div class="related_product_slider">
<h5>
<span class="floatLeft">Related Products</span
><span class="floatRight">MORE</span>
<div class="clear"></div>
</h5>
<ul>
<ion-slides pager="false" [options]="relatedProd">
<ion-slide>
<li (click)="goToPage('productdetail')">
<div class="product_image">
<img src="../assets/[email protected]" />
<div class="fav_icon"></div>
</div>
<h5>European Style V Neck</h5>
<p>AU$99.00</p>
</li>
</ion-slide>
<ion-slide>
<li (click)="goToPage('productdetail')">
<div class="product_image">
<img
src="../assets/Recommended-Ball-Gown-Floor-Length-V-Neck-Lace-Organza-Prom-Dress-OD850662@3x.png"
/>
<div class="fav_icon"></div>
</div>
<h5>European Style V Neck</h5>
<p>AU$99.00</p>
</li>
</ion-slide>
<ion-slide>
<li (click)="goToPage('productdetail')">
<div class="product_image">
<img src="../assets/[email protected]" />
<div class="fav_icon"></div>
</div>
<h5>European Style V Neck</h5>
<p>AU$99.00 <span class="offer">-8%</span></p>
</li>
</ion-slide>
<ion-slide>
<li (click)="goToPage('productdetail')">
<div class="product_image">
<img src="../assets/[email protected]" />
<div class="fav_icon"></div>
<div class="featured_badge">Featured</div>
</div>
<h5>European Style V Neck</h5>
<p>AU$99.00<span>AU$110.00</span></p>
</li>
</ion-slide>
</ion-slides>
</ul>
</div> -->
</div>
</ion-content>
src/app/ordercancelled/ordercancelled.page.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common'; import { Location } from '@angular/common';
import { Router, ActivatedRoute } from '@angular/router'; import { Router, ActivatedRoute } from '@angular/router';
import { ServiceService } from './../../config/service.service';
@Component({ @Component({
selector: 'app-ordercancelled', selector: 'app-ordercancelled',
templateUrl: './ordercancelled.page.html', templateUrl: './ordercancelled.page.html',
styleUrls: ['./ordercancelled.page.scss'], styleUrls: ['./ordercancelled.page.scss']
}) })
export class OrdercancelledPage implements OnInit { export class OrdercancelledPage implements OnInit {
data: any;
orderCancelled = new Date();
constructor( constructor(
private router: Router, private router: Router,
private route: ActivatedRoute, private route: ActivatedRoute,
private location: Location private location: Location,
) { } private service: ServiceService
) {
ngOnInit() { this.service.get('order').then(val => {
this.data = val;
});
} }
ngOnInit() {}
relatedProd = { relatedProd = {
slidesPerView: 2 slidesPerView: 2
} };
goToPage(path, data = null) { goToPage(path, data = null) {
this.router.navigateByUrl(path, { queryParams: data }); this.router.navigateByUrl(path, { queryParams: data });
...@@ -29,6 +35,5 @@ export class OrdercancelledPage implements OnInit { ...@@ -29,6 +35,5 @@ export class OrdercancelledPage implements OnInit {
goBack() { goBack() {
this.location.back(); this.location.back();
} }
} }
src/app/orderplaced/orderplaced.page.html
...@@ -89,7 +89,10 @@ ...@@ -89,7 +89,10 @@
Amount : <strong>A$ {{product.price}}</strong Amount : <strong>A$ {{product.price}}</strong
><span class="afterpay">COD</span> ><span class="afterpay">COD</span>
</h5> </h5>
<h5>Delivery time : <span>{{deliveryTime}}</span></h5> <h5 *ngIf="data.orderStatus >= 3 && data.orderStatus < 7">
Delivery time : <span>{{deliveryTime}}</span>
</h5>
<h5>Order Status : <span>{{getStatus(data.orderStatus)}}</span></h5>
<h4>DELIVERY</h4> <h4>DELIVERY</h4>
<h5 *ngIf="data.deliveryAddress"> <h5 *ngIf="data.deliveryAddress">
{{data.deliveryAddress.addressType}},<br />{{data.deliveryAddress.address}}, {{data.deliveryAddress.addressType}},<br />{{data.deliveryAddress.address}},
...@@ -97,10 +100,14 @@ ...@@ -97,10 +100,14 @@
{{data.deliveryAddress.building}}, <br /> {{data.deliveryAddress.building}}, <br />
{{data.deliveryAddress.landmark}} {{data.deliveryAddress.landmark}}
</h5> </h5>
<button class="cancel_btn" (click)="goToPage('ordercancelled')"> <button
class="cancel_btn"
(click)="cancellOrder(data.orderId)"
*ngIf="cancelDelivery > 0 && data.orderStatus != 0 && data.orderStatus != 8"
>
CANCEL THIS ORDER CANCEL THIS ORDER
</button> </button>
<hr /> <!-- <hr /> -->
</div> </div>
<!-- <div class="related_product_slider"> <!-- <div class="related_product_slider">
......
src/app/orderplaced/orderplaced.page.ts
...@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core'; ...@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common'; import { Location } from '@angular/common';
import { Router, ActivatedRoute } from '@angular/router'; import { Router, ActivatedRoute } from '@angular/router';
import { ServiceService } from './../../config/service.service'; import { ServiceService } from './../../config/service.service';
import { MyordersService } from './../../config/myorder.service';
@Component({ @Component({
selector: 'app-orderplaced', selector: 'app-orderplaced',
...@@ -10,12 +11,14 @@ import { ServiceService } from './../../config/service.service'; ...@@ -10,12 +11,14 @@ import { ServiceService } from './../../config/service.service';
}) })
export class OrderplacedPage implements OnInit { export class OrderplacedPage implements OnInit {
deliveryTime: any; deliveryTime: any;
cancelDelivery: any;
timeinterval: any; timeinterval: any;
constructor( constructor(
private router: Router, private router: Router,
private route: ActivatedRoute, private route: ActivatedRoute,
private location: Location, private location: Location,
private service: ServiceService private service: ServiceService,
private myOrder: MyordersService
) { ) {
this.deliveryTime = ''; this.deliveryTime = '';
this.service.get('order').then(val => { this.service.get('order').then(val => {
...@@ -47,6 +50,7 @@ export class OrderplacedPage implements OnInit { ...@@ -47,6 +50,7 @@ export class OrderplacedPage implements OnInit {
getTimeRemaining(endtime, currDate) { getTimeRemaining(endtime, currDate) {
const t = Date.parse(endtime) - Date.parse(currDate); const t = Date.parse(endtime) - Date.parse(currDate);
this.cancelDelivery = t;
const seconds = Math.floor((t / 1000) % 60); const seconds = Math.floor((t / 1000) % 60);
const minutes = Math.floor((t / 1000 / 60) % 60); const minutes = Math.floor((t / 1000 / 60) % 60);
return { return {
...@@ -66,4 +70,55 @@ export class OrderplacedPage implements OnInit { ...@@ -66,4 +70,55 @@ export class OrderplacedPage implements OnInit {
goBack() { goBack() {
this.location.back(); this.location.back();
} }
cancellOrder(orderId) {
console.log(orderId);
this.myOrder.cancelOrder(orderId).then(() => {
this.service.showToast('Order cancelled!', 'top', 'my-toast', 1000);
const This = this;
setTimeout(() => {
This.goToPage('ordercancelled');
}, 1100);
});
}
getStatus(status: number) {
switch (status) {
case 1:
return 'Booked';
break;
case 2:
return 'Shop Accepted';
break;
case 3:
return 'Rider Assigned';
break;
case 4:
return 'Reached Shop';
break;
case 5:
return 'Picked Up';
break;
case 6:
return 'Reached Location';
break;
case 7:
return 'Delivered';
break;
case 9:
return 'Completed';
break;
case 8:
return 'Rejected';
break;
case 10:
return 'Not Received';
break;
case 0:
return 'Cancelled';
break;
default:
return 'Finished';
}
}
} }
src/app/productdetail/productdetail.page.ts
...@@ -134,7 +134,7 @@ export class ProductdetailPage implements OnInit { ...@@ -134,7 +134,7 @@ export class ProductdetailPage implements OnInit {
if (type === 1) { if (type === 1) {
this.router.navigateByUrl('cart'); this.router.navigateByUrl('cart');
} else { } else {
// alert('Product added to cart'); this.service.showToast('Added into cart', 'top', 'my-toast', 2000);
} }
this.cartService.cartList(); this.cartService.cartList();
}); });
......
src/app/profile/profile.page.html
...@@ -42,14 +42,16 @@ ...@@ -42,14 +42,16 @@
<ion-col class="textLeft p0"> <ion-col class="textLeft p0">
<p> <p>
Phone Phone
<span *ngIf="loggedUser.phoneVerified == true">Verified</span>
<span *ngIf="loggedUser.phoneVerified == false"
>Not Verified yet</span
>
</p> </p>
</ion-col> </ion-col>
<ion-col class="textRight p0"> <ion-col class="textRight p0">
<h6>{{loggedUser.phone}}</h6> <h6>{{loggedUser.phone}}</h6>
<span class="ar-span" *ngIf="loggedUser.phoneVerified == true"
>Verified</span
>
<span class="ar-span" *ngIf="loggedUser.phoneVerified == false"
>Not Verified yet</span
>
</ion-col> </ion-col>
</ion-row> </ion-row>
</div> </div>
...@@ -57,16 +59,17 @@ ...@@ -57,16 +59,17 @@
<ion-row> <ion-row>
<ion-col class="textLeft p0"> <ion-col class="textLeft p0">
<p> <p>
Email<span *ngIf="userData && userData.emailVerified == true" Email
>Verified</span
>
<span *ngIf="loggedUser.emailVerified == false"
>Not Verified yet</span
>
</p> </p>
</ion-col> </ion-col>
<ion-col class="textRight p0"> <ion-col class="textRight p0">
<h6>{{loggedUser.emailId}}</h6> <h6>{{loggedUser.emailId}}</h6>
<span class="ar-span" *ngIf="loggedUser.emailVerified == true"
>Verified</span
>
<span class="ar-span" *ngIf="loggedUser.emailVerified == false"
>Not Verified yet</span
>
</ion-col> </ion-col>
</ion-row> </ion-row>
</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;
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; background-size: cover;
text-align: center; cursor: pointer;
padding-top: 40px; position: absolute;
.profile_circle { top: 0px;
width: 100px; right: 0px;
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 { h5 {
width: calc(100% - 40px); text-align: center;
margin: 0 auto; color: #fff;
padding-top: 20px; margin: 0px;
padding-bottom: 100px; padding-top: 15px;
.account_header { font-weight: 600;
padding-bottom: 15px; padding-bottom: 5px;
h5 { }
margin: 0px; p {
padding: 0px; color: rgba(206, 153, 76, 1);
color: rgba(59, 57, 77, 1); text-align: center;
font-weight: 900; margin: 0px;
} padding-bottom: 20px;
span { font-weight: 700;
color: rgba(59, 57, 77, 1); }
img { }
width: 20px; .account_wrapper {
} width: calc(100% - 40px);
} margin: 0 auto;
} padding-top: 20px;
p { padding-bottom: 100px;
margin: 0px; .account_header {
padding: 0px; padding-bottom: 15px;
color: rgba(176, 174, 199, 1); h5 {
font-size: 18px; margin: 0px;
span { padding: 0px;
color: rgba(206, 153, 76, 1); color: rgba(59, 57, 77, 1);
margin-left: 10px; font-weight: 900;
} }
} span {
h6 { color: rgba(59, 57, 77, 1);
margin: 0px; img {
padding: 0px; width: 20px;
color: rgba(59, 57, 77, 1);
font-size: 18px;
ion-icon {
color: rgba(176, 174, 199, 1);
}
} }
.row { }
padding-bottom: 20px; }
.ar-span {
color: rgba(206, 153, 76, 1);
margin-left: 10px;
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
font-size: 18px;
}
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;
} }
hr { .btn-cancel {
border-bottom: 1px solid rgba(176, 174, 199, 0.5); border: 1px solid #29285b;
height: 0px; background-color: #29285b;
border-top: none;
margin-top: 15px;
margin-bottom: 15px;
} }
} .btn-logout {
.logout-pop-wrapper { background-color: #fff;
height: 100vh; border: 1px solid rgba(0, 0, 0, 0.16);
width: 100%; color: #000;
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;
border: 1px solid rgba(0, 0, 0, 0.16);
color: #000;
}
}
} }
}
} }
} }
\ No newline at end of file }
src/config/cart.service.ts
...@@ -121,6 +121,7 @@ export class CartsService { ...@@ -121,6 +121,7 @@ export class CartsService {
} }
public async cartList() { public async cartList() {
console.log('called');
const cartRef: AngularFirestoreCollection<any> = this.afs.collection( const cartRef: AngularFirestoreCollection<any> = this.afs.collection(
'carts', 'carts',
ref => ref.where('custId', '==', this.custId) ref => ref.where('custId', '==', this.custId)
......
src/config/myorder.service.ts
...@@ -79,6 +79,20 @@ export class MyordersService { ...@@ -79,6 +79,20 @@ export class MyordersService {
}); });
}*/ }*/
public async cancelOrder(orderId) {
const promise = new Promise(resolve => {
this.afs
.collection('orders')
.doc(orderId)
.update({
orderStatus: 0,
cancelTime: firebase.firestore.FieldValue.serverTimestamp()
});
resolve(true);
});
return promise;
}
public async orderList(custId) { public async orderList(custId) {
// console.log('called'); // console.log('called');
// console.log(custId); // console.log(custId);
...@@ -86,7 +100,7 @@ export class MyordersService { ...@@ -86,7 +100,7 @@ export class MyordersService {
this.orders = []; this.orders = [];
const orderRef: AngularFirestoreCollection<any> = this.afs.collection( const orderRef: AngularFirestoreCollection<any> = this.afs.collection(
'orders', 'orders',
ref => ref.where('custId', '==', custId).orderBy('bookDate', 'desc') ref => ref.where('custId', '==', custId).orderBy('orderDate', 'desc')
); );
orderRef.stateChanges().subscribe(value => { orderRef.stateChanges().subscribe(value => {
// console.log(value); // console.log(value);
...@@ -100,6 +114,7 @@ export class MyordersService { ...@@ -100,6 +114,7 @@ export class MyordersService {
const order: Myorder = { const order: Myorder = {
amount: item.amount, amount: item.amount,
status: item.status, status: item.status,
orderDate: item.orderDate,
orderStatus: item.orderStatus, orderStatus: item.orderStatus,
bookDate: item.bookDate, bookDate: item.bookDate,
deliveryLocation: item.deliveryLocation, deliveryLocation: item.deliveryLocation,
...@@ -122,6 +137,7 @@ export class MyordersService { ...@@ -122,6 +137,7 @@ export class MyordersService {
} }
} }
}); });
this.orders.sort((a, b) => Number(b.orderDate) - Number(a.orderDate));
// console.log(this.orders); // console.log(this.orders);
} }
}); });
......
src/config/order.service.ts
...@@ -170,6 +170,7 @@ export class OrdersService { ...@@ -170,6 +170,7 @@ export class OrdersService {
deliveryCharge: 'A$ ' + otherCharge.deliveryCharge, deliveryCharge: 'A$ ' + otherCharge.deliveryCharge,
deliveryLocation: delivery, deliveryLocation: delivery,
bookDate: firebase.firestore.FieldValue.serverTimestamp(), bookDate: firebase.firestore.FieldValue.serverTimestamp(),
orderDate: Math.floor(Date.now() / 1000),
orderCode: this.orderCode(), orderCode: this.orderCode(),
orderId: neworderId, orderId: neworderId,
orderStatus: 1, orderStatus: 1,
......
src/config/services/myorder.ts
export interface Myorder { export interface Myorder {
amount: string; amount: string;
bookDate: any; bookDate: any;
pickupLocation: any; orderDate: any;
deliveryLocation: any; pickupLocation: any;
deliveryAddress: any; deliveryLocation: any;
status: number; deliveryAddress: any;
orderStatus: number; status: number;
riderName: string; orderStatus: number;
orderId: string; riderName: string;
time: string; orderId: string;
product: any; time: string;
orderCode: string; product: any;
orderCode: string;
} }
src/config/services/order.ts
...@@ -29,45 +29,43 @@ ...@@ -29,45 +29,43 @@
}*/ }*/
export interface CartProd { export interface CartProd {
prodName: any; prodName: any;
prodId: string; prodId: string;
image: string; image: string;
size: string; size: string;
color: string; color: string;
qty: number; qty: number;
discount: string; discount: string;
price: string; price: string;
productDoc: any; productDoc: any;
} }
export interface Order { export interface Order {
amount: string; amount: string;
customer: any; customer: any;
custName: string; custName: string;
deliveryAddress: string; deliveryAddress: string;
deliveryCharge: string; deliveryCharge: string;
deliveryLocation: object; deliveryLocation: object;
orderCode: string; orderCode: string;
orderId: string; orderId: string;
orderStatus: number; orderStatus: number;
pickupAddress: string; pickupAddress: string;
pickupLocation: object; pickupLocation: object;
bookDate: any; bookDate: any;
custId: string; orderDate: any;
promoId: any; custId: string;
rider: any; promoId: any;
riderName: string; rider: any;
riderId: string; riderName: string;
shopper: any; riderId: string;
shopperName: string; shopper: any;
shopperId: string; shopperName: string;
status: number; shopperId: string;
shopperState: number; status: number;
product: any; shopperState: number;
tax: string; product: any;
discount: string; tax: string;
promoApplied: boolean; discount: string;
promoApplied: boolean;
} }
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