Skip to content

D
dcarfixers_angular
Commit ccda95a6 by Tobin
Options

Merge branch 'jensa' into 'master'

Jensa See merge request !34
parents 49be1901 c0808a97
Showing with 1342 additions and 378 deletions
package.json
......@@ -43,7 +43,7 @@
"ngx-google-places-autocomplete": "^2.0.3",
"ngx-malihu-scrollbar": "^7.0.0",
"ngx-slick": "^0.2.1",
"node-sass": "^4.11.0",
"node-sass": "^4.12.0",
"rebuild": "^0.1.2",
"rxjs": "~6.3.3",
"rxjs-compat": "^6.3.3",
......
src/app/app-routing.module.ts
......@@ -6,7 +6,7 @@ const routes: Routes = [
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
exports: [RouterModule]
})
export class AppRoutingModule { }
src/app/app.module.ts
......@@ -28,7 +28,7 @@ import { ForgotComponent } from './forgot/forgot.component';
HttpClientModule,
MalihuScrollbarModule.forRoot()
],
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
src/app/home/dashboard/dashboard.component.scss
......@@ -95,7 +95,7 @@
.dashboard_tab_content {
padding-bottom: 80px;
#quote_list{
.quote_list_table{
background: darkgray;
thead {
......@@ -107,12 +107,51 @@
font-weight: 400;
padding: 5px;
padding-left:20px;
&:nth-child(1){
width:20%;
}
&:nth-child(2){
width:20%;
}
&:nth-child(3){
width:10%;
}
&:nth-child(4){
width:20%;
}
&:nth-child(5){
width:10%;
}
&:nth-child(6){
width:20%;
}
}
}
}
tbody {
tr{
td{
&:nth-child(1){
width:20%;
}
&:nth-child(2){
width:20%;
}
&:nth-child(3){
width:10%;
}
&:nth-child(4){
width:20%;
}
&:nth-child(5){
width:10%;
}
&:nth-child(6){
width:20%;
}
}
}
}
}
table {
......@@ -688,7 +727,7 @@
text-transform: uppercase;
color: #1e1e1e;
font-weight: 600;
padding-bottom: 10px;
padding-bottom: 30px;
}
.facebook_btn {
background-color: #3b5998;
......@@ -718,10 +757,15 @@
padding: 0px;
}
.search {
background: url("/assets/images/asset_search.png");
background-position: right 10px top 5px;
text-align: center;
background-repeat: no-repeat;
padding-right: 50px;
border:none;
border-bottom: 1px solid #f4f4f4;
font-size: 28px;
padding-bottom: 20px;
&::placeholder{
color: #e7e7e7;
}
}
.service_tab_inner{
width: 100%;
......
src/app/home/home.routing.ts
......@@ -6,15 +6,12 @@ import { TncComponent } from './tnc/tnc.component';
import { PrivacyComponent } from './privacy/privacy.component';
import { TnsComponent } from './tns/tns.component';
const ModuleRoutes: Routes = [
{ path: 'index', component: IndexComponent},
{ path: 'dashboard', component: DashboardComponent},
{ path: 'termscondition', component: TncComponent},
{ path: 'termsservice', component: TnsComponent},
{ path: 'privacy', component: PrivacyComponent}
{ path: 'index', component: IndexComponent },
{ path: 'privacy', component: PrivacyComponent },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'termsservice', component: TnsComponent },
{ path: 'termscondition', component: TncComponent }
];
export const moduleRouting: ModuleWithProviders = RouterModule.forChild(ModuleRoutes)
......
src/app/home/index/index.component.html
......@@ -331,7 +331,7 @@
<div class="arrow_btn up_arrow" (click)="scrollToTop('issue_cntr')"></div>
<ul class="nav services_tab" id="issue_cntr">
<li class="nav-item" *ngFor="let issue_data of issuesData; let i = index;">
<a [ngClass]="(i == 0)?'nav-link text_truncate active':'nav-link text_truncate'" data-toggle="pill" [attr.href]="'#issue_'+issue_data.issue_id"><img src="../../../assets/images/default.png">{{issue_data.issue}}</a>
<a [ngClass]="(i == 0)?'nav-link text_truncate active':'nav-link text_truncate'" data-toggle="pill" [attr.href]="'#issue_'+issue_data.issue_id" tooltip="{{issue_data.issue}}" placement="top" show-delay="500" z-index="99999"><img src="../../../assets/images/default.png">{{issue_data.issue}}</a>
</li>
</ul>
<div class="arrow_btn down_arrow" (click)="scrollToBottom('issue_cntr')"></div>
......@@ -345,7 +345,7 @@
<button id="custom_check_button">
<label>
<input type="checkbox" name="services" [attr.id]="'issue_' + issue_data.issue_id + '_' + sub_issue_data.issue_cat_id" [attr.issue_id]="issue_data.issue_id" [attr.sub_issue_id]="sub_issue_data.issue_cat_id" (click)="setIssueSelected($event)">
<p class="text_truncate">{{sub_issue_data.issue_category}}</p>
<p class="text_truncate" tooltip="{{sub_issue_data.issue_category}}" placement="top" show-delay="500" z-index="99999">{{sub_issue_data.issue_category}}</p>
</label>
</button>
</li>
......@@ -489,7 +489,7 @@
<div class="modal" id="quotes">
<div class="modal-dialog modal-full">
<div class="modal-content login_modal_wrapper" malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
<div #closeQuoteWizard class="modal_close" data-dismiss="modal" (click)="scheduleDateInit = false; scheduleMechanic = false">
<div #closeQuoteWizard class="modal_close" data-dismiss="modal" (click)="scheduleDateInit = false; scheduleMechanic = false; selMechanics = [];">
&times;
</div>
<div class="modal-body">
......@@ -537,8 +537,8 @@
</div>
<div class="mechanic_detail relative">
<div class="custom_checkbox_stack">
<input class="custom_checkbox" id="custom_checkbox-1" type="checkbox" value="value1">
<label for="custom_checkbox-1"></label>
<input class="custom_checkbox" [attr.id]="'custom_checkbox-1'+i" (click)="checkboxChange(i,mechanic.mechanic_id,$event,mechanic.estimate)" type="checkbox" value="value1">
<label [attr.for]="'custom_checkbox-1'+i"></label>
</div>
<h4>{{mechanic.display_name}}</h4>
......@@ -553,8 +553,8 @@
<h6>{{mechanic.phone}}</h6>
<p>{{mechanic.distance | number:'1.2-2' }} miles away from you</p>
</ng-template>
<button (click)="scheduleNow(mechanic.mechanic_id,mechanic.estimate)" [ngClass]="{'book_now':scheduleDateInit == true && scheduleMechanic == mechanic.mechanic_id,
'book_now_disabled':scheduleDateInit == false || (scheduleDateInit == true && scheduleMechanic != mechanic.mechanic_id)}">
<button (click)="scheduleNow(mechanic.mechanic_id,mechanic.estimate)" [ngClass]="{'book_now':scheduleDateInit == true && scheduleMechanic == mechanic.mechanic_id && selMechanics.length <= 0,
'book_now_disabled':scheduleDateInit == false || (scheduleDateInit == true && scheduleMechanic != mechanic.mechanic_id) || selMechanics.length > 0}">
{{loginDetails ? 'Book now' : 'Login and Continue' }}
</button>
</div>
......@@ -629,7 +629,7 @@
<div class="clear"></div>
<p>Estimated Price : <strong>{{estimatedPrice}}</strong></p>
<div class="clear"></div>
<button class="request_all_btn">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 class="service_map">
<agm-map #gm [latitude]="lat" [longitude]="lng" [fitBounds]="true">
......
src/app/home/index/index.component.ts
......@@ -68,7 +68,9 @@ export class IndexComponent implements OnInit {
currDate: any;
nextDate: any;
dateStep: number = 0;
mechanics: string = '';
dateSection: any[] = new Array();
selMechanics: any[] = new Array();
imageServer: string;
mechanicData: any;
autoSchedule: boolean;
......@@ -456,6 +458,25 @@ export class IndexComponent implements OnInit {
this.confirmBooking();
}
scheduleMultipleRequest(){
if(!this.loginDetails){
this.autoSchedule = true;
this.loginModalRef.nativeElement.click();
return false;
}
let coma = '';
const thisObj = this;
this.mechanics = '';
this.selMechanics.forEach(function (mechanic_data) {
thisObj.mechanics += coma+mechanic_data.mechanic_id+':'+mechanic_data.amount;
coma = ',';
})
this.wizardData['mechanic_id'] = thisObj.mechanics;
this.wizardData['cost'] = this.estimatedPrice;
this.wizardData['multiple'] ='1';
this.confirmBooking();
}
confirmBooking(){
this.wizardData['customer_id'] = this.loginDetails.customer_id;
this.wizardData['selected_issues'] = this.selectedIssues;
......@@ -476,7 +497,7 @@ export class IndexComponent implements OnInit {
if(response.status == '1'){
this.closeWizardRef.nativeElement.click();
this.closeQuoteWizardRef.nativeElement.click();
this.router.navigate(['../dashboard'],{queryParams: {tab: 'service'}});
this.router.navigate(['../dashboard'],{queryParams: {tab: 'appointment'}});
} else {
this.loader = false;
return false;
......@@ -526,6 +547,17 @@ export class IndexComponent implements OnInit {
reader.readAsDataURL(optionalImg);
}
checkboxChange(index,mechanic_id,event,estimate){
if (event.target.checked) {
this.selMechanics.push({id:index,mechanic_id:mechanic_id,amount:estimate});
} else {
let id = this.selMechanics.findIndex(x => x.id == index);
if (id != -1) {
this.selMechanics.splice(id, 1);
}
}
}
scrollToBottom(id){
$('#'+id).stop().animate({scrollTop: $('#'+id)[0].scrollHeight}, 1500);
}
......
src/app/navbar/navbar.component.html
......@@ -25,10 +25,10 @@
</a>
</li>
<li class="nav-item">
<a class="nav-link" (click)="goToPage('productlist')">
PURCHASE
</a>
</li>
<a class="nav-link" (click)="goToPage('purchaseHome')">
PURCHASE
</a>
</li>
<li class="nav-item">
<a class="nav-link base_arrow dropdown">
<div class="dropdown-toggle" data-toggle="dropdown">
......
src/app/navbar/navbar.component.ts
......@@ -47,9 +47,9 @@ export class NavbarComponent implements OnInit {
forgotForm;
signupForm;
autospsignupForm;
@ViewChild('spModal') spModal: ElementRef;
@ViewChild('loginModal') loginModal: ElementRef;
@ViewChild('signupModal') signupModal: ElementRef;
@ViewChild('spModal') spModal: ElementRef;
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 {
localStorage.removeItem(data);
localStorage.clear();
}
removeLocalItem(data) {
localStorage.removeItem(data);
}
get_stored_json(json_file: string) {
return this.http.get("assets/json_data/" + json_file);
}
......
src/app/purchase/addaddress/addaddress.component.html
<div class="purchase_wrapper">
<div class="container-fluid">
<app-searchbar>
</app-searchbar>
<div class="add_address_wrapper">
<h4>Add New Address</h4>
<div class="row">
<div class="col-md-12">
<p>Name*</p>
<input class="" type="text">
</div>
<div class="container-fluid">
<div class="loader_overlay" *ngIf="loader"></div>
<div class="add_address_wrapper">
<form [formGroup]="addaddressForm" (ngSubmit)="addressFormSubmit(addaddressForm.value)">
<h4>Add New Address</h4>
<div class="row">
<div class="col-md-6">
<p>Name*</p>
<input class="" type="text" formControlName="name"
[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 class="row">
<div class="col-md-12">
<p>Phone Number*</p>
<input class="" type="text">
<div class="col-md-6">
<p>Phone Number*</p>
<input class="" type="text" formControlName="phone_no"
[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 class="row">
<div class="col-md-12">
<p>House number or Building number*</p>
<input class="" type="text">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>House number or Building number*</p>
<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 class="row">
<div class="col-md-12">
<p>Area, Road or Colony*</p>
<input class="" type="text">
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>State*</p>
<input class="" type="text">
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>City*</p>
<input class="" type="text">
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>Land mark <span>(Optional)</span></p>
<input class="" type="text">
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="add_btn" (click)="goToPage('address')">Add Address</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>City*</p>
<input class="" type="text" formControlName="city"
[ngClass]="{'input_error': !addaddressForm.controls['city'].valid && (addaddressForm.controls['city'].dirty || addaddressForm.controls['city'].touched || addressSubmitClick),
'input_success': addaddressForm.controls['city'].valid}" (click)="addressSubmitClick = false">
<div class="s_error" *ngIf="(!addaddressForm.controls['city'].valid && addaddressForm.controls['city'].touched) || (!addaddressForm.controls['city'].valid && addressSubmitClick)">
<div class="s_validation" *ngIf="addaddressForm.controls['city'].hasError('required')">{{errorMsg.errorList.required}} </div>
</div>
</div>
<div class="col-md-6">
<p>State*</p>
<input class="" type="text" formControlName="state"
[ngClass]="{'input_error': !addaddressForm.controls['state'].valid && (addaddressForm.controls['state'].dirty || addaddressForm.controls['state'].touched || addressSubmitClick),
'input_success': addaddressForm.controls['state'].valid}" (click)="addressSubmitClick = false">
<div class="s_error" *ngIf="(!addaddressForm.controls['state'].valid && addaddressForm.controls['state'].touched) || (!addaddressForm.controls['state'].valid && addressSubmitClick)">
<div class="s_validation" *ngIf="addaddressForm.controls['state'].hasError('required')">{{errorMsg.errorList.required}} </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>Land mark <span>(Optional)</span></p>
<input class="" type="text" formControlName="landmark" (click)="addressSubmitClick = false">
</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>
</form>
</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);
padding-bottom: 20px;
}
.btn_cart{
width:100%;
background: #fef160;
color: #000000;
text-align: center;
height: 45px;
border:none;
}
.add_btn{
width:100%;
background: #2655bf;
......@@ -43,4 +52,6 @@ box-shadow: 0px 1px 21px -10px rgba(0,0,0,0.2);
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 { 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({
selector: 'app-addaddress',
templateUrl: './addaddress.component.html',
styleUrls: ['./addaddress.component.scss']
})
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(
private router : Router,
private route : ActivatedRoute
) { }
constructor(private router : Router,
private route : ActivatedRoute,
public errorMsg : ValidationService,
public webService : WebService,
private formBuilder : FormBuilder,
public subjectService : SubjectService) {
this.loginDetails = false;
this.addressSubmitClick = false;
}
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){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
this.router.navigate([path],{queryParams: data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
}
src/app/purchase/address/address.component.html
<div class="purchase_wrapper">
<div class="container-fluid">
<app-searchbar>
</app-searchbar>
<div class="loader_overlay" *ngIf="loader"></div>
<div class="address_wrapper">
<h3>Delivery Address</h3>
<div class="address_inner_wrapper">
<ul>
<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>
<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>
<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 *ngIf="userAddress && userAddress.length > 0;else noAddress">
<li *ngFor="let addrs of userAddress"
[ngClass]="address_id == addrs.id ? 'selected_add' : '' "
(click)="select_address(addrs.id)">
<h4>{{addrs.name}} <span class="address">({{addrs.address_type === '1'?'Home':'Office'}})</span><span class="number">{{addrs.phone_no}}</span></h4>
<p>{{addrs.house_no+', '+addrs.area+', '+addrs.state+', '+addrs.city}}</p>
<div class="edit" (click)="editAddress(addrs.id)">
Edit
</div>
</li>
</div>
<div class="add_new" (click)="goToPage('addaddress')">
Add new Address
</div>
</ul>
<ng-template #noAddress>
Address is Not Added!
</ng-template>
<div class="row">
<div class="col-md-6">
<h2>$ 3,200</h2>
<h5>Delivery expected by Thur 1 May 2019</h5>
<h2>$ {{prdtData.total_amount}}</h2>
<!-- <h5>Delivery expected by Thur 1 May 2019</h5> -->
</div>
<div class="col-md-6 textRight">
<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>
</h4>
......
src/app/purchase/address/address.component.scss
......@@ -22,12 +22,12 @@
cursor: pointer;
&:hover{
border:2px solid #2655bf;
border:2px solid #a0b9f3;
// transition-delay: 1s;
// transition-timing-function: ease-in-out;
}
&:focus{
border:2px solid #2655bf;
border:2px solid #a0b9f3;
// transition-delay: 1s;
// transition-timing-function: ease-in-out;
}
......@@ -62,6 +62,9 @@
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 { WebService } from '../../provider/web.service';
import { SubjectService } from '../../provider/subject.service';
import { DataserviceService } from '../../provider/dataservice.service';
@Component({
selector: 'app-address',
templateUrl: './address.component.html',
styleUrls: ['./address.component.scss']
})
export class AddressComponent implements OnInit {
loader : boolean;
prdtData : any = new Array();
product_id : any;
address_id : number;
userAddress : any;
loginDetails : any;
constructor(
private router : Router,
private route : ActivatedRoute
) { }
constructor(private route : ActivatedRoute,
private router : Router,
public webService : WebService,
public subjectService : SubjectService,
public dataService : DataserviceService) {
this.loader = true;
this.address_id = 0;
}
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){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
this.router.navigate([path],{queryParams: data});
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 { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery';
import * as $ from 'jquery';
import { WebService } from '../../provider/web.service';
import { NgxCarousel } from 'ngx-carousel';
import { ImageStorage } from '../../../environments/server.config';
import { SubjectService } from '../../provider/subject.service';
import * as $ from 'jquery';
@Component({
selector: 'app-productdetails',
......@@ -10,87 +13,127 @@ import { NgxCarousel } from 'ngx-carousel';
styleUrls: ['./productdetails.component.scss']
})
export class ProductdetailsComponent implements OnInit {
loader: boolean;
count:any;
public carouselTile: NgxCarousel;
constructor(
private router : Router,
private route : ActivatedRoute
) {
this.count = 0;
}
product_id: number;
imageServer: string;
productDetails:any;
product_data:any = new Array();
galleryImages: NgxGalleryImage[];
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(){
this.count = this.count + 1;
}
route.params.subscribe(val => {
this.route.queryParams.subscribe(params => {
this.product_id = params['product_id'];
});
this.getProductDetails();
});
minus(){
this.count = this.count - 1;
if(this.count < 0){
this.count = 0;
if(!this.product_id){
this.goToPage('purchaseHome','');
}
}
}
galleryOptions: NgxGalleryOptions[];
galleryImages: NgxGalleryImage[];
add(){this.count = this.count + 1;}
minus(){this.count = this.count - 1;
if(this.count < 1){this.count = 1;}
}
ngOnInit(): void {
this.designModules();
this.checkUserLogin();
}
ngOnInit(): void {
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
},
// max-width 800
{
breakpoint: 1440,
width: '100%',
height: '400px',
imagePercent: 80,
thumbnailsPercent: 20,
thumbnailsMargin: 20,
thumbnailMargin: 20
},
// max-width 400
{
breakpoint: 400,
preview: false
}
];
checkUserLogin(){
this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
this.subjectService.getLoginData().subscribe(loginData => {
this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
});
}
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'
getProductDetails(){
this.webService.post_data('SingleProductSearch',{"product_id":this.product_id}).subscribe(response => {
if(response.status == 'success'){
let image: string = '';
let imageArr: any[] = new Array();
const thisObj = this;
this.productDetails = response.data;
console.log(response.data)
if(this.productDetails.images.length > 0){
thisObj.productDetails.images.forEach(function (data) {
image = thisObj.imageServer + data.image;
imageArr.push({small: image,medium: image,big: image});
});
}else{
image = thisObj.imageServer +'assets/images/no_image_text.png';
imageArr.push({small: image,medium: image,big: image});
}
this.galleryImages = imageArr;
}else{
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){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
this.router.navigate([path],{queryParams: data});
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 ''; }
}
\ No newline at end of file
src/app/purchase/productlist/productlist.component.scss
......@@ -44,6 +44,7 @@
padding:0px;
padding-top: 10px;
padding-bottom: 10px;
height: 150px;
li{
list-style: none;
padding-left: 25px;
......@@ -249,7 +250,7 @@
padding: 10px;
img{
height: 180px;
width: auto;
max-width: 100%;
}
}
h5{
......
src/app/purchase/productlist/productlist.component.ts
import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { Options } from 'ng5-slider';
import { WebService } from '../../provider/web.service';
import { ImageStorage } from '../../../environments/server.config';
@Component({
selector: 'app-productlist',
......@@ -8,25 +10,88 @@ import { Options } from 'ng5-slider';
styleUrls: ['./productlist.component.scss']
})
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(
private router : Router,
private route : ActivatedRoute
) { }
private route : ActivatedRoute,
public webService : WebService
){
this.loader = true;
this.productArray = true;
value: number = 40;
highValue: number = 60;
options: Options = {
floor: 0,
ceil: 100
};
this.imageServer = ImageStorage;
route.params.subscribe(val => {
this.route.queryParams.subscribe(params => {
this.searchKey = params['key'];
this.getProductDetails({"key":this.searchKey});
});
});
if(this.searchKey == ''){
this.goToPage('purchaseHome','');
}
}
public scrollbarOptions = { axis: 'y', theme: 'minimal-dark' };
ngOnInit() {
this.getBrand();
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
this.router.navigate([path],{queryParams: data});
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 { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { ProductlistComponent } from './productlist/productlist.component';
import { ProductdetailsComponent } from './productdetails/productdetails.component';
import { moduleRouting } from './purchase.routing';
import { SearchbarComponent } from './searchbar/searchbar.component';
import { Ng5SliderModule } from 'ng5-slider';
import { MalihuScrollbarModule } from 'ngx-malihu-scrollbar';
import { NgxGalleryModule } from 'ngx-gallery';
import { NgxCarouselModule } from 'ngx-carousel';
import { CartComponent } from './cart/cart.component';
......@@ -16,17 +18,20 @@ import { SummaryComponent } from './summary/summary.component';
import { TooltipModule } from 'ng2-tooltip-directive';
import { AddaddressComponent } from './addaddress/addaddress.component';
import { OrdersuccessComponent } from './ordersuccess/ordersuccess.component';
import { PurchaseHomeComponent } from './purchase-home/purchase-home.component';
@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: [
CommonModule,
moduleRouting,
Ng5SliderModule,
NgxGalleryModule,
NgxCarouselModule,
TooltipModule
ReactiveFormsModule,
TooltipModule,
MalihuScrollbarModule.forRoot()
]
})
export class PurchaseModule { }
src/app/purchase/purchase.routing.ts
......@@ -10,6 +10,7 @@ import { AddressComponent } from './address/address.component';
import { SummaryComponent } from './summary/summary.component';
import { AddaddressComponent } from './addaddress/addaddress.component';
import { OrdersuccessComponent } from './ordersuccess/ordersuccess.component';
import { PurchaseHomeComponent } from './purchase-home/purchase-home.component';
const ModuleRoutes: Routes = [
{ path: 'productlist', component: ProductlistComponent},
......@@ -21,7 +22,8 @@ const ModuleRoutes: Routes = [
{ path: 'address', component: AddressComponent},
{ path: 'summary', component: SummaryComponent},
{ 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 { 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';
@Component({
......@@ -8,19 +12,98 @@ import { NgxCarousel } from 'ngx-carousel';
styleUrls: ['./rating.component.scss']
})
export class RatingComponent implements OnInit {
prdt_id:any;
loginDetails:any;
rateFormClick:boolean;
loader:boolean;
productDetails:any;
imageServer: any;
rateFormResponse:any;
public carouselTile: NgxCarousel;
constructor(
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() {
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'}
}
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){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
this.router.navigate([path],{queryParams: data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
carouselTileLoad(){ return ''; }
......
src/app/purchase/searchbar/searchbar.component.html
<div class="purchase_taskbar">
<div class="purchase_searchbar">
<div class="purchase_inner_search_bar">
<input class="" type="text" placeholder="Search here">
<button class="search_btn">Search</button>
<input #productSearch type="text" placeholder="Search here" (keyup)="productSearchfun(productSearch.value)">
<button class="search_btn" (click)="productSearchFunClick(productSearch.value)">Search</button>
<div class="clear"></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 class="purchase_other">
<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 { WebService } from '../../provider/web.service';
@Component({
selector: 'app-searchbar',
......@@ -7,18 +8,46 @@ import { Router,ActivatedRoute } from '@angular/router';
styleUrls: ['./searchbar.component.scss']
})
export class SearchbarComponent implements OnInit {
constructor(
private router : Router,
private route : ActivatedRoute
) { }
productArray: any;
SingleProductData:any;
@ViewChild("productSearch") public productSearchRef: ElementRef;
constructor(private router : Router, private route: ActivatedRoute, public webService: WebService) {
this.productArray = true;
}
ngOnInit() {
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
this.router.navigate([path],{queryParams: data});
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="container-fluid">
<app-searchbar>
</app-searchbar>
<div class="loader_overlay" *ngIf="loader"></div>
<div class="summary_wrapper">
<h3>Order Summary</h3>
<div class="summary_wrapper_inner">
<h4>Product Details</h4>
<div class="row">
<div class="col-md-6">
<div class="image_div"></div>
<div class="col-md-6" *ngIf="productDetails">
<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">
<h5>Appolo Amazer Tubeless 4 Wheeler</h5>
<p>Audi Q7</p>
<h5>{{productDetails.product_name}}</h5>
<p>{{productDetails.short_description}}</p>
</div>
<div class="clear"></div>
</div>
<div class="col-md-6">
<h6>
<!-- <h6>
<span class="head">Color</span>
<span>Black</span>
</h6>
</h6> -->
</div>
</div>
<hr>
<h4>Delivery Address</h4>
<div class="row">
<div class="col-md-6">
<h2>Loius Morgan <span class="address">(Home)</span><span class="number">+91 996548752</span></h2>
<p> Ground Floor, Carnival Infopark, Phase- 2 Kusumagiri PO, Kakkanad, Kochi, Kerala <strong>Pin 682030</strong> </p>
<div class="col-md-6" *ngIf="userAddress">
<h2>{{userAddress.name}}<span class="address">({{userAddress.address_type === '1'?'Home':'Office'}})</span><span class="number">{{userAddress.phone_no}}</span></h2>
<p>{{userAddress.house_no+', '+userAddress.area+', '+userAddress.state+', '+userAddress.city}}
<!-- <strong>Pin 682030</strong> -->
</p>
</div>
<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>
<hr>
<h4>Payment Details</h4>
<div class="row">
<div class="row" *ngIf="prdtData">
<div class="col-md-6">
<p class="p0">Quantity </p>
</div>
<div class="col-md-6">
<p><strong>1</strong></p>
<p><strong>{{prdtData.quantity}}</strong></p>
</div>
</div>
<div class="row">
<div class="row" *ngIf="prdtData">
<div class="col-md-6">
<p>Total Amount</p>
</div>
<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>
<hr>
<div class="row">
<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 class="col-md-6">
<button class="continue_btn">Continue</button>
<span tooltip="Tooltip" placement="top" show-delay="500">Tooltip on top</span>
<button class="continue_btn" (click)="paymentButton()">Continue</button>
<!-- <span tooltip="Tooltip" placement="top" show-delay="500">Tooltip on top</span> -->
<div class="clear"></div>
</div>
</div>
......@@ -66,4 +69,30 @@
</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>
\ 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 { WebService } from '../../provider/web.service';
import { apiConfig } from '../../../environments/server.config';
import { ImageStorage } from '../../../environments/server.config';
@Component({
selector: 'app-summary',
......@@ -7,19 +10,96 @@ import { Router,ActivatedRoute } from '@angular/router';
styleUrls: ['./summary.component.scss']
})
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(
private router : Router,
private route : ActivatedRoute
) { }
private route : ActivatedRoute,
public webService : WebService
) {
this.loader = true;
this.imageServer = ImageStorage;
this.serverUrl = apiConfig;
}
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){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
this.router.navigate([path],{queryParams: data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
}
src/app/purchase/track/track.component.html
<div class="purchase_wrapper">
<div class="container-fluid">
<app-searchbar>
</app-searchbar>
<div class="loader_overlay" *ngIf="loader"></div>
<div class="purchase_content_wrapper">
<div class="row">
<div class="col-md-4">
<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>
</div>
<ng-template #nogalleryimage>
No Image Found
</ng-template>
</div>
</div>
<div class="col-md-8">
<div class="product_details">
<h1>Apollo Amazer 4G Tubeless 4 Wheeler Tyre (155/80R13, Tube Less)</h1>
<div class="review" (click)="goToPage('rating')">Write review</div>
<div class="product_details" *ngIf="orderDetails">
<h1>{{orderDetails.product_name}}</h1>
<div class="review" (click)="reviewBtn()">Write review</div>
<div class="clear"></div>
<h2>265/65R17, Tube Less</h2>
<h2>{{orderDetails.short_description}}</h2>
<div class="others">
<h4><div>Color</div><span>Black</span></h4>
<h4><div>Quantity</div><span>1</span></h4>
<!-- <h4><div>Color</div><span>Black</span></h4> -->
<h4><div>Quantity</div><span>{{orderDetails.quantity}}</span></h4>
</div>
<div class="row">
<div class="col-md-5">
......@@ -29,7 +31,7 @@
<div class="order_range_details">
<span>
<h5>Order Confirmed</h5>
<p>Thurs, April 25th 2019</p>
<p>{{orderDetails.datetime | date: "EEE, MMMM dd yyyy"}}</p>
</span>
<span>
<h5>Packed</h5>
......@@ -45,24 +47,23 @@
<div class="col-md-7">
<div class="order_delivery_details">
<div class="order_id">
ORDID145879653
{{orderDetails.format_order_id}}
</div>
<div class="order_delivery">
<h4>
Delivered on Thur, April 25
</h4>
<p>
Item has been delivered
</p>
<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>
<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>
<p> Item has been delivered </p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h4>Total Amount</h4>
<h3>$ 3,200</h3>
<h3>$ {{orderDetails.amount}}</h3>
</div>
<div class="col-md-6">
<h4>
......
src/app/purchase/track/track.component.ts
import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { WebService } from '../../provider/web.service';
import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery';
import * as $ from 'jquery';
import { NgxCarousel } from 'ngx-carousel';
import { ImageStorage } from '../../../environments/server.config';
import { Options } from 'ng5-slider';
interface RangeSliderModel {
......@@ -17,95 +19,106 @@ interface RangeSliderModel {
styleUrls: ['./track.component.scss']
})
export class TrackComponent implements OnInit {
ref_id:any;
count:any;
public carouselTile: NgxCarousel;
constructor(
private router : Router,
private route : ActivatedRoute
) {
this.count = 0;
}
loginDetails:any;
loader:boolean;
imageServer: string;
orderDetails:any;
galleryOptions: NgxGalleryOptions[];
galleryImages: NgxGalleryImage[];
add(){
this.count = this.count + 1;
}
minus(){
this.count = this.count - 1;
if(this.count < 0){
public carouselTile: NgxCarousel;
constructor(private router : Router,
private route : ActivatedRoute,
public webService : WebService){
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 = {
minValue: 50,
maxValue: 100,
options: {
floor: 0,
ceil: 100,
vertical: true
checkUserLogin(){
this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
if(!this.loginDetails){
this.goToPage('purchaseHome','');
}
}
};
galleryOptions: NgxGalleryOptions[];
galleryImages: NgxGalleryImage[];
ngOnInit(): void {
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
},
// 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 = [
{
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'
unsetProdDetails(){
this.webService.removeLocalItem('productDetails');
}
getOrderDetail(){
if(this.ref_id <= 0){
this.goToPage('purchaseHome','');
}
this.loader = true;
this.webService.post_data('getOrderDetail',{'ref_id':this.ref_id}).subscribe(response => {
if(response.status == 'success'){
let image: string = '';
let imageArr: any[] = new Array();
const thisObj = this;
this.orderDetails = response.data;
if(this.orderDetails.images.length > 0){
thisObj.orderDetails.images.forEach(function (data) {
image = thisObj.imageServer + data.image;
imageArr.push({small: image,medium: image,big: image});
});
}else{
image = thisObj.imageServer +'assets/images/no_image_text.png';
imageArr.push({small: image,medium: image,big: image});
}
this.galleryImages = imageArr;
}else{
this.orderDetails = false;
this.goToPage('purchaseHome','');
}
];
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){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
this.router.navigate([path],{queryParams: data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
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/environments/server.config.ts
let apiConfigUrl,imageStorageUrl;
// // Localhost
// apiConfigUrl = 'http://localhost/dcarfixers/Webservices/';
// imageStorageUrl = 'http://localhost/dcarfixers/';
apiConfigUrl = 'http://localhost/dcarfixers/Webservices/';
imageStorageUrl = 'http://localhost/dcarfixers/';
// // Techlabz
apiConfigUrl = 'http://techlabz.in/dcarfixers/Webservices/';
imageStorageUrl = 'http://techlabz.in/dcarfixers/';
// apiConfigUrl = 'https://techlabz.in/dcarfixers/Webservices/';
// imageStorageUrl = 'https://techlabz.in/dcarfixers/';
// carfixxers.com
// apiConfigUrl = 'https://carfixxers.com/admin/Webservices/';
......
src/styles.scss
......@@ -224,6 +224,10 @@ body {
background: #D94350;
}
.background_transparent{
background-color: transparent !important;
}
.tile {
box-shadow: none !important;
}
......@@ -620,6 +624,17 @@ bs-datepicker-container{
}
}
.confirm_modal_content{
width: 300px;
background: #fff;
border-radius: 10px;
margin: 0 auto;
padding: 15px;
button{
margin:5px;
}
}
.custom_checkbox_stack{
position: absolute;
top:0px;
......@@ -817,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