Skip to content

D
dcarfixers_angular
Commit 120c8b25 by Tobin
Options

Merge branch 'jensa' into 'master'

Jensa See merge request !36
parents 947d01ff 2b1a4830
Showing with 444 additions and 84 deletions
package.json
......@@ -41,6 +41,7 @@
"ngx-carousel": "^1.3.5",
"ngx-gallery": "^5.9.1",
"ngx-google-places-autocomplete": "^2.0.3",
"ngx-infinite-scroll": "^7.1.0",
"ngx-malihu-scrollbar": "^7.0.0",
"ngx-slick": "^0.2.1",
"node-sass": "^4.12.0",
......
src/app/purchase/orders/orders.component.scss
......@@ -3,6 +3,9 @@
width:100%;
ul{
padding:0px;
&::-webkit-scrollbar {
display: none;
}
li{
list-style: none;
background: #fff;
......
src/app/purchase/orders/orders.component.ts
import { Component, OnInit } from '@angular/core';
import { NgxCarousel } from 'ngx-carousel';
import { WebService } from '../../provider/web.service';
import { ImageStorage } from '../../../environments/server.config';
import { Router,ActivatedRoute } from '@angular/router';
@Component({
......@@ -8,20 +10,105 @@ import { Router,ActivatedRoute } from '@angular/router';
styleUrls: ['./orders.component.scss']
})
export class OrdersComponent implements OnInit {
page: number = 1;
total_page: number = 1;
loader:boolean;
loginDetails:any;
bookedData: any;
imageServer: string;
trend_loader:boolean;
trendingProductData:any;
public carouselTile: NgxCarousel;
constructor(
private router : Router,
private route : ActivatedRoute
private route : ActivatedRoute,
public webService: WebService,
) {
this.loader = true;
this.trend_loader = true;
this.imageServer = ImageStorage;
}
ngOnInit() {
this.checkUserLogin();
this.getMyOrders();
this.trendingProducts();
this.carouselTile = {grid: {xs: 1, sm: 2 , md: 4, lg: 8, all: 0},slide: 1, speed: 400,point: { visible: false },load: 2, touch: true, easing: 'ease'}
}
checkUserLogin(){
this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
}
getMyOrders(){
this.loader = true;
this.webService.post_data('getMyOrders',{"customer_id":this.loginDetails.customer_id,'page':this.page}).subscribe(response => {
if(response.status == 'success'){
this.total_page = response.meta.total_pages;
this.bookedData = response.data;
} else {
this.bookedData = false;
}
this.loader = false;
})
}
trackOrder(transId){
this.goToPage('track',{"ref":transId});
}
onScroll(){
if(this.total_page < this.page){
return false;
}
this.page += 1;
this.trend_loader = true;
this.webService.post_data('getMyOrders',{"customer_id":this.loginDetails.customer_id,'page':this.page}).subscribe(response => {
if(response.status == 'success'){
let thisObj = this;
response.data.forEach(function(orderData,key) {
thisObj.bookedData.push(orderData);
});
}
this.trend_loader = false;
});
}
cancelOrder(odrId){
if(odrId < 0){
return false;
}
this.loader = true;
this.webService.post_data('cancelOrder',{"order_id":odrId}).subscribe(response => {
if(response.status == 'success'){
this.getMyOrders();
}
this.loader = false;
})
}
trendingProducts(){
this.trend_loader = true;
this.webService.get_data('getTrendingPrdts').subscribe(response => {
if(response.status == 'success'){
this.trendingProductData = response.data;
} else {
this.trendingProductData = false;
}
this.trend_loader = false;
});
}
latestPrdtDtls(prdt_id){
this.goToPage('productdetails',{"product_id":prdt_id});
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
this.router.navigate([path],{queryParams: data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
......
src/app/purchase/productdetails/productdetails.component.html
......@@ -70,8 +70,9 @@
<div class="clear"></div>
</div>
<div class="rate_review" *ngIf="productDetails.reviews">
<ul>
<li *ngFor="let revws of productDetails.reviews">
<div class="loader_overlay" *ngIf="review_loader"></div>
<ul infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [scrollWindow]="false" style="max-height: 700px; overflow: scroll">
<li *ngFor="let revws of reviewArray">
<div class="row">
<div class="col-md-9">
<h4 class="pt0">{{revws.title}}</h4>
......@@ -106,31 +107,32 @@
</div>
</div>
<div class="bottom_product_list">
<ngx-carousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()">
<ngx-tile NgxCarouselItem> <!-- LOOP THIS -->
<li (click)="goToPage('productdetails')">
<div class="loader_overlay" *ngIf="loader2"></div>
<ngx-carousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()" *ngIf="trendingProductData">
<ngx-tile NgxCarouselItem *ngFor="let prdt of trendingProductData" >
<li (click)="latestPrdtDtls(prdt.product_id)">
<div class="inner_div_product">
<div class="product_wrapper">
<img src="/assets/images/asset_product.png">
<img src="{{imageServer + prdt.product_image}}" onerror="this.src='assets/images/user_avatar.jpg'">
</div>
<h5>JK Victory Wheelers type</h5>
<p>265/65 R17, Tubeless</p>
<h5>{{prdt.product_name}}</h5>
<p>{{prdt.short_description}}</p>
<div class="star_ratting">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf"></label>
<fieldset class="rating" *ngIf="prdt.rating > 0">
<input type="radio" [checked]="(prdt.rating >= 4.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_5'" [attr.name]="'thirdStarName_'+prdt.product_id" value="5" /><label class = "full" for="thirdStar5"></label>
<input type="radio" [checked]="(prdt.rating >= 4.25 && prdt.rating < 4.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_4half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="4.5" /><label class="half" for="thirdStar4half"></label>
<input type="radio" [checked]="(prdt.rating >= 3.75 && prdt.rating < 4.25) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_4'" [attr.name]="'thirdStarName_'+prdt.product_id" value="4" /><label class = "full" for="thirdStar4"></label>
<input type="radio" [checked]="(prdt.rating >= 3.25 && prdt.rating < 3.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_3half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="3.5" /><label class="half" for="thirdStar3half"></label>
<input type="radio" [checked]="(prdt.rating >= 2.75 && prdt.rating < 3.25) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_3'" [attr.name]="'thirdStarName_'+prdt.product_id" value="3" /><label class = "full" for="thirdStar3"></label>
<input type="radio" [checked]="(prdt.rating >= 2.25 && prdt.rating < 2.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_2half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="2.5" /><label class="half" for="thirdStar2half"></label>
<input type="radio" [checked]="(prdt.rating >= 1.75 && prdt.rating < 2.25) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_2'" [attr.name]="'thirdStarName_'+prdt.product_id" value="2" /><label class = "full" for="thirdStar2"></label>
<input type="radio" [checked]="(prdt.rating >= 1.25 && prdt.rating < 1.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_1half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="1.5" /><label class="half" for="thirdStar1half"></label>
<input type="radio" [checked]="(prdt.rating >= 0.75 && prdt.rating < 1.25) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_1'" [attr.name]="'thirdStarName_'+prdt.product_id" value="1" /><label class = "full" for="thirdStar1"></label>
<input type="radio" [checked]="(prdt.rating < 0.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="0.5" /><label class="half" for="thirdStarhalf"></label>
</fieldset>
<span class="floatRight">$320</span>
<span class="floatRight">$ {{prdt.amount}}</span>
<div class="clear"></div>
<p>21 Reviews</p>
<p>{{prdt.reviews}} Reviews</p>
</div>
</div>
</li>
......
src/app/purchase/productdetails/productdetails.component.scss
......@@ -59,6 +59,9 @@
ul{
margin:0px;
padding: 0px;
&::-webkit-scrollbar {
display: none;
}
li{
list-style: none;
border-bottom: 1px solid #eeeeee;
......
src/app/purchase/productdetails/productdetails.component.ts
......@@ -15,6 +15,8 @@ import * as $ from 'jquery';
export class ProductdetailsComponent implements OnInit {
loader: boolean;
loader2:boolean;
review_loader:boolean;
count:any;
product_id: number;
imageServer: string;
......@@ -23,6 +25,10 @@ export class ProductdetailsComponent implements OnInit {
galleryImages: NgxGalleryImage[];
galleryOptions: NgxGalleryOptions[];
loginDetails:any;
trendingProductData:any;
page: number = 1;
reviewArray:any = new Array();
total_page: number = 1;
@ViewChild("indexLoginModal") loginModalRef: ElementRef;
......@@ -33,6 +39,7 @@ export class ProductdetailsComponent implements OnInit {
public subjectService : SubjectService) {
this.loader = true;
this.loader2 = true;
this.count = 1;
this.product_id = 0;
this.imageServer = ImageStorage;
......@@ -61,6 +68,7 @@ export class ProductdetailsComponent implements OnInit {
this.designModules();
this.checkUserLogin();
this.trendingProducts();
}
checkUserLogin(){
......@@ -71,12 +79,15 @@ export class ProductdetailsComponent implements OnInit {
}
getProductDetails(){
this.webService.post_data('SingleProductSearch',{"product_id":this.product_id}).subscribe(response => {
this.loader = true;
this.webService.post_data('SingleProductSearch',{"product_id":this.product_id,'page':this.page}).subscribe(response => {
if(response.status == 'success'){
let image: string = '';
let imageArr: any[] = new Array();
const thisObj = this;
this.productDetails = response.data;
this.reviewArray = response.data.reviews.data;
this.total_page = response.data.reviews.meta.total_pages;
console.log(response.data)
if(this.productDetails.images.length > 0){
thisObj.productDetails.images.forEach(function (data) {
......@@ -95,6 +106,36 @@ export class ProductdetailsComponent implements OnInit {
});
}
onScroll(){
if(this.total_page < this.page){
return false;
}
this.page += 1;
this.review_loader = true;
this.webService.post_data('SingleProductSearch',{"product_id":this.product_id,'page':this.page}).subscribe(response => {
if(response.status == 'success'){
let thisObj = this;
response.data.reviews.data.forEach(function(reviewData,key) {
thisObj.reviewArray.push(reviewData);
});
}
this.review_loader = false;
});
}
trendingProducts(){
this.loader2 = true;
this.webService.post_data('getTrendingPrdts',{'page':this.page}).subscribe(response => {
if(response.status == 'success'){
this.trendingProductData = response.data;
} else {
this.trendingProductData = false;
}
this.loader2 = false;
});
}
buyProduct(amount){
if(!this.loginDetails){
this.loginModalRef.nativeElement.click();
......@@ -105,6 +146,10 @@ export class ProductdetailsComponent implements OnInit {
this.goToPage('address','');
}
latestPrdtDtls(prdt_id){
this.goToPage('productdetails',{"product_id":prdt_id});
}
goToPage(path,data=null){
this.router.navigate([path],{queryParams: data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
......
src/app/purchase/productlist/productlist.component.html
......@@ -67,7 +67,7 @@
</div>
<div class="loader_overlay" *ngIf="loader"></div>
<div class="search_listing_content" *ngIf="productArray && productArray.length > 0;else noProductData">
<ul>
<ul infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [scrollWindow]="false" style="max-height: 700px; overflow: scroll">
<li *ngFor="let prdt of productArray">
<div class="inner_div_product cpoint" (click)="getSingleProductDetails(prdt.product_id)">
<div class="product_wrapper">
......
src/app/purchase/productlist/productlist.component.scss
......@@ -233,6 +233,9 @@
ul{
margin:0px;
padding:0px;
&::-webkit-scrollbar {
display: none;
}
li{
list-style: none;
padding:10px;
......
src/app/purchase/productlist/productlist.component.ts
......@@ -13,12 +13,15 @@ export class ProductlistComponent implements OnInit {
loader: boolean;
searchKey:string;
imageServer: any;
productArray: any;
productArray: any[] = new Array();
productBrand: any;
brandArr: any[] = new Array();
sliderMinvalue: number;
sliderhighValue: number;
slideroptions: Options;
page: number = 1;
total_page: number = 1;
filterParam: any = new Array();
constructor(
private router : Router,
......@@ -26,13 +29,16 @@ export class ProductlistComponent implements OnInit {
public webService : WebService
){
this.loader = true;
this.productArray = true;
this.productArray = [];
this.filterParam = {"key":'',"brand_id":Array(),"minPrice":'',"maxPrice":'','page':1};
this.imageServer = ImageStorage;
route.params.subscribe(val => {
this.route.queryParams.subscribe(params => {
this.searchKey = params['key'];
this.getProductDetails({"key":this.searchKey});
this.filterParam.key = this.searchKey;
this.filterParam.page = this.page;
this.getProductDetails(this.filterParam);
});
});
if(this.searchKey == ''){
......@@ -51,14 +57,22 @@ export class ProductlistComponent implements OnInit {
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
getProductDetails(params:any = ''){
getProductDetails(params:any = Array()){
this.loader = true;
this.webService.post_data('productSearch',params).subscribe(response => {
if(response.status == 'success'){
console.log(response.data);
this.total_page = response.meta.total_pages;
if(params.page == 1){
this.productArray = response.data;
} else {
this.productArray = false;
let thisObj = this;
response.data.forEach(function(product,key) {
thisObj.productArray.push(product);
});
}
} else {
this.productArray = [];
}
this.loader = false;
});
......@@ -75,6 +89,15 @@ export class ProductlistComponent implements OnInit {
});
}
onScroll(){
if(this.total_page == this.page){
return false;
}
this.page += 1;
this.filterParam.page = this.page;
this.getProductDetails(this.filterParam);
}
getSingleProductDetails(prdt_id){
this.goToPage('productdetails',{"product_id":prdt_id});
}
......@@ -88,10 +111,17 @@ export class ProductlistComponent implements OnInit {
this.brandArr.splice(id, 1);
}
}
this.getProductDetails({"key":this.searchKey,"brand_id":this.brandArr});
this.page = 1;
this.filterParam.page = this.page;
this.filterParam.brand_id = this.brandArr;
this.getProductDetails(this.filterParam);
}
getPrice(low,top){
this.getProductDetails({"key":this.searchKey,"brand_id":this.brandArr,"minPrice":low,"maxPrice":top});
this.page = 1;
this.filterParam.page = this.page;
this.filterParam.minPrice = low;
this.filterParam.maxPrice = top;
this.getProductDetails(this.filterParam);
}
}
src/app/purchase/purchase-home/purchase-home.component.scss
......@@ -233,6 +233,9 @@
ul{
margin:0px;
padding:0px;
&::-webkit-scrollbar {
display: none;
}
li{
list-style: none;
padding:10px;
......@@ -471,3 +474,25 @@
}
}
}
.status_modal{
border-radius: 0px;
.modal-header{
border:none;
}
.login_modal_inner{
img{
width:75px;
}
h4{
font-size:18px;
}
.log_btn{
background: #2655bf;
color: #fff;
border:none;
border-radius: 0px;
}
}
}
\ No newline at end of file
src/app/purchase/purchase-home/purchase-home.component.ts
......@@ -2,6 +2,7 @@ import { Component, OnInit, ViewChild, ElementRef} from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { WebService } from '../../provider/web.service';
import { Options } from 'ng5-slider';
import { ImageStorage } from '../../../environments/server.config';
import { NgxCarousel } from 'ngx-carousel';
@Component({
......@@ -12,13 +13,25 @@ import { NgxCarousel } from 'ngx-carousel';
export class PurchaseHomeComponent implements OnInit {
public carouselTile: NgxCarousel;
page: number = 1;
loader:boolean;
total_page: number = 1;
imageServer: any;
trend_loader:boolean;
latestProductData:any;
trendingProductData:any;
@ViewChild("failureModel") public failureModelRef: ElementRef;
constructor(
private router : Router,
private route : ActivatedRoute,
public webService : WebService
) { }
) {
this.loader = true;
this.trend_loader = true;
this.imageServer = ImageStorage;
}
value: number = 40;
highValue: number = 60;
......@@ -37,15 +50,64 @@ export class PurchaseHomeComponent implements OnInit {
}
});
this.unsetProdDetails();
this.carouselTile = {grid: {xs: 1, sm: 2 , md: 4, lg: 8, all: 0},slide: 1, speed: 400,point: { visible: false },load: 2, touch: true, easing: 'ease'}
this.getLatestProducts();
this.trendingProducts();
this.carouselTile = {grid: {xs: 1, sm: 2, md: 4, lg: 8, all: 0},slide: 1, speed: 400, point: { visible: false }, load: 2, touch: true, loop: true}
}
unsetProdDetails(){
this.webService.removeLocalItem('productDetails');
}
getLatestProducts(){
this.loader = true;
this.webService.get_data('getLatestPrdts').subscribe(response => {
if(response.status == 'success'){
this.latestProductData = response.data;
} else {
this.latestProductData = false;
}
this.loader = false;
});
}
trendingProducts(){
this.trend_loader = true;
this.webService.post_data('getTrendingPrdts',{'page':this.page}).subscribe(response => {
if(response.status == 'success'){
this.total_page = response.meta.total_pages;
this.trendingProductData = response.data;
} else {
this.trendingProductData = false;
}
this.trend_loader = false;
});
}
latestPrdtDtls(prdt_id){
this.goToPage('productdetails',{"product_id":prdt_id});
}
onScroll(){
if(this.total_page < this.page){
return false;
}
this.page += 1;
this.trend_loader = true;
this.webService.post_data('getTrendingPrdts',{'page':this.page}).subscribe(response => {
if(response.status == 'success'){
let thisObj = this;
response.data.forEach(function(trendData,key) {
thisObj.trendingProductData.push(trendData);
});
}
this.trend_loader = false;
});
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
this.router.navigate([path],{queryParams: data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
......
src/app/purchase/purchase.module.ts
......@@ -5,6 +5,7 @@ import { ProductlistComponent } from './productlist/productlist.component';
import { ProductdetailsComponent } from './productdetails/productdetails.component';
import { moduleRouting } from './purchase.routing';
import { SearchbarComponent } from './searchbar/searchbar.component';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { Ng5SliderModule } from 'ng5-slider';
import { MalihuScrollbarModule } from 'ngx-malihu-scrollbar';
import { NgxGalleryModule } from 'ngx-gallery';
......@@ -30,6 +31,7 @@ import { PurchaseHomeComponent } from './purchase-home/purchase-home.component';
NgxGalleryModule,
NgxCarouselModule,
ReactiveFormsModule,
InfiniteScrollModule,
TooltipModule,
MalihuScrollbarModule.forRoot()
]
......
src/app/purchase/rating/rating.component.html
......@@ -74,7 +74,7 @@
</div>
</div>
</div>
<div class="bottom_product_list">
<!-- <div class="bottom_product_list">
<h4>Audi Q7 <span>( Similar Results )</span></h4>
<ngx-carousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()">
<ngx-tile NgxCarouselItem>
......@@ -472,5 +472,5 @@
<button NgxCarouselPrev class='leftRs'>&lt;</button>
<button NgxCarouselNext class='rightRs'>&gt;</button>
</ngx-carousel>
</div>
</div> -->
</div>
\ No newline at end of file
src/app/purchase/searchbar/searchbar.component.html
......@@ -12,9 +12,11 @@
</ul>
</div>
<div *ngIf="productArray && productArray.length > 0" class="nav_bar_search_list">
<ul class="filter-select">
<ul class="filter-select" malihu-scrollbar [scrollbarOptions]="scrollbarOptions" style="max-height: 350px; overflow: scroll">
<li class="cpoint" *ngFor="let prdt of productArray" (click)="clickProduct(prdt.product_id)">
<div class="search_list_image"></div>
<div class="search_list_image">
<img src="{{imageServer + prdt.image}}" onerror="this.src='assets/images/user_avatar.jpg'">
</div>
<p>{{prdt.product_name}}</p>
<div class="clear"></div>
</li>
......
src/app/purchase/searchbar/searchbar.component.ts
import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { WebService } from '../../provider/web.service';
import { ImageStorage } from '../../../environments/server.config';
@Component({
selector: 'app-searchbar',
......@@ -11,10 +12,15 @@ export class SearchbarComponent implements OnInit {
productArray: any;
SingleProductData:any;
imageServer: string;
public scrollbarOptions = { axis: 'y', theme: 'minimal-dark' };
@ViewChild("productSearch") public productSearchRef: ElementRef;
constructor(private router : Router, private route: ActivatedRoute, public webService: WebService) {
this.productArray = true;
this.imageServer = ImageStorage;
}
ngOnInit() {
......@@ -32,11 +38,11 @@ export class SearchbarComponent implements OnInit {
}
this.webService.post_data('productSearch',{"key":product}).subscribe(response => {
if(response.status == 'success'){
console.log(response.data)
this.productArray = response.data;
} else {
this.productArray = false;
}
console.log(this.productArray);
});
}
......
src/app/purchase/summary/summary.component.ts
......@@ -91,9 +91,9 @@ export class SummaryComponent implements OnInit {
if(response.status == 'success'){
document.location.href = this.serverUrl+'orderPayNow/'+response.data;
}else{
this.loader = false;
this.failureModelRef.nativeElement.click();
}
this.loader = false;
})
}
......
src/app/purchase/track/track.component.html
......@@ -17,7 +17,7 @@
<div class="product_details" *ngIf="orderDetails">
<h1>{{orderDetails.product_name}}</h1>
<!-- <div class="review" (click)="reviewBtn()">Write review</div> -->
<div class="review" data-toggle="modal" data-target="#review">Write review</div>
<div class="review" data-toggle="modal" data-target="#review" *ngIf="!userReviewed">Write review</div>
<div class="clear"></div>
<h2>{{orderDetails.short_description}}</h2>
<div class="others">
......@@ -26,21 +26,25 @@
</div>
<div class="row">
<div class="col-md-5">
<div class="order_range">
<div class="order_range prevent-click">
<ng5-slider [(value)]="verticalSlider2.minValue" [(highValue)]="verticalSlider2.maxValue" [options]="verticalSlider2.options"></ng5-slider>
</div>
<div class="order_range_details">
<span>
<h5>Order Confirmed</h5>
<p>{{orderDetails.datetime | date: "EEE, MMMM dd yyyy"}}</p>
<p>{{orderDetails.datetime | date: "EEE, MMMM dd, yyyy"}}</p>
</span>
<span>
<h5>Packed</h5>
<p>Thurs, April 25th 2019</p>
<p *ngIf="orderDetails.expected_delivery">{{orderDetails.expected_delivery | date: "EEE, MMMM dd, yyyy"}}</p>
</span>
<span>
<h5>Shipped</h5>
<p *ngIf="orderDetails.expected_delivery">{{orderDetails.expected_delivery | date: "EEE, MMMM dd, yyyy"}}</p>
</span>
<span>
<h5>Delivered</h5>
<p>Thurs, April 25th 2019</p>
<p *ngIf="orderDetails.delivered">{{orderDetails.delivered | date: "EEE, MMMM dd, yyyy"}}</p>
</span>
</div>
<div class="clear"></div>
......@@ -51,11 +55,11 @@
{{orderDetails.format_order_id}}
</div>
<div class="order_delivery" *ngIf="(( orderDetails.odr_status === '2' || orderDetails.odr_status === '3' || orderDetails.odr_status === '4' ) && orderDetails.expected_delivery != null)">
<h4> Expected Delivery On {{orderDetails.expected_delivery}} </h4>
<h4> Expected Delivery On {{orderDetails.expected_delivery | date: "EEE, MMMM dd, yyyy"}} </h4>
<p> Item will be delivered </p>
</div>
<div class="order_delivery" *ngIf="(( orderDetails.odr_status === '5' || orderDetails.odr_status === '6' || orderDetails.odr_status === '7' ) && orderDetails.delivered != null)">
<h4> Delivered On {{orderDetails.delivered}} </h4>
<h4> Delivered On {{orderDetails.delivered | date: "EEE, MMMM dd, yyyy"}} </h4>
<p> Item has been delivered </p>
</div>
</div>
......@@ -80,7 +84,7 @@
</div>
</div>
</div>
</div>
</div>
......@@ -91,10 +95,17 @@
<!-- START-RATTING-DIV -->
<div class="modal" id="review">
<div class="modal-dialog modal-lg">
<div class="modal" id="review">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header" #ratingModal>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="ratting_inner">
<div class="loader_overlay" *ngIf="loader_review"></div>
<form [formGroup]="rateForm" (ngSubmit)="rateFormSubmit(rateForm.value)">
<div class="">
<p>Rate this Product</p>
<div class="ratting_star">
......@@ -126,19 +137,33 @@
<hr>
<div class="">
<p>Give a Title</p>
<input class="title_input" placeholder="Type Here">
<input class="title_input" placeholder="Type Here" formControlName="title"
[ngClass]="{'input_error': !rateForm.controls['title'].valid && (rateForm.controls['title'].dirty || rateForm.controls['title'].touched || rateFormClick),
'input_success': rateForm.controls['title'].valid}" (click)="rateFormClick = false">
<div class="s_error" *ngIf="(!rateForm.controls['title'].valid && rateForm.controls['title'].touched) || (!rateForm.controls['title'].valid && rateFormClick)">
<div class="s_validation" *ngIf="rateForm.controls['title'].hasError('required')">{{errorMsg.errorList.required}} </div>
</div>
</div>
<hr>
<div class="">
<p>Write a Review</p>
<input class="title_input" placeholder="Type Here">
<input class="title_input" placeholder="Type Here" formControlName="description"
[ngClass]="{'input_error': !rateForm.controls['description'].valid && (rateForm.controls['description'].dirty || rateForm.controls['description'].touched || rateFormClick),
'input_success': rateForm.controls['description'].valid}" (click)="rateFormClick = false">
<div class="s_error" *ngIf="(!rateForm.controls['description'].valid && rateForm.controls['description'].touched) || (!rateForm.controls['description'].valid && rateFormClick)">
<div class="s_validation" *ngIf="rateForm.controls['description'].hasError('required')">{{errorMsg.errorList.required}} </div>
</div>
<hr>
<button class="submit_btn">Submit</button>
</div>
<div *ngIf="rateFormResponse" class="s_alert" [ngClass]="(rateFormResponse.status == 'success') ? 'alert-success' : 'alert-danger'">
<strong>{{rateFormResponse.message}}<br></strong>
</div>
<hr>
<button class="submit_btn" (click)="rateFormClick = true">Submit</button>
</form>
</div>
</div>
</div>
</div>
<!-- END-RATTING-DIV -->
\ No newline at end of file
<!-- END-RATTING-DIV -->
\ No newline at end of file
src/app/purchase/track/track.component.scss
......@@ -91,7 +91,7 @@
}
.order_range{
height:200px;
height:207px;
padding-top: 20px;
width:30px;
float: left;
......@@ -99,7 +99,7 @@
.order_range_details{
float: left;
width:calc(100% - 30px);
height:200px;
height:221px;
padding-top: 20px;
padding-left: 20px;
position: relative;
......@@ -107,18 +107,18 @@
span{
position: absolute;
&:nth-child(1) {
top:8%;
top:7%;
}
&:nth-child(2) {
top:48%;
top:32%;
}
&:nth-child(3) {
bottom:0%;
top:57%;
}
&:nth-child(4) {
top:82%;
}
}
h5{
margin:0px;
......@@ -133,7 +133,7 @@
}
.order_delivery_details{
padding-top: 30px;
padding-top: 55px;
padding-bottom: 30px;
.order_id{
color: #000000;
......
src/app/purchase/track/track.component.ts
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { WebService } from '../../provider/web.service';
import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery';
import * as $ from 'jquery';
import { FormGroup, FormControl, Validators, ValidationErrors } from '@angular/forms';
import { ValidationService } from '../../provider/validation.service';
import { NgxCarousel } from 'ngx-carousel';
import { ImageStorage } from '../../../environments/server.config';
import { Options } from 'ng5-slider';
import * as $ from 'jquery';
interface RangeSliderModel {
minValue: number;
......@@ -23,36 +25,50 @@ export class TrackComponent implements OnInit {
count:any;
loginDetails:any;
loader:boolean;
loader_review:boolean;
imageServer: string;
orderDetails:any;
userReviewed:boolean;
galleryOptions: NgxGalleryOptions[];
galleryImages: NgxGalleryImage[];
verticalSlider2:any;
rateFormClick:boolean;
rateFormResponse:any;
@ViewChild('ratingModal') ratingModal: ElementRef;
public carouselTile: NgxCarousel;
constructor(private router : Router,
private route : ActivatedRoute,
public errorMsg : ValidationService,
public webService : WebService){
this.count = 0;
this.loader =true;
this.loader = true;
this.userReviewed = true;
this.loader_review = false;
this.imageServer = ImageStorage;
this.rateFormClick = false;
}
rateForm;
ngOnInit(): void {
this.route.queryParams.subscribe(params => {
let payStatus = params['status'];
this.ref_id = params['ref'];
if(payStatus && payStatus !=''){
if(payStatus == 'success'){
if(this.ref_id > 0){
this.getOrderDetail();
}
}
if(!this.ref_id || this.ref_id < 0){
this.goToPage('purchaseHome','');
}
});
this.designModule();
this.getOrderDetail();
this.checkUserLogin();
this.unsetProdDetails();
this.rateForm = new FormGroup({
rating: new FormControl('5'),
title: new FormControl('',[Validators.required]),
description: new FormControl('',[Validators.required])
});
}
checkUserLogin(){
......@@ -66,10 +82,42 @@ export class TrackComponent implements OnInit {
this.webService.removeLocalItem('productDetails');
}
getOrderDetail(){
if(this.ref_id <= 0){
this.goToPage('purchaseHome','');
rateFormSubmit(data){
if(this.rateForm.invalid){
return false;
}
data.product_id = this.orderDetails.product_id;
data.customer_id = this.loginDetails.customer_id;
this.loader_review = true;
const This = this;
this.webService.post_data('rateProduct',data).subscribe(response => {
if(response.status == 'success'){
this.rateFormResponse = response;
this.userReviewed = true;
setTimeout( function() {
This.rateFormResponse = false;
This.ratingModal.nativeElement.click();
}, 3000);
}else{
response.status = 'error';
response.message = (response.message == '')?this.errorMsg.errorList.req_failure:response.message;
this.rateFormResponse = response;
setTimeout( function() {
This.rateFormResponse = false;
}, 3000);
}
this.loader_review = false;
},error => {
this.rateFormResponse = {'status':'error','message':this.errorMsg.errorList.req_failure};
setTimeout( function() {
This.rateFormResponse = false;
}, 3000);
this.loader_review = false;
});
}
getOrderDetail(){
this.loader = true;
this.webService.post_data('getOrderDetail',{'ref_id':this.ref_id}).subscribe(response => {
if(response.status == 'success'){
......@@ -77,6 +125,8 @@ export class TrackComponent implements OnInit {
let imageArr: any[] = new Array();
const thisObj = this;
this.orderDetails = response.data;
this.userReviewed = (this.orderDetails.review_id <= 0 && (this.orderDetails.odr_status == '5' || this.orderDetails.odr_status == '6' || this.orderDetails.odr_status == '7'))?false:true;
console.log(this.userReviewed);
if(this.orderDetails.images.length > 0){
thisObj.orderDetails.images.forEach(function (data) {
image = thisObj.imageServer + data.image;
......@@ -87,6 +137,19 @@ export class TrackComponent implements OnInit {
imageArr.push({small: image,medium: image,big: image});
}
this.galleryImages = imageArr;
if(this.orderDetails.odr_status === '2'){
this.verticalSlider2 = { minValue: 50, maxValue: 50, options: { floor: 0, ceil: 50, vertical: true } };
}
else if(this.orderDetails.odr_status ==='3'){
this.verticalSlider2 = { minValue: 50, maxValue: 76, options: { floor: 0, ceil: 76, vertical: true } };
}
else if(this.orderDetails.odr_status ==='4'){
this.verticalSlider2 = { minValue: 50, maxValue: 152, options: { floor: 0, ceil: 152, vertical: true } };
}
else if(this.orderDetails.odr_status === '5'){
this.verticalSlider2 = { minValue: 50, maxValue: 10000000, options: { floor: 0, ceil: 10000000, vertical: true } };
}
}else{
this.orderDetails = false;
this.goToPage('purchaseHome','');
......@@ -110,7 +173,6 @@ export class TrackComponent implements OnInit {
carouselTileLoad(){ return ''; }
add(){this.count = this.count + 1;}
minus(){ this.count = this.count - 1; if(this.count < 0){ this.count = 0; }}
verticalSlider2: RangeSliderModel = { minValue: 50, maxValue: 100, options: { floor: 0, ceil: 100, vertical: true } };
designModule(){
this.carouselTile = {grid: {xs: 1, sm: 2 , md: 4, lg: 8, all: 0},slide: 1, speed: 400,point: { visible: false },load: 2, touch: true, easing: 'ease'}
......
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