Skip to content

D
dcarfixers_angular
Commit 812e4049 by Tobin
Options

daily commit

parent 3789defa
Showing with 158 additions and 144 deletions
src/app/home/index/index.component.html
......@@ -243,7 +243,7 @@
<div class="modal" id="wizard">
<div class="modal-dialog modal-full">
<div class="modal-content login_modal_wrapper">
<div class="modal_close" data-dismiss="modal">
<div class="modal_close" data-dismiss="modal" (click)="resetWizard()">
&times;
</div>
<div class="modal-body">
......@@ -256,22 +256,25 @@
<h3>VEHICLE INFORMATION</h3>
<div class="row">
<div class="col-md-6">
<select formControlName="modelYear">
<option>YEAR</option>
<select formControlName="modelYear"
[ngClass]="{'input_error': !vehicleDataForm.controls['modelYear'].valid && vehicleDataFormSubmit}">
<option value="" disabled selected>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">
<option>MAKE</option>
<select (change)="get_model($event.target.value)" formControlName="maker"
[ngClass]="{'input_error': !vehicleDataForm.controls['maker'].valid && vehicleDataFormSubmit}">
<option value="" disabled selected>MAKE</option>
<option *ngFor="let car_date of carSearchJsonData; let key = index" value="{{key}}">{{car_date.brand}}</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6" >
<select formControlName="modelName">
<option *ngIf="!carModel">MODEL</option>
<select formControlName="modelName"
[ngClass]="{'input_error': !vehicleDataForm.controls['modelName'].valid && vehicleDataFormSubmit}">
<option value="" disabled selected>MODEL</option>
<option *ngFor="let car_models of carModel">{{car_models}}</option>
</select>
</div>
......@@ -296,10 +299,8 @@
<div class="row">
<div class="col-md-12">
<button class="log_btn prev_btn floatLeft" type="button" data-dismiss="modal">PREVIOUS</button>
<button type="submit" class="log_btn next_btn floatRight">
NEXT
</button>
<!-- nextStep -->
<button type="submit" class="log_btn next_btn floatRight">NEXT</button>
<input #step2nextBtn type="hidden" nextStep>
</div>
</div>
</form>
......@@ -313,77 +314,24 @@
</div>
<div class="row">
<div class="col-md-12">
<h6 class="pt10 textLeft">Or Select your Services</h6>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="service_list">
<div class="service_methods">
<ul>
<li>
<button id="custom_check_button">
<label>
<input id="1" type="checkbox" name="services" value="A">
<p>Diagnosis</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="1" type="checkbox" name="services" value="A">
<p>Ac / Heating</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="1" type="checkbox" name="services" value="A">
<p>Brakes</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="1" type="checkbox" name="services" value="A">
<p>Engine</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="1" type="checkbox" name="services" value="A">
<p>EXHAUST</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="1" type="checkbox" name="services" value="A">
<p>FLUIDS</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="1" type="checkbox" name="services" value="A">
<p>TIRES</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="1" type="checkbox" name="services" value="A">
<p>TRANSMISSION</p>
</label>
</button>
</li>
<!-- <div *ngFor="let issue_data of issuesData; let issue_id = index">
{{issue_data}}
<li data-toggle="collapse" data-target="#issue_{{issue_id}}">{{issue_data.issue_id}}</li>
<div class="service_list collapse" id="issue_{{issue_id}}">
<ul>
<li *ngFor="let sub_issue_data of issue_data.sub_categories; let subIssueId = index">
<button id="custom_check_button">
<label>
<input id="{{subIssueId}}" type="checkbox" name="services" value="{{subIssueId}}">
<p>{{sub_issue_data.issue_category}}</p>
</label>
</button>
</li>
</ul>
</div>
</div> -->
</ul>
</div>
</div>
......@@ -457,7 +405,7 @@
</div>
<div class="row">
<div class="col-md-12 textCenter">
<button *ngIf="!loginDetails" (click)="resetForm()" class="wizard_signin" type="button" data-dismiss="modal" data-toggle="modal" data-target="#login">SIGN IN</button>
<button *ngIf="!loginDetails" (click)="resetForm()" class="wizard_signin" type="button" data-toggle="modal" data-target="#login">SIGN IN</button>
<button class="wizard_quotes" type="button" data-toggle="modal" data-target="#quotes">VIEW SERVICE QUOTE</button>
</div>
</div>
......
src/app/home/index/index.component.scss
......@@ -537,63 +537,91 @@
.wizard_inner {
width: 100%;
.service_list {
ul {
padding: 0px;
margin: 0px;
li {
.service_methods{
max-height: 200px;
overflow: scroll;
ul{
padding:0px;
margin:0px;
li{
list-style: none;
display: inline-block;
position: relative;
min-width: 150px;
margin: 3px;
#custom_check_button {
margin: 4px;
background-color: #fff;
border-radius: 25px !important;
overflow: auto;
color: #1e1e1e;
border: 1px solid #e7e7e7;
position: relative;
height: 30px;
outline: none;
width: 100%;
}
#custom_check_button p {
margin: 0px;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
padding: 2px;
color: #1e1e1e;
text-transform: uppercase;
}
#custom_check_button label {
width: 100%;
margin: 0px;
}
#custom_check_button label span {
text-align: center;
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: #58b19f;
color: #fff;
border-radius: 25px !important;
width: 100%;
color: #060708;
border:1px dashed #929292;
cursor: pointer;
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;
background-size: 30px;
}
.service_list {
ul {
padding: 0px;
margin: 0px;
padding-top: 0px;
li {
list-style: none;
display: inline-block;
position: relative;
min-width: 100%;
margin: 0px;
padding: 0px;
border:none;
background-image: none;
margin-bottom: 5px;
#custom_check_button {
margin: 0px;
background-color: #fff;
border-radius: 0px !important;
overflow: auto;
color: #1e1e1e;
border: 1px solid #e7e7e7;
position: relative;
height: 30px;
outline: none;
width: 100%;
}
#custom_check_button p {
margin: 0px;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
padding: 2px;
color: #1e1e1e;
text-transform: uppercase;
}
#custom_check_button label {
width: 100%;
margin: 0px;
}
#custom_check_button label span {
text-align: center;
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: #58b19f;
color: #fff;
border-radius:0px !important;
margin: 0px;
}
}
}
}
}
}
.textarea_input {
width: 100%;
border: 1px solid #1e1e1e;
......
src/app/home/index/index.component.ts
import { Component, OnInit, NgZone, ViewChild, ElementRef } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { WebService } from '../../provider/web.service';
import { NgxCarousel } from 'ngx-carousel';
import { MapsAPILoader } from '@agm/core';
......@@ -29,31 +30,37 @@ export class IndexComponent implements OnInit {
//Basic Location Search: TAB 1
autocomplete: any;
searchLocError: boolean;
@ViewChild("step2nextBtn") public step2nextRef: ElementRef;
@ViewChild("googleLocSearch") public searchElementRef: ElementRef;
//Vehicle Details: TAB 2
vehicleDataForm;
vehicleDataFormSubmit;
//Service Details: TAB 3
loader: boolean;
issuesData: any;
carModel: any;
carSearchJsonData: any;
modelDates: number[] = new Array();
constructor(
private router : Router,
public ngZone : NgZone,
public webService : WebService,
public mapsAPILoader : MapsAPILoader,
public subjectService : SubjectService,) {
this.loginDetails = false;
this.searchLocError = false;
this.vehicleDataFormSubmit = false;
}
ngOnInit() {
this.vehicleDataForm = new FormGroup({
trim: new FormControl('', [Validators.required]),
maker: new FormControl('', [Validators.required]),
milage: new FormControl('', [Validators.required]),
emgine: new FormControl('', [Validators.required]),
modelYear: new FormControl('', [Validators.required]),
trim: new FormControl(''), milage: new FormControl(''), emgine: new FormControl(''),
maker: new FormControl('', [Validators.required]),
modelYear: new FormControl('', [Validators.required]),
modelName: new FormControl('', [Validators.required])
});
......@@ -63,7 +70,7 @@ export class IndexComponent implements OnInit {
let currentYear = Number((new Date()).getFullYear());
let startingYear = currentYear - 50;
for (let date = startingYear ; date <= currentYear ; date ++) {
for (let date = currentYear ; date >= startingYear ; date --) {
this.modelDates.push(date);
}
......@@ -76,7 +83,7 @@ export class IndexComponent implements OnInit {
types: ["address"]
});
});
this.featuredOn = {grid: {xs: 1, sm: 2 , md: 5, lg: 6, all: 0},slide: 1, speed: 400, animation: 'lazy',point: { visible: false },load: 2, touch: true, easing: 'ease'}
this.carouselTile = {grid: {xs: 1, sm: 2 , md: 3, lg: 3, all: 0},slide: 1, speed: 400, animation: 'lazy',point: { visible: false },load: 2, touch: true, easing: 'ease'}
}
......@@ -111,7 +118,38 @@ export class IndexComponent implements OnInit {
}
getVehicleData(vehicleData){
console.log(vehicleData);
if(this.vehicleDataForm.invalid){
this.vehicleDataFormSubmit = true;
return false;
}
this.wizardData['vechile_info'] = {'trim':vehicleData['trim'],'maker':this.carSearchJsonData[vehicleData['maker']]['brand'],
'milage':vehicleData['milage'],'emgine':vehicleData['emgine'],
'modelName':vehicleData['modelName'],'modelYear':vehicleData['modelYear']
}
this.getIssueData();
this.vehicleDataFormSubmit = false;
this.step2nextRef.nativeElement.click();
}
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;
console.log(this.issuesData);
} else {
this.router.navigate(["index"]);
}
},error => {
this.router.navigate(["index"]);
});
}
resetWizard(){
this.vehicleDataForm.reset();
this.searchElementRef.nativeElement.value = '';
}
featuredOnLoad() {return ''; }
......
src/app/navbar/navbar.component.html
......@@ -65,7 +65,7 @@
<!-- SIGNUP-MODAL-STARTS-->
<div class="modal" id="signup">
<div class="modal" id="signup" style="z-index: 99999 !important;">
<div class="modal-dialog modal-full">
<div class="modal-content login_modal_wrapper">
<div #signupModal class="modal_close" data-dismiss="modal">
......@@ -191,7 +191,7 @@
<!-- LOGIN-MODAL-STARTS-->
<div class="modal" id="login">
<div class="modal" id="login" style="z-index: 99999 !important;">
<div class="modal-dialog modal-full">
<div class="modal-content login_modal_wrapper">
<div #loginModal class="modal_close" data-dismiss="modal" (click)="resetForm()">
......@@ -274,7 +274,7 @@
<!-- FORGOT-MODAL-STARTS-->
<div class="modal" id="forgot">
<div class="modal" id="forgot" style="z-index: 99999 !important;">
<div class="modal-dialog modal-full">
<div class="modal-content login_modal_wrapper">
<div class="modal_close" data-dismiss="modal">
......
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