Skip to content

D
dcarfixers_angular
Commit e27cded7 by Tobin
Options

Merge branch 'jensa' into 'master'

Jensa See merge request !13
parents 67c0e81b 3f1d8e29
Showing with 384 additions and 418 deletions
src/app/home/dashboard/dashboard.component.html
...@@ -492,33 +492,40 @@ ...@@ -492,33 +492,40 @@
<input class="search" placeholder="Search Services" (keyup)="searchIssues($event)"> <input class="search" placeholder="Search Services" (keyup)="searchIssues($event)">
</div> </div>
</div> </div>
<div class="row"> <p *ngIf="!issuesData">No Record Found</p>
<div class="col-md-12"> <!-- service-tabs-->
<div class="service_methods"> <div class="service_tab_inner" *ngIf="issuesData">
<p *ngIf="!issuesData; else listIssues">No Record Found</p> <div class="row">
<ng-template #listIssues> <div class="col col-6">
<ul> <div class="arrow_btn up_arrow" (click)="scrollToTop('issue_cntr')"></div>
<div *ngFor="let issue_data of issuesData"> <ul class="nav services_tab" id="issue_cntr">
<li data-toggle="collapse" [attr.data-target]="'#issue_' + issue_data.issue_id">{{issue_data.issue}}</li> <li class="nav-item" *ngFor="let issue_data of issuesData; let i = index;">
<div class="service_list collapse" [attr.id]="'issue_' + issue_data.issue_id"> <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>
<ul> </li>
<li *ngFor="let sub_issue_data of issue_data.sub_categories"> </ul>
<button id="custom_check_button"> <div class="arrow_btn down_arrow" (click)="scrollToBottom('issue_cntr')"></div>
<label> </div>
<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)"> <div class="col col-6">
<p>{{sub_issue_data.issue_category}}</p> <div class="arrow_btn"></div>
</label> <div class="tab-content backgroundColor">
</button> <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">
</li> <ul malihu-scrollbar [scrollbarOptions]="scrollbarOptions" [attr.id]="'sub_issue_cntr_'+issue_data.issue_id">
</ul> <li *ngFor="let sub_issue_data of issue_data.sub_categories">
</div> <button id="custom_check_button">
</div> <label>
</ul> <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)">
</ng-template> <p>{{sub_issue_data.issue_category}}</p>
</label>
</button>
</li>
</ul>
</div>
</div>
<div class="arrow_btn"></div>
</div> </div>
</div> </div>
</div> </div>
<br>
<div class="row"> <div class="row">
<div class="col-md-12"> <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> <button [ngClass]="{'log_btn_diabled':selectedIssues.length == 0}" class="log_btn next_btn floatRight" type="button" (click)="jumpToStep3()">NEXT</button>
...@@ -579,7 +586,10 @@ ...@@ -579,7 +586,10 @@
<h3>SUMMARY</h3> <h3>SUMMARY</h3>
<div class="row"> <div class="row">
<div class="col-md-12"> <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> </div>
<div class="row"> <div class="row">
...@@ -587,18 +597,24 @@ ...@@ -587,18 +597,24 @@
<div class="selected_services"> <div class="selected_services">
<ul> <ul>
<li *ngFor="let selIssue of selectedIssues">{{selIssue.issue_category}}<a (click)="removeSelectedItem(selIssue.issue_id,selIssue.sub_issue_id)">&times;</a></li> <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> </ul>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<h6 class="pt10 textLeft"><a goToStep="0">Add more services</a></h6> <div class="wizard_subhead">
<input #goTostep1 type="hidden" goToStep="0"> Location
</div>
</div> </div>
</div> </div>
<div class="row"> <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>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
......
src/app/home/dashboard/dashboard.component.scss
...@@ -82,7 +82,16 @@ ...@@ -82,7 +82,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 { .dashboard_tab_content {
padding-bottom: 80px; padding-bottom: 80px;
table { table {
...@@ -615,11 +624,11 @@ ...@@ -615,11 +624,11 @@
text-align: center; text-align: center;
width: 100%; width: 100%;
height: 45px; height: 45px;
border-radius: 20px; border-radius: 10px;
-webkit-border-radius: 20px; -webkit-border-radius: 10px;
-moz-border-radius: 20px; -moz-border-radius: 10px;
-ms-border-radius: 20px; -ms-border-radius: 10px;
-o-border-radius: 20px; -o-border-radius: 10px;
border: none; border: none;
font-size: 20px; font-size: 20px;
font-weight: 300; font-weight: 300;
...@@ -642,16 +651,154 @@ ...@@ -642,16 +651,154 @@
background-repeat: no-repeat; background-repeat: no-repeat;
padding-right: 50px; 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 { input {
border: 1px solid #1e1e1e; border: 1px solid #1e1e1e;
height: 40px; height: 40px;
width: 100%; width: 100%;
border-radius: 25px; border-radius: 10px;
padding-left: 15px; padding-left: 15px;
-webkit-border-radius: 25px; -webkit-border-radius:10px;
-moz-border-radius: 25px; -moz-border-radius: 10px;
-ms-border-radius: 25px; -ms-border-radius: 10px;
-o-border-radius: 25px; -o-border-radius: 10px;
text-align: left; text-align: left;
font-size: 16px; font-size: 16px;
&::placeholder { &::placeholder {
...@@ -667,11 +814,11 @@ ...@@ -667,11 +814,11 @@
height: 40px; height: 40px;
width: 100%; width: 100%;
padding-left: 15px; padding-left: 15px;
border-radius: 25px; border-radius: 10px;
-webkit-border-radius: 25px; -webkit-border-radius: 10px;
-moz-border-radius: 25px; -moz-border-radius: 10px;
-ms-border-radius: 25px; -ms-border-radius: 10px;
-o-border-radius: 25px; -o-border-radius: 10px;
text-align: center; text-align: center;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
...@@ -720,7 +867,7 @@ ...@@ -720,7 +867,7 @@
height: 40px; height: 40px;
width: 48%; width: 48%;
display: inline-block; display: inline-block;
border-radius: 25px; border-radius: 10px;
color: #2655bf; color: #2655bf;
border: 2px solid #2655bf; border: 2px solid #2655bf;
background: transparent; background: transparent;
...@@ -738,7 +885,7 @@ ...@@ -738,7 +885,7 @@
width: 48%; width: 48%;
margin: 3px; margin: 3px;
display: inline-block; display: inline-block;
border-radius: 25px; border-radius: 10px;
color: #fff; color: #fff;
border: 2px solid #2655bf; border: 2px solid #2655bf;
background: #2655bf; background: #2655bf;
......
src/app/home/dashboard/dashboard.component.ts
...@@ -98,6 +98,8 @@ export class DashboardComponent implements OnInit { ...@@ -98,6 +98,8 @@ export class DashboardComponent implements OnInit {
@ViewChild("serviceHistoryTab") public serviceHistoryTabRef: ElementRef; @ViewChild("serviceHistoryTab") public serviceHistoryTabRef: ElementRef;
@ViewChild("closeVehicleAddForm") public closeVehicleAddFormRef: ElementRef; @ViewChild("closeVehicleAddForm") public closeVehicleAddFormRef: ElementRef;
public scrollbarOptions = { axis: 'y', theme: 'minimal-dark' };
constructor(private router : Router, constructor(private router : Router,
public ngZone : NgZone, public ngZone : NgZone,
private route : ActivatedRoute, private route : ActivatedRoute,
...@@ -257,6 +259,7 @@ export class DashboardComponent implements OnInit { ...@@ -257,6 +259,7 @@ export class DashboardComponent implements OnInit {
} }
}); });
} }
console.log(thisObj.selectedIssues);
this.calculateEstimate(); this.calculateEstimate();
} }
...@@ -547,14 +550,22 @@ export class DashboardComponent implements OnInit { ...@@ -547,14 +550,22 @@ export class DashboardComponent implements OnInit {
this.issuesData = this.defIssuesData; this.issuesData = this.defIssuesData;
} else { } else {
const thisObj = this; const thisObj = this;
let subCatArr: any;
let data: any[] = new Array(); let data: any[] = new Array();
let serRegExp = new RegExp(event.target.value,"gi"); let serRegExp = new RegExp(event.target.value,"gi");
thisObj.defIssuesData.forEach(function (issues,index) { thisObj.defIssuesData.forEach(function (issues,index) {
let issueCat = issues.issue; let issueCat = issues.issue;
if(issueCat.search(serRegExp) != -1){ if(issueCat.search(serRegExp) != -1){
data.push(thisObj.defIssuesData[index]); 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; this.issuesData = (data.length > 0)?data:false;
...@@ -758,6 +769,10 @@ export class DashboardComponent implements OnInit { ...@@ -758,6 +769,10 @@ export class DashboardComponent implements OnInit {
this.optionalDescription = ''; this.optionalDescription = '';
} }
scrollToTop(id){
$('#'+id).stop().animate({scrollTop: 0}, 800);
}
scrollToBottom(id){ scrollToBottom(id){
$('#'+id).stop().animate({scrollTop: $('#'+id)[0].scrollHeight}, 1500); $('#'+id).stop().animate({scrollTop: $('#'+id)[0].scrollHeight}, 1500);
} }
......
src/app/home/index/index.component.html
...@@ -64,8 +64,8 @@ ...@@ -64,8 +64,8 @@
<h4>Diagnosis Trouble Codes</h4> <h4>Diagnosis Trouble Codes</h4>
<p>Find out what your code really means and what you can expect to pay.</p> <p>Find out what your code really means and what you can expect to pay.</p>
<button class="learn_more"> <button class="learn_more">
GO GO
</button> </button>
</div> </div>
<div class="col-md-2"></div> <div class="col-md-2"></div>
<div class="col-md-2 textCenter p0"> <div class="col-md-2 textCenter p0">
...@@ -73,8 +73,8 @@ ...@@ -73,8 +73,8 @@
<h4>Parts and Replacement</h4> <h4>Parts and Replacement</h4>
<p>Review causes, symptoms, and estimate repair costs.</p> <p>Review causes, symptoms, and estimate repair costs.</p>
<button class="learn_more"> <button class="learn_more">
GO GO
</button> </button>
</div> </div>
<div class="col-md-2"></div> <div class="col-md-2"></div>
<div class="col-md-2 textCenter p0"> <div class="col-md-2 textCenter p0">
...@@ -82,8 +82,8 @@ ...@@ -82,8 +82,8 @@
<h4>Maintenance Schedules</h4> <h4>Maintenance Schedules</h4>
<p>Need to schedule a maintenance check? You’re in the right place.</p> <p>Need to schedule a maintenance check? You’re in the right place.</p>
<button class="learn_more"> <button class="learn_more">
GO GO
</button> </button>
</div> </div>
<div class="col-md-1"></div> <div class="col-md-1"></div>
</div> </div>
...@@ -228,7 +228,7 @@ ...@@ -228,7 +228,7 @@
<img src="assets/images/asset_j6.png"> <img src="assets/images/asset_j6.png">
</div> </div>
</ngx-tile> </ngx-tile>
<button NgxCarouselPrev class='leftRs'>&lt;</button> <button NgxCarouselPrev class='leftRs'>&lt;</button>
<button NgxCarouselNext class='rightRs'>&gt;</button> <button NgxCarouselNext class='rightRs'>&gt;</button>
</ngx-carousel> </ngx-carousel>
...@@ -316,266 +316,41 @@ ...@@ -316,266 +316,41 @@
<input class="search" placeholder="Search Services" (keyup)="searchIssues($event)"> <input class="search" placeholder="Search Services" (keyup)="searchIssues($event)">
</div> </div>
</div> </div>
<p *ngIf="!issuesData">No Record Found</p>
<!-- service-tabs--> <!-- service-tabs-->
<div class="service_tab_inner"> <div class="service_tab_inner" *ngIf="issuesData">
<div class="row"> <div class="row">
<div class="col"> <div class="col col-6">
<div class="arrow_btn up_arrow"> <div class="arrow_btn up_arrow" (click)="scrollToTop('issue_cntr')"></div>
<ul class="nav services_tab" id="issue_cntr">
</div> <li class="nav-item" *ngFor="let issue_data of issuesData; let i = index;">
<ul class="nav services_tab"> <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 class="nav-item"> </li>
<a class="nav-link active" data-toggle="pill" href="#service1"><img src="../../../assets/images/default.png">Service 1</a> </ul>
</li> <div class="arrow_btn down_arrow" (click)="scrollToBottom('issue_cntr')"></div>
<li class="nav-item"> </div>
<a class="nav-link" data-toggle="pill" href="#service2"><img src="../../../assets/images/default.png">Service 2</a> <div class="col col-6">
</li> <div class="arrow_btn"></div>
<li class="nav-item"> <div class="tab-content backgroundColor">
<a class="nav-link" data-toggle="pill" href="#service3"><img src="../../../assets/images/default.png">Service 3</a> <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">
</li> <ul malihu-scrollbar [scrollbarOptions]="scrollbarOptions" [attr.id]="'sub_issue_cntr_'+issue_data.issue_id">
<li class="nav-item"> <li *ngFor="let sub_issue_data of issue_data.sub_categories">
<a class="nav-link " data-toggle="pill" href="#service4"><img src="../../../assets/images/default.png">Service 1</a> <button id="custom_check_button">
</li> <label>
<li class="nav-item"> <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)">
<a class="nav-link" data-toggle="pill" href="#service5"><img src="../../../assets/images/default.png">Service 2</a> <p>{{sub_issue_data.issue_category}}</p>
</li> </label>
<li class="nav-item"> </button>
<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>
</li> </li>
</ul> </ul>
<div class="arrow_btn down_arrow">
</div>
</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> <div class="arrow_btn"></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> </div>
</div> </div>
</div> </div>
<br>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<button class="log_btn prev_btn floatLeft" type="button" previousStep>PREVIOUS</button> <button class="log_btn prev_btn floatLeft" type="button" previousStep>PREVIOUS</button>
...@@ -631,7 +406,7 @@ ...@@ -631,7 +406,7 @@
</div> </div>
</div> </div>
</wizard-step> </wizard-step>
<wizard-step stepTitle="Title of step 4"> <wizard-step stepTitle="Title of step 4">
<h3>SUMMARY</h3> <h3>SUMMARY</h3>
<div class="row"> <div class="row">
...@@ -646,20 +421,20 @@ ...@@ -646,20 +421,20 @@
<div class="selected_services"> <div class="selected_services">
<ul> <ul>
<li *ngFor="let selIssue of selectedIssues">{{selIssue.issue_category}}<a (click)="removeSelectedItem(selIssue.issue_id,selIssue.sub_issue_id)">&times;</a></li> <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> <a goToStep="1"><li class="add_more_services">Add more Services</li></a>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="wizard_subhead"> <div class="wizard_subhead">
Location Location
</div>
</div> </div>
</div> </div>
</div>
<div class="row"> <div class="row">
<div class="col-md-12"> <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:''"> <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 @@ ...@@ -712,56 +487,56 @@
<h4>Car Fixxers Guarantee</h4> <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 <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> handle any repair related questions Peace-of-Mind Guarantee - no unexpected charges</p>
</div> </div>
<div class="quote_schedule_header"> <div class="quote_schedule_header">
<div class="row"> <div class="row">
<div class="col-md-6 pr0"> <div class="col-md-6 pr0">
<h4>Select your day and date</h4> <h4>Select your day and date</h4>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<button [ngClass]="{'invisible': !showLeftArrow}" 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"> <div class="schedule_dates floatLeft">
<ul> <ul>
<li>{{ dateSection[0] | date:'MMM dd-MM-yyyy' }}</li> <li>{{ dateSection[0] | date:'MMM dd-MM-yyyy' }}</li>
<li>{{ dateSection[1] | date:'MMM dd-MM-yyyy' }}</li> <li>{{ dateSection[1] | date:'MMM dd-MM-yyyy' }}</li>
</ul> </ul>
</div>
<button [ngClass]="{'invisible': !showRightArrow}" class="quote_arrow right floatRight" (click)="next($event)"></button>
<div class="clear"></div>
</div> </div>
<button [ngClass]="{'invisible': !showRightArrow}" class="quote_arrow right floatRight" (click)="next($event)"></button>
<div class="clear"></div>
</div> </div>
</div> </div>
</div> <div class="quote_schedule_list">
<div class="quote_schedule_list"> <ul malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
<ul malihu-scrollbar [scrollbarOptions]="scrollbarOptions"> <li *ngFor="let mechanic of mechanicData">
<li *ngFor="let mechanic of mechanicData"> <div class="row">
<div class="row"> <div class="col-md-6 pr0">
<div class="col-md-6 pr0"> <div class="mechanic_profile">
<div class="mechanic_profile"> <div class="mechanic_profile_inner">
<div class="mechanic_profile_inner"> <div class="mechanic_photo_wrapper">
<div class="mechanic_photo_wrapper"> <div class="mechanic_photo">
<div class="mechanic_photo"> <img src="{{imageServer + mechanic.profile_image}}" onerror="this.src='assets/images/user_avatar.jpg'">
<img src="{{imageServer + mechanic.profile_image}}" onerror="this.src='assets/images/user_avatar.jpg'"> </div>
</div> <div class="mechanic_ratting">
<div class="mechanic_ratting"> <p>4 Ratings</p>
<p>4 Ratings</p> <h6>6 Reviews</h6>
<h6>6 Reviews</h6> </div>
</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> </div>
<ng-template #mechanicDetails> <div class="mechanic_detail">
<p>{{mechanic.address}}<br>{{mechanic.city+' , '+mechanic.state}}</p> <h4>{{mechanic.display_name}}</h4>
<h6>{{mechanic.phone}}</h6> <div *ngIf="mechanic.shop_id != 0; else mechanicDetails">
<p>{{mechanic.distance | number:'1.2-2' }}</p> <h5>{{mechanic.shop_name}}</h5>
</ng-template> <p>{{mechanic.shop_address}}</p>
<button (click)="scheduleNow(mechanic.mechanic_id,mechanic.estimate)" [ngClass]="{'book_now':scheduleDateInit == true && scheduleMechanic == mechanic.mechanic_id, <h6>{{mechanic.shop_phone}}</h6>
'book_now_disabled':scheduleDateInit == false || (scheduleDateInit == true && scheduleMechanic != mechanic.mechanic_id)}"> <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' }} {{loginDetails ? 'Book now' : 'Login and Continue' }}
</button> </button>
</div> </div>
...@@ -797,58 +572,59 @@ ...@@ -797,58 +572,59 @@
<div class="col-md-6"> <div class="col-md-6">
<div class="scheduletiming_listing"> <div class="scheduletiming_listing">
<!-- <ul id="scroll_0_{{mechanic.mechanic_id}}" malihu-scrollbar [scrollbarOptions]="scrollbarOptions"> --> <!-- <ul id="scroll_0_{{mechanic.mechanic_id}}" malihu-scrollbar [scrollbarOptions]="scrollbarOptions"> -->
<ul id="scroll_0_{{mechanic.id}}"> <ul id="scroll_0_{{mechanic.id}}">
<li *ngFor="let time of mechanic.scheduleTiming" id="custom_check_button"> <li *ngFor="let time of mechanic.scheduleTiming" id="custom_check_button">
<label> <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"> scheduleDateInit = true; scheduleMechanic = mechanic.mechanic_id">
<p>{{time}}</p> <p>{{time}}</p>
</label> </label>
</li> </li>
</ul> </ul>
<ul id="scroll_1_{{mechanic.id}}"> <ul id="scroll_1_{{mechanic.id}}">
<li *ngFor="let time of mechanic.scheduleTiming" id="custom_check_button"> <li *ngFor="let time of mechanic.scheduleTiming" id="custom_check_button">
<label> <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"> scheduleDateInit = true; scheduleMechanic = mechanic.mechanic_id">
<p>{{time}}</p> <p>{{time}}</p>
</label> </label>
</li> </li>
</ul> </ul>
</div> </div>
<div class="scheduletiming_btm_btns"> <div class="scheduletiming_btm_btns">
<div class="btm_btns" (click)="scrollToBottom('scroll_0_'+mechanic.id)"></div> <div class="btm_btns" (click)="scrollToBottom('scroll_0_'+mechanic.id)"></div>
<div class="btm_btns" (click)="scrollToBottom('scroll_1_'+mechanic.id)"></div> <div class="btm_btns" (click)="scrollToBottom('scroll_1_'+mechanic.id)"></div>
</div>
</div> </div>
</div> </div>
</div> </li>
</li> </ul>
</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>
</div> </div>
<div class="clear"></div>
<p>Estimated Price : <strong>{{estimatedPrice}}</strong></p>
<div class="clear"></div>
</div> </div>
<div class="service_map"> <div class="col-md-4">
<agm-map #gm [latitude]="lat" [longitude]="lng" [fitBounds]="true"> <div class="service_list">
<agm-marker *ngFor="let mechanicLoc of mechanicData" [agmFitBounds]="true" [latitude]="mechanicLoc.location_lat" [longitude]="mechanicLoc.location_lat" (mouseOver)="onMouseOver(infoWindow,gm)" (mouseOut)="onMouseOut(gm)"> <h4>Services</h4>
<agm-info-window [disableAutoPan]="false" #infoWindow> <div *ngFor="let selIssue of selectedIssues; let key = index">
<div style="width:130px;"> <p *ngIf="key != 0">|</p>
<img src="{{imageServer + mechanicLoc.profile_image}}" width="30px" height="30px" style="float: left;margin-right: 5px" onerror="this.src='assets/images/user_avatar.jpg'"> <p>{{selIssue.issue_category}}</p>
<div style="float: left">{{mechanicLoc.display_name}}</div><br> </div>
<div style="float: left">{{mechanicLoc.estimate}}</div> <div class="clear"></div>
</div> <p>Estimated Price : <strong>{{estimatedPrice}}</strong></p>
</agm-info-window> <div class="clear"></div>
</agm-marker> </div>
</agm-map> <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> </div>
</div> </div>
...@@ -856,6 +632,5 @@ ...@@ -856,6 +632,5 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- QUOTES-MODAL-ENDS-->
<!-- QUOTES-MODAL-ENDS--> \ No newline at end of file
\ No newline at end of file
src/app/home/index/index.component.scss
...@@ -484,6 +484,7 @@ ...@@ -484,6 +484,7 @@
padding:8px; padding:8px;
padding-left:15px; padding-left:15px;
border-radius: 8px; border-radius: 8px;
padding-right: 35px !important;
color: #272a31; color: #272a31;
background-image: url("../../../assets/images/asset_arrow.png"); background-image: url("../../../assets/images/asset_arrow.png");
background-size: 17px; background-size: 17px;
...@@ -503,6 +504,9 @@ ...@@ -503,6 +504,9 @@
} }
} }
} }
.backgroundColor{
background: #f2f2f275;
}
.tab-content{ .tab-content{
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
...@@ -770,6 +774,7 @@ ...@@ -770,6 +774,7 @@
padding: 5px; padding: 5px;
margin-bottom: 10px; margin-bottom: 10px;
padding-left: 15px; padding-left: 15px;
background-image: url("/assets/images/asset_down_time_arrow.png"); background-image: url("/assets/images/asset_down_time_arrow.png");
background-position: right 5px top 2px; background-position: right 5px top 2px;
background-repeat: no-repeat; background-repeat: no-repeat;
......
src/app/home/index/index.component.ts
...@@ -107,9 +107,6 @@ export class IndexComponent implements OnInit { ...@@ -107,9 +107,6 @@ export class IndexComponent implements OnInit {
} }
ngOnInit() { ngOnInit() {
// this.wizardModalTrrigerInput.nativeElement.click();
this.vehicleDataForm = new FormGroup({ this.vehicleDataForm = new FormGroup({
trim: new FormControl(''), milage: new FormControl(''), emgine: new FormControl(''), trim: new FormControl(''), milage: new FormControl(''), emgine: new FormControl(''),
last_date: new FormControl(''), last_date: new FormControl(''),
...@@ -222,14 +219,22 @@ export class IndexComponent implements OnInit { ...@@ -222,14 +219,22 @@ export class IndexComponent implements OnInit {
this.issuesData = this.defIssuesData; this.issuesData = this.defIssuesData;
} else { } else {
const thisObj = this; const thisObj = this;
let subCatArr: any;
let data: any[] = new Array(); let data: any[] = new Array();
let serRegExp = new RegExp(event.target.value,"gi"); let serRegExp = new RegExp(event.target.value,"gi");
thisObj.defIssuesData.forEach(function (issues,index) { thisObj.defIssuesData.forEach(function (issues,index) {
let issueCat = issues.issue; let issueCat = issues.issue;
if(issueCat.search(serRegExp) != -1){ if(issueCat.search(serRegExp) != -1){
data.push(thisObj.defIssuesData[index]); 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; this.issuesData = (data.length > 0)?data:false;
...@@ -243,10 +248,8 @@ export class IndexComponent implements OnInit { ...@@ -243,10 +248,8 @@ export class IndexComponent implements OnInit {
} }
get_newlocaion(lastLoc){ get_newlocaion(lastLoc){
this.cfautocomplete.addListener("place_changed", () => { this.cfautocomplete.addListener("place_changed", () => {
console.log('ffdf');
this.ngZone.run(() => { this.ngZone.run(() => {
let places: google.maps.places.PlaceResult = this.cfautocomplete.getPlace(); let places: google.maps.places.PlaceResult = this.cfautocomplete.getPlace();
console.log(places);
if (places == undefined || places == null || places === undefined || places === null || if (places == undefined || places == null || places === undefined || places === null ||
places.geometry == undefined || places.geometry == null || places.geometry === undefined || places.geometry === 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) { 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 { ...@@ -259,7 +262,6 @@ export class IndexComponent implements OnInit {
'pickup_lat':places.geometry.location.lat(), 'pickup_lat':places.geometry.location.lat(),
'pickup_lng':places.geometry.location.lng() 'pickup_lng':places.geometry.location.lng()
}; };
console.log(this.wizardData);
this.addresssearchLocError = false; this.addresssearchLocError = false;
this.lat = places.geometry.location.lat(); this.lat = places.geometry.location.lat();
this.lng = places.geometry.location.lng(); this.lng = places.geometry.location.lng();
......
src/styles.scss
...@@ -48,6 +48,12 @@ ...@@ -48,6 +48,12 @@
padding:0px !important; padding:0px !important;
} }
.text_truncate{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
button { button {
cursor: pointer; cursor: pointer;
&:focus { &: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