Skip to content

D
dcarfixers_angular
Commit 6ec41de7 by Jansa Jose
Options

dc

parent 18f01fce
Showing with 1064 additions and 331 deletions
src/app/app-routing.module.ts
...@@ -6,7 +6,7 @@ const routes: Routes = [ ...@@ -6,7 +6,7 @@ const routes: Routes = [
]; ];
@NgModule({ @NgModule({
imports: [RouterModule.forRoot(routes)], imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
exports: [RouterModule] exports: [RouterModule]
}) })
export class AppRoutingModule { } export class AppRoutingModule { }
src/app/home/dashboard/dashboard.component.html
...@@ -891,7 +891,7 @@ ...@@ -891,7 +891,7 @@
<div class="clear"></div> <div class="clear"></div>
<p>Estimated Price : <strong>{{estimatedPrice}}</strong></p> <p>Estimated Price : <strong>{{estimatedPrice}}</strong></p>
<div class="clear"></div> <div class="clear"></div>
<button class="request_all_btn" *ngIf="selMechanics.length > 0 && scheduleDateInit == true" (click)="scheduleMultipleRequest()">Request All</button> <button class="request_all_btn" *ngIf="selMechanics.length > 0 && scheduleDateInit == true" (click)="scheduleMultipleRequest()">{{loginDetails? 'Request All' : 'Login and Continue'}}</button>
</div> </div>
<div class="service_map"> <div class="service_map">
<agm-map #gm [latitude]="lat" [longitude]="lng" [fitBounds]="true"> <agm-map #gm [latitude]="lat" [longitude]="lng" [fitBounds]="true">
......
src/app/home/home.routing.ts
...@@ -6,15 +6,12 @@ import { TncComponent } from './tnc/tnc.component'; ...@@ -6,15 +6,12 @@ import { TncComponent } from './tnc/tnc.component';
import { PrivacyComponent } from './privacy/privacy.component'; import { PrivacyComponent } from './privacy/privacy.component';
import { TnsComponent } from './tns/tns.component'; import { TnsComponent } from './tns/tns.component';
const ModuleRoutes: Routes = [ const ModuleRoutes: Routes = [
{ path: 'index', component: IndexComponent },
{ path: 'index', component: IndexComponent}, { path: 'privacy', component: PrivacyComponent },
{ path: 'dashboard', component: DashboardComponent}, { path: 'dashboard', component: DashboardComponent },
{ path: 'termscondition', component: TncComponent}, { path: 'termsservice', component: TnsComponent },
{ path: 'termsservice', component: TnsComponent}, { path: 'termscondition', component: TncComponent }
{ path: 'privacy', component: PrivacyComponent}
]; ];
export const moduleRouting: ModuleWithProviders = RouterModule.forChild(ModuleRoutes) export const moduleRouting: ModuleWithProviders = RouterModule.forChild(ModuleRoutes)
......
src/app/home/index/index.component.html
...@@ -629,7 +629,7 @@ ...@@ -629,7 +629,7 @@
<div class="clear"></div> <div class="clear"></div>
<p>Estimated Price : <strong>{{estimatedPrice}}</strong></p> <p>Estimated Price : <strong>{{estimatedPrice}}</strong></p>
<div class="clear"></div> <div class="clear"></div>
<button class="request_all_btn" *ngIf="selMechanics.length > 0 && scheduleDateInit == true" (click)="scheduleMultipleRequest()">Request All</button> <button class="request_all_btn" *ngIf="selMechanics.length > 0 && scheduleDateInit == true" (click)="scheduleMultipleRequest()">{{loginDetails? 'Request All' : 'Login and Continue'}}</button>
</div> </div>
<div class="service_map"> <div class="service_map">
<agm-map #gm [latitude]="lat" [longitude]="lng" [fitBounds]="true"> <agm-map #gm [latitude]="lat" [longitude]="lng" [fitBounds]="true">
......
src/app/navbar/navbar.component.html
...@@ -24,11 +24,11 @@ ...@@ -24,11 +24,11 @@
HOME HOME
</a> </a>
</li> </li>
<!-- <li class="nav-item"> <li class="nav-item">
<a class="nav-link" (click)="goToPage('productlist')"> <a class="nav-link" (click)="goToPage('purchaseHome')">
PURCHASE PURCHASE
</a> </a>
</li> --> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link base_arrow dropdown"> <a class="nav-link base_arrow dropdown">
<div class="dropdown-toggle" data-toggle="dropdown"> <div class="dropdown-toggle" data-toggle="dropdown">
......
src/app/navbar/navbar.component.ts
...@@ -47,9 +47,9 @@ export class NavbarComponent implements OnInit { ...@@ -47,9 +47,9 @@ export class NavbarComponent implements OnInit {
forgotForm; forgotForm;
signupForm; signupForm;
autospsignupForm; autospsignupForm;
@ViewChild('spModal') spModal: ElementRef;
@ViewChild('loginModal') loginModal: ElementRef; @ViewChild('loginModal') loginModal: ElementRef;
@ViewChild('signupModal') signupModal: ElementRef; @ViewChild('signupModal') signupModal: ElementRef;
@ViewChild('spModal') spModal: ElementRef;
public scrollbarOptions = { axis: 'y', theme: 'minimal-dark' }; public scrollbarOptions = { axis: 'y', theme: 'minimal-dark' };
......
src/app/provider/dataservice.service.ts 0 → 100644
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DataserviceService {
serviceData: any = new Array();
}
src/app/provider/web.service.ts
...@@ -51,6 +51,9 @@ export class WebService { ...@@ -51,6 +51,9 @@ export class WebService {
localStorage.removeItem(data); localStorage.removeItem(data);
localStorage.clear(); localStorage.clear();
} }
removeLocalItem(data) {
localStorage.removeItem(data);
}
get_stored_json(json_file: string) { get_stored_json(json_file: string) {
return this.http.get("assets/json_data/" + json_file); return this.http.get("assets/json_data/" + json_file);
} }
......
src/app/purchase/addaddress/addaddress.component.html
<div class="purchase_wrapper"> <div class="purchase_wrapper">
<div class="container-fluid"> <div class="container-fluid">
<app-searchbar> <div class="loader_overlay" *ngIf="loader"></div>
</app-searchbar> <div class="add_address_wrapper">
<div class="add_address_wrapper"> <form [formGroup]="addaddressForm" (ngSubmit)="addressFormSubmit(addaddressForm.value)">
<h4>Add New Address</h4> <h4>Add New Address</h4>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-6">
<p>Name*</p> <p>Name*</p>
<input class="" type="text"> <input class="" type="text" formControlName="name"
</div> [ngClass]="{'input_error': !addaddressForm.controls['name'].valid && (addaddressForm.controls['name'].dirty || addaddressForm.controls['name'].touched || addressSubmitClick),
'input_success': addaddressForm.controls['name'].valid}" (click)="addressSubmitClick = false">
<div class="s_error" *ngIf="(!addaddressForm.controls['name'].valid && addaddressForm.controls['name'].touched) || (!addaddressForm.controls['name'].valid && addressSubmitClick)">
<div class="s_validation" *ngIf="addaddressForm.controls['name'].hasError('required')">{{errorMsg.errorList.required}} </div>
</div>
</div> </div>
<div class="row"> <div class="col-md-6">
<div class="col-md-12"> <p>Phone Number*</p>
<p>Phone Number*</p> <input class="" type="text" formControlName="phone_no"
<input class="" type="text"> [ngClass]="{'input_error': !addaddressForm.controls['phone_no'].valid && (addaddressForm.controls['phone_no'].dirty || addaddressForm.controls['phone_no'].touched || addressSubmitClick),
'input_success': addaddressForm.controls['phone_no'].valid}" (click)="addressSubmitClick = false">
<div class="s_error" *ngIf="(!addaddressForm.controls['phone_no'].valid && addaddressForm.controls['phone_no'].touched) || (!addaddressForm.controls['phone_no'].valid && addressSubmitClick)">
<div class="s_validation" *ngIf="addaddressForm.controls['phone_no'].hasError('required')">{{errorMsg.errorList.required}} </div>
<div class="s_validation" *ngIf="addaddressForm.controls['phone_no'].hasError('pattern')">{{errorMsg.errorList.valid}} Mobile Number</div>
</div> </div>
</div> </div>
<div class="row"> </div>
<div class="col-md-12"> <div class="row">
<p>House number or Building number*</p> <div class="col-md-12">
<input class="" type="text"> <p>House number or Building number*</p>
</div> <input class="" type="text" formControlName="house_no"
[ngClass]="{'input_error': !addaddressForm.controls['house_no'].valid && (addaddressForm.controls['house_no'].dirty || addaddressForm.controls['house_no'].touched || addressSubmitClick),
'input_success': addaddressForm.controls['house_no'].valid}" (click)="addressSubmitClick = false">
<div class="s_error" *ngIf="(!addaddressForm.controls['house_no'].valid && addaddressForm.controls['house_no'].touched) || (!addaddressForm.controls['house_no'].valid && addressSubmitClick)">
<div class="s_validation" *ngIf="addaddressForm.controls['house_no'].hasError('required')">{{errorMsg.errorList.required}} </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>Area, Road or Colony*</p>
<input class="" type="text" formControlName="area"
[ngClass]="{'input_error': !addaddressForm.controls['area'].valid && (addaddressForm.controls['area'].dirty || addaddressForm.controls['area'].touched || addressSubmitClick),
'input_success': addaddressForm.controls['area'].valid}" (click)="addressSubmitClick = false">
<div class="s_error" *ngIf="(!addaddressForm.controls['area'].valid && addaddressForm.controls['area'].touched) || (!addaddressForm.controls['area'].valid && addressSubmitClick)">
<div class="s_validation" *ngIf="addaddressForm.controls['area'].hasError('required')">{{errorMsg.errorList.required}} </div>
</div> </div>
<div class="row"> </div>
<div class="col-md-12"> </div>
<p>Area, Road or Colony*</p> <div class="row">
<input class="" type="text"> <div class="col-md-6">
</div> <p>City*</p>
</div> <input class="" type="text" formControlName="city"
<div class="row"> [ngClass]="{'input_error': !addaddressForm.controls['city'].valid && (addaddressForm.controls['city'].dirty || addaddressForm.controls['city'].touched || addressSubmitClick),
<div class="col-md-12"> 'input_success': addaddressForm.controls['city'].valid}" (click)="addressSubmitClick = false">
<p>State*</p> <div class="s_error" *ngIf="(!addaddressForm.controls['city'].valid && addaddressForm.controls['city'].touched) || (!addaddressForm.controls['city'].valid && addressSubmitClick)">
<input class="" type="text"> <div class="s_validation" *ngIf="addaddressForm.controls['city'].hasError('required')">{{errorMsg.errorList.required}} </div>
</div> </div>
</div> </div>
<div class="row"> <div class="col-md-6">
<div class="col-md-12"> <p>State*</p>
<p>City*</p> <input class="" type="text" formControlName="state"
<input class="" type="text"> [ngClass]="{'input_error': !addaddressForm.controls['state'].valid && (addaddressForm.controls['state'].dirty || addaddressForm.controls['state'].touched || addressSubmitClick),
</div> 'input_success': addaddressForm.controls['state'].valid}" (click)="addressSubmitClick = false">
</div> <div class="s_error" *ngIf="(!addaddressForm.controls['state'].valid && addaddressForm.controls['state'].touched) || (!addaddressForm.controls['state'].valid && addressSubmitClick)">
<div class="row"> <div class="s_validation" *ngIf="addaddressForm.controls['state'].hasError('required')">{{errorMsg.errorList.required}} </div>
<div class="col-md-12"> </div>
<p>Land mark <span>(Optional)</span></p> </div>
<input class="" type="text"> </div>
</div> <div class="row">
</div> <div class="col-md-12">
<div class="row"> <p>Land mark <span>(Optional)</span></p>
<div class="col-md-12"> <input class="" type="text" formControlName="landmark" (click)="addressSubmitClick = false">
<button class="add_btn" (click)="goToPage('address')">Add Address</button> </div>
</div> </div>
</div> <div class="row">
<div class="col-md-2"></div>
<div class="col-md-5">
<input class="custom_checkbox" id="custom_checkbox_1" name="address_type" type="radio" value="1" formControlName="address_type">
<label for="custom_checkbox_1">Home</label>
</div>
<div class="col-md-5">
<input class="custom_checkbox" id="custom_checkbox_2" name="address_type" type="radio" value="2" formControlName="address_type">
<label for="custom_checkbox_2">Office</label>
</div>
</div>
<div *ngIf="addressResponse" class="s_alert" [ngClass]="(addressResponse.status == 'success') ? 'alert-success' : 'alert-danger'">
<strong>{{addressResponse.message}}<br></strong>
</div>
<div class="row">
<div class="col-md-6">
<!-- <button type="submit" class="btn_cart" (click)="goToPage('address')">Add Address</button> -->
<button type="submit" class="btn_cart" (click)="addressSubmitClick = true">{{address_id > 0?'Update Address' : 'Add Address'}}</button>
</div>
<div class="col-md-6">
<button class="add_btn" (click)="goToPage('address')">Cancel</button>
</div>
</div> </div>
</form>
</div> </div>
</div>
</div> </div>
\ No newline at end of file
src/app/purchase/addaddress/addaddress.component.scss
...@@ -34,6 +34,15 @@ box-shadow: 0px 1px 21px -10px rgba(0,0,0,0.2); ...@@ -34,6 +34,15 @@ box-shadow: 0px 1px 21px -10px rgba(0,0,0,0.2);
padding-bottom: 20px; padding-bottom: 20px;
} }
.btn_cart{
width:100%;
background: #fef160;
color: #000000;
text-align: center;
height: 45px;
border:none;
}
.add_btn{ .add_btn{
width:100%; width:100%;
background: #2655bf; background: #2655bf;
...@@ -43,4 +52,6 @@ box-shadow: 0px 1px 21px -10px rgba(0,0,0,0.2); ...@@ -43,4 +52,6 @@ box-shadow: 0px 1px 21px -10px rgba(0,0,0,0.2);
border:none; border:none;
} }
} }
} }
\ No newline at end of file
src/app/purchase/addaddress/addaddress.component.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit , HostListener } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router'; import { Router,ActivatedRoute } from '@angular/router';
import { FormGroup, FormControl, FormBuilder, Validators, ValidationErrors } from '@angular/forms';
import { WebService } from '../../provider/web.service';
import { ValidationService } from '../../provider/validation.service';
import { SubjectService } from '../../provider/subject.service';
@Component({ @Component({
selector: 'app-addaddress', selector: 'app-addaddress',
templateUrl: './addaddress.component.html', templateUrl: './addaddress.component.html',
styleUrls: ['./addaddress.component.scss'] styleUrls: ['./addaddress.component.scss']
}) })
export class AddaddressComponent implements OnInit { export class AddaddressComponent implements OnInit {
loader : boolean;
address_id : any;
loginDetails : any;
editAddressResp : any;
addressResponse : any;
addressSubmitClick : boolean;
prdtData:any = new Array();
product_id:any;
addaddressForm: FormGroup;
name = new FormControl('', [Validators.required]);
city = new FormControl('', [Validators.required]);
area = new FormControl('', [Validators.required]);
state = new FormControl('', [Validators.required]);
landmark = new FormControl('');
house_no = new FormControl('', [Validators.required]);
phone_no = new FormControl('', [Validators.required, Validators.pattern("^[0-9\ ( ) + , - ]+$")]);
address_type = new FormControl('1');
constructor( constructor(private router : Router,
private router : Router, private route : ActivatedRoute,
private route : ActivatedRoute public errorMsg : ValidationService,
) { } public webService : WebService,
private formBuilder : FormBuilder,
public subjectService : SubjectService) {
this.loginDetails = false;
this.addressSubmitClick = false;
}
ngOnInit() { ngOnInit() {
this.prdtData = JSON.parse(this.webService.getLocalStorageItem('productDetails'));
this.subjectService.getLoginData().subscribe(loginData => {
this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
});
this.checkProductId(this.prdtData['product_id']);
this.route.params.subscribe(val => {
this.route.queryParams.subscribe(params => {
this.address_id = params['address_id'];
});
});
if(this.address_id != ''){
this.getUserAddressById(this.address_id);
}
this.buildAddressForm();
}
buildAddressForm(){
this.addaddressForm = this.formBuilder.group({
name: this.name,
city: this.city,
area: this.area,
state: this.state,
landmark: this.landmark,
house_no: this.house_no,
phone_no: this.phone_no,
address_type: this.address_type
});
}
checkProductId(product_id){
if(product_id > 0){
this.product_id = product_id;
}else{
this.goToPage('purchaseHome','');
}
}
addressFormSubmit(data){
if(this.addaddressForm.invalid){
return false;
}
if(this.address_id > 0){
this.updateAddressFormSubmit(data,this.address_id);
}else{
this.addaddressFormSubmit(data)
}
}
addaddressFormSubmit(data){
this.loader = true;
const This = this;
data.customer_id = this.loginDetails.customer_id;
this.webService.post_data('saveUserAddress',data).subscribe(response => {
this.loader = false;
if(response.status == 'success'){
this.addressResponse = response;
setTimeout( function() {
This.addressResponse = false;
This.goToPage('address','');
This.addaddressForm.reset();
This.addressResponse = false;
This.addressSubmitClick = false;
}, 3000);
}else{
response.message = (response.message == '')?this.errorMsg.errorList.req_failure:response.message;
this.addressResponse = response;
setTimeout( function() {
This.addressResponse = false;
}, 3000);
}
})
}
updateAddressFormSubmit(data,id){
this.loader = true;
const This = this;
data.customer_id = this.loginDetails.customer_id;
this.webService.post_data('updateUserAddress',{"data":data,"address_id":id}).subscribe(response => {
this.loader = false;
if(response.status == 'success'){
this.addressResponse = response;
setTimeout( function() {
This.addressResponse = false;
This.goToPage('address','');
This.addaddressForm.reset();
This.addressResponse = false;
This.addressSubmitClick = false;
}, 3000);
}else{
response.message = (response.message == '')?this.errorMsg.errorList.req_failure:response.message;
this.addressResponse = response;
setTimeout( function() {
This.addressResponse = false;
}, 3000);
}
})
}
getUserAddressById(address_id){
this.loader = true;
this.webService.post_data('getUserAddressById',{"address_id":address_id,'customer_id':this.loginDetails.customer_id}).subscribe(response => {
this.loader = false;
if(response.status == 'success'){
this.editAddressResp = response.data;
this.addaddressForm.controls["city"].setValue(this.editAddressResp.city);
this.addaddressForm.controls["area"].setValue(this.editAddressResp.area);
this.addaddressForm.controls["state"].setValue(this.editAddressResp.state);
this.addaddressForm.controls["landmark"].setValue(this.editAddressResp.landmark);
this.addaddressForm.controls["house_no"].setValue(this.editAddressResp.house_no);
this.addaddressForm.controls["phone_no"].setValue(this.editAddressResp.phone_no);
this.addaddressForm.controls["name"].setValue(this.editAddressResp.name);
this.addaddressForm.controls["address_type"].setValue(this.editAddressResp.address_type);
}
})
} }
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/address/address.component.html
<div class="purchase_wrapper"> <div class="purchase_wrapper">
<div class="container-fluid"> <div class="container-fluid">
<app-searchbar> <div class="loader_overlay" *ngIf="loader"></div>
</app-searchbar>
<div class="address_wrapper"> <div class="address_wrapper">
<h3>Delivery Address</h3> <h3>Delivery Address</h3>
<div class="address_inner_wrapper"> <div class="address_inner_wrapper">
<ul> <ul>
<li> <div *ngIf="userAddress && userAddress.length > 0;else noAddress">
<h4>Loius Morgan <span class="address">(Home)</span><span class="number">+91 996548752</span></h4> <li *ngFor="let addrs of userAddress"
<p> Ground Floor, Carnival Infopark, Phase- 2 Kusumagiri PO, Kakkanad, Kochi, Kerala 682030</p> [ngClass]="address_id == addrs.id ? 'selected_add' : '' "
<div class="edit"> (click)="select_address(addrs.id)">
Edit <h4>{{addrs.name}} <span class="address">({{addrs.address_type === '1'?'Home':'Office'}})</span><span class="number">{{addrs.phone_no}}</span></h4>
</div> <p>{{addrs.house_no+', '+addrs.area+', '+addrs.state+', '+addrs.city}}</p>
</li> <div class="edit" (click)="editAddress(addrs.id)">
<li> Edit
<h4>Loius Morgan <span class="address">(Home)</span><span class="number">+91 996548752</span></h4> </div>
<p> Ground Floor, Carnival Infopark, Phase- 2 Kusumagiri PO, Kakkanad, Kochi, Kerala 682030</p> </li>
<div class="edit"> </div>
Edit
</div>
</li>
<li>
<h4>Loius Morgan <span class="address">(Home)</span><span class="number">+91 996548752</span></h4>
<p> Ground Floor, Carnival Infopark, Phase- 2 Kusumagiri PO, Kakkanad, Kochi, Kerala 682030</p>
<div class="edit">
Edit
</div>
</li>
<div class="add_new" (click)="goToPage('addaddress')"> <div class="add_new" (click)="goToPage('addaddress')">
Add new Address Add new Address
</div> </div>
</ul> </ul>
<ng-template #noAddress>
Address is Not Added!
</ng-template>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<h2>$ 3,200</h2> <h2>$ {{prdtData.total_amount}}</h2>
<h5>Delivery expected by Thur 1 May 2019</h5> <!-- <h5>Delivery expected by Thur 1 May 2019</h5> -->
</div> </div>
<div class="col-md-6 textRight"> <div class="col-md-6 textRight">
<h4> <h4>
<div class="delivery_btn floatRight" (click)="goToPage('summary')">Deliver here</div> <div [ngClass]="(address_id > 0)?'delivery_btn floatRight':'delivery_btn floatRight disable_btn'" (click)="deliverProduct()">Deliver here</div>
<div class="clear"></div> <div class="clear"></div>
</h4> </h4>
......
src/app/purchase/address/address.component.scss
...@@ -22,12 +22,12 @@ ...@@ -22,12 +22,12 @@
cursor: pointer; cursor: pointer;
&:hover{ &:hover{
border:2px solid #2655bf; border:2px solid #a0b9f3;
// transition-delay: 1s; // transition-delay: 1s;
// transition-timing-function: ease-in-out; // transition-timing-function: ease-in-out;
} }
&:focus{ &:focus{
border:2px solid #2655bf; border:2px solid #a0b9f3;
// transition-delay: 1s; // transition-delay: 1s;
// transition-timing-function: ease-in-out; // transition-timing-function: ease-in-out;
} }
...@@ -62,6 +62,9 @@ ...@@ -62,6 +62,9 @@
margin: 0px; margin: 0px;
} }
} }
.selected_add{
border:2px solid #2655bf !important;
}
......
src/app/purchase/address/address.component.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit} from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router'; import { Router,ActivatedRoute } from '@angular/router';
import { WebService } from '../../provider/web.service';
import { SubjectService } from '../../provider/subject.service';
import { DataserviceService } from '../../provider/dataservice.service';
@Component({ @Component({
selector: 'app-address', selector: 'app-address',
templateUrl: './address.component.html', templateUrl: './address.component.html',
styleUrls: ['./address.component.scss'] styleUrls: ['./address.component.scss']
}) })
export class AddressComponent implements OnInit { export class AddressComponent implements OnInit {
loader : boolean;
prdtData : any = new Array();
product_id : any;
address_id : number;
userAddress : any;
loginDetails : any;
constructor( constructor(private route : ActivatedRoute,
private router : Router, private router : Router,
private route : ActivatedRoute public webService : WebService,
) { } public subjectService : SubjectService,
public dataService : DataserviceService) {
this.loader = true;
this.address_id = 0;
}
ngOnInit() { ngOnInit() {
this.checkUserLogin();
this.checkProductId();
this.getUserAddress();
}
checkUserLogin(){
this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
if(!this.loginDetails){
this.goToPage('purchaseHome','');
}
} }
checkProductId(){
this.prdtData = JSON.parse(this.webService.getLocalStorageItem('productDetails'));
if(this.prdtData && this.prdtData['product_id'] > 0){
this.product_id = this.prdtData['product_id'];
}else{
this.goToPage('purchaseHome','');
}
}
getUserAddress(){
if(!this.loginDetails || !this.loginDetails.customer_id){
return false;
}
this.loader = true;
this.webService.post_data('getUserAddress',{'user_id':this.loginDetails.customer_id}).subscribe(response => {
if(response.status == 'success'){
this.userAddress = response.data;
}else{
this.userAddress = false;
}
this.loader = false;
})
}
editAddress(address_id){
if(address_id == ''){
return false;
}
this.goToPage('addaddress',{"address_id":address_id});
}
select_address(address_id){
if(address_id === ''){
return false;
}
this.address_id = address_id;
}
deliverProduct(){
if(this.address_id > 0){
this.prdtData.address_id = this.address_id;
this.webService.setLocalStorageItem('productDetails', JSON.stringify(this.prdtData));
this.goToPage('summary','');
}
}
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/productdetails/productdetails.component.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router'; import { Router,ActivatedRoute } from '@angular/router';
import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery'; import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery';
import * as $ from 'jquery'; import { WebService } from '../../provider/web.service';
import { NgxCarousel } from 'ngx-carousel'; import { NgxCarousel } from 'ngx-carousel';
import { ImageStorage } from '../../../environments/server.config';
import { SubjectService } from '../../provider/subject.service';
import * as $ from 'jquery';
@Component({ @Component({
selector: 'app-productdetails', selector: 'app-productdetails',
...@@ -10,87 +13,127 @@ import { NgxCarousel } from 'ngx-carousel'; ...@@ -10,87 +13,127 @@ import { NgxCarousel } from 'ngx-carousel';
styleUrls: ['./productdetails.component.scss'] styleUrls: ['./productdetails.component.scss']
}) })
export class ProductdetailsComponent implements OnInit { export class ProductdetailsComponent implements OnInit {
loader: boolean;
count:any; count:any;
public carouselTile: NgxCarousel; product_id: number;
constructor( imageServer: string;
private router : Router, productDetails:any;
private route : ActivatedRoute product_data:any = new Array();
) { galleryImages: NgxGalleryImage[];
this.count = 0; galleryOptions: NgxGalleryOptions[];
} loginDetails:any;
@ViewChild("indexLoginModal") loginModalRef: ElementRef;
public carouselTile: NgxCarousel;
constructor(private router: Router,
private route: ActivatedRoute,
public webService: WebService,
public subjectService : SubjectService) {
this.loader = true;
this.count = 1;
this.product_id = 0;
this.imageServer = ImageStorage;
this.router.routeReuseStrategy.shouldReuseRoute = function(){
return false;
}
add(){ route.params.subscribe(val => {
this.count = this.count + 1; this.route.queryParams.subscribe(params => {
} this.product_id = params['product_id'];
});
this.getProductDetails();
});
minus(){ if(!this.product_id){
this.count = this.count - 1; this.goToPage('purchaseHome','');
if(this.count < 0){ }
this.count = 0;
} }
}
galleryOptions: NgxGalleryOptions[]; add(){this.count = this.count + 1;}
galleryImages: NgxGalleryImage[]; minus(){this.count = this.count - 1;
if(this.count < 1){this.count = 1;}
}
ngOnInit(): void {
this.designModules();
this.checkUserLogin();
}
ngOnInit(): void { checkUserLogin(){
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.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
this.subjectService.getLoginData().subscribe(loginData => {
this.galleryOptions = [ this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
{ });
width: '100%', }
height: '570px',
thumbnailsColumns: 4,
imageAnimation: NgxGalleryAnimation.Slide
},
// max-width 800
{
breakpoint: 1440,
width: '100%',
height: '400px',
imagePercent: 80,
thumbnailsPercent: 20,
thumbnailsMargin: 20,
thumbnailMargin: 20
},
// max-width 400
{
breakpoint: 400,
preview: false
}
];
this.galleryImages = [ getProductDetails(){
{ this.webService.post_data('SingleProductSearch',{"product_id":this.product_id}).subscribe(response => {
small: 'assets/images/tyre_shot1.png', if(response.status == 'success'){
medium: 'assets/images/tyre_shot1.png', let image: string = '';
big: 'assets/images/tyre_shot1.png' let imageArr: any[] = new Array();
}, const thisObj = this;
{ this.productDetails = response.data;
small: 'assets/images/tyre_shot2.png', console.log(response.data)
medium: 'assets/images/tyre_shot2.png', if(this.productDetails.images.length > 0){
big: 'assets/images/tyre_shot2.png' thisObj.productDetails.images.forEach(function (data) {
}, image = thisObj.imageServer + data.image;
{ imageArr.push({small: image,medium: image,big: image});
small: 'assets/images/tyre_shot3.png', });
medium: 'assets/images/tyre_shot3.png', }else{
big: 'assets/images/tyre_shot3.png' image = thisObj.imageServer +'assets/images/no_image_text.png';
}, imageArr.push({small: image,medium: image,big: image});
{ }
small: 'assets/images/tyre_shot4.png', this.galleryImages = imageArr;
medium: 'assets/images/tyre_shot4.png', }else{
big: 'assets/images/tyre_shot4.png' this.productDetails = false;
} }
this.loader = false;
]; });
}
buyProduct(amount){
if(!this.loginDetails){
this.loginModalRef.nativeElement.click();
return false;
} }
this.product_data = {amount:amount,product_id:this.product_id,quantity:this.count,total_amount:this.count*amount};
this.webService.setLocalStorageItem('productDetails', JSON.stringify(this.product_data));
this.goToPage('address','');
}
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;
}
designModules(){
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.galleryOptions = [
{
width: '100%',
height: '570px',
thumbnailsColumns: 4,
imageAnimation: NgxGalleryAnimation.Slide
},
{
breakpoint: 1440,
width: '100%',
height: '400px',
imagePercent: 80,
thumbnailsPercent: 20,
thumbnailsMargin: 20,
thumbnailMargin: 20
},
{
breakpoint: 400,
preview: false
}
];
} }
carouselTileLoad(){ return ''; } carouselTileLoad(){ return ''; }
} }
\ No newline at end of file
src/app/purchase/productlist/productlist.component.scss
...@@ -44,6 +44,7 @@ ...@@ -44,6 +44,7 @@
padding:0px; padding:0px;
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
height: 150px;
li{ li{
list-style: none; list-style: none;
padding-left: 25px; padding-left: 25px;
...@@ -249,7 +250,7 @@ ...@@ -249,7 +250,7 @@
padding: 10px; padding: 10px;
img{ img{
height: 180px; height: 180px;
width: auto; max-width: 100%;
} }
} }
h5{ h5{
......
src/app/purchase/productlist/productlist.component.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router'; import { Router,ActivatedRoute } from '@angular/router';
import { Options } from 'ng5-slider'; import { Options } from 'ng5-slider';
import { WebService } from '../../provider/web.service';
import { ImageStorage } from '../../../environments/server.config';
@Component({ @Component({
selector: 'app-productlist', selector: 'app-productlist',
...@@ -8,25 +10,88 @@ import { Options } from 'ng5-slider'; ...@@ -8,25 +10,88 @@ import { Options } from 'ng5-slider';
styleUrls: ['./productlist.component.scss'] styleUrls: ['./productlist.component.scss']
}) })
export class ProductlistComponent implements OnInit { export class ProductlistComponent implements OnInit {
loader: boolean;
searchKey:string;
imageServer: any;
productArray: any;
productBrand: any;
brandArr: any[] = new Array();
sliderMinvalue: number;
sliderhighValue: number;
slideroptions: Options;
constructor( constructor(
private router : Router, private router : Router,
private route : ActivatedRoute private route : ActivatedRoute,
) { } public webService : WebService
){
this.loader = true;
this.productArray = true;
value: number = 40; this.imageServer = ImageStorage;
highValue: number = 60; route.params.subscribe(val => {
options: Options = { this.route.queryParams.subscribe(params => {
floor: 0, this.searchKey = params['key'];
ceil: 100 this.getProductDetails({"key":this.searchKey});
}; });
});
if(this.searchKey == ''){
this.goToPage('purchaseHome','');
}
}
public scrollbarOptions = { axis: 'y', theme: 'minimal-dark' };
ngOnInit() { ngOnInit() {
this.getBrand();
} }
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;
}
getProductDetails(params:any = ''){
this.loader = true;
this.webService.post_data('productSearch',params).subscribe(response => {
if(response.status == 'success'){
console.log(response.data);
this.productArray = response.data;
} else {
this.productArray = false;
}
this.loader = false;
});
}
getBrand(){
this.webService.get_data('getBrands').subscribe(brandResponse => {
if(brandResponse.status == 'success'){
this.productBrand = brandResponse.brands;
this.sliderMinvalue = 0;
this.sliderhighValue = brandResponse.maxamount;
this.slideroptions = { floor: 0, ceil: brandResponse.maxamount, step: 100 };
}
});
} }
getSingleProductDetails(prdt_id){
this.goToPage('productdetails',{"product_id":prdt_id});
}
selectBrand(event,brand_id){
if (event.target.checked) {
this.brandArr.push(brand_id);
} else {
let id = this.brandArr.findIndex(x => x == brand_id);
if (id != -1) {
this.brandArr.splice(id, 1);
}
}
this.getProductDetails({"key":this.searchKey,"brand_id":this.brandArr});
}
getPrice(low,top){
this.getProductDetails({"key":this.searchKey,"brand_id":this.brandArr,"minPrice":low,"maxPrice":top});
}
} }
src/app/purchase/purchase-home/purchase-home.component.spec.ts 0 → 100644
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { PurchaseHomeComponent } from './purchase-home.component';
describe('PurchaseHomeComponent', () => {
let component: PurchaseHomeComponent;
let fixture: ComponentFixture<PurchaseHomeComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PurchaseHomeComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PurchaseHomeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/purchase/purchase-home/purchase-home.component.ts 0 → 100644
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 { NgxCarousel } from 'ngx-carousel';
@Component({
selector: 'app-purchase-home',
templateUrl: './purchase-home.component.html',
styleUrls: ['./purchase-home.component.scss']
})
export class PurchaseHomeComponent implements OnInit {
public carouselTile: NgxCarousel;
@ViewChild("failureModel") public failureModelRef: ElementRef;
constructor(
private router : Router,
private route : ActivatedRoute,
public webService : WebService
) { }
value: number = 40;
highValue: number = 60;
options: Options = {
floor: 0,
ceil: 100
};
ngOnInit() {
this.route.queryParams.subscribe(params => {
let payStatus = params['status'];
if(payStatus && payStatus !=''){
if(payStatus == 'failure')
this.failureModelRef.nativeElement.click();
}
});
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'}
}
unsetProdDetails(){
this.webService.removeLocalItem('productDetails');
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
carouselTileLoad(){ return ''; }
}
src/app/purchase/purchase.module.ts
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { ProductlistComponent } from './productlist/productlist.component'; import { ProductlistComponent } from './productlist/productlist.component';
import { ProductdetailsComponent } from './productdetails/productdetails.component'; import { ProductdetailsComponent } from './productdetails/productdetails.component';
import { moduleRouting } from './purchase.routing'; import { moduleRouting } from './purchase.routing';
import { SearchbarComponent } from './searchbar/searchbar.component'; import { SearchbarComponent } from './searchbar/searchbar.component';
import { Ng5SliderModule } from 'ng5-slider'; import { Ng5SliderModule } from 'ng5-slider';
import { MalihuScrollbarModule } from 'ngx-malihu-scrollbar';
import { NgxGalleryModule } from 'ngx-gallery'; import { NgxGalleryModule } from 'ngx-gallery';
import { NgxCarouselModule } from 'ngx-carousel'; import { NgxCarouselModule } from 'ngx-carousel';
import { CartComponent } from './cart/cart.component'; import { CartComponent } from './cart/cart.component';
...@@ -16,17 +18,20 @@ import { SummaryComponent } from './summary/summary.component'; ...@@ -16,17 +18,20 @@ import { SummaryComponent } from './summary/summary.component';
import { TooltipModule } from 'ng2-tooltip-directive'; import { TooltipModule } from 'ng2-tooltip-directive';
import { AddaddressComponent } from './addaddress/addaddress.component'; import { AddaddressComponent } from './addaddress/addaddress.component';
import { OrdersuccessComponent } from './ordersuccess/ordersuccess.component'; import { OrdersuccessComponent } from './ordersuccess/ordersuccess.component';
import { PurchaseHomeComponent } from './purchase-home/purchase-home.component';
@NgModule({ @NgModule({
declarations: [ProductlistComponent, ProductdetailsComponent, SearchbarComponent, CartComponent, OrdersComponent, RatingComponent, TrackComponent, AddressComponent, SummaryComponent, AddaddressComponent, OrdersuccessComponent], declarations: [ProductlistComponent, ProductdetailsComponent, SearchbarComponent, CartComponent, OrdersComponent, RatingComponent, TrackComponent, AddressComponent, SummaryComponent, AddaddressComponent, OrdersuccessComponent, PurchaseHomeComponent],
imports: [ imports: [
CommonModule, CommonModule,
moduleRouting, moduleRouting,
Ng5SliderModule, Ng5SliderModule,
NgxGalleryModule, NgxGalleryModule,
NgxCarouselModule, NgxCarouselModule,
TooltipModule ReactiveFormsModule,
TooltipModule,
MalihuScrollbarModule.forRoot()
] ]
}) })
export class PurchaseModule { } export class PurchaseModule { }
src/app/purchase/purchase.routing.ts
...@@ -10,6 +10,7 @@ import { AddressComponent } from './address/address.component'; ...@@ -10,6 +10,7 @@ import { AddressComponent } from './address/address.component';
import { SummaryComponent } from './summary/summary.component'; import { SummaryComponent } from './summary/summary.component';
import { AddaddressComponent } from './addaddress/addaddress.component'; import { AddaddressComponent } from './addaddress/addaddress.component';
import { OrdersuccessComponent } from './ordersuccess/ordersuccess.component'; import { OrdersuccessComponent } from './ordersuccess/ordersuccess.component';
import { PurchaseHomeComponent } from './purchase-home/purchase-home.component';
const ModuleRoutes: Routes = [ const ModuleRoutes: Routes = [
{ path: 'productlist', component: ProductlistComponent}, { path: 'productlist', component: ProductlistComponent},
...@@ -21,7 +22,8 @@ const ModuleRoutes: Routes = [ ...@@ -21,7 +22,8 @@ const ModuleRoutes: Routes = [
{ path: 'address', component: AddressComponent}, { path: 'address', component: AddressComponent},
{ path: 'summary', component: SummaryComponent}, { path: 'summary', component: SummaryComponent},
{ path: 'addaddress', component: AddaddressComponent}, { path: 'addaddress', component: AddaddressComponent},
{ path: 'ordersuccess', component: OrdersuccessComponent} { path: 'ordersuccess', component: OrdersuccessComponent},
{ path: 'purchaseHome', component: PurchaseHomeComponent}
]; ];
......
src/app/purchase/rating/rating.component.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router'; import { Router,ActivatedRoute } from '@angular/router';
import { FormGroup, FormControl, Validators, ValidationErrors } from '@angular/forms';
import { ValidationService } from '../../provider/validation.service';
import { WebService } from '../../provider/web.service';
import { ImageStorage } from '../../../environments/server.config';
import { NgxCarousel } from 'ngx-carousel'; import { NgxCarousel } from 'ngx-carousel';
@Component({ @Component({
...@@ -8,19 +12,98 @@ import { NgxCarousel } from 'ngx-carousel'; ...@@ -8,19 +12,98 @@ import { NgxCarousel } from 'ngx-carousel';
styleUrls: ['./rating.component.scss'] styleUrls: ['./rating.component.scss']
}) })
export class RatingComponent implements OnInit { export class RatingComponent implements OnInit {
prdt_id:any;
loginDetails:any;
rateFormClick:boolean;
loader:boolean;
productDetails:any;
imageServer: any;
rateFormResponse:any;
public carouselTile: NgxCarousel; public carouselTile: NgxCarousel;
constructor( constructor(
private router : Router, private router : Router,
private route : ActivatedRoute private route : ActivatedRoute,
) { } public errorMsg : ValidationService,
public webService : WebService
) {
this.rateFormClick = false;
this.loader = true;
this.imageServer = ImageStorage;
}
rateForm;
ngOnInit() { ngOnInit() {
this.route.queryParams.subscribe(params => {
this.prdt_id = params['pId'];
});
if(this.prdt_id > 0){
this.getProductDetails();
}
this.rateForm = new FormGroup({
rating: new FormControl('5'),
title: new FormControl('',[Validators.required]),
description: new FormControl('',[Validators.required])
});
this.checkUserLogin();
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'}
} }
checkUserLogin(){
this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
if(!this.loginDetails){
this.goToPage('purchaseHome','');
}
}
getProductDetails(){
this.loader = true;
this.webService.post_data('SingleProductSearch',{'product_id':this.prdt_id}).subscribe(response => {
if(response.status == 'success'){
this.productDetails = response.data;
}else{
this.productDetails = false;
}
this.loader = false;
})
}
rateFormSubmit(data){
if(this.rateForm.invalid){
return false;
}
data.product_id = this.prdt_id;
data.customer_id = this.loginDetails.customer_id;
this.loader = true;
const This = this;
this.webService.post_data('rateProduct',data).subscribe(response => {
if(response.status == 'success'){
this.rateFormResponse = response;
setTimeout( function() {
This.rateFormResponse = false;
}, 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);
}
},error => {
this.rateFormResponse = {'status':'error','message':this.errorMsg.errorList.req_failure};
setTimeout( function() {
This.rateFormResponse = false;
}, 3000);
});
}
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;
} }
carouselTileLoad(){ return ''; } carouselTileLoad(){ return ''; }
......
src/app/purchase/searchbar/searchbar.component.html
<div class="purchase_taskbar"> <div class="purchase_taskbar">
<div class="purchase_searchbar"> <div class="purchase_searchbar">
<div class="purchase_inner_search_bar"> <div class="purchase_inner_search_bar">
<input class="" type="text" placeholder="Search here"> <input #productSearch type="text" placeholder="Search here" (keyup)="productSearchfun(productSearch.value)">
<button class="search_btn">Search</button> <button class="search_btn" (click)="productSearchFunClick(productSearch.value)">Search</button>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<div *ngIf="!productArray && productSearch.value != ''" style="text-align: center;">
<!-- <img class="imageSize" src="assets/images/no_result.png"><br> -->
<small>No Data Found</small>
</div>
<div *ngIf="productArray && productArray.length > 0" class="nav_bar_search_list">
<ul class="filter-select">
<li class="cpoint" *ngFor="let prdt of productArray" (click)="clickProduct(prdt.product_id)">{{prdt.product_name}}</li>
</ul>
</div>
</div> </div>
<div class="purchase_other"> <div class="purchase_other">
<ul> <ul>
......
src/app/purchase/searchbar/searchbar.component.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router'; import { Router,ActivatedRoute } from '@angular/router';
import { WebService } from '../../provider/web.service';
@Component({ @Component({
selector: 'app-searchbar', selector: 'app-searchbar',
...@@ -7,18 +8,46 @@ import { Router,ActivatedRoute } from '@angular/router'; ...@@ -7,18 +8,46 @@ import { Router,ActivatedRoute } from '@angular/router';
styleUrls: ['./searchbar.component.scss'] styleUrls: ['./searchbar.component.scss']
}) })
export class SearchbarComponent implements OnInit { export class SearchbarComponent implements OnInit {
constructor( productArray: any;
private router : Router, SingleProductData:any;
private route : ActivatedRoute @ViewChild("productSearch") public productSearchRef: ElementRef;
) { }
constructor(private router : Router, private route: ActivatedRoute, public webService: WebService) {
this.productArray = true;
}
ngOnInit() { ngOnInit() {
} }
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;
}
productSearchfun(product){
if(product == ''){
this.productArray = false;
return;
}
this.webService.post_data('productSearch',{"key":product}).subscribe(response => {
if(response.status == 'success'){
this.productArray = response.data;
} else {
this.productArray = false;
}
console.log(this.productArray);
});
}
productSearchFunClick(key){
this.productArray = false;
this.goToPage('productlist',{"key":key});
} }
clickProduct(product_id){
this.productArray = false;
this.productSearchRef.nativeElement.value = '';
this.goToPage('productdetails',{"product_id":product_id});
}
} }
src/app/purchase/summary/summary.component.html
<div class="purchase_wrapper"> <div class="purchase_wrapper">
<div class="container-fluid"> <div class="container-fluid">
<app-searchbar> <div class="loader_overlay" *ngIf="loader"></div>
</app-searchbar>
<div class="summary_wrapper"> <div class="summary_wrapper">
<h3>Order Summary</h3> <h3>Order Summary</h3>
<div class="summary_wrapper_inner"> <div class="summary_wrapper_inner">
<h4>Product Details</h4> <h4>Product Details</h4>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6" *ngIf="productDetails">
<div class="image_div"></div> <div class="image_div">
<img src="{{(productDetails.images[0] && productDetails.images[0].image)?imageServer + productDetails.images[0].image:''}}" onerror="this.src='assets/images/user_avatar.jpg'">
</div>
<div class="image_detail"> <div class="image_detail">
<h5>Appolo Amazer Tubeless 4 Wheeler</h5> <h5>{{productDetails.product_name}}</h5>
<p>Audi Q7</p> <p>{{productDetails.short_description}}</p>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<h6> <!-- <h6>
<span class="head">Color</span> <span class="head">Color</span>
<span>Black</span> <span>Black</span>
</h6> </h6> -->
</div> </div>
</div> </div>
<hr> <hr>
<h4>Delivery Address</h4> <h4>Delivery Address</h4>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6" *ngIf="userAddress">
<h2>Loius Morgan <span class="address">(Home)</span><span class="number">+91 996548752</span></h2> <h2>{{userAddress.name}}<span class="address">({{userAddress.address_type === '1'?'Home':'Office'}})</span><span class="number">{{userAddress.phone_no}}</span></h2>
<p> Ground Floor, Carnival Infopark, Phase- 2 Kusumagiri PO, Kakkanad, Kochi, Kerala <strong>Pin 682030</strong> </p> <p>{{userAddress.house_no+', '+userAddress.area+', '+userAddress.state+', '+userAddress.city}}
<!-- <strong>Pin 682030</strong> -->
</p>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<p>Delivery Expected by Thursday 29 April, 2019</p> <!-- <p>Delivery Expected by Thursday 29 April, 2019</p> -->
</div> </div>
</div> </div>
<hr> <hr>
<h4>Payment Details</h4> <h4>Payment Details</h4>
<div class="row"> <div class="row" *ngIf="prdtData">
<div class="col-md-6"> <div class="col-md-6">
<p class="p0">Quantity </p> <p class="p0">Quantity </p>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<p><strong>1</strong></p> <p><strong>{{prdtData.quantity}}</strong></p>
</div> </div>
</div> </div>
<div class="row"> <div class="row" *ngIf="prdtData">
<div class="col-md-6"> <div class="col-md-6">
<p>Total Amount</p> <p>Total Amount</p>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<p><strong style="font-size: 18px;">$ 399</strong></p> <p><strong style="font-size: 18px;">$ {{prdtData.total_amount}}</strong></p>
</div> </div>
</div> </div>
<hr> <hr>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<p>Order Confirmation mail will be sent to your mail ID <a>[email protected]</a> </p> <p>Order Confirmation mail will be sent to your mail ID <a>{{loginDetails.email}}</a> </p>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<button class="continue_btn">Continue</button> <button class="continue_btn" (click)="paymentButton()">Continue</button>
<span tooltip="Tooltip" placement="top" show-delay="500">Tooltip on top</span> <!-- <span tooltip="Tooltip" placement="top" show-delay="500">Tooltip on top</span> -->
<div class="clear"></div> <div class="clear"></div>
</div> </div>
</div> </div>
...@@ -66,4 +69,30 @@ ...@@ -66,4 +69,30 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<button #failureModel class="hide" data-toggle="modal" data-target="#failure"></button>
<div class="modal" id="failure">
<div class="modal-dialog modal-full">
<div class="modal-content login_modal_wrapper">
<div class="modal_close" data-dismiss="modal"> × </div>
<div class="modal-body quote_modal">
<div class="login_modal_content">
<div class="login_modal_inner">
<div class="login_success">
<img src="assets/images/asset_error.png">
<h4>Something Went Wrong.. Try Again</h4>
</div>
<div class="row">
<div class="col-md-12 textCenter" style="padding-top:40px;">
<button class="log_btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
\ No newline at end of file
src/app/purchase/summary/summary.component.ts
import { Component, OnInit } from '@angular/core'; 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 { apiConfig } from '../../../environments/server.config';
import { ImageStorage } from '../../../environments/server.config';
@Component({ @Component({
selector: 'app-summary', selector: 'app-summary',
...@@ -7,19 +10,96 @@ import { Router,ActivatedRoute } from '@angular/router'; ...@@ -7,19 +10,96 @@ import { Router,ActivatedRoute } from '@angular/router';
styleUrls: ['./summary.component.scss'] styleUrls: ['./summary.component.scss']
}) })
export class SummaryComponent implements OnInit { export class SummaryComponent implements OnInit {
loader:boolean;
loginDetails:any;
prdtData : any = new Array();
product_id : any;
userAddress:any;
serverUrl: string;
productDetails : any;
imageServer: any;
ref_id : any;
@ViewChild("failureModel") public failureModelRef: ElementRef;
constructor( constructor(
private router : Router, private router : Router,
private route : ActivatedRoute private route : ActivatedRoute,
) { } public webService : WebService
) {
this.loader = true;
this.imageServer = ImageStorage;
this.serverUrl = apiConfig;
}
ngOnInit() { ngOnInit() {
this.checkUserLogin();
this.checkProductId();
this.getUserAddress();
this.getProductDetails();
}
checkUserLogin(){
this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
if(!this.loginDetails){
this.goToPage('purchaseHome','');
}
}
checkProductId(){
this.prdtData = JSON.parse(this.webService.getLocalStorageItem('productDetails'));
if(this.prdtData && this.prdtData['product_id'] > 0){
this.product_id = this.prdtData['product_id'];
}else{
this.goToPage('purchaseHome','');
}
}
getUserAddress(){
if(!this.loginDetails || !this.loginDetails.customer_id){
return false;
}
this.loader = true;
this.webService.post_data('getUserAddressById',{'customer_id':this.loginDetails.customer_id,'address_id':this.prdtData.address_id}).subscribe(response => {
if(response.status == 'success'){
this.userAddress = response.data;
}else{
this.userAddress = false;
}
this.loader = false;
})
} }
getProductDetails(){
this.loader = true;
this.webService.post_data('SingleProductSearch',{'product_id':this.product_id}).subscribe(response => {
if(response.status == 'success'){
this.productDetails = response.data;
console.log(this.productDetails)
}else{
this.productDetails = false;
}
this.loader = false;
})
}
paymentButton(){
this.loader = true;
this.prdtData.customer_id = this.loginDetails.customer_id;
this.webService.post_data('initOrderBooking',{'data':this.prdtData}).subscribe(response => {
if(response.status == 'success'){
document.location.href = this.serverUrl+'orderPayNow/'+response.data;
}else{
this.failureModelRef.nativeElement.click();
}
this.loader = false;
})
}
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/track/track.component.html
<div class="purchase_wrapper"> <div class="purchase_wrapper">
<div class="container-fluid"> <div class="container-fluid">
<app-searchbar> <div class="loader_overlay" *ngIf="loader"></div>
</app-searchbar>
<div class="purchase_content_wrapper"> <div class="purchase_content_wrapper">
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
<div class="product_gallery"> <div class="product_gallery">
<div class="product_gallery_inner"> <div class="product_gallery_inner" *ngIf="galleryImages;else nogalleryimage">
<ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery> <ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>
</div> </div>
<ng-template #nogalleryimage>
No Image Found
</ng-template>
</div> </div>
</div> </div>
<div class="col-md-8"> <div class="col-md-8">
<div class="product_details"> <div class="product_details" *ngIf="orderDetails">
<h1>Apollo Amazer 4G Tubeless 4 Wheeler Tyre (155/80R13, Tube Less)</h1> <h1>{{orderDetails.product_name}}</h1>
<div class="review" (click)="goToPage('rating')">Write review</div> <div class="review" (click)="reviewBtn()">Write review</div>
<div class="clear"></div> <div class="clear"></div>
<h2>265/65R17, Tube Less</h2> <h2>{{orderDetails.short_description}}</h2>
<div class="others"> <div class="others">
<h4><div>Color</div><span>Black</span></h4> <!-- <h4><div>Color</div><span>Black</span></h4> -->
<h4><div>Quantity</div><span>1</span></h4> <h4><div>Quantity</div><span>{{orderDetails.quantity}}</span></h4>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-5"> <div class="col-md-5">
...@@ -29,7 +31,7 @@ ...@@ -29,7 +31,7 @@
<div class="order_range_details"> <div class="order_range_details">
<span> <span>
<h5>Order Confirmed</h5> <h5>Order Confirmed</h5>
<p>Thurs, April 25th 2019</p> <p>{{orderDetails.datetime | date: "EEE, MMMM dd yyyy"}}</p>
</span> </span>
<span> <span>
<h5>Packed</h5> <h5>Packed</h5>
...@@ -45,24 +47,23 @@ ...@@ -45,24 +47,23 @@
<div class="col-md-7"> <div class="col-md-7">
<div class="order_delivery_details"> <div class="order_delivery_details">
<div class="order_id"> <div class="order_id">
ORDID145879653 {{orderDetails.format_order_id}}
</div> </div>
<div class="order_delivery"> <div class="order_delivery" *ngIf="(( orderDetails.odr_status === '2' || orderDetails.odr_status === '3' || orderDetails.odr_status === '4' ) && orderDetails.expected_delivery != null)">
<h4> <h4> Expected Delivery On {{orderDetails.expected_delivery}} </h4>
Delivered on Thur, April 25 <p> Item will be delivered </p>
</h4> </div>
<p> <div class="order_delivery" *ngIf="(( orderDetails.odr_status === '5' || orderDetails.odr_status === '6' || orderDetails.odr_status === '7' ) && orderDetails.delivered != null)">
Item has been delivered <h4> Delivered On {{orderDetails.delivered}} </h4>
</p> <p> Item has been delivered </p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<h4>Total Amount</h4> <h4>Total Amount</h4>
<h3>$ 3,200</h3> <h3>$ {{orderDetails.amount}}</h3>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<h4> <h4>
......
src/app/purchase/track/track.component.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router'; import { Router,ActivatedRoute } from '@angular/router';
import { WebService } from '../../provider/web.service';
import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery'; import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery';
import * as $ from 'jquery'; import * as $ from 'jquery';
import { NgxCarousel } from 'ngx-carousel'; import { NgxCarousel } from 'ngx-carousel';
import { ImageStorage } from '../../../environments/server.config';
import { Options } from 'ng5-slider'; import { Options } from 'ng5-slider';
interface RangeSliderModel { interface RangeSliderModel {
...@@ -17,95 +19,106 @@ interface RangeSliderModel { ...@@ -17,95 +19,106 @@ interface RangeSliderModel {
styleUrls: ['./track.component.scss'] styleUrls: ['./track.component.scss']
}) })
export class TrackComponent implements OnInit { export class TrackComponent implements OnInit {
ref_id:any;
count:any; count:any;
public carouselTile: NgxCarousel; loginDetails:any;
constructor( loader:boolean;
private router : Router, imageServer: string;
private route : ActivatedRoute orderDetails:any;
) { galleryOptions: NgxGalleryOptions[];
this.count = 0; galleryImages: NgxGalleryImage[];
}
add(){ public carouselTile: NgxCarousel;
this.count = this.count + 1; constructor(private router : Router,
} private route : ActivatedRoute,
public webService : WebService){
minus(){
this.count = this.count - 1;
if(this.count < 0){
this.count = 0; this.count = 0;
this.loader =true;
this.imageServer = ImageStorage;
}
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();
}
}
}
});
this.designModule();
this.checkUserLogin();
this.unsetProdDetails();
} }
}
verticalSlider2: RangeSliderModel = { checkUserLogin(){
minValue: 50, this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
maxValue: 100, if(!this.loginDetails){
options: { this.goToPage('purchaseHome','');
floor: 0, }
ceil: 100,
vertical: true
} }
};
unsetProdDetails(){
this.webService.removeLocalItem('productDetails');
galleryOptions: NgxGalleryOptions[]; }
galleryImages: NgxGalleryImage[];
ngOnInit(): void { getOrderDetail(){
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'} if(this.ref_id <= 0){
this.goToPage('purchaseHome','');
this.galleryOptions = [ }
{ this.loader = true;
width: '100%', this.webService.post_data('getOrderDetail',{'ref_id':this.ref_id}).subscribe(response => {
height: '570px', if(response.status == 'success'){
thumbnailsColumns: 4, let image: string = '';
imageAnimation: NgxGalleryAnimation.Slide let imageArr: any[] = new Array();
}, const thisObj = this;
// max-width 800 this.orderDetails = response.data;
{ if(this.orderDetails.images.length > 0){
breakpoint: 1440, thisObj.orderDetails.images.forEach(function (data) {
width: '100%', image = thisObj.imageServer + data.image;
height: '400px', imageArr.push({small: image,medium: image,big: image});
imagePercent: 80, });
thumbnailsPercent: 20, }else{
thumbnailsMargin: 20, image = thisObj.imageServer +'assets/images/no_image_text.png';
thumbnailMargin: 20 imageArr.push({small: image,medium: image,big: image});
}, }
// max-width 400 this.galleryImages = imageArr;
{ }else{
breakpoint: 400, this.orderDetails = false;
preview: false this.goToPage('purchaseHome','');
}
];
this.galleryImages = [
{
small: 'assets/images/tyre_shot1.png',
medium: 'assets/images/tyre_shot1.png',
big: 'assets/images/tyre_shot1.png'
},
{
small: 'assets/images/tyre_shot2.png',
medium: 'assets/images/tyre_shot2.png',
big: 'assets/images/tyre_shot2.png'
},
{
small: 'assets/images/tyre_shot3.png',
medium: 'assets/images/tyre_shot3.png',
big: 'assets/images/tyre_shot3.png'
},
{
small: 'assets/images/tyre_shot4.png',
medium: 'assets/images/tyre_shot4.png',
big: 'assets/images/tyre_shot4.png'
} }
this.loader = false;
]; });
}
reviewBtn(){
if(this.orderDetails.product_id <= 0){
this.goToPage('purchaseHome','');
} }
this.goToPage('rating',{"pId":this.orderDetails.product_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;
} }
carouselTileLoad(){ return ''; } 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'}
this.galleryOptions = [
{ width: '100%', height: '570px', thumbnailsColumns: 4, imageAnimation: NgxGalleryAnimation.Slide },
{ breakpoint: 1440, width: '100%', height: '400px', imagePercent: 80, thumbnailsPercent: 20, thumbnailsMargin: 20, thumbnailMargin: 20 },
{ breakpoint: 400, preview: false }
];
}
}
\ No newline at end of file
src/styles.scss
...@@ -832,3 +832,14 @@ bs-datepicker-container{ ...@@ -832,3 +832,14 @@ bs-datepicker-container{
} }
} }
.cpoint{
cursor: pointer !important;
}
.disable_btn{
pointer-events: none;
cursor: default;
text-decoration: none;
background-color: #7e7f7fc9 !important;
}
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