Skip to content

D
dcarfixers_angular
Commit 0e2d189c by Tobin
Options

dc

parent 23d4475a
Showing with 316 additions and 126 deletions
src/app/home/dashboard/dashboard.component.html
......@@ -21,7 +21,7 @@
<a class="nav-link appointment" data-toggle="tab" href="#appointment">Appointments</a>
</li>
<li class="nav-item">
<a class="nav-link time" data-toggle="tab" href="#service">
<a class="nav-link time" data-toggle="tab" href="#service" #serviceHistoryTab>
Service History
</a>
</li>
......@@ -283,7 +283,7 @@
<td>{{bookData.scheduled_date+' '+bookData.scheduled_time}}</td>
<td>{{bookData.car_name}}</td>
<td>{{bookData.first_name+' '+bookData.last_name}}</td>
<td>{{bookData.cost}}</td>
<td class="service-align-center">{{bookData.cost}}</td>
<td [ngSwitch]="bookData.status">
<p *ngSwitchCase="1" class="success_status">Success</p>
<p *ngSwitchCase="0" class="pending_status">Pending</p>
......@@ -307,7 +307,7 @@
<!-- ADD-VEHICLE-MODAL-STARTS -->
<div class="modal" id="booknow">
<div class="modal" id="addvehicle">
<div class="modal-dialog">
<div class="loader_overlay" *ngIf="loader"></div>
<div class="modal-content add_modal_wrapper">
......@@ -337,14 +337,14 @@
<div class="col-md-6">
<select class="vehicle_input_select" placeholder="Choose Year" formControlName="modelYear"
[ngClass]="{'input_error': !vehicleDetailsAddForm.controls['modelYear'].valid && vehicleDetailsFormSubmitClick}">
<option value="" disabled selected>YEAR</option>
<option value="" class="hide">YEAR</option>
<option *ngFor="let date of modelDates">{{date}}</option>
</select>
</div>
<div class="col-md-6">
<select (change)="get_model($event.target.value)" class="vehicle_input_select" placeholder="Choose Make"
formControlName="maker" [ngClass]="{'input_error': !vehicleDetailsAddForm.controls['maker'].valid && vehicleDetailsFormSubmitClick}">
<option value="" disabled selected>MAKE</option>
<option value="" class="hide">MAKE</option>
<option *ngFor="let car_date of carSearchJsonData; let key = index" value="{{key}}">{{car_date.brand}}</option>
</select>
</div>
......@@ -353,7 +353,7 @@
<div class="col-md-6">
<select class="vehicle_input_select" placeholder="Choose Model" formControlName="modelName"
[ngClass]="{'input_error': !vehicleDetailsAddForm.controls['modelName'].valid && vehicleDetailsFormSubmitClick}">
<option value="" disabled selected>MODEL</option>
<option value="" class="hide">MODEL</option>
<option *ngFor="let car_models of carModel">{{car_models}}</option>
</select>
</div>
......@@ -478,12 +478,14 @@
<h3>SERVICES</h3>
<div class="row">
<div class="col-md-12">
<input class="search" placeholder="Search Services" type="">
<input class="search" placeholder="Search Services" (keyup)="searchIssues($event)">
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="service_methods">
<p *ngIf="!issuesData; else listIssues">No Record Found</p>
<ng-template #listIssues>
<ul>
<div *ngFor="let issue_data of issuesData">
<li data-toggle="collapse" [attr.data-target]="'#issue_' + issue_data.issue_id">{{issue_data.issue}}</li>
......@@ -501,6 +503,7 @@
</div>
</div>
</ul>
</ng-template>
</div>
</div>
</div>
......@@ -521,27 +524,34 @@
</div>
<div class="row m0">
<div class="col-md-12">
<textarea class="textarea_input" rows="5" placeholder="Additional Informations you may can gave">
Additional Informations you may can gave
</textarea>
<textarea class="textarea_input" rows="5" placeholder="Additional Informations you may can gave" [(ngModel)]='optionalDescription'></textarea>
</div>
</div>
<div class="row">
<h6 class="pt10 textLeft">Add Images or Videos (Optional)</h6>
<h6 class="pt10 textLeft">Add Images (Optional)</h6>
<!-- Add Images or Videos (Optional) -->
<hr>
<div class="add_images">
<ul>
<li><span>+</span>
<input type="file">
<li>
<span *ngIf="!optionalImges[1]">+</span>
<img *ngIf="optionalImges[1]" [src]="optionalImges[1]['file_url']" width="50px" height="50px">
<input type="file" (change)="optImgUpload(1,$event)" accept="image/*">
</li>
<li><span>+</span>
<input type="file">
<li>
<span *ngIf="!optionalImges[2]">+</span>
<img *ngIf="optionalImges[2]" [src]="optionalImges[2]['file_url']" width="50px" height="50px">
<input type="file" (change)="optImgUpload(2,$event)" accept="image/*">
</li>
<li><span>+</span>
<input type="file">
<li>
<span *ngIf="!optionalImges[3]">+</span>
<img *ngIf="optionalImges[3]" [src]="optionalImges[3]['file_url']" width="50px" height="50px">
<input type="file" (change)="optImgUpload(3,$event)" accept="image/*">
</li>
<li><span>+</span>
<input type="file">
<li>
<span *ngIf="!optionalImges[4]">+</span>
<img *ngIf="optionalImges[4]" [src]="optionalImges[4]['file_url']" width="50px" height="50px">
<input type="file" (change)="optImgUpload(4,$event)" accept="image/*">
</li>
</ul>
</div>
......@@ -600,7 +610,7 @@
<div class="modal" id="quotes">
<div class="modal-dialog modal-full">
<div class="modal-content login_modal_wrapper">
<div #closeQuoteWizard class="modal_close" data-dismiss="modal" (click)="resetQuoteWizard()">
<div #closeQuoteWizard class="modal_close" data-dismiss="modal" (click)="scheduleDateInit = false; scheduleMechanic = false">
&times;
</div>
<div class="modal-body">
......@@ -619,14 +629,14 @@
<h4>Select your day and date</h4>
</div>
<div class="col-md-6">
<button class="quote_arrow left floatLeft" (click)="prev($event)"></button>
<button [ngClass]="{'invisible': !showLeftArrow}" class="quote_arrow left floatLeft" (click)="prev($event)"></button>
<div class="schedule_dates floatLeft">
<ul>
<li>{{ dateSection[0] | date:'MMM dd-MM-yyyy' }}</li>
<li>{{ dateSection[1] | date:'MMM dd-MM-yyyy' }}</li>
</ul>
</div>
<button class="quote_arrow right floatRight" (click)="next($event)"></button>
<button [ngClass]="{'invisible': !showRightArrow}" class="quote_arrow right floatRight" (click)="next($event)"></button>
<div class="clear"></div>
</div>
</div>
......@@ -654,33 +664,13 @@
<p>{{mechanic.address}}<br>{{mechanic.city+' , '+mechanic.state}}</p>
<h6>{{mechanic.phone}}</h6>
</ng-template>
<button class="book_now" (click)="scheduleNow(mechanic.mechanic_id)"
[ngClass]="{'book_now':scheduleDateInit == true,
'book_now_disabled':scheduleDateInit == false}">
<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)}">
{{loginDetails ? 'Book now' : 'Login and Continue' }}
</button>
</div>
<div class="clear"></div>
<!-- <div class="offer">
<div class="panel-group" id="accordion">
<div class="panel panel-default" *ngFor="let sub_issues of mechanic.sub_issues">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#sub_issue_dtls_{{sub_issues.issue_id}}_{{sub_issues.issue_cat_id}}">
<div class="row">
<div class="col-md-5">{{sub_issues.issue_category}}</div>
<div class="col-md-1">:</div>
<div class="col-md-5"><strong>{{sub_issues.custom_service_fee}}</strong></div>
</div>
</a>
</h4>
</div>
<div id="sub_issue_dtls_{{sub_issues.issue_id}}_{{sub_issues.issue_cat_id}}" class="panel-collapse collapse in">
<div class="panel-body">{{sub_issues.custom_description}}</div>
</div>
</div>
</div>
</div> -->
<div class="offer">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
......@@ -712,26 +702,28 @@
</div>
<div class="col-md-6">
<div class="scheduletiming_listing">
<ul>
<ul id="scroll_0_{{mechanic.mechanic_id}}">
<li *ngFor="let time of mechanic.scheduleTiming" id="custom_check_button">
<label>
<input type="radio" name="scheduleTime" (click)="getSchedule(time,'0')">
<input type="radio" name="scheduleTime" (click)="getSchedule(time,'0');
scheduleDateInit = true; scheduleMechanic = mechanic.mechanic_id">
<p>{{time}}</p>
</label>
</li>
</ul>
<ul>
<ul id="scroll_1_{{mechanic.mechanic_id}}">
<li *ngFor="let time of mechanic.scheduleTiming" id="custom_check_button">
<label>
<input type="radio" name="scheduleTime" (click)="getSchedule(time,'1')">
<input type="radio" name="scheduleTime" (click)="getSchedule(time,'1');
scheduleDateInit = true; scheduleMechanic = mechanic.mechanic_id">
<p>{{time}}</p>
</label>
</li>
</ul>
</div>
<div class="scheduletiming_btm_btns">
<div class="btm_btns"></div>
<div class="btm_btns"></div>
<div class="btm_btns" (click)="scrollToBottom('scroll_0_'+mechanic.mechanic_id)"></div>
<div class="btm_btns" (click)="scrollToBottom('scroll_1_'+mechanic.mechanic_id)"></div>
</div>
</div>
</div>
......
src/app/home/dashboard/dashboard.component.scss
......@@ -111,6 +111,10 @@
}
}
}
.service-align-center{
padding-left: 0px !important;
text-align: center;
}
.container-fluid {
width: calc(100% - 15%);
.tab-content {
......
src/app/home/dashboard/dashboard.component.ts
......@@ -35,6 +35,7 @@ export class DashboardComponent implements OnInit {
autocompleteVin: any;
autocompleteDetails: any;
editProfileSubmitClick: boolean;
optionalDescription: string;
carModel: any;
modelDates: number[] = new Array();
......@@ -58,20 +59,31 @@ export class DashboardComponent implements OnInit {
//Service Details: TAB 3
issuesData: any;
defIssuesData: any[] = new Array();
selectedIssues: any[] = new Array();
//Quote Page
step: number;
today: any = new Date();
currDate: any;
nextDate: any;
dateStep: number = 0;
activeTab: any;
dateSection: any[] = new Array();
imageServer: string;
mechanicData: any;
autoSchedule: boolean;
showLeftArrow: boolean;
showRightArrow: boolean;
estimatedPrice: number;
scheduleDateInit: boolean;
scheduleMechanic: any;
optionalImges: any = new Array({1:false,2:false,3:false,4:false});
imageDisp1: any;
imageDisp2: any;
imageDisp3: any;
imageDisp4: any;
@ViewChild("closeWizard") public closeWizardRef: ElementRef;
@ViewChild("googleLocVin") public googleLocVinRef: ElementRef;
......@@ -80,6 +92,7 @@ export class DashboardComponent implements OnInit {
@ViewChild("step3nextBtn") public step3nextRef: ElementRef;
@ViewChild("closeQuoteWizard") closeQuoteWizardRef: ElementRef;
@ViewChild("googleLocDetails") public googleLocDetailsRef: ElementRef;
@ViewChild("serviceHistoryTab") public serviceHistoryTabRef: ElementRef;
@ViewChild("closeVehicleAddForm") public closeVehicleAddFormRef: ElementRef;
constructor(private router : Router,
......@@ -89,17 +102,34 @@ export class DashboardComponent implements OnInit {
public errorMsg : ValidationService,
public webService : WebService,
public subjectService : SubjectService) {
this.step = 0;
this.currDate = new Date();
this.nextDate = new Date();
this.issuesData = false;
this.loader = false;
this.activeTab = 'profile';
this.errMessage = false;
this.searchLocError = false;
this.showLeftArrow = false;
this.showRightArrow = true;
this.scheduleDateInit = false;
this.editProfileSubmitClick = false;
this.scheduleMechanic = false;
this.optionalDescription = '';
this.vehicleDetailsFormSubmitClick = false;
}
ngOnInit() {
this.tab = 'active';
this.route.queryParams.subscribe(params => {
this.activeTab = params['tab'];
if(this.activeTab == 'service'){
this.serviceHistoryTabRef.nativeElement.click();
}
});
this.vehicleVinAddForm = new FormGroup({
vin: new FormControl('', [Validators.required]),
location: new FormControl('', [Validators.required])
......@@ -151,6 +181,7 @@ export class DashboardComponent implements OnInit {
types: ["address"]
});
});
this.nextDate.setDate(this.nextDate.getDate() + 1);
}
getCustBookDetails(){
......@@ -251,7 +282,6 @@ export class DashboardComponent implements OnInit {
}
this.webService.multipart_post('edit_customer_profile', formData).subscribe(response => {
this.loader = false;
if ( response.status == '1') {
const userData = this.webService.getLocalStorageItem('userData');
this.webService.removeLocalStorageItem(userData);
......@@ -271,13 +301,16 @@ export class DashboardComponent implements OnInit {
response.status = 'success';
this.profileEditResp = response;
this.loader = false;
} else {
response.status = 'error';
response.message = (response.message == '')?this.errorMsg.errorList.req_failure:response.message;
this.profileEditResp = response;
this.loader = false;
}
},error => {
this.loader = false;
this.profileEditResp = {'status':'error','message':this.errorMsg.errorList.req_failure};
},() => {
setTimeout( function() {
......@@ -378,6 +411,29 @@ export class DashboardComponent implements OnInit {
});
}
optImgUpload(image_id,event){
let reader = new FileReader();
let optionalImg: any = event.target.files[0];
reader.onloadend = () => {
switch (image_id){
case 1:
this.optionalImges[1] = {'file':event.target.files[0],'file_url':reader.result};
break;
case 2:
this.optionalImges[2] = {'file':event.target.files[0],'file_url':reader.result};
break;
case 3:
this.optionalImges[3] = {'file':event.target.files[0],'file_url':reader.result};
break;
case 4:
this.optionalImges[4] = {'file':event.target.files[0],'file_url':reader.result};
break;
}
}
reader.readAsDataURL(optionalImg);
}
imageUpload(e) {
let reader = new FileReader();
this.profile_image = e.target.files[0];
......@@ -389,7 +445,9 @@ export class DashboardComponent implements OnInit {
resetVehicleForm(){
this.vehicleVinAddForm.reset();
this.vehicleDetailsAddForm.reset();
this.vehicleDetailsAddForm.reset({
maker: '', modelYear: '', modelName: '', location: ''
});
}
routeToIndex(){
......@@ -416,24 +474,51 @@ export class DashboardComponent implements OnInit {
}
});
this.getIssueData();
this.loader = false;
}
getIssueData(){
const This = this;
this.loader = true;
this.webService.get_data('getGeneralIssues').subscribe(response => {
this.loader = false;
if(response.status == '1'){
this.issuesData = response.issue_data;
this.defIssuesData = this.issuesData;
this.loader = false;
} else {
this.loader = false;
return false;
}
},error => {
this.loader = false;
return false;
});
}
searchIssues(event){
if(event.target.value == '' || event.target.value == 'undefined' || event.target.value == undefined || event.target.value == 'null' || event.target.value == null ){
this.issuesData = this.defIssuesData;
} else {
const thisObj = this;
let data: any[] = new Array();
let serRegExp = new RegExp(event.target.value,"gi");
thisObj.defIssuesData.forEach(function (issues,index) {
let issueCat = issues.issue;
if(issueCat.search(serRegExp) != -1){
data.push(thisObj.defIssuesData[index]);
}
});
this.issuesData = (data.length > 0)?data:false;
}
setTimeout(()=>{
this.selectedIssues.forEach(function (issues) {
$('[id="issue_'+issues.issue_id+'_'+issues.sub_issue_id+'"]').prop('checked', true);
});
},500);
}
jumpToStep3(){
if(this.selectedIssues.length != 0){
this.step3nextRef.nativeElement.click();
......@@ -451,17 +536,19 @@ export class DashboardComponent implements OnInit {
let searchData = {'pickup_data':this.wizardData.pickup_data,'sub_issues':selSubIssues}
this.webService.post_data('getNearByMechanics',searchData).subscribe(response => {
this.loader = false;
if(response.status == '1'){
this.mechanicData = response.mechanic_data;
this.dateSection.push(new Date(this.today.setDate(this.today.getDate())));
this.dateSection.push(new Date(this.today.setDate(this.today.getDate() + 1)));
this.loader = false;
} else {
this.loader = false;
return false;
}
},error => {
this.loader = false;
return false;
});
}
......@@ -482,36 +569,37 @@ export class DashboardComponent implements OnInit {
next(event) {
if(this.dateStep > 30){
this.showLeftArrow = true;
this.showRightArrow = false;
return false;
}
this.showLeftArrow = true;
this.showRightArrow = true;
this.dateSection = new Array();
this.nextDate.setDate(this.nextDate.getDate() + 1);
this.currDate.setDate(this.currDate.getDate() + 1);
this.dateSection[0] = new Date(this.currDate);
this.dateSection[1] = new Date(this.nextDate);
this.dateStep += 1;
}
prev(event) {
if(this.dateStep <= 0){
this.showLeftArrow = false;
this.showRightArrow = true;
return false;
}
this.showLeftArrow = true;
this.showRightArrow = true;
this.dateSection = new Array();
this.nextDate.setDate(this.nextDate.getDate() - 1);
this.currDate.setDate(this.currDate.getDate() - 1);
this.dateSection[0] = new Date(this.currDate);
this.dateSection[1] = new Date(this.nextDate);
this.dateStep -= 1;
}
getSchedule(time,index){
this.scheduleDateInit = true;
this.wizardData['schedule_date'] = {'date':this.formatDate(this.dateSection[index]),'time':time};
}
......@@ -525,13 +613,15 @@ export class DashboardComponent implements OnInit {
return [year,month,day].join('-');
}
scheduleNow(mechanic_id){
scheduleNow(mechanic_id,cost){
this.wizardData['mechanic_id'] = mechanic_id;
if(!this.loginDetails){
this.routeToIndex();
}
this.loader = true;
this.wizardData['cost'] = cost;
this.confirmBooking();
}
......@@ -540,14 +630,17 @@ export class DashboardComponent implements OnInit {
this.wizardData['selected_issues'] = this.selectedIssues;
this.webService.post_data('scheduleNow',this.wizardData).subscribe(response => {
this.loader = false;
if(response.status == '1'){
this.closeWizardRef.nativeElement.click();
this.closeQuoteWizardRef.nativeElement.click();
this.goTostep1Ref.nativeElement.click();
this.selectedIssues = [];
this.serviceHistoryTabRef.nativeElement.click();
this.loader = false;
} else {
this.loader = false;
return false;
}
},error => {
......@@ -558,8 +651,19 @@ export class DashboardComponent implements OnInit {
resetQuoteWizard(){
this.selectedIssues = [];
this.scheduleMechanic = false;
this.scheduleDateInit = false;
this.goTostep1Ref.nativeElement.click();
this.optionalImges[1] = false;
this.optionalImges[2] = false;
this.optionalImges[3] = false;
this.optionalImges[4] = false;
this.optionalDescription = '';
}
scrollToBottom(id){
$('#'+id).stop().animate({scrollTop: $('#'+id)[0].scrollHeight}, 1500);
}
tab_swap(type) { this.tab = type; }
......
src/app/home/index/index.component.html
......@@ -259,14 +259,14 @@
<div class="col-md-6">
<select formControlName="modelYear"
[ngClass]="{'input_error': !vehicleDataForm.controls['modelYear'].valid && vehicleDataFormSubmit}">
<option value="" disabled selected>YEAR</option>
<option value="" class="hide">YEAR</option>
<option *ngFor="let date of modelDates">{{date}}</option>
</select>
</div>
<div class="col-md-6">
<select (change)="get_model($event.target.value)" formControlName="maker"
[ngClass]="{'input_error': !vehicleDataForm.controls['maker'].valid && vehicleDataFormSubmit}">
<option value="" disabled selected>MAKE</option>
<option value="" class="hide">MAKE</option>
<option *ngFor="let car_date of carSearchJsonData; let key = index" value="{{key}}">{{car_date.brand}}</option>
</select>
</div>
......@@ -275,7 +275,7 @@
<div class="col-md-6" >
<select formControlName="modelName"
[ngClass]="{'input_error': !vehicleDataForm.controls['modelName'].valid && vehicleDataFormSubmit}">
<option value="" disabled selected>MODEL</option>
<option value="" class="hide">MODEL</option>
<option *ngFor="let car_models of carModel">{{car_models}}</option>
</select>
</div>
......@@ -300,7 +300,7 @@
<div class="row">
<div class="col-md-12">
<button class="log_btn prev_btn floatLeft" type="button" data-dismiss="modal">PREVIOUS</button>
<button [ngClass]="{'log_btn_diabled':vehicleDataForm.invalid}" type="submit" class="log_btn next_btn floatRight" (click)="jumpToStep(1)">NEXT</button>
<button [ngClass]="{'log_btn_diabled':vehicleDataForm.invalid}" type="submit" class="log_btn next_btn floatRight" (click)="jumpToStep1()">NEXT</button>
</div>
</div>
</form>
......@@ -309,12 +309,14 @@
<h3>SERVICES</h3>
<div class="row">
<div class="col-md-12">
<input class="search" placeholder="Search Services" type="">
<input class="search" placeholder="Search Services" (keyup)="searchIssues($event)">
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="service_methods">
<p *ngIf="!issuesData; else listIssues">No Record Found</p>
<ng-template #listIssues>
<ul>
<div *ngFor="let issue_data of issuesData">
<li data-toggle="collapse" [attr.data-target]="'#issue_' + issue_data.issue_id">{{issue_data.issue}}</li>
......@@ -332,6 +334,7 @@
</div>
</div>
</ul>
</ng-template>
</div>
</div>
</div>
......@@ -339,7 +342,7 @@
<div class="row">
<div class="col-md-12">
<button class="log_btn prev_btn floatLeft" type="button" previousStep>PREVIOUS</button>
<button [ngClass]="{'log_btn_diabled':selectedIssues.length == 0}" class="log_btn next_btn floatRight" type="button" (click)="jumpToStep(2)">NEXT</button>
<button [ngClass]="{'log_btn_diabled':selectedIssues.length == 0}" class="log_btn next_btn floatRight" type="button" (click)="jumpToStep2()">NEXT</button>
</div>
</div>
</wizard-step>
......@@ -352,27 +355,34 @@
</div>
<div class="row m0">
<div class="col-md-12">
<textarea class="textarea_input" rows="5" placeholder="Additional Informations you may can gave">
Additional Informations you may can gave
</textarea>
<textarea class="textarea_input" rows="5" placeholder="Additional Informations you may can gave" [(ngModel)]='optionalDescription'></textarea>
</div>
</div>
<div class="row">
<h6 class="pt10 textLeft">Add Images or Videos (Optional)</h6>
<h6 class="pt10 textLeft">Add Images (Optional)</h6>
<!-- Add Images or Videos (Optional) -->
<hr>
<div class="add_images">
<ul>
<li><span>+</span>
<input type="file">
<li>
<span *ngIf="!optionalImges[1]">+</span>
<img *ngIf="optionalImges[1]" [src]="optionalImges[1]['file_url']" width="50px" height="50px">
<input type="file" (change)="optImgUpload(1,$event)" accept="image/*">
</li>
<li><span>+</span>
<input type="file">
<li>
<span *ngIf="!optionalImges[2]">+</span>
<img *ngIf="optionalImges[2]" [src]="optionalImges[2]['file_url']" width="50px" height="50px">
<input type="file" (change)="optImgUpload(2,$event)" accept="image/*">
</li>
<li><span>+</span>
<input type="file">
<li>
<span *ngIf="!optionalImges[3]">+</span>
<img *ngIf="optionalImges[3]" [src]="optionalImges[3]['file_url']" width="50px" height="50px">
<input type="file" (change)="optImgUpload(3,$event)" accept="image/*">
</li>
<li><span>+</span>
<input type="file">
<li>
<span *ngIf="!optionalImges[4]">+</span>
<img *ngIf="optionalImges[4]" [src]="optionalImges[4]['file_url']" width="50px" height="50px">
<input type="file" (change)="optImgUpload(4,$event)" accept="image/*">
</li>
</ul>
</div>
......@@ -433,7 +443,7 @@
<div class="modal" id="quotes">
<div class="modal-dialog modal-full">
<div class="modal-content login_modal_wrapper">
<div #closeQuoteWizard class="modal_close" data-dismiss="modal" (click)="resetQuoteWizard()">
<div #closeQuoteWizard class="modal_close" data-dismiss="modal" (click)="scheduleDateInit = false; scheduleMechanic = false">
&times;
</div>
<div class="modal-body">
......@@ -452,14 +462,14 @@
<h4>Select your day and date</h4>
</div>
<div class="col-md-6">
<button class="quote_arrow left floatLeft" (click)="prev($event)"></button>
<button [ngClass]="{'invisible': !showLeftArrow}" class="quote_arrow left floatLeft" (click)="prev($event)"></button>
<div class="schedule_dates floatLeft">
<ul>
<li>{{ dateSection[0] | date:'MMM dd-MM-yyyy' }}</li>
<li>{{ dateSection[1] | date:'MMM dd-MM-yyyy' }}</li>
</ul>
</div>
<button class="quote_arrow right floatRight" (click)="next($event)"></button>
<button [ngClass]="{'invisible': !showRightArrow}" class="quote_arrow right floatRight" (click)="next($event)"></button>
<div class="clear"></div>
</div>
</div>
......@@ -487,33 +497,13 @@
<p>{{mechanic.address}}<br>{{mechanic.city+' , '+mechanic.state}}</p>
<h6>{{mechanic.phone}}</h6>
</ng-template>
<button (click)="scheduleNow(mechanic.mechanic_id)"
[ngClass]="{'book_now':scheduleDateInit == true,
'book_now_disabled':scheduleDateInit == false}">
<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)}">
{{loginDetails ? 'Book now' : 'Login and Continue' }}
</button>
</div>
<div class="clear"></div>
<!-- <div class="offer">
<div class="panel-group" id="accordion">
<div class="panel panel-default" *ngFor="let sub_issues of mechanic.sub_issues">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#sub_issue_dtls_{{sub_issues.issue_id}}_{{sub_issues.issue_cat_id}}">
<div class="row">
<div class="col-md-5">{{sub_issues.issue_category}}</div>
<div class="col-md-1">:</div>
<div class="col-md-5"><strong>{{sub_issues.custom_service_fee}}</strong></div>
</div>
</a>
</h4>
</div>
<div id="sub_issue_dtls_{{sub_issues.issue_id}}_{{sub_issues.issue_cat_id}}" class="panel-collapse collapse in">
<div class="panel-body">{{sub_issues.custom_description}}</div>
</div>
</div>
</div>
</div> -->
<div class="offer">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
......@@ -545,26 +535,28 @@
</div>
<div class="col-md-6">
<div class="scheduletiming_listing">
<ul>
<ul id="scroll_0_{{mechanic.mechanic_id}}">
<li *ngFor="let time of mechanic.scheduleTiming" id="custom_check_button">
<label>
<input type="radio" name="scheduleTime" (click)="getSchedule(time,'0')">
<input type="radio" name="scheduleTime" (click)="getSchedule(time,'0');
scheduleDateInit = true; scheduleMechanic = mechanic.mechanic_id">
<p>{{time}}</p>
</label>
</li>
</ul>
<ul>
<ul id="scroll_1_{{mechanic.mechanic_id}}">
<li *ngFor="let time of mechanic.scheduleTiming" id="custom_check_button">
<label>
<input type="radio" name="scheduleTime" (click)="getSchedule(time,'1')">
<input type="radio" name="scheduleTime" (click)="getSchedule(time,'1');
scheduleDateInit = true; scheduleMechanic = mechanic.mechanic_id">
<p>{{time}}</p>
</label>
</li>
</ul>
</div>
<div class="scheduletiming_btm_btns">
<div class="btm_btns"></div>
<div class="btm_btns"></div>
<div class="btm_btns" (click)="scrollToBottom('scroll_0_'+mechanic.mechanic_id)"></div>
<div class="btm_btns" (click)="scrollToBottom('scroll_1_'+mechanic.mechanic_id)"></div>
</div>
</div>
</div>
......
src/app/home/index/index.component.ts
......@@ -51,6 +51,7 @@ export class IndexComponent implements OnInit {
//Service Details: TAB 3
loader: boolean;
issuesData: any;
defIssuesData: any[] = new Array();
selectedIssues: any[] = new Array();
//Quote Page
......@@ -63,12 +64,17 @@ export class IndexComponent implements OnInit {
imageServer: string;
mechanicData: any;
autoSchedule: boolean;
showLeftArrow: boolean;
showRightArrow: boolean;
estimatedPrice: number;
scheduleDateInit: boolean;
scheduleMechanic: any;
carModel: any;
modelDates: number[] = new Array();
carSearchJsonData: any;
optionalImges: any = new Array({1:false,2:false,3:false,4:false});
optionalDescription: string;
constructor(
private router : Router,
......@@ -77,13 +83,18 @@ export class IndexComponent implements OnInit {
public mapsAPILoader : MapsAPILoader,
public subjectService : SubjectService) {
this.step = 0;
this.issuesData = false;
this.autoSchedule = false;
this.imageServer = ImageStorage;
this.currDate = new Date();
this.nextDate = new Date();
this.loginDetails = false;
this.searchLocError = false;
this.showLeftArrow = false;
this.showRightArrow = true;
this.scheduleDateInit = false;
this.scheduleMechanic = false;
this.optionalDescription = '';
this.vehicleDataFormSubmit = false;
}
......@@ -176,17 +187,43 @@ export class IndexComponent implements OnInit {
this.webService.get_data('getGeneralIssues').subscribe(response => {
if(response.status == '1'){
this.issuesData = response.issue_data;
this.defIssuesData = this.issuesData;
this.loader = false;
} else {
this.loader = false;
return false;
}
this.loader = false;
},error => {
this.loader = false;
return false;
});
}
searchIssues(event){
if(event.target.value == '' || event.target.value == 'undefined' || event.target.value == undefined || event.target.value == 'null' || event.target.value == null ){
this.issuesData = this.defIssuesData;
} else {
const thisObj = this;
let data: any[] = new Array();
let serRegExp = new RegExp(event.target.value,"gi");
thisObj.defIssuesData.forEach(function (issues,index) {
let issueCat = issues.issue;
if(issueCat.search(serRegExp) != -1){
data.push(thisObj.defIssuesData[index]);
}
});
this.issuesData = (data.length > 0)?data:false;
}
setTimeout(()=>{
this.selectedIssues.forEach(function (issues) {
$('[id="issue_'+issues.issue_id+'_'+issues.sub_issue_id+'"]').prop('checked', true);
});
},500);
}
setIssueSelected(event){
let issue_id = event.target.attributes.issue_id.value;
let sub_issue_id = event.target.attributes.sub_issue_id.value;
......@@ -239,11 +276,19 @@ export class IndexComponent implements OnInit {
resetQuoteWizard(){
this.jumpToStep0();
this.vehicleDataForm.reset();
this.searchElementRef.nativeElement.value = '';
this.selectedIssues = [];
this.scheduleDateInit = false;
this.vehicleDataForm.reset({
trim: '', milage: '', emgine: '', maker: '', modelYear: '', modelName: ''
});
this.optionalImges[1] = false;
this.optionalImges[2] = false;
this.optionalImges[3] = false;
this.optionalImges[4] = false;
this.optionalDescription = '';
}
getQuote(){
......@@ -257,17 +302,19 @@ export class IndexComponent implements OnInit {
let searchData = {'pickup_data':this.wizardData.pickup_data,'sub_issues':selSubIssues}
this.webService.post_data('getNearByMechanics',searchData).subscribe(response => {
this.loader = false;
if(response.status == '1'){
this.mechanicData = response.mechanic_data;
this.dateSection.push(new Date(this.today.setDate(this.today.getDate())));
this.dateSection.push(new Date(this.today.setDate(this.today.getDate() + 1)));
this.loader = false;
} else {
this.loader = false;
return false;
}
},error => {
this.loader = false;
return false;
});
}
......@@ -288,8 +335,12 @@ export class IndexComponent implements OnInit {
next(event) {
if(this.dateStep > 30){
this.showLeftArrow = true;
this.showRightArrow = false;
return false;
}
this.showLeftArrow = true;
this.showRightArrow = true;
this.dateSection = new Array();
this.nextDate.setDate(this.nextDate.getDate() + 1);
this.currDate.setDate(this.currDate.getDate() + 1);
......@@ -300,8 +351,12 @@ export class IndexComponent implements OnInit {
prev(event) {
if(this.dateStep <= 0){
this.showLeftArrow = false;
this.showRightArrow = true;
return false;
}
this.showLeftArrow = true;
this.showRightArrow = true;
this.dateSection = new Array();
this.nextDate.setDate(this.nextDate.getDate() - 1);
this.currDate.setDate(this.currDate.getDate() - 1);
......@@ -311,7 +366,6 @@ export class IndexComponent implements OnInit {
}
getSchedule(time,index){
this.scheduleDateInit = true;
this.wizardData['schedule_date'] = {'date':this.formatDate(this.dateSection[index]),'time':time};
}
......@@ -325,7 +379,7 @@ export class IndexComponent implements OnInit {
return [year,month,day].join('-');
}
scheduleNow(mechanic_id){
scheduleNow(mechanic_id,cost){
this.wizardData['mechanic_id'] = mechanic_id;
if(!this.loginDetails){
......@@ -334,6 +388,8 @@ export class IndexComponent implements OnInit {
return false;
}
this.loader = true;
this.wizardData['cost'] = cost;
this.confirmBooking();
}
......@@ -342,12 +398,13 @@ export class IndexComponent implements OnInit {
this.wizardData['selected_issues'] = this.selectedIssues;
this.webService.post_data('scheduleNow',this.wizardData).subscribe(response => {
this.loader = false;
if(response.status == '1'){
this.closeWizardRef.nativeElement.click();
this.closeQuoteWizardRef.nativeElement.click();
this.router.navigate(['../dashboard']);
this.router.navigate(['../dashboard'],{queryParams: {tab: 'service'}});
this.loader = false;
} else {
this.loader = false;
return false;
}
},error => {
......@@ -357,22 +414,47 @@ export class IndexComponent implements OnInit {
}
jumpToStep0(){
this.goTostepRef.nativeElement.click();
this.goTostep0Ref.nativeElement.click();
}
jumpToStep1(){
if(!this.vehicleDataForm.invalid){
this.goTostepRef.nativeElement.click();
this.goTostep1Ref.nativeElement.click();
}
}
jumpToStep2(){
if(this.selectedIssues.length > 0){
this.goTostepRef.nativeElement.click();
this.goTostep2Ref.nativeElement.click();
}
}
optImgUpload(image_id,event){
let reader = new FileReader();
let optionalImg: any = event.target.files[0];
reader.onloadend = () => {
switch (image_id){
case 1:
this.optionalImges[1] = {'file':event.target.files[0],'file_url':reader.result};
break;
case 2:
this.optionalImges[2] = {'file':event.target.files[0],'file_url':reader.result};
break;
case 3:
this.optionalImges[3] = {'file':event.target.files[0],'file_url':reader.result};
break;
case 4:
this.optionalImges[4] = {'file':event.target.files[0],'file_url':reader.result};
break;
}
}
reader.readAsDataURL(optionalImg);
}
scrollToBottom(id){
$('#'+id).stop().animate({scrollTop: $('#'+id)[0].scrollHeight}, 1500);
}
featuredOnLoad() {return ''; }
carouselTileLoad(){ return ''; }
......
src/styles.scss
......@@ -465,3 +465,18 @@ section.module.parallax {
.error{
border:2px solid red !important;
}
.prevent-click {
pointer-events: none;
cursor: default;
text-decoration: none;
color: black;
}
.hide {
display:none !important;
}
.invisible{
opacity: 0 !important;
}
\ No newline at end of file
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