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 @@
</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"> <!-- LOOP THIS -->
<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.ts
......@@ -15,6 +15,7 @@ import * as $ from 'jquery';
export class ProductdetailsComponent implements OnInit {
loader: boolean;
loader2:boolean;
count:any;
product_id: number;
imageServer: string;
......@@ -23,6 +24,7 @@ export class ProductdetailsComponent implements OnInit {
galleryImages: NgxGalleryImage[];
galleryOptions: NgxGalleryOptions[];
loginDetails:any;
trendingProductData:any;
@ViewChild("indexLoginModal") loginModalRef: ElementRef;
......@@ -33,6 +35,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 +64,7 @@ export class ProductdetailsComponent implements OnInit {
this.designModules();
this.checkUserLogin();
this.trendingProducts();
}
checkUserLogin(){
......@@ -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){
if(!this.loginDetails){
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';
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,23 @@ import { NgxCarousel } from 'ngx-carousel';
export class PurchaseHomeComponent implements OnInit {
public carouselTile: NgxCarousel;
loader:boolean;
loader2:boolean;
latestProductData:any;
imageServer: any;
trendingProductData:any;
@ViewChild("failureModel") public failureModelRef: ElementRef;
constructor(
private router : Router,
private route : ActivatedRoute,
public webService : WebService
) { }
) {
this.loader = true;
this.loader2 = true;
this.imageServer = ImageStorage;
}
value: number = 40;
highValue: number = 60;
......@@ -37,6 +48,8 @@ export class PurchaseHomeComponent implements OnInit {
}
});
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'}
}
......@@ -44,8 +57,37 @@ export class PurchaseHomeComponent implements OnInit {
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){
this.router.navigateByUrl(path,{queryParams:data});
this.router.navigate([path],{queryParams: data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
......
src/app/purchase/searchbar/searchbar.component.ts
......@@ -36,7 +36,6 @@ export class SearchbarComponent implements OnInit {
} else {
this.productArray = false;
}
console.log(this.productArray);
});
}
......
src/app/purchase/track/track.component.html
......@@ -31,15 +31,19 @@
<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>
......@@ -50,11 +54,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>
......
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
......@@ -27,6 +27,7 @@ export class TrackComponent implements OnInit {
orderDetails:any;
galleryOptions: NgxGalleryOptions[];
galleryImages: NgxGalleryImage[];
verticalSlider2:any;
public carouselTile: NgxCarousel;
constructor(private router : Router,
......@@ -87,6 +88,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 +124,7 @@ 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 } };
// verticalSlider2: RangeSliderModel = { minValue: this.verticalMinValue, maxValue: this.verticalMaxValue, options: { floor: 0, ceil: this.verticalMaxValue, 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