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