Skip to content

D
dcarfixers_angular
Commit 27fd6817 by Jansa Jose
Options

purchase home changes

parent c0808a97
Showing with 113 additions and 37 deletions
src/app/purchase/productdetails/productdetails.component.html
...@@ -106,31 +106,32 @@ ...@@ -106,31 +106,32 @@
</div> </div>
</div> </div>
<div class="bottom_product_list"> <div class="bottom_product_list">
<ngx-carousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()"> <div class="loader_overlay" *ngIf="loader2"></div>
<ngx-tile NgxCarouselItem> <!-- LOOP THIS --> <ngx-carousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()" *ngIf="trendingProductData">
<li (click)="goToPage('productdetails')"> <ngx-tile NgxCarouselItem *ngFor="let prdt of trendingProductData"> <!-- LOOP THIS -->
<li (click)="latestPrdtDtls(prdt.product_id)">
<div class="inner_div_product"> <div class="inner_div_product">
<div class="product_wrapper"> <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> </div>
<h5>JK Victory Wheelers type</h5> <h5>{{prdt.product_name}}</h5>
<p>265/65 R17, Tubeless</p> <p>{{prdt.short_description}}</p>
<div class="star_ratting"> <div class="star_ratting">
<fieldset class="rating"> <fieldset class="rating" *ngIf="prdt.rating > 0">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5"></label> <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" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half"></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" id="star4" name="rating" value="4" /><label class = "full" for="star4"></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" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half"></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" id="star3" name="rating" value="3" /><label class = "full" for="star3"></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" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half"></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" id="star2" name="rating" value="2" /><label class = "full" for="star2"></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" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half"></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" id="star1" name="rating" value="1" /><label class = "full" for="star1"></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" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf"></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> </fieldset>
<span class="floatRight">$320</span> <span class="floatRight">$ {{prdt.amount}}</span>
<div class="clear"></div> <div class="clear"></div>
<p>21 Reviews</p> <p>{{prdt.reviews}} Reviews</p>
</div> </div>
</div> </div>
</li> </li>
......
src/app/purchase/productdetails/productdetails.component.ts
...@@ -15,6 +15,7 @@ import * as $ from 'jquery'; ...@@ -15,6 +15,7 @@ import * as $ from 'jquery';
export class ProductdetailsComponent implements OnInit { export class ProductdetailsComponent implements OnInit {
loader: boolean; loader: boolean;
loader2:boolean;
count:any; count:any;
product_id: number; product_id: number;
imageServer: string; imageServer: string;
...@@ -23,6 +24,7 @@ export class ProductdetailsComponent implements OnInit { ...@@ -23,6 +24,7 @@ export class ProductdetailsComponent implements OnInit {
galleryImages: NgxGalleryImage[]; galleryImages: NgxGalleryImage[];
galleryOptions: NgxGalleryOptions[]; galleryOptions: NgxGalleryOptions[];
loginDetails:any; loginDetails:any;
trendingProductData:any;
@ViewChild("indexLoginModal") loginModalRef: ElementRef; @ViewChild("indexLoginModal") loginModalRef: ElementRef;
...@@ -33,6 +35,7 @@ export class ProductdetailsComponent implements OnInit { ...@@ -33,6 +35,7 @@ export class ProductdetailsComponent implements OnInit {
public subjectService : SubjectService) { public subjectService : SubjectService) {
this.loader = true; this.loader = true;
this.loader2 = true;
this.count = 1; this.count = 1;
this.product_id = 0; this.product_id = 0;
this.imageServer = ImageStorage; this.imageServer = ImageStorage;
...@@ -61,6 +64,7 @@ export class ProductdetailsComponent implements OnInit { ...@@ -61,6 +64,7 @@ export class ProductdetailsComponent implements OnInit {
this.designModules(); this.designModules();
this.checkUserLogin(); this.checkUserLogin();
this.trendingProducts();
} }
checkUserLogin(){ checkUserLogin(){
...@@ -95,6 +99,18 @@ export class ProductdetailsComponent implements OnInit { ...@@ -95,6 +99,18 @@ export class ProductdetailsComponent implements OnInit {
}); });
} }
trendingProducts(){
this.loader2 = true;
this.webService.get_data('getTrendingPrdts').subscribe(response => {
if(response.status == 'success'){
this.trendingProductData = response.data;
} else {
this.trendingProductData = false;
}
this.loader2 = false;
});
}
buyProduct(amount){ buyProduct(amount){
if(!this.loginDetails){ if(!this.loginDetails){
this.loginModalRef.nativeElement.click(); this.loginModalRef.nativeElement.click();
......
src/app/purchase/purchase-home/purchase-home.component.ts
...@@ -2,6 +2,7 @@ import { Component, OnInit, ViewChild, ElementRef} from '@angular/core'; ...@@ -2,6 +2,7 @@ import { Component, OnInit, ViewChild, ElementRef} from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router'; import { Router,ActivatedRoute } from '@angular/router';
import { WebService } from '../../provider/web.service'; import { WebService } from '../../provider/web.service';
import { Options } from 'ng5-slider'; import { Options } from 'ng5-slider';
import { ImageStorage } from '../../../environments/server.config';
import { NgxCarousel } from 'ngx-carousel'; import { NgxCarousel } from 'ngx-carousel';
@Component({ @Component({
...@@ -12,13 +13,23 @@ import { NgxCarousel } from 'ngx-carousel'; ...@@ -12,13 +13,23 @@ import { NgxCarousel } from 'ngx-carousel';
export class PurchaseHomeComponent implements OnInit { export class PurchaseHomeComponent implements OnInit {
public carouselTile: NgxCarousel; public carouselTile: NgxCarousel;
loader:boolean;
loader2:boolean;
latestProductData:any;
imageServer: any;
trendingProductData:any;
@ViewChild("failureModel") public failureModelRef: ElementRef; @ViewChild("failureModel") public failureModelRef: ElementRef;
constructor( constructor(
private router : Router, private router : Router,
private route : ActivatedRoute, private route : ActivatedRoute,
public webService : WebService public webService : WebService
) { } ) {
this.loader = true;
this.loader2 = true;
this.imageServer = ImageStorage;
}
value: number = 40; value: number = 40;
highValue: number = 60; highValue: number = 60;
...@@ -37,6 +48,8 @@ export class PurchaseHomeComponent implements OnInit { ...@@ -37,6 +48,8 @@ export class PurchaseHomeComponent implements OnInit {
} }
}); });
this.unsetProdDetails(); this.unsetProdDetails();
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, easing: 'ease'} 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'}
} }
...@@ -44,8 +57,37 @@ export class PurchaseHomeComponent implements OnInit { ...@@ -44,8 +57,37 @@ export class PurchaseHomeComponent implements OnInit {
this.webService.removeLocalItem('productDetails'); 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.loader2 = true;
this.webService.get_data('getTrendingPrdts').subscribe(response => {
if(response.status == 'success'){
console.log(response.data)
this.trendingProductData = response.data;
} else {
this.trendingProductData = false;
}
this.loader2 = false;
});
}
latestPrdtDtls(prdt_id){
this.goToPage('productdetails',{"product_id":prdt_id});
}
goToPage(path,data=null){ goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data}); this.router.navigate([path],{queryParams: data});
document.body.scrollTop = document.documentElement.scrollTop = 0; document.body.scrollTop = document.documentElement.scrollTop = 0;
} }
......
src/app/purchase/searchbar/searchbar.component.ts
...@@ -36,7 +36,6 @@ export class SearchbarComponent implements OnInit { ...@@ -36,7 +36,6 @@ export class SearchbarComponent implements OnInit {
} else { } else {
this.productArray = false; this.productArray = false;
} }
console.log(this.productArray);
}); });
} }
......
src/app/purchase/track/track.component.html
...@@ -31,15 +31,19 @@ ...@@ -31,15 +31,19 @@
<div class="order_range_details"> <div class="order_range_details">
<span> <span>
<h5>Order Confirmed</h5> <h5>Order Confirmed</h5>
<p>{{orderDetails.datetime | date: "EEE, MMMM dd yyyy"}}</p> <p>{{orderDetails.datetime | date: "EEE, MMMM dd, yyyy"}}</p>
</span> </span>
<span> <span>
<h5>Packed</h5> <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>
<span> <span>
<h5>Delivered</h5> <h5>Delivered</h5>
<p>Thurs, April 25th 2019</p> <p *ngIf="orderDetails.delivered">{{orderDetails.delivered | date: "EEE, MMMM dd, yyyy"}}</p>
</span> </span>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
...@@ -50,11 +54,11 @@ ...@@ -50,11 +54,11 @@
{{orderDetails.format_order_id}} {{orderDetails.format_order_id}}
</div> </div>
<div class="order_delivery" *ngIf="(( orderDetails.odr_status === '2' || orderDetails.odr_status === '3' || orderDetails.odr_status === '4' ) && orderDetails.expected_delivery != null)"> <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> <p> Item will be delivered </p>
</div> </div>
<div class="order_delivery" *ngIf="(( orderDetails.odr_status === '5' || orderDetails.odr_status === '6' || orderDetails.odr_status === '7' ) && orderDetails.delivered != null)"> <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> <p> Item has been delivered </p>
</div> </div>
</div> </div>
......
src/app/purchase/track/track.component.scss
...@@ -91,7 +91,7 @@ ...@@ -91,7 +91,7 @@
} }
.order_range{ .order_range{
height:200px; height:207px;
padding-top: 20px; padding-top: 20px;
width:30px; width:30px;
float: left; float: left;
...@@ -99,7 +99,7 @@ ...@@ -99,7 +99,7 @@
.order_range_details{ .order_range_details{
float: left; float: left;
width:calc(100% - 30px); width:calc(100% - 30px);
height:200px; height:221px;
padding-top: 20px; padding-top: 20px;
padding-left: 20px; padding-left: 20px;
position: relative; position: relative;
...@@ -107,18 +107,18 @@ ...@@ -107,18 +107,18 @@
span{ span{
position: absolute; position: absolute;
&:nth-child(1) { &:nth-child(1) {
top:8%; top:7%;
} }
&:nth-child(2) { &:nth-child(2) {
top:48%; top:32%;
} }
&:nth-child(3) { &:nth-child(3) {
bottom:0%; top:57%;
}
&:nth-child(4) {
top:82%;
} }
} }
h5{ h5{
margin:0px; margin:0px;
...@@ -133,7 +133,7 @@ ...@@ -133,7 +133,7 @@
} }
.order_delivery_details{ .order_delivery_details{
padding-top: 30px; padding-top: 55px;
padding-bottom: 30px; padding-bottom: 30px;
.order_id{ .order_id{
color: #000000; color: #000000;
......
src/app/purchase/track/track.component.ts
...@@ -27,6 +27,7 @@ export class TrackComponent implements OnInit { ...@@ -27,6 +27,7 @@ export class TrackComponent implements OnInit {
orderDetails:any; orderDetails:any;
galleryOptions: NgxGalleryOptions[]; galleryOptions: NgxGalleryOptions[];
galleryImages: NgxGalleryImage[]; galleryImages: NgxGalleryImage[];
verticalSlider2:any;
public carouselTile: NgxCarousel; public carouselTile: NgxCarousel;
constructor(private router : Router, constructor(private router : Router,
...@@ -87,6 +88,19 @@ export class TrackComponent implements OnInit { ...@@ -87,6 +88,19 @@ export class TrackComponent implements OnInit {
imageArr.push({small: image,medium: image,big: image}); imageArr.push({small: image,medium: image,big: image});
} }
this.galleryImages = imageArr; 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{ }else{
this.orderDetails = false; this.orderDetails = false;
this.goToPage('purchaseHome',''); this.goToPage('purchaseHome','');
...@@ -110,7 +124,7 @@ export class TrackComponent implements OnInit { ...@@ -110,7 +124,7 @@ export class TrackComponent implements OnInit {
carouselTileLoad(){ return ''; } carouselTileLoad(){ return ''; }
add(){this.count = this.count + 1;} add(){this.count = this.count + 1;}
minus(){ this.count = this.count - 1; if(this.count < 0){ this.count = 0; }} 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 } }; // verticalSlider2: RangeSliderModel = { minValue: this.verticalMinValue, maxValue: this.verticalMaxValue, options: { floor: 0, ceil: this.verticalMaxValue, vertical: true } };
designModule(){ 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'} 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