Skip to content

D
dcarfixers_angular
Commit 3c213c45 by Jansa Jose
Options

dc

parent cc5934d6
Showing with 250 additions and 284 deletions
src/app/home/dashboard/dashboard.component.html
......@@ -486,16 +486,24 @@
<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" *ngIf="issuesData">
<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>
<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>
......@@ -507,12 +515,11 @@
</ul>
</div>
</div>
</ul>
</ng-template>
<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,19 +591,25 @@
<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">
<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">
<input placeholder="LAST MAINTENANCE DATE" type="" bsDatepicker name="dob" [ngModel]="" (ngModelChange)="get_newdate($event)">
......
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
......@@ -316,249 +316,25 @@
<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="service_tab_inner" *ngIf="issuesData">
<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>
</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>
<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="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>
<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>
......@@ -570,12 +346,11 @@
</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>
......@@ -856,6 +631,6 @@
</div>
</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