Skip to content

D
dcarfixers_angular
Commit 3c213c45 by Jansa Jose
Options

dc

parent cc5934d6
Showing with 384 additions and 418 deletions
src/app/home/dashboard/dashboard.component.html
......@@ -486,33 +486,40 @@
<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>
<div class="service_list collapse" [attr.id]="'issue_' + issue_data.issue_id">
<ul>
<li *ngFor="let sub_issue_data of issue_data.sub_categories">
<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>{{sub_issue_data.issue_category}}</p>
</label>
</button>
</li>
</ul>
</div>
</div>
</ul>
</ng-template>
<p *ngIf="!issuesData">No Record Found</p>
<!-- service-tabs-->
<div class="service_tab_inner" *ngIf="issuesData">
<div class="row">
<div class="col col-6">
<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>
</li>
</ul>
<div class="arrow_btn down_arrow" (click)="scrollToBottom('issue_cntr')"></div>
</div>
<div class="col col-6">
<div class="arrow_btn"></div>
<div class="tab-content backgroundColor">
<div *ngFor="let issue_data of issuesData; let i = index;" [ngClass]="(i == 0)?'tab-pane container active':'tab-pane container'" [attr.id]="'issue_'+issue_data.issue_id">
<ul malihu-scrollbar [scrollbarOptions]="scrollbarOptions" [attr.id]="'sub_issue_cntr_'+issue_data.issue_id">
<li *ngFor="let sub_issue_data of issue_data.sub_categories">
<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>{{sub_issue_data.issue_category}}</p>
</label>
</button>
</li>
</ul>
</div>
</div>
<div class="arrow_btn"></div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<button [ngClass]="{'log_btn_diabled':selectedIssues.length == 0}" class="log_btn next_btn floatRight" type="button" (click)="jumpToStep3()">NEXT</button>
......@@ -573,7 +580,10 @@
<h3>SUMMARY</h3>
<div class="row">
<div class="col-md-12">
<h6 class="pt10 textLeft">Issues</h6>
<!-- <h6 class="pt10 textLeft">Issues</h6> -->
<div class="wizard_subhead">
Issues Spoted
</div>
</div>
</div>
<div class="row">
......@@ -581,18 +591,24 @@
<div class="selected_services">
<ul>
<li *ngFor="let selIssue of selectedIssues">{{selIssue.issue_category}}<a (click)="removeSelectedItem(selIssue.issue_id,selIssue.sub_issue_id)">&times;</a></li>
<a goToStep="0"><li class="add_more_services">Add more Services</li></a>
<input #goTostep1 type="hidden" goToStep="0">
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h6 class="pt10 textLeft"><a goToStep="0">Add more services</a></h6>
<input #goTostep1 type="hidden" goToStep="0">
<div class="wizard_subhead">
Location
</div>
</div>
</div>
<div class="row">
<input #newGoogleLocSearch placeholder="Enter Location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" [ngModel]="(wizardData && wizardData.pickup_data && wizardData.pickup_data.pickup_loc)?wizardData.pickup_data.pickup_loc:''" (keyup)="googlesearchLocError = false;" (ngModelChange)="get_newlocaion(newGoogleLocSearch.value)" [attr.value]="(wizardData && wizardData.pickup_data && wizardData.pickup_data.pickup_loc)?wizardData.pickup_data.pickup_loc:''">
<div class="col-md-12">
<input #newGoogleLocSearch placeholder="Enter Location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" [ngModel]="(wizardData && wizardData.pickup_data && wizardData.pickup_data.pickup_loc)?wizardData.pickup_data.pickup_loc:''" (keyup)="googlesearchLocError = false;" (ngModelChange)="get_newlocaion(newGoogleLocSearch.value)" [attr.value]="(wizardData && wizardData.pickup_data && wizardData.pickup_data.pickup_loc)?wizardData.pickup_data.pickup_loc:''">
</div>
</div>
<div class="row">
<div class="col-md-6">
......
src/app/home/dashboard/dashboard.component.scss
......@@ -69,7 +69,16 @@
}
}
}
.wizard_subhead{
font-size: 20px;
font-weight: 600;
}
.add_more_services{
background: #2655bf;
color: #fff !important;
border:1px solid #2655bf !important;
}
.dashboard_tab_content {
padding-bottom: 80px;
table {
......@@ -602,11 +611,11 @@
text-align: center;
width: 100%;
height: 45px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border: none;
font-size: 20px;
font-weight: 300;
......@@ -629,16 +638,154 @@
background-repeat: no-repeat;
padding-right: 50px;
}
.service_tab_inner{
width: 100%;
padding-top:10px;
.arrow_btn{
width: 35px;
height: 35px;
background-position: center !important;
background-repeat: no-repeat !important;
position: relative;
left: 20px;
cursor: pointer;
}
.up_arrow{
background: url("../../../assets/images/asset_scroll_up.png");
}
.down_arrow{
background: url("../../../assets/images/asset_scroll_down.png");
}
.services_tab{
padding:0px;
padding-top: 10px;
padding-bottom: 10px;
margin:0px;
overflow: scroll;
overflow-x: hidden;
padding-right: 20px;
width: 100%;
height: 250px;
&::-webkit-scrollbar {
display: none;
}
li{
width:100%;
margin-bottom: 10px;
a{
padding:8px;
padding-left:15px;
border-radius: 8px;
padding-right: 35px !important;
color: #272a31;
background-image: url("../../../assets/images/asset_arrow.png");
background-size: 17px;
background-position: right 12px top 11px;
background-repeat: no-repeat;
img{
margin-right: 10px;
position: relative;
bottom: 2px;
}
}
.active{
background-color: #f2f2f2;
padding:8px;
padding-left: 15px;
border-radius: 8px;
}
}
}
.backgroundColor{
background: #f2f2f275;
}
.tab-content{
padding-top: 10px;
padding-bottom: 10px;
ul{
padding:0px;
margin:0px;
height: 230px;
overflow: scroll;
overflow-x: hidden;
padding-right: 20px;
li{
list-style: none;
display: inline-block;
position: relative;
min-width:300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0px;
padding: 0px;
border: none;
background-image: none;
margin-bottom:0px;
#custom_check_button {
margin: 0px;
height: 40px;
background-color: #fff;
border-radius: 0px !important;
overflow: auto;
color: #2655bf;
border: 1px solid transparent;
position: relative;
outline: none;
border-radius: 8px !important;
width: 100%;
}
#custom_check_button p {
padding:8px;
padding-left: 15px;
border-radius: 8px;
margin: 0px;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
color: #2655bf;
text-align: left;
}
#custom_check_button label {
width: 100%;
margin: 0px;
}
#custom_check_button label span {
text-align:left;
display: block;
}
#custom_check_button label input {
position: absolute;
left: 0px;
bottom: 0px;
right: 0px;
opacity: 0;
}
#custom_check_button input:checked+p {
background-color: #2655bf;
color: #fff;
border-radius: 0px !important;
margin: 0px;
}
}
}
}
}
input {
border: 1px solid #1e1e1e;
height: 40px;
width: 100%;
border-radius: 25px;
border-radius: 10px;
padding-left: 15px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
-o-border-radius: 25px;
-webkit-border-radius:10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
text-align: left;
font-size: 16px;
&::placeholder {
......@@ -654,11 +801,11 @@
height: 40px;
width: 100%;
padding-left: 15px;
border-radius: 25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
-o-border-radius: 25px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
text-align: center;
-webkit-appearance: none;
-moz-appearance: none;
......@@ -707,7 +854,7 @@
height: 40px;
width: 48%;
display: inline-block;
border-radius: 25px;
border-radius: 10px;
color: #2655bf;
border: 2px solid #2655bf;
background: transparent;
......@@ -725,7 +872,7 @@
width: 48%;
margin: 3px;
display: inline-block;
border-radius: 25px;
border-radius: 10px;
color: #fff;
border: 2px solid #2655bf;
background: #2655bf;
......
src/app/home/dashboard/dashboard.component.ts
......@@ -98,6 +98,8 @@ export class DashboardComponent implements OnInit {
@ViewChild("serviceHistoryTab") public serviceHistoryTabRef: ElementRef;
@ViewChild("closeVehicleAddForm") public closeVehicleAddFormRef: ElementRef;
public scrollbarOptions = { axis: 'y', theme: 'minimal-dark' };
constructor(private router : Router,
public ngZone : NgZone,
private route : ActivatedRoute,
......@@ -257,6 +259,7 @@ export class DashboardComponent implements OnInit {
}
});
}
console.log(thisObj.selectedIssues);
this.calculateEstimate();
}
......@@ -547,14 +550,22 @@ export class DashboardComponent implements OnInit {
this.issuesData = this.defIssuesData;
} else {
const thisObj = this;
let subCatArr: any;
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]);
} else {
subCatArr = issues.sub_categories;
subCatArr.forEach(function (issues_cat) {
let sub_issue_cat = issues_cat.issue_category;
if(sub_issue_cat.search(serRegExp) != -1){
data.push(thisObj.defIssuesData[index]);
}
});
}
});
this.issuesData = (data.length > 0)?data:false;
......@@ -758,6 +769,10 @@ export class DashboardComponent implements OnInit {
this.optionalDescription = '';
}
scrollToTop(id){
$('#'+id).stop().animate({scrollTop: 0}, 800);
}
scrollToBottom(id){
$('#'+id).stop().animate({scrollTop: $('#'+id)[0].scrollHeight}, 1500);
}
......
src/app/home/index/index.component.html
......@@ -64,8 +64,8 @@
<h4>Diagnosis Trouble Codes</h4>
<p>Find out what your code really means and what you can expect to pay.</p>
<button class="learn_more">
GO
</button>
GO
</button>
</div>
<div class="col-md-2"></div>
<div class="col-md-2 textCenter p0">
......@@ -73,8 +73,8 @@
<h4>Parts and Replacement</h4>
<p>Review causes, symptoms, and estimate repair costs.</p>
<button class="learn_more">
GO
</button>
GO
</button>
</div>
<div class="col-md-2"></div>
<div class="col-md-2 textCenter p0">
......@@ -82,8 +82,8 @@
<h4>Maintenance Schedules</h4>
<p>Need to schedule a maintenance check? You’re in the right place.</p>
<button class="learn_more">
GO
</button>
GO
</button>
</div>
<div class="col-md-1"></div>
</div>
......@@ -228,7 +228,7 @@
<img src="assets/images/asset_j6.png">
</div>
</ngx-tile>
<button NgxCarouselPrev class='leftRs'>&lt;</button>
<button NgxCarouselNext class='rightRs'>&gt;</button>
</ngx-carousel>
......@@ -316,266 +316,41 @@
<input class="search" placeholder="Search Services" (keyup)="searchIssues($event)">
</div>
</div>
<p *ngIf="!issuesData">No Record Found</p>
<!-- service-tabs-->
<div class="service_tab_inner">
<div class="row">
<div class="col">
<div class="arrow_btn up_arrow">
</div>
<ul class="nav services_tab">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#service1"><img src="../../../assets/images/default.png">Service 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#service2"><img src="../../../assets/images/default.png">Service 2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#service3"><img src="../../../assets/images/default.png">Service 3</a>
</li>
<li class="nav-item">
<a class="nav-link " data-toggle="pill" href="#service4"><img src="../../../assets/images/default.png">Service 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#service5"><img src="../../../assets/images/default.png">Service 2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#service6"><img src="../../../assets/images/default.png">Service 3</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#service7"><img src="../../../assets/images/default.png">Service 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#service8"><img src="../../../assets/images/default.png">Service 2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#service9"><img src="../../../assets/images/default.png">Service 3</a>
<div class="service_tab_inner" *ngIf="issuesData">
<div class="row">
<div class="col col-6">
<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>
</li>
</ul>
<div class="arrow_btn down_arrow" (click)="scrollToBottom('issue_cntr')"></div>
</div>
<div class="col col-6">
<div class="arrow_btn"></div>
<div class="tab-content backgroundColor">
<div *ngFor="let issue_data of issuesData; let i = index;" [ngClass]="(i == 0)?'tab-pane container active':'tab-pane container'" [attr.id]="'issue_'+issue_data.issue_id">
<ul malihu-scrollbar [scrollbarOptions]="scrollbarOptions" [attr.id]="'sub_issue_cntr_'+issue_data.issue_id">
<li *ngFor="let sub_issue_data of issue_data.sub_categories">
<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>{{sub_issue_data.issue_category}}</p>
</label>
</button>
</li>
</ul>
<div class="arrow_btn down_arrow">
</div>
</div>
<div class="col">
<div class="arrow_btn up_arrow">
</div>
<div class="tab-content">
<div class="tab-pane container active" id="service1">
<ul malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>AC inspection: test for leaks, fluid levels</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>Heater core replacement</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>AC system recharge</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>Heater blower motor replacement</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>Heater blower motor resistor..</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>AC condenser replacement</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>Other</p>
</label>
</button>
</li>
</ul>
</div>
<div class="tab-pane container fade" id="service2">
<ul malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>AC inspection: test for leaks, fluid levels</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>Heater core replacement</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>AC system recharge</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>Heater blower motor replacement</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>Heater blower motor resistor..</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>AC condenser replacement</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>Other</p>
</label>
</button>
</li>
</ul>
</div>
<div class="tab-pane container fade" id="service3">
<ul malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>AC inspection: test for leaks, fluid levels</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>Heater core replacement</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>AC system recharge</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>Heater blower motor replacement</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>Heater blower motor resistor..</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>AC condenser replacement</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>Other</p>
</label>
</button>
</li>
</ul>
</div>
</div>
<div class="arrow_btn down_arrow">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="service_methods" malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
<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>
<div class="service_list collapse" [attr.id]="'issue_' + issue_data.issue_id">
<ul>
<li *ngFor="let sub_issue_data of issue_data.sub_categories">
<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>{{sub_issue_data.issue_category}}</p>
</label>
</button>
</li>
</ul>
</div>
</div>
</ul>
</ng-template>
<div class="arrow_btn"></div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<button class="log_btn prev_btn floatLeft" type="button" previousStep>PREVIOUS</button>
......@@ -631,7 +406,7 @@
</div>
</div>
</wizard-step>
<wizard-step stepTitle="Title of step 4">
<h3>SUMMARY</h3>
<div class="row">
......@@ -646,20 +421,20 @@
<div class="selected_services">
<ul>
<li *ngFor="let selIssue of selectedIssues">{{selIssue.issue_category}}<a (click)="removeSelectedItem(selIssue.issue_id,selIssue.sub_issue_id)">&times;</a></li>
<a goToStep="1"><li class="add_more_services">Add more Services</li></a>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="wizard_subhead">
Location
</div>
<div class="col-md-12">
<div class="wizard_subhead">
Location
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input #addressLocSearch placeholder="Enter Location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" [ngModel]="(wizardData && wizardData.pickup_data && wizardData.pickup_data.pickup_loc)?wizardData.pickup_data.pickup_loc:''" (keyup)="addresssearchLocError = false;" (ngModelChange)="get_newlocaion(addressLocSearch.value)" [attr.value]="(wizardData && wizardData.pickup_data && wizardData.pickup_data.pickup_loc)?wizardData.pickup_data.pickup_loc:''">
......@@ -712,56 +487,56 @@
<h4>Car Fixxers Guarantee</h4>
<p>Quality service through our network of approved repair shops Rewards to use towards future services, Vehicle maintenance tracker to easily manage service history Safe and secure payment processing, Dedicated support to
handle any repair related questions Peace-of-Mind Guarantee - no unexpected charges</p>
</div>
<div class="quote_schedule_header">
<div class="row">
<div class="col-md-6 pr0">
<h4>Select your day and date</h4>
</div>
<div class="col-md-6">
<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>
<div class="quote_schedule_header">
<div class="row">
<div class="col-md-6 pr0">
<h4>Select your day and date</h4>
</div>
<div class="col-md-6">
<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 [ngClass]="{'invisible': !showRightArrow}" class="quote_arrow right floatRight" (click)="next($event)"></button>
<div class="clear"></div>
</div>
<button [ngClass]="{'invisible': !showRightArrow}" class="quote_arrow right floatRight" (click)="next($event)"></button>
<div class="clear"></div>
</div>
</div>
</div>
<div class="quote_schedule_list">
<ul malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
<li *ngFor="let mechanic of mechanicData">
<div class="row">
<div class="col-md-6 pr0">
<div class="mechanic_profile">
<div class="mechanic_profile_inner">
<div class="mechanic_photo_wrapper">
<div class="mechanic_photo">
<img src="{{imageServer + mechanic.profile_image}}" onerror="this.src='assets/images/user_avatar.jpg'">
</div>
<div class="mechanic_ratting">
<p>4 Ratings</p>
<h6>6 Reviews</h6>
</div>
</div>
<div class="mechanic_detail">
<h4>{{mechanic.display_name}}</h4>
<div *ngIf="mechanic.shop_id != 0; else mechanicDetails">
<h5>{{mechanic.shop_name}}</h5>
<p>{{mechanic.shop_address}}</p>
<h6>{{mechanic.shop_phone}}</h6>
<p>{{mechanic.distance | number:'1.2-2' }}</p>
<div class="quote_schedule_list">
<ul malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
<li *ngFor="let mechanic of mechanicData">
<div class="row">
<div class="col-md-6 pr0">
<div class="mechanic_profile">
<div class="mechanic_profile_inner">
<div class="mechanic_photo_wrapper">
<div class="mechanic_photo">
<img src="{{imageServer + mechanic.profile_image}}" onerror="this.src='assets/images/user_avatar.jpg'">
</div>
<div class="mechanic_ratting">
<p>4 Ratings</p>
<h6>6 Reviews</h6>
</div>
</div>
<ng-template #mechanicDetails>
<p>{{mechanic.address}}<br>{{mechanic.city+' , '+mechanic.state}}</p>
<h6>{{mechanic.phone}}</h6>
<p>{{mechanic.distance | number:'1.2-2' }}</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)}">
<div class="mechanic_detail">
<h4>{{mechanic.display_name}}</h4>
<div *ngIf="mechanic.shop_id != 0; else mechanicDetails">
<h5>{{mechanic.shop_name}}</h5>
<p>{{mechanic.shop_address}}</p>
<h6>{{mechanic.shop_phone}}</h6>
<p>{{mechanic.distance | number:'1.2-2' }}</p>
</div>
<ng-template #mechanicDetails>
<p>{{mechanic.address}}<br>{{mechanic.city+' , '+mechanic.state}}</p>
<h6>{{mechanic.phone}}</h6>
<p>{{mechanic.distance | number:'1.2-2' }}</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)}">
{{loginDetails ? 'Book now' : 'Login and Continue' }}
</button>
</div>
......@@ -797,58 +572,59 @@
<div class="col-md-6">
<div class="scheduletiming_listing">
<!-- <ul id="scroll_0_{{mechanic.mechanic_id}}" malihu-scrollbar [scrollbarOptions]="scrollbarOptions"> -->
<ul id="scroll_0_{{mechanic.id}}">
<li *ngFor="let time of mechanic.scheduleTiming" id="custom_check_button">
<label>
<input type="radio" name="scheduleTime" (click)="getSchedule(time,'0');
scheduleDateInit = true; scheduleMechanic = mechanic.mechanic_id">
<p>{{time}}</p>
</label>
</li>
</ul>
<ul id="scroll_1_{{mechanic.id}}">
<li *ngFor="let time of mechanic.scheduleTiming" id="custom_check_button">
<label>
<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" (click)="scrollToBottom('scroll_0_'+mechanic.id)"></div>
<div class="btm_btns" (click)="scrollToBottom('scroll_1_'+mechanic.id)"></div>
<ul id="scroll_0_{{mechanic.id}}">
<li *ngFor="let time of mechanic.scheduleTiming" id="custom_check_button">
<label>
<input type="radio" name="scheduleTime" (click)="getSchedule(time,'0');
scheduleDateInit = true; scheduleMechanic = mechanic.mechanic_id">
<p>{{time}}</p>
</label>
</li>
</ul>
<ul id="scroll_1_{{mechanic.id}}">
<li *ngFor="let time of mechanic.scheduleTiming" id="custom_check_button">
<label>
<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" (click)="scrollToBottom('scroll_0_'+mechanic.id)"></div>
<div class="btm_btns" (click)="scrollToBottom('scroll_1_'+mechanic.id)"></div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="service_list">
<h4>Services</h4>
<div *ngFor="let selIssue of selectedIssues; let key = index">
<p *ngIf="key != 0">|</p>
<p>{{selIssue.issue_category}}</p>
</li>
</ul>
</div>
<div class="clear"></div>
<p>Estimated Price : <strong>{{estimatedPrice}}</strong></p>
<div class="clear"></div>
</div>
<div class="service_map">
<agm-map #gm [latitude]="lat" [longitude]="lng" [fitBounds]="true">
<agm-marker *ngFor="let mechanicLoc of mechanicData" [agmFitBounds]="true" [latitude]="mechanicLoc.location_lat" [longitude]="mechanicLoc.location_lat" (mouseOver)="onMouseOver(infoWindow,gm)" (mouseOut)="onMouseOut(gm)">
<agm-info-window [disableAutoPan]="false" #infoWindow>
<div style="width:130px;">
<img src="{{imageServer + mechanicLoc.profile_image}}" width="30px" height="30px" style="float: left;margin-right: 5px" onerror="this.src='assets/images/user_avatar.jpg'">
<div style="float: left">{{mechanicLoc.display_name}}</div><br>
<div style="float: left">{{mechanicLoc.estimate}}</div>
</div>
</agm-info-window>
</agm-marker>
</agm-map>
<div class="col-md-4">
<div class="service_list">
<h4>Services</h4>
<div *ngFor="let selIssue of selectedIssues; let key = index">
<p *ngIf="key != 0">|</p>
<p>{{selIssue.issue_category}}</p>
</div>
<div class="clear"></div>
<p>Estimated Price : <strong>{{estimatedPrice}}</strong></p>
<div class="clear"></div>
</div>
<div class="service_map">
<agm-map #gm [latitude]="lat" [longitude]="lng" [fitBounds]="true">
<agm-marker *ngFor="let mechanicLoc of mechanicData" [agmFitBounds]="true" [latitude]="mechanicLoc.location_lat" [longitude]="mechanicLoc.location_lat" (mouseOver)="onMouseOver(infoWindow,gm)" (mouseOut)="onMouseOut(gm)">
<agm-info-window [disableAutoPan]="false" #infoWindow>
<div style="width:130px;">
<img src="{{imageServer + mechanicLoc.profile_image}}" width="30px" height="30px" style="float: left;margin-right: 5px" onerror="this.src='assets/images/user_avatar.jpg'">
<div style="float: left">{{mechanicLoc.display_name}}</div><br>
<div style="float: left">{{mechanicLoc.estimate}}</div>
</div>
</agm-info-window>
</agm-marker>
</agm-map>
</div>
</div>
</div>
</div>
......@@ -856,6 +632,5 @@
</div>
</div>
</div>
</div>
<!-- QUOTES-MODAL-ENDS-->
\ No newline at end of file
<!-- QUOTES-MODAL-ENDS-->
\ No newline at end of file
src/app/home/index/index.component.scss
......@@ -484,6 +484,7 @@
padding:8px;
padding-left:15px;
border-radius: 8px;
padding-right: 35px !important;
color: #272a31;
background-image: url("../../../assets/images/asset_arrow.png");
background-size: 17px;
......@@ -503,6 +504,9 @@
}
}
}
.backgroundColor{
background: #f2f2f275;
}
.tab-content{
padding-top: 10px;
padding-bottom: 10px;
......@@ -770,6 +774,7 @@
padding: 5px;
margin-bottom: 10px;
padding-left: 15px;
background-image: url("/assets/images/asset_down_time_arrow.png");
background-position: right 5px top 2px;
background-repeat: no-repeat;
......
src/app/home/index/index.component.ts
......@@ -107,9 +107,6 @@ export class IndexComponent implements OnInit {
}
ngOnInit() {
// this.wizardModalTrrigerInput.nativeElement.click();
this.vehicleDataForm = new FormGroup({
trim: new FormControl(''), milage: new FormControl(''), emgine: new FormControl(''),
last_date: new FormControl(''),
......@@ -222,14 +219,22 @@ export class IndexComponent implements OnInit {
this.issuesData = this.defIssuesData;
} else {
const thisObj = this;
let subCatArr: any;
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]);
} else {
subCatArr = issues.sub_categories;
subCatArr.forEach(function (issues_cat) {
let sub_issue_cat = issues_cat.issue_category;
if(sub_issue_cat.search(serRegExp) != -1){
data.push(thisObj.defIssuesData[index]);
}
});
}
});
this.issuesData = (data.length > 0)?data:false;
......@@ -243,10 +248,8 @@ export class IndexComponent implements OnInit {
}
get_newlocaion(lastLoc){
this.cfautocomplete.addListener("place_changed", () => {
console.log('ffdf');
this.ngZone.run(() => {
let places: google.maps.places.PlaceResult = this.cfautocomplete.getPlace();
console.log(places);
if (places == undefined || places == null || places === undefined || places === null ||
places.geometry == undefined || places.geometry == null || places.geometry === undefined || places.geometry === null ||
places.formatted_address == undefined || places.formatted_address == null || places.formatted_address === undefined || places.formatted_address === null) {
......@@ -259,7 +262,6 @@ export class IndexComponent implements OnInit {
'pickup_lat':places.geometry.location.lat(),
'pickup_lng':places.geometry.location.lng()
};
console.log(this.wizardData);
this.addresssearchLocError = false;
this.lat = places.geometry.location.lat();
this.lng = places.geometry.location.lng();
......
src/styles.scss
......@@ -48,6 +48,12 @@
padding:0px !important;
}
.text_truncate{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
button {
cursor: pointer;
&:focus {
......
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