Skip to content

D
dcarfixers_angular
Commit 3789defa by Tobin
Options

daily commit

parent 73d3cc08
Showing with 59 additions and 52 deletions
src/app/home/index/index.component.html
...@@ -252,55 +252,57 @@ ...@@ -252,55 +252,57 @@
<div class="wizard_inner"> <div class="wizard_inner">
<wizard> <wizard>
<wizard-step stepTitle="Title of step 1"> <wizard-step stepTitle="Title of step 1">
<h3>VEHICLE INFORMATION</h3> <form [formGroup]="vehicleDataForm" (ngSubmit)="getVehicleData(vehicleDataForm.value)">
<div class="row"> <h3>VEHICLE INFORMATION</h3>
<div class="col-md-6"> <div class="row">
<select #modelYear> <div class="col-md-6">
<option>YEAR</option> <select formControlName="modelYear">
<option *ngFor="let date of modelDates">{{date}}</option> <option>YEAR</option>
</select> <option *ngFor="let date of modelDates">{{date}}</option>
</div> </select>
<div class="col-md-6"> </div>
<select (change)="get_model($event.target.value)" #maker> <div class="col-md-6">
<option>MAKE</option> <select (change)="get_model($event.target.value)" formControlName="maker">
<option *ngFor="let car_date of carSearchJsonData; let key = index" value="{{key}}">{{car_date.brand}}</option> <option>MAKE</option>
</select> <option *ngFor="let car_date of carSearchJsonData; let key = index" value="{{key}}">{{car_date.brand}}</option>
</div> </select>
</div> </div>
<div class="row">
<div class="col-md-6" >
<select #modelName>
<option *ngIf="!carModel">MODEL</option>
<option *ngFor="let car_models of carModel">{{car_models}}</option>
</select>
</div>
<div class="col-md-6">
<input #milage placeholder="APPROX VEHICLE MILEAGE" type="">
</div> </div>
</div> <div class="row">
<h6 class="textLeft pb10">OPTIONAL</h6> <div class="col-md-6" >
<div class="row"> <select formControlName="modelName">
<div class="col-md-6"> <option *ngIf="!carModel">MODEL</option>
<input #emgine placeholder="ENGINE" type=""> <option *ngFor="let car_models of carModel">{{car_models}}</option>
</select>
</div>
<div class="col-md-6">
<input formControlName="milage" placeholder="APPROX VEHICLE MILEAGE" type="">
</div>
</div> </div>
<div class="col-md-6"> <h6 class="textLeft pb10">OPTIONAL</h6>
<input #trim placeholder="TRIM" type=""> <div class="row">
<div class="col-md-6">
<input formControlName="emgine" placeholder="ENGINE" type="">
</div>
<div class="col-md-6">
<input formControlName="trim" placeholder="TRIM" type="">
</div>
</div> </div>
</div> <div class="row">
<div class="row"> <div class="col-md-12">
<div class="col-md-12"> <h6 class="pt10 textLeft"><strong>Note:</strong> 'Engine' and 'Trim' are optional... but providing them will improve your results and allow you to select a mileage-based maintenance service for your vehicle.</h6>
<h6 class="pt10 textLeft"><strong>Note:</strong> 'Engine' and 'Trim' are optional... but providing them will improve your results and allow you to select a mileage-based maintenance service for your vehicle.</h6> </div>
</div> </div>
</div> <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 class="log_btn next_btn floatRight" type="button" (click)="nextStep2()"> NEXT
NEXT </button>
</button> <!-- nextStep -->
<!-- nextStep --> </div>
</div> </div>
</div> </form>
</wizard-step> </wizard-step>
<wizard-step stepTitle="Title of step 2" optionalStep> <wizard-step stepTitle="Title of step 2" optionalStep>
<h3>SERVICES</h3> <h3>SERVICES</h3>
......
src/app/home/index/index.component.ts
...@@ -3,6 +3,7 @@ import { WebService } from '../../provider/web.service'; ...@@ -3,6 +3,7 @@ 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';
import { SubjectService } from '../../provider/subject.service'; import { SubjectService } from '../../provider/subject.service';
import { FormGroup, FormControl, Validators, ValidationErrors } from '@angular/forms';
declare const google: any; declare const google: any;
...@@ -31,12 +32,7 @@ export class IndexComponent implements OnInit { ...@@ -31,12 +32,7 @@ export class IndexComponent implements OnInit {
@ViewChild("googleLocSearch") public searchElementRef: ElementRef; @ViewChild("googleLocSearch") public searchElementRef: ElementRef;
//Vehicle Details: TAB 2 //Vehicle Details: TAB 2
@ViewChild("trim") public trim: ElementRef; vehicleDataForm;
@ViewChild("maker") public maker: ElementRef;
@ViewChild("emgine") public emgine: ElementRef;
@ViewChild("milage") public milage: ElementRef;
@ViewChild("modelName") public modelName: ElementRef;
@ViewChild("modelYear") public modelYear: ElementRef;
carModel: any; carModel: any;
carSearchJsonData: any; carSearchJsonData: any;
...@@ -52,6 +48,15 @@ export class IndexComponent implements OnInit { ...@@ -52,6 +48,15 @@ export class IndexComponent implements OnInit {
} }
ngOnInit() { 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]),
modelName: new FormControl('', [Validators.required])
});
this.webService.get_stored_json('car-list.json').subscribe((response: any) => { this.webService.get_stored_json('car-list.json').subscribe((response: any) => {
this.carSearchJsonData = response; this.carSearchJsonData = response;
}); });
...@@ -105,8 +110,8 @@ export class IndexComponent implements OnInit { ...@@ -105,8 +110,8 @@ export class IndexComponent implements OnInit {
}); });
} }
nextStep2(){ getVehicleData(vehicleData){
console.log(this.trim.nativeElement.value+' '+this.maker+' '+this.emgine+' '+this.milage+' '+this.modelName+' '+this.modelYear); console.log(vehicleData);
} }
featuredOnLoad() {return ''; } featuredOnLoad() {return ''; }
......
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