Skip to content

D
dcarfixers_angular
Commit 23d4475a by Tobin
Options

dc

parent 2e8a234a
Showing with 1935 additions and 476 deletions
src/app/home/dashboard/dashboard.component.html
...@@ -25,18 +25,13 @@ ...@@ -25,18 +25,13 @@
Service History Service History
</a> </a>
</li> </li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#" (click)="routeToIndex()">
&times;
</a>
</li>
</ul> </ul>
</div> </div>
</section> </section>
<section class="dashboard_tab_content"> <section class="dashboard_tab_content">
<div class="loader_overlay" *ngIf="loader"></div>
<div class="container-fluid"> <div class="container-fluid">
<div class="tab-content"> <div class="tab-content">
<div class="loader_overlay" *ngIf="loader"></div>
<div class="tab-pane container active" id="profile"> <div class="tab-pane container active" id="profile">
<form [formGroup]="editProfile" (ngSubmit)="submitProfileEdit(editProfile.value)"> <form [formGroup]="editProfile" (ngSubmit)="submitProfileEdit(editProfile.value)">
<div class="row"> <div class="row">
...@@ -51,8 +46,9 @@ ...@@ -51,8 +46,9 @@
<div class="col-md-12"> <div class="col-md-12">
<p>Profile Picture</p> <p>Profile Picture</p>
<div class="profile_pic"> <div class="profile_pic">
<img [src]="imageUrl" onerror="this.src='assets/images/user_default.jpg'">
<div class="edit"> <div class="edit">
<input type="file"> <input type="file" (change)="imageUpload($event)" accept="image/*">
</div> </div>
</div> </div>
</div> </div>
...@@ -130,9 +126,12 @@ ...@@ -130,9 +126,12 @@
</div> </div>
<div class="col-md-6"> </div> <div class="col-md-6"> </div>
</div> </div>
<div *ngIf="profileEditResp" class="s_alert line_row" [ngClass]="(profileEditResp.status == 'success') ? 'alert-success' : 'alert-danger'">
<strong>{{profileEditResp.message}}<br></strong>
</div>
<div class="row line_row"> <div class="row line_row">
<div class="col-md-12"> <div class="col-md-12">
<button type="submit" class="save_btn">Save</button> <button type="submit" class="save_btn" (click)="editProfileSubmitClick = true">Save</button>
</div> </div>
</div> </div>
</div> </div>
...@@ -159,159 +158,42 @@ ...@@ -159,159 +158,42 @@
<div class="col-md-12"> <div class="col-md-12">
<div class="vehicle_list"> <div class="vehicle_list">
<ul> <ul>
<li *ngIf="!vehDetails; else savedVechiles">NO DATA FOUND</li>
<li> <ng-template #savedVechiles>
<div class="car_photo"> <li *ngFor="let vehicle of vehDetails">
</div>
<div class="car_details">
<h5><strong>Mercedes Benz</strong>B Class B 180 Sport </h5>
<div class="row m0">
<div class="col-md-2 p0">Year</div>
<div class="col-md-1">:</div>
<div class="col-md-9 p0">2017</div>
</div>
<div class="row m0">
<div class="col-md-2 p0">Make</div>
<div class="col-md-1">:</div>
<div class="col-md-9 p0">Mercedes Benz</div>
</div>
<div class="row m0">
<div class="col-md-2 p0">Model</div>
<div class="col-md-1 ">:</div>
<div class="col-md-9 p0">B Class B 180 Sport</div>
</div>
<div class="row m0">
<div class="col-md-2 p0">Engine</div>
<div class="col-md-1">:</div>
<div class="col-md-9 p0">Blue Effiency 4 cylinder</div>
</div>
</div>
<div class="clear"></div>
<div class="button_bay">
<div class="btn-group-justified" role="group" aria-label="Basic example">
<button type="button" class="btn book btn-sm">Book Now</button>
<button type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#editvehicle">Edit</button>
<button type="button" class="btn btn-danger btn-sm">Delete</button>
</div>
</div>
</li>
<li>
<div class="car_photo">
</div>
<div class="car_details"> <div class="car_details">
<h5><strong>Mercedes Benz</strong>B Class B 180 Sport </h5> <h5><strong>{{ vehicle.car_maker | titlecase }}</strong>{{ vehicle.car_model | titlecase }}</h5>
<div class="row m0"> <div class="row">
<div class="col-md-2 p0">Year</div> <div class="col-md-3">Year</div>
<div class="col-md-1">:</div>
<div class="col-md-9 p0">2017</div>
</div>
<div class="row m0">
<div class="col-md-2 p0">Make</div>
<div class="col-md-1">:</div>
<div class="col-md-9 p0">Mercedes Benz</div>
</div>
<div class="row m0">
<div class="col-md-2 p0">Model</div>
<div class="col-md-1 ">:</div>
<div class="col-md-9 p0">B Class B 180 Sport</div>
</div>
<div class="row m0">
<div class="col-md-2 p0">Engine</div>
<div class="col-md-1">:</div>
<div class="col-md-9 p0">Blue Effiency 4 cylinder</div>
</div>
</div>
<div class="clear"></div>
<div class="button_bay">
<div class="btn-group-justified" role="group" aria-label="Basic example">
<button type="button" class="btn book btn-sm">Book Now</button>
<button type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#editvehicle">Edit</button>
<button type="button" class="btn btn-danger btn-sm">Delete</button>
</div>
</div>
</li>
<li>
<div class="car_photo">
</div>
<div class="car_details">
<h5><strong>Mercedes Benz</strong>B Class B 180 Sport </h5>
<div class="row m0">
<div class="col-md-2 p0">Year</div>
<div class="col-md-1">:</div> <div class="col-md-1">:</div>
<div class="col-md-9 p0">2017</div> <div class="col-md-7">{{ vehicle.car_model_year }}</div>
</div> </div>
<div class="row m0"> <div class="row">
<div class="col-md-2 p0">Make</div> <div class="col-md-3">Make</div>
<div class="col-md-1">:</div> <div class="col-md-1">:</div>
<div class="col-md-9 p0">Mercedes Benz</div> <div class="col-md-7">{{ vehicle.car_maker | titlecase }}</div>
</div> </div>
<div class="row m0"> <div class="row">
<div class="col-md-2 p0">Model</div> <div class="col-md-3">Model</div>
<div class="col-md-1 ">:</div> <div class="col-md-1 ">:</div>
<div class="col-md-9 p0">B Class B 180 Sport</div> <div class="col-md-7">{{ vehicle.car_model | titlecase }}</div>
</div>
<div class="row m0">
<div class="col-md-2 p0">Engine</div>
<div class="col-md-1">:</div>
<div class="col-md-9 p0">Blue Effiency 4 cylinder</div>
</div>
</div>
<div class="clear"></div>
<div class="button_bay">
<div class="btn-group-justified" role="group" aria-label="Basic example">
<button type="button" class="btn book btn-sm">Book Now</button>
<button type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#editvehicle">Edit</button>
<button type="button" class="btn btn-danger btn-sm">Delete</button>
</div> </div>
</div> <div class="row">
</li> <div class="col-md-3">Location</div>
<li>
<div class="car_photo">
</div>
<div class="car_details">
<h5><strong>Mercedes Benz</strong>B Class B 180 Sport </h5>
<div class="row m0">
<div class="col-md-2 p0">Year</div>
<div class="col-md-1">:</div>
<div class="col-md-9 p0">2017</div>
</div>
<div class="row m0">
<div class="col-md-2 p0">Make</div>
<div class="col-md-1">:</div>
<div class="col-md-9 p0">Mercedes Benz</div>
</div>
<div class="row m0">
<div class="col-md-2 p0">Model</div>
<div class="col-md-1 ">:</div> <div class="col-md-1 ">:</div>
<div class="col-md-9 p0">B Class B 180 Sport</div> <div class="col-md-7 text_truncate">{{ vehicle.car_location | titlecase }}</div>
</div> </div>
<div class="row m0">
<div class="col-md-2 p0">Engine</div>
<div class="col-md-1">:</div>
<div class="col-md-9 p0">Blue Effiency 4 cylinder</div>
</div>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
<div class="button_bay"> <div class="button_bay">
<div class="btn-group-justified" role="group" aria-label="Basic example"> <div class="btn-group-justified" role="group" aria-label="Basic example">
<button type="button" class="btn book btn-sm">Book Now</button> <button type="button" class="btn book btn-sm" data-toggle="modal" data-target="#wizard" (click)="bookVechile(vehicle.customer_veh_id)">Book Now</button>
<button type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#editvehicle">Edit</button> <!-- <button type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#editvehicle">Edit</button> -->
<button type="button" class="btn btn-danger btn-sm">Delete</button> <button type="button" class="btn btn-danger btn-sm" (click)="deleteCustomerCar(vehicle.customer_id,vehicle.customer_veh_id)">Delete</button>
</div> </div>
<!-- <button class="book">Book Now</button>
<button class="edit" data-toggle="modal" data-target="#editvehicle"></button>
<button class="delete"></button>
<div class="clear"></div>-->
</div> </div>
</li> </li>
</ng-template>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -319,104 +201,6 @@ ...@@ -319,104 +201,6 @@
</div> </div>
</div> </div>
</div> </div>
<div class="tab-pane container fade" id="estimate">
<div class="row">
<div class="col-md-12">
<div class="row line_row">
<div class="col-md-12">
<h3>Cost Estimates</h3>
<hr>
</div>
</div>
<div class="row line_row">
<div class="col-md-12">
<div class="table-responsive">
<table>
<thead>
<tr>
<th>Date </th>
<th>Service List</th>
<th>Service Charges</th>
<th>Location</th>
<th>Vehicle</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>22-01-2019</td>
<td>AC Coolant, Suspension winding, Wheel Alignment</td>
<td>$130</td>
<td>South Ampton</td>
<td>Mercedes Benz CLK </td>
<td>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-secondary btn-sm">Edit</a>
<a href="#" class="btn btn-danger btn-sm">Delete</a>
</div>
</td>
</tr>
<tr>
<td>22-01-2019</td>
<td>AC Coolant, Suspension winding, Wheel Alignment</td>
<td>$130</td>
<td>South Ampton</td>
<td>Mercedes Benz CLK </td>
<td>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-secondary btn-sm">Edit</a>
<a href="#" class="btn btn-danger btn-sm">Delete</a>
</div>
</td>
</tr>
<tr>
<td>22-01-2019</td>
<td>AC Coolant, Suspension winding, Wheel Alignment</td>
<td>$130</td>
<td>South Ampton</td>
<td>Mercedes Benz CLK </td>
<td>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-secondary btn-sm">Edit</a>
<a href="#" class="btn btn-danger btn-sm">Delete</a>
</div>
</td>
</tr>
<tr>
<td>22-01-2019</td>
<td>AC Coolant, Suspension winding, Wheel Alignment</td>
<td>$130</td>
<td>South Ampton</td>
<td>Mercedes Benz CLK </td>
<td>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-secondary btn-sm">Edit</a>
<a href="#" class="btn btn-danger btn-sm">Delete</a>
</div>
</td>
</tr>
<tr>
<td>22-01-2019</td>
<td>AC Coolant, Suspension winding, Wheel Alignment</td>
<td>$130</td>
<td>South Ampton</td>
<td>Mercedes Benz CLK </td>
<td>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-secondary btn-sm">Edit</a>
<a href="#" class="btn btn-danger btn-sm">Delete</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane container fade" id="appointment"> <div class="tab-pane container fade" id="appointment">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
...@@ -441,73 +225,23 @@ ...@@ -441,73 +225,23 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tbody> <tr *ngIf="!successBookDtls; else successBooking">
<tr> <td>No Data Found</td>
<td>15DFR64</td>
<td>22-01-2019</td>
<td>Ford Explorer V8</td>
<td>Robin Carten</td>
<td>$203 </td>
<td>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-secondary btn-sm">Edit</a>
<a href="#" class="btn btn-danger btn-sm">Delete</a>
</div>
</td>
</tr>
<tr>
<td>15DFR64</td>
<td>22-01-2019</td>
<td>Ford Explorer V8</td>
<td>Robin Carten</td>
<td>$203 </td>
<td>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-secondary btn-sm">Edit</a>
<a href="#" class="btn btn-danger btn-sm">Delete</a>
</div>
</td>
</tr>
<tr>
<td>15DFR64</td>
<td>22-01-2019</td>
<td>Ford Explorer V8</td>
<td>Robin Carten</td>
<td>$203 </td>
<td>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-secondary btn-sm">Edit</a>
<a href="#" class="btn btn-danger btn-sm">Delete</a>
</div>
</td>
</tr> </tr>
<tr> <ng-template #successBooking>
<td>15DFR64</td> <tr *ngFor="let bookData of successBookDtls">
<td>22-01-2019</td> <td>{{bookData.booking_id}}</td>
<td>Ford Explorer V8</td> <td>{{bookData.scheduled_date+' '+bookData.scheduled_time}}</td>
<td>Robin Carten</td> <td>{{bookData.car_name}}</td>
<td>$203 </td> <td>{{bookData.first_name+' '+bookData.last_name}}</td>
<td>{{bookData.cost}}</td>
<td> <td>
<div class="btn-group btn-group-justified"> <div class="btn-group btn-group-justified">
<a href="#" class="btn btn-secondary btn-sm">Edit</a> <button (click)="cancelBooking(bookData.booking_id)" class="btn btn-danger btn-sm">Cancel</button>
<a href="#" class="btn btn-danger btn-sm">Delete</a>
</div> </div>
</td> </td>
</tr> </tr>
<tr> </ng-template>
<td>15DFR64</td>
<td>22-01-2019</td>
<td>Ford Explorer V8</td>
<td>Robin Carten</td>
<td>$203 </td>
<td>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-secondary btn-sm">Edit</a>
<a href="#" class="btn btn-danger btn-sm">Delete</a>
</div>
</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
...@@ -540,43 +274,23 @@ ...@@ -540,43 +274,23 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tbody> <tr *ngIf="!bookingDetails; else allBookDtls">
<tr> <td>No Data Found</td>
<td>15DFR64</td>
<td>22-01-2019</td>
<td>Ford Explorer V8</td>
<td>Robin Carten</td>
<td>$203 </td>
<td>
<p class="success_status">Success</p>
</td>
</tr> </tr>
<tr> <ng-template #allBookDtls>
<td>15DFR64</td> <tr *ngFor="let bookData of bookingDetails">
<td>22-01-2019</td> <td>{{bookData.booking_id}}</td>
<td>Ford Explorer V8</td> <td>{{bookData.scheduled_date+' '+bookData.scheduled_time}}</td>
<td>Robin Carten</td> <td>{{bookData.car_name}}</td>
<td>$203 </td> <td>{{bookData.first_name+' '+bookData.last_name}}</td>
<td> <td>{{bookData.cost}}</td>
<p class="pending_status">Pending</p> <td [ngSwitch]="bookData.status">
<p *ngSwitchCase="1" class="success_status">Success</p>
<p *ngSwitchCase="0" class="pending_status">Pending</p>
<p *ngSwitchCase="3" class="canceled_status">Canceled</p>
</td> </td>
</tr> </tr>
<tr> </ng-template>
<td>15DFR64</td>
<td>22-01-2019</td>
<td>Ford Explorer V8</td>
<td>Robin Carten</td>
<td>$203 </td>
<td>
<p class="canceled_status">Canceled</p>
</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
...@@ -593,11 +307,12 @@ ...@@ -593,11 +307,12 @@
<!-- ADD-VEHICLE-MODAL-STARTS --> <!-- ADD-VEHICLE-MODAL-STARTS -->
<div class="modal" id="addvehicle"> <div class="modal" id="booknow">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="loader_overlay" *ngIf="loader"></div>
<div class="modal-content add_modal_wrapper"> <div class="modal-content add_modal_wrapper">
<h3>Add Vehicle <h3>Add Vehicle
<span data-dismiss="modal" class="close">&times;</span> <span #closeVehicleAddForm data-dismiss="modal" class="close" (click)="resetVehicleForm()">&times;</span>
</h3> </h3>
<div class="modal-body"> <div class="modal-body">
<div class="add_modal_tab_head"> <div class="add_modal_tab_head">
...@@ -612,55 +327,50 @@ ...@@ -612,55 +327,50 @@
</div> </div>
<div class="add_modal_inner" [hidden]="tab=='inactive'"> <div class="add_modal_inner" [hidden]="tab=='inactive'">
<!-- <div class="row line_row">
<div class="col-md-12">
<p>Add Vehicle Photo</p>
</div>
</div>
<div class="row line_row">
<div class="col-md-12">
<div class="add_pic">
<div class="edit">
<input class="" type="input">
</div>
</div>
</div>
</div> -->
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<p>Add Vehicle Details</p> <p>Add Vehicle Details</p>
</div> </div>
</div> </div>
<form [formGroup]="vehicleDetailsAddForm" (ngSubmit)="vehicleDetailsFormSubmit(vehicleDetailsAddForm.value)">
<div class="row line_row"> <div class="row line_row">
<div class="col-md-6"> <div class="col-md-6">
<select class="vehicle_input_select" placeholder="Choose Year"> <select class="vehicle_input_select" placeholder="Choose Year" formControlName="modelYear"
<option>Choose Year</option> [ngClass]="{'input_error': !vehicleDetailsAddForm.controls['modelYear'].valid && vehicleDetailsFormSubmitClick}">
<option value="" disabled selected>YEAR</option>
<option *ngFor="let date of modelDates">{{date}}</option>
</select> </select>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<select class="vehicle_input_select" placeholder="Choose Make"> <select (change)="get_model($event.target.value)" class="vehicle_input_select" placeholder="Choose Make"
<option>Choose Make</option> formControlName="maker" [ngClass]="{'input_error': !vehicleDetailsAddForm.controls['maker'].valid && vehicleDetailsFormSubmitClick}">
<option value="" disabled selected>MAKE</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 line_row"> <div class="row line_row">
<div class="col-md-6"> <div class="col-md-6">
<select class="vehicle_input_select" placeholder="Choose Model"> <select class="vehicle_input_select" placeholder="Choose Model" formControlName="modelName"
<option>Choose Model</option> [ngClass]="{'input_error': !vehicleDetailsAddForm.controls['modelName'].valid && vehicleDetailsFormSubmitClick}">
<option value="" disabled selected>MODEL</option>
<option *ngFor="let car_models of carModel">{{car_models}}</option>
</select> </select>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<select class="vehicle_input_select" placeholder="Choose Engine"> <input #googleLocDetails class="vehicle_input" placeholder="Enter Location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" (keyup)="searchLocError = false" formControlName="location"
<option>Choose Engine</option> [ngClass]="{'input_error': !vehicleDetailsAddForm.controls['location'].valid && vehicleDetailsFormSubmitClick}">
</select>
</div> </div>
</div> </div>
<div *ngIf="errMessage" class="s_alert alert-danger">
<strong>{{errMessage.errMsg}}<br></strong>
</div>
<div class="row line_row mb0"> <div class="row line_row mb0">
<div class="col-md-12"> <div class="col-md-12">
<button class="add_btn">Add Vehicle</button> <button class="add_btn" type="submit">Add Vehicle</button>
</div> </div>
</div> </div>
</form>
</div> </div>
<div class="add_modal_inner" [hidden]="tab=='active'"> <div class="add_modal_inner" [hidden]="tab=='active'">
<div class="row"> <div class="row">
...@@ -668,29 +378,36 @@ ...@@ -668,29 +378,36 @@
<p>Add Vehicle Identification number</p> <p>Add Vehicle Identification number</p>
</div> </div>
</div> </div>
<form [formGroup]="vehicleVinAddForm" (ngSubmit)="vehicleVinFormSubmit(vehicleVinAddForm.value)">
<div class="row line_row">
<div class="col-md-12">
<input class="vehicle_input" placeholder="Add VIN" formControlName="vin"
[ngClass]="{'input_error': !vehicleVinAddForm.controls['vin'].valid && vehicleVinFormSubmitClick}">
</div>
</div>
<div class="row line_row"> <div class="row line_row">
<div class="col-md-12"> <div class="col-md-12">
<input class="vehicle_input" placeholder="Add VIN "> <input #googleLocVin class="vehicle_input" placeholder="Enter Location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" (keyup)="searchLocError = false" formControlName="location"
[ngClass]="{'input_error': !vehicleVinAddForm.controls['location'].valid && vehicleVinFormSubmitClick}">
</div>
</div> </div>
<div *ngIf="errMessage" class="s_alert alert-danger">
<strong>{{errMessage.errMsg}}<br></strong>
</div> </div>
<div class="row line_row mb0"> <div class="row line_row mb0">
<div class="col-md-12"> <div class="col-md-12">
<button class="add_btn">Add Vehicle</button> <button class="add_btn" type="submit">Add Vehicle</button>
</div> </div>
</div> </div>
</form>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- ADD-VEHICLE-MODAL-ENDS --> <!-- ADD-VEHICLE-MODAL-ENDS -->
<!-- EDIT-VEHICLE-MODAL-STARTS --> <!-- EDIT-VEHICLE-MODAL-STARTS -->
<div class="modal" id="editvehicle"> <div class="modal" id="editvehicle">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content add_modal_wrapper"> <div class="modal-content add_modal_wrapper">
...@@ -729,8 +446,6 @@ ...@@ -729,8 +446,6 @@
</div> </div>
</div> </div>
<div class="row line_row mb0"> <div class="row line_row mb0">
<div class="col-md-12"> <div class="col-md-12">
<button class="add_btn">Save Vehicle</button> <button class="add_btn">Save Vehicle</button>
...@@ -744,3 +459,316 @@ ...@@ -744,3 +459,316 @@
<!-- EDIT-VEHICLE-MODAL-ENDS --> <!-- EDIT-VEHICLE-MODAL-ENDS -->
<!-- WIZARD-MODAL-STARTS-->
<div class="modal" id="wizard">
<div class="modal-dialog modal-full">
<div class="modal-content login_modal_wrapper">
<div #closeWizard class="modal_close" data-dismiss="modal" (click)="resetQuoteWizard()">
&times;
</div>
<div class="modal-body">
<div class="login_modal_content">
<div class="loader_overlay" *ngIf="loader"></div>
<div class="login_modal_inner">
<div class="wizard_inner">
<wizard>
<wizard-step stepTitle="Title of step 2" optionalStep>
<h3>SERVICES</h3>
<div class="row">
<div class="col-md-12">
<input class="search" placeholder="Search Services" type="">
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="service_methods">
<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>
</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>
<input #step3nextBtn type="hidden" nextStep>
</div>
</div>
</wizard-step>
<wizard-step stepTitle="Title of step 3">
<h3>DESCRIPTION</h3>
<div class="row">
<div class="col-md-12">
<h6 class="pt10 textLeft">Add notes for General Diagnosis (Please provide description in notes section) (optional) *</h6>
</div>
</div>
<div class="row m0">
<div class="col-md-12">
<textarea class="textarea_input" rows="5" placeholder="Additional Informations you may can gave">
Additional Informations you may can gave
</textarea>
</div>
</div>
<div class="row">
<h6 class="pt10 textLeft">Add Images or Videos (Optional)</h6>
<hr>
<div class="add_images">
<ul>
<li><span>+</span>
<input type="file">
</li>
<li><span>+</span>
<input type="file">
</li>
<li><span>+</span>
<input type="file">
</li>
<li><span>+</span>
<input type="file">
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="log_btn prev_btn floatLeft" type="button" previousStep>PREVIOUS</button>
<button class="log_btn next_btn floatRight" type="button" nextStep>NEXT</button>
</div>
</div>
</wizard-step>
<wizard-step stepTitle="Title of step 4">
<h3>SUMMARY</h3>
<div class="row">
<div class="col-md-12">
<h6 class="pt10 textLeft">Please add a photo or video</h6>
</div>
</div>
<div class="row">
<div class="col-md-12">
<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>
</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>
</div>
<div class="row">
<div class="col-md-12 textCenter">
<button *ngIf="!loginDetails" (click)="resetForm()" class="wizard_signin" type="button" data-toggle="modal" data-target="#login">SIGN IN</button>
<button (click)="getQuote()" class="wizard_quotes" type="button" data-toggle="modal" data-target="#quotes">VIEW SERVICE QUOTE</button>
<input type="hidden" #indexLoginModal data-toggle="modal" data-target="#login">
</div>
</div>
</wizard-step>
</wizard>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- WIZARD-MODAL-ENDS-->
<!-- QUOTES-MODAL-STARTS-->
<div class="modal" id="quotes">
<div class="modal-dialog modal-full">
<div class="modal-content login_modal_wrapper">
<div #closeQuoteWizard class="modal_close" data-dismiss="modal" (click)="resetQuoteWizard()">
&times;
</div>
<div class="modal-body">
<div class="quote_service_wrapper">
<div class="loader_overlay" *ngIf="loader"></div>
<div class="row">
<div class="col-md-8">
<div class="quote_header">
<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
handle any repair related questions Peace-of-Mind Guarantee - no unexpected charges</p>
</div>
<div class="quote_schedule_header">
<div class="row">
<div class="col-md-6">
<h4>Select your day and date</h4>
</div>
<div class="col-md-6">
<button class="quote_arrow left floatLeft" (click)="prev($event)"></button>
<div class="schedule_dates floatLeft">
<ul>
<li>{{ dateSection[0] | date:'MMM dd-MM-yyyy' }}</li>
<li>{{ dateSection[1] | date:'MMM dd-MM-yyyy' }}</li>
</ul>
</div>
<button class="quote_arrow right floatRight" (click)="next($event)"></button>
<div class="clear"></div>
</div>
</div>
</div>
<div class="quote_schedule_list">
<ul>
<li *ngFor="let mechanic of mechanicData">
<div class="row">
<div class="col-md-6 pr0">
<div class="mechanic_profile">
<div class="mechanic_profile_inner">
<div class="mechanic_photo_wrapper">
<div class="mechanic_photo">
<img src="{{imageServer + mechanic.profile_image}}" onerror="this.src='assets/images/user_avatar.jpg'">
</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>
</div>
<ng-template #mechanicDetails>
<p>{{mechanic.address}}<br>{{mechanic.city+' , '+mechanic.state}}</p>
<h6>{{mechanic.phone}}</h6>
</ng-template>
<button class="book_now" (click)="scheduleNow(mechanic.mechanic_id)"
[ngClass]="{'book_now':scheduleDateInit == true,
'book_now_disabled':scheduleDateInit == false}">
{{loginDetails ? 'Book now' : 'Login and Continue' }}
</button>
</div>
<div class="clear"></div>
<!-- <div class="offer">
<div class="panel-group" id="accordion">
<div class="panel panel-default" *ngFor="let sub_issues of mechanic.sub_issues">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#sub_issue_dtls_{{sub_issues.issue_id}}_{{sub_issues.issue_cat_id}}">
<div class="row">
<div class="col-md-5">{{sub_issues.issue_category}}</div>
<div class="col-md-1">:</div>
<div class="col-md-5"><strong>{{sub_issues.custom_service_fee}}</strong></div>
</div>
</a>
</h4>
</div>
<div id="sub_issue_dtls_{{sub_issues.issue_id}}_{{sub_issues.issue_cat_id}}" class="panel-collapse collapse in">
<div class="panel-body">{{sub_issues.custom_description}}</div>
</div>
</div>
</div>
</div> -->
<div class="offer">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#estimate_{{mechanic.mechanic_id}}">
<div class="row">
<div class="col-md-8">Estimated Price</div>
<div class="col-md-1"></div>
<div class="col-md-2 textRight"><strong>{{mechanic.estimate}}</strong></div>
</div>
</a>
</h4>
</div>
<div id="estimate_{{mechanic.mechanic_id}}" class="panel-collapse collapse in">
<div class="panel-body" *ngFor="let sub_issues of mechanic.sub_issues">
<div class="row">
<div class="col-md-8">{{sub_issues.issue_category}}</div>
<div class="col-md-1">:</div>
<div class="col-md-3 textRight"><strong>{{sub_issues.service_fee}}</strong></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="scheduletiming_listing">
<ul>
<li *ngFor="let time of mechanic.scheduleTiming" id="custom_check_button">
<label>
<input type="radio" name="scheduleTime" (click)="getSchedule(time,'0')">
<p>{{time}}</p>
</label>
</li>
</ul>
<ul>
<li *ngFor="let time of mechanic.scheduleTiming" id="custom_check_button">
<label>
<input type="radio" name="scheduleTime" (click)="getSchedule(time,'1')">
<p>{{time}}</p>
</label>
</li>
</ul>
</div>
<div class="scheduletiming_btm_btns">
<div class="btm_btns"></div>
<div class="btm_btns"></div>
</div>
</div>
</div>
</li>
</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 class="clear"></div>
<p>Estimated Price : <strong>{{estimatedPrice}}</strong></p>
<div class="clear"></div>
</div>
<div class="service_map">
<agm-map #gm [latitude]="lat" [longitude]="lng">
<agm-marker *ngFor="let mechanicLoc of mechanicData"
[latitude]="mechanicLoc.location_lat"
[longitude]="mechanicLoc.location_lat"
(mouseOver)="onMouseOver(infoWindow,gm)"
(mouseOut)="onMouseOut(gm)">
<agm-info-window [disableAutoPan]="false" #infoWindow>
<div>{{mechanicLoc.display_name}}</div>
</agm-info-window>
</agm-marker>
</agm-map>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- QUOTES-MODAL-ENDS-->
src/app/home/dashboard/dashboard.component.scss
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
li { li {
list-style: none; list-style: none;
display: inline-block; display: inline-block;
width: 20%; width: 25%;
color: #fff; color: #fff;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
...@@ -128,29 +128,30 @@ ...@@ -128,29 +128,30 @@
display: inline-block; display: inline-block;
position: relative; position: relative;
border: 1px solid #e2e2e2; border: 1px solid #e2e2e2;
width: 49%; width: 32%;
padding: 15px; padding: 15px;
margin: 5px; margin: 5px;
min-height: 170px; min-height: 170px;
.car_photo { // .car_photo {
width: 120px; // width: 120px;
height: 120px; // height: 120px;
background: #a8a8a8; // background: #a8a8a8;
float: left; // float: left;
img { // img {
width: 100%; // width: 100%;
height: 100%; // height: 100%;
object-fit: cover; // object-fit: cover;
object-position: center; // object-position: center;
} // }
} // }
.car_details { .car_details {
width: calc(100% - 120px); // width: calc(100% - 120px);
width: 100%;
float: left; float: left;
padding: 8px;
padding-top: 0px; padding-top: 0px;
padding-bottom: 0px; padding-bottom: 0px;
padding-left: 15px;
h5 { h5 {
color: #2655bf; color: #2655bf;
font-size: 18px; font-size: 18px;
...@@ -542,3 +543,811 @@ ...@@ -542,3 +543,811 @@
.address_height { .address_height {
height: 65px !important; height: 65px !important;
} }
.login_modal_wrapper {
background: url("/assets/images/asset_login_bg.png");
background-position: center;
background-repeat: no-repeat;
position: relative;
overflow: scroll;
.modal_close {
width: 50px;
height: 50px;
border: 1px solid #fff;
position: fixed;
top: 10px;
right: 10px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
z-index: 999;
color: #fff;
text-align: center;
font-size: 30px;
padding: 0px;
font-weight: 700;
cursor: pointer;
}
.login_modal_content {
max-width: 700px;
min-height: 400px;
background: #ffffff;
margin: 0 auto;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
padding: 30px;
padding-top: 50px;
position: relative;
top: 85px;
.login_modal_inner {
width: 90%;
margin: 0 auto;
h3 {
text-align: center;
text-transform: uppercase;
color: #1e1e1e;
font-weight: 600;
padding-bottom: 10px;
}
.facebook_btn {
background-color: #3b5998;
color: #fff;
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: none;
font-size: 20px;
font-weight: 300;
&:focus {
outline: none;
}
img {
margin-left: 10px;
}
}
h6 {
text-align: center;
width: 100%;
margin: 0px;
padding: 0px;
}
.search {
background: url("/assets/images/asset_search.png");
background-position: right 10px top 5px;
background-repeat: no-repeat;
padding-right: 50px;
}
input {
border: 1px solid #1e1e1e;
height: 40px;
width: 100%;
border-radius: 25px;
padding-left: 15px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
-o-border-radius: 25px;
text-align: left;
font-size: 16px;
&::placeholder {
color: #bbbbbb;
}
&:focus {
outline: none;
}
}
select {
border: 1px solid #1e1e1e;
background: url("/assets/images/asset_down_arrow.png");
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;
text-align: center;
-webkit-appearance: none;
-moz-appearance: none;
font-size: 16px;
cursor: pointer;
background-position: right 10px top 10px;
background-repeat: no-repeat;
&::placeholder {
color: #bbbbbb;
}
&:focus {
outline: none;
}
}
.row {
margin-bottom: 25px;
}
.next_btn {
background-image: url("/assets/images/asset_double_right.png");
background-position: right 10px top 10px;
}
.prev_btn {
background-image: url("/assets/images/asset_double_left.png");
background-position: left 10px top 10px;
}
.log_btn {
height: 40px;
width: 160px;
border-radius: 25px;
color: #fff;
background-color: #2655bf;
border: none;
font-size: 16px;
font-weight: 300;
background-repeat: no-repeat;
background-size: 20px;
&:focus {
outline: none;
}
}
.log_btn_diabled{
cursor: not-allowed;
background: #929292;
}
.wizard_signin {
height: 40px;
width: 48%;
display: inline-block;
border-radius: 25px;
color: #2655bf;
border: 2px solid #2655bf;
background: transparent;
font-size: 16px;
font-weight: 500;
background-repeat: no-repeat;
background-size: 20px;
margin:3px;
&:focus {
outline: none;
}
}
.wizard_quotes {
height: 40px;
width: 48%;
margin:3px;
display: inline-block;
border-radius: 25px;
color: #fff;
border: 2px solid #2655bf;
background: #2655bf;
font-size: 16px;
font-weight: 500;
background-repeat: no-repeat;
background-size: 20px;
&:focus {
outline: none;
}
}
.create_account {
background-image: url("/assets/images/asset_signin.png");
background-repeat: no-repeat;
background-position: right 13px top 7px;
}
p {
text-align: center;
color: #2655bf;
width: 100%;
font-size: 16px;
cursor: pointer;
}
h6 {
text-align: center;
width: 100%;
font-size: 16px;
a {
color: #2655bf;
margin-left: 5px;
margin-right: 5px;
cursor: pointer;
}
}
}
}
}
.wizard_inner {
width: 100%;
.add_images {
width: 100%;
ul {
margin: 0px;
padding: 0px;
text-align: center;
li {
list-style: none;
width: 80px;
height: 90px;
border: 1px dashed #a8a8a8;
display: inline-block;
text-align: center;
position: relative;
margin: 4px;
span {
position: relative;
font-size: 50px;
top: 5px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
input {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
opacity: 0;
height: 120px;
}
}
}
}
.service_methods{
max-height: 200px;
overflow: scroll;
ul{
padding:0px;
margin:0px;
li{
list-style: none;
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;
color: #bfbfbf;
padding-top: 10px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
text-align: left !important;
&:focus {
outline: none;
}
}
.selected_services {
ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
display: inline-block;
padding-left: 15px;
padding-right: 15px;
border: 1px solid #1e1e1e;
border-radius: 25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
-o-border-radius: 25px;
text-align: center;
color: #1e1e1e;
margin: 3px;
a {
margin-left: 10px;
cursor: pointer;
font-weight: 600;
}
}
}
}
}
.quote_service_wrapper {
width: 90%;
background: #f5f5f5;
margin: 0 auto;
min-height: 500px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
padding: 20px;
.quote_header {
width: 100%;
padding: 10px;
h4 {
margin: 0px;
padding: 0px;
color: #1e1e1e;
padding-bottom: 10px;
font-size: 20px;
font-weight: 600;
}
p {
margin: 0px;
padding: 0px;
color: #4e4e4e;
font-weight: 400;
font-size: 15px;
}
}
.quote_schedule_header {
background: #f9f7f7;
border: 1px solid #e8e8e8;
h4 {
margin: 0px;
color: #1e1e1e;
font-size: 18px;
padding: 10px;
}
.quote_arrow {
height: 40px;
width: 40px;
margin: 0px;
padding: 0px;
background: transparent;
border: none;
background-repeat: no-repeat;
background-position: center;
&:focus {
outline: none;
}
}
.quote_arrow.left {
background-image: url("/assets/images/asset_quote_left.png");
}
.quote_arrow.right {
background-image: url("/assets/images/asset_quote_right.png");
}
.schedule_dates {
width: calc(100% - 80px);
height: 35px;
ul {
padding: 0px;
margin: 0px;
li {
list-style: none;
display: inline-block;
width: 50%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 40px;
background: #2655bf;
color: #fff;
font-size: 14px;
text-align: center;
padding: 7px;
border: 2px solid #f9f7f7;
}
}
}
}
.quote_schedule_list {
border: 1px solid #e8e8e8;
background: #ffffff;
ul {
margin: 0px;
padding: 0px;
max-height: 500px;
overflow: scroll;
li {
list-style: none;
padding: 10px;
border-bottom: 10px solid #f5f5f5;
.mechanic_profile {
padding: 5px;
.mechanic_profile_inner {
background: #fbfbfb;
padding: 10px;
padding-right: 0px;
.mechanic_photo_wrapper {
float: left;
width: 100px;
.mechanic_photo {
width: 100px;
height: 100px;
background: #bfbfbf;
margin-bottom: 5px;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.rating {
.star-container {
.star {
font-size: 16px;
}
}
}
}
.mechanic_detail {
width: calc(100% - 100px);
float: left;
padding: 10px;
padding-left: 15px;
padding-top: 0px;
h4 {
margin: 0px;
padding: 0px;
font-size: 15px;
color: #060708;
padding-bottom: 5px;
}
h5 {
margin: 0px;
padding: 0px;
font-size: 15px;
color: #2655bf;
}
p {
margin: 0px;
padding: 0px;
color: #767676;
font-size: 16px;
line-height: 20px;
padding-top: 5px;
}
h6 {
color: #959595;
margin: 0px;
padding: 0px;
background-image: url("/assets/images/asset_call.png");
background-repeat: no-repeat;
padding: 8px;
background-size: 16px;
padding-left: 30px;
background-position: 5px;
}
.view_profile {
border: 1px solid #898989;
color: #898989;
background: transparent;
margin: 5px;
padding-left: 15px;
padding-right: 15px;
border-radius: 20px;
height: 35px;
font-size: 14px;
&:focus {
outline: none;
}
}
.book_now {
float:right;
border: 1px solid #2655bf;
color: #2655bf;
background: transparent;
margin: 5px;
padding-left: 15px;
padding-right: 15px;
border-radius: 20px;
height: 35px;
font-size: 14px;
&:focus {
outline: none;
}
}
.book_now_disabled{
float:right;
border: 1px solid #808080;
color: #808080;
background: transparent;
margin: 5px;
padding-left: 15px;
padding-right: 15px;
border-radius: 20px;
height: 35px;
font-size: 14px;
&:focus {
outline: none;
}
pointer-events: none;
cursor: default;
text-decoration: none;
}
}
}
.offer{
color: #a8a8a8;
text-align: justify;
font-size: 12px;
.panel-heading{
padding: 10px;
margin-bottom: 5px;
padding-left: 15px;
padding-right: 15px;
background-color: #2655bf;
background-image: url("/assets/images/asset_double_right.png");
background-position: right 10px top 8px;
background-repeat: no-repeat;
.panel-title{
padding: 0px;
margin:0px;
a{
color: #fff;
font-weight: 300;
font-size: 15px;
}
}
}
.panel-collapse{
background-color: #f5f5f5;
.panel-body{
font-size: 15px;
font-weight: 400;
.row{
padding:10px;
border-bottom: 1px solid #fff;
}
}
}
}
}
.scheduletiming_listing {
width: calc(100% - 80px);
margin: 0 auto;
height: 200px;
position: relative;
left: 5px;
ul {
margin: 0px;
padding: 0px;
width: 50%;
height: 100%;
overflow: scroll;
display: inline-block;
position: relative;
#custom_check_button {
border-radius: 0px !important;
overflow: auto;
position: relative;
outline: none;
color: #908d8d;
-webkit-border-radius: 0px !important;
-moz-border-radius: 0px !important;
-ms-border-radius: 0px !important;
-o-border-radius: 0px !important;
}
#custom_check_button p {
margin: 0px;
position: absolute;
color: #908d8d;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
padding: 5px;
cursor: pointer;
}
#custom_check_button label {
width: 100%;
}
#custom_check_button label span {
text-align: center;
display: block;
}
#custom_check_button label input {
position: absolute;
top: -20px;
}
#custom_check_button input:checked+p {
background-color: #ef5958;
color: #fff;
border-radius: 0px !important;
margin: 0px;
-webkit-border-radius: 0px !important;
-moz-border-radius: 0px !important;
-ms-border-radius: 0px !important;
-o-border-radius: 0px !important;
}
li {
width: 100%;
background: #f5f5f5;
color: #908d8d;
text-align: center;
padding: 7px;
border: 1px solid #fff;
cursor: pointer;
}
}
}
.scheduletiming_btm_btns {
width: calc(100% - 80px);
position: relative;
left: 5px;
margin: 0 auto;
.btm_btns {
width: 50%;
display: inline-block;
height: 40px;
text-align: center;
background-image: url("/assets/images/asset_down_time_arrow.png");
background-color: #f5f5f5;
border: 1px solid #fff;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
background-size: 25px;
}
}
}
}
}
.service_list {
width: 100%;
padding: 10px;
background: #f9f7f7;
border: 1px solid #e8e8e8;
padding: 10px;
h4 {
margin: 0px;
padding: 0px;
color: #1e1e1e;
padding-bottom: 10px;
font-size: 20px;
font-weight: 600;
}
p {
margin: 0px;
padding: 0px;
color: #4e4e4e;
font-weight: 400;
font-size: 15px;
float: left;
padding-left: 5px;
padding-right: 5px;
}
}
.service_map {
width: 100%;
border: 1px solid #e8e8e8;
height: 600px;
margin-top: 10px;
}
}
agm-map {
height: 100%;
}
\ No newline at end of file
src/app/home/dashboard/dashboard.component.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit, NgZone, ViewChild, ElementRef } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router'; import { Router, ActivatedRoute } from '@angular/router';
import { FormGroup, FormControl, Validators, ValidationErrors } from '@angular/forms'; import { FormGroup, FormControl, Validators } from '@angular/forms';
import { ValidationService } from './../../provider/validation.service'; import { ValidationService } from './../../provider/validation.service';
import { WebService } from './../../provider/web.service'; import { WebService } from './../../provider/web.service';
import { MapsAPILoader } from '@agm/core';
import { SubjectService } from './../../provider/subject.service'; import { SubjectService } from './../../provider/subject.service';
import { google } from '@google/maps';
import { ImageStorage } from '../../../environments/server.config'; import { ImageStorage } from '../../../environments/server.config';
declare var $;
declare const google: any;
@Component({ @Component({
selector: 'app-dashboard', selector: 'app-dashboard',
templateUrl: './dashboard.component.html', templateUrl: './dashboard.component.html',
...@@ -15,31 +20,107 @@ export class DashboardComponent implements OnInit { ...@@ -15,31 +20,107 @@ export class DashboardComponent implements OnInit {
tab: any; tab: any;
loader: boolean; loader: boolean;
editProfile; imageUrl: any;
user_name: string; user_name: string;
vehDetails: any;
errMessage: any;
editProfile;
loginDetails: any; loginDetails: any;
loginResponse: any; selectedFile: File;
profile_image: any;
searchLocError: boolean;
bookingDetails: any;
successBookDtls: any;
profileEditResp: any;
autocompleteVin: any;
autocompleteDetails: any;
editProfileSubmitClick: boolean; editProfileSubmitClick: boolean;
carModel: any;
modelDates: number[] = new Array();
carSearchJsonData: any;
vehicleVinAddForm;
vehicleVinFormSubmitClick;
vehicleDetailsAddForm;
vehicleDetailsFormSubmitClick;
//Default Map Location
lat: number = 51.678418;
lng: number = 7.809007;
wizardData: any;
//Vehicle Details: TAB 2
vehicleDataForm;
vehicleDataFormSubmit;
//Service Details: TAB 3
issuesData: any;
selectedIssues: any[] = new Array();
//Quote Page
today: any = new Date();
currDate: any;
nextDate: any;
dateStep: number = 0;
dateSection: any[] = new Array();
imageServer: string;
mechanicData: any;
autoSchedule: boolean;
estimatedPrice: number;
scheduleDateInit: boolean;
@ViewChild("closeWizard") public closeWizardRef: ElementRef;
@ViewChild("googleLocVin") public googleLocVinRef: ElementRef;
@ViewChild("goTostep1") public goTostep1Ref: ElementRef;
@ViewChild("step2nextBtn") public step2nextRef: ElementRef;
@ViewChild("step3nextBtn") public step3nextRef: ElementRef;
@ViewChild("closeQuoteWizard") closeQuoteWizardRef: ElementRef;
@ViewChild("googleLocDetails") public googleLocDetailsRef: ElementRef;
@ViewChild("closeVehicleAddForm") public closeVehicleAddFormRef: ElementRef;
constructor(private router : Router, constructor(private router : Router,
public ngZone : NgZone,
private route : ActivatedRoute, private route : ActivatedRoute,
public mapsAPILoader : MapsAPILoader,
public errorMsg : ValidationService, public errorMsg : ValidationService,
public webService : WebService, public webService : WebService,
public subjectService : SubjectService) { public subjectService : SubjectService) {
this.loader = false; this.loader = false;
this.errMessage = false;
this.searchLocError = false;
this.scheduleDateInit = false;
this.editProfileSubmitClick = false; this.editProfileSubmitClick = false;
this.vehicleDetailsFormSubmitClick = false;
} }
ngOnInit() { ngOnInit() {
this.loginResponse.status = "success";
this.loginResponse.message = "message";
this.tab = 'active'; this.tab = 'active';
this.vehicleVinAddForm = new FormGroup({
vin: new FormControl('', [Validators.required]),
location: new FormControl('', [Validators.required])
});
this.vehicleDetailsAddForm = new FormGroup({
maker: new FormControl('', [Validators.required]),
location: 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.carSearchJsonData = response;
});
this.subjectService.getLoginData().subscribe(loginData => { this.subjectService.getLoginData().subscribe(loginData => {
this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData')); this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
if(this.loginDetails){ if(this.loginDetails){
console.log(this.loginDetails); this.imageUrl = ImageStorage+this.loginDetails.profile_image;
this.editProfile = new FormGroup({ this.editProfile = new FormGroup({
email: new FormControl(this.loginDetails.email, [Validators.required, Validators.maxLength(50), Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')]), email: new FormControl(this.loginDetails.email, [Validators.required, Validators.maxLength(50), Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')]),
phone: new FormControl(this.loginDetails.phone, [Validators.required, Validators.maxLength(15), Validators.pattern("^[0-9\ ( ) + , - ]+$")]), phone: new FormControl(this.loginDetails.phone, [Validators.required, Validators.maxLength(15), Validators.pattern("^[0-9\ ( ) + , - ]+$")]),
...@@ -49,10 +130,109 @@ export class DashboardComponent implements OnInit { ...@@ -49,10 +130,109 @@ export class DashboardComponent implements OnInit {
last_name: new FormControl(this.loginDetails.last_name, [Validators.required, Validators.maxLength(50), Validators.pattern("^[a-zA-Z\ _ - ' \/]+$")]), last_name: new FormControl(this.loginDetails.last_name, [Validators.required, Validators.maxLength(50), Validators.pattern("^[a-zA-Z\ _ - ' \/]+$")]),
first_name: new FormControl(this.loginDetails.first_name, [Validators.required, Validators.maxLength(50), Validators.pattern("^[a-zA-Z\ _ - ' \/]+$")]) first_name: new FormControl(this.loginDetails.first_name, [Validators.required, Validators.maxLength(50), Validators.pattern("^[a-zA-Z\ _ - ' \/]+$")])
}); });
this.getCustVehDetails();
this.getCustBookDetails();
} else { } else {
this.router.navigate(['index']); this.router.navigate(['index']);
} }
}); });
let currentYear = Number((new Date()).getFullYear());
let startingYear = currentYear - 50;
for (let date = currentYear ; date >= startingYear ; date --) {
this.modelDates.push(date);
}
this.mapsAPILoader.load().then(() => {
this.autocompleteVin = new google.maps.places.Autocomplete(this.googleLocVinRef.nativeElement, {
types: ["address"]
});
this.autocompleteDetails = new google.maps.places.Autocomplete(this.googleLocDetailsRef.nativeElement, {
types: ["address"]
});
});
}
getCustBookDetails(){
this.webService.post_data('getCustBookDetails', {'customer_id':this.loginDetails.customer_id}).subscribe(response => {
if ( response.status == '1' && response.bookData != 'undefined' && response.bookData != undefined && response.bookData != 'null' && response.bookData != null ) {
this.bookingDetails = response.bookData;
let successBooking: any[] = new Array();
this.bookingDetails.forEach(function (booking) {
if(booking.status == 1){
successBooking.push(booking);
}
});
if(successBooking.length > 0){
this.successBookDtls = successBooking;
} else {
this.successBookDtls = false;
}
}
});
}
getCustVehDetails(){
this.webService.post_data('customerVechiles', {'customer_id':this.loginDetails.customer_id}).subscribe(response => {
if ( response.status == '1' && response.vehData != 'undefined' && response.vehData != undefined && response.vehData != 'null' && response.vehData != null ) {
this.vehDetails = response.vehData;
}
});
}
get_model(event) {
this.carModel = this.carSearchJsonData[event].models;
}
setIssueSelected(event){
let issue_id = event.target.attributes.issue_id.value;
let sub_issue_id = event.target.attributes.sub_issue_id.value;
const thisObj = this;
let index = thisObj.selectedIssues.findIndex(x => x.sub_issue_id == sub_issue_id);
if(index > -1){
thisObj.selectedIssues.splice(index, 1);
} else {
thisObj.issuesData.forEach(function (issData) {
if(issData.issue_id == issue_id){
issData.sub_categories.forEach(function (subIssData) {
if(subIssData.issue_cat_id == sub_issue_id){
let issue = issData.issue,
issue_image = issData.issue_image,
issue_category = subIssData.issue_category,
issue_cat_image = subIssData.issue_cat_image,
default_service_fee = subIssData.default_service_fee,
default_description = subIssData.default_description;
thisObj.selectedIssues.push({issue_id,sub_issue_id,issue,issue_image,issue_category,issue_cat_image,default_service_fee,default_description});
}
});
}
});
}
this.calculateEstimate();
}
calculateEstimate(){
const thisObj = this;
thisObj.estimatedPrice = 0;
thisObj.selectedIssues.forEach(function (selIssues) {
thisObj.estimatedPrice = thisObj.estimatedPrice + Number(selIssues.default_service_fee);
});
}
removeSelectedItem(issue_id,sub_issue_id){
let index = this.selectedIssues.findIndex(x => x.sub_issue_id == sub_issue_id);
if(index > -1){
this.selectedIssues.splice(index, 1);
$('[id="issue_'+issue_id+'_'+sub_issue_id+'"]').prop('checked', false);
}
if(this.selectedIssues.length == 0){
this.goTostep1Ref.nativeElement.click();
}
this.calculateEstimate();
} }
submitProfileEdit(data){ submitProfileEdit(data){
...@@ -61,32 +241,326 @@ export class DashboardComponent implements OnInit { ...@@ -61,32 +241,326 @@ export class DashboardComponent implements OnInit {
} }
const This = this; const This = this;
this.loader = true; this.loader = true;
let funcName = 'edit_customer_profile'; data.customer_id = this.loginDetails.customer_id;
this.webService.post_data(funcName, data).subscribe(response => {
let formData: FormData = new FormData();
formData.append('data', JSON.stringify(data));
if(this.profile_image && this.profile_image != '' && this.profile_image != undefined && this.profile_image != 'undefined' && this.profile_image != null && this.profile_image != 'null'){
formData.append('profile_image', this.profile_image);
}
this.webService.multipart_post('edit_customer_profile', formData).subscribe(response => {
this.loader = false; this.loader = false;
if ( response.status == '1') { if ( response.status == '1') {
this.webService.setLocalStorageItem('userData', JSON.stringify(response.data)); const userData = this.webService.getLocalStorageItem('userData');
this.subjectService.sendLoginData('logged_in'); this.webService.removeLocalStorageItem(userData);
this.editProfile.nativeElement.click(); let ret_profile_image = (response.profile_image && response.profile_image != undefined && response.profile_image != 'undefined' && response.profile_image != null && response.profile_image != 'null')?response.profile_image:this.loginDetails.profile_image;
this.imageUrl = ImageStorage+ret_profile_image;
let newUserData = {"customer_id":this.loginDetails.customer_id,
"phone":data.phone,
"email":data.email,
"address":data.address,
"last_name":data.last_name,
"first_name":data.first_name,
"profile_image":ret_profile_image,
"status":"1"}
this.webService.setLocalStorageItem('userData', JSON.stringify(newUserData));
response.status = 'success';
this.profileEditResp = response;
} else { } else {
response.status = 'error'; response.status = 'error';
response.message = (response.message == '')?this.errorMsg.errorList.req_failure:response.message; response.message = (response.message == '')?this.errorMsg.errorList.req_failure:response.message;
this.editProfile = response; this.profileEditResp = response;
} }
},error => { },error => {
this.editProfile = {'status':'error','message':this.errorMsg.errorList.req_failure}; this.profileEditResp = {'status':'error','message':this.errorMsg.errorList.req_failure};
},() => { },() => {
// setTimeout( function() { setTimeout( function() {
// This.loginResponse = false; This.profileEditResp = false;
// }, 2000) }, 2000)
});
}
vehicleDetailsFormSubmit(vehicleData){
if(this.vehicleDetailsAddForm.invalid){
this.vehicleDetailsFormSubmitClick = true;
return false;
}
let location;
this.vehicleDetailsFormSubmitClick = false;
vehicleData.car_maker = this.carSearchJsonData[vehicleData['maker']]['brand'];
this.ngZone.run(() => {
let place: google.maps.places.PlaceResult = this.autocompleteDetails.getPlace();
if (place == undefined || place == null || place === undefined || place === null ||
place.geometry == undefined || place.geometry == null || place.geometry === undefined || place.geometry === null ||
place.formatted_address == undefined || place.formatted_address == null || place.formatted_address === undefined || place.formatted_address === null) {
this.searchLocError = true;
return;
}
location = {'location':place.formatted_address,
'location_lat':place.geometry.location.lat(),
'location_lng':place.geometry.location.lng()
};
});
this.addCustomerCar(1,vehicleData,location);
}
vehicleVinFormSubmit(vehicleData){
if(this.vehicleVinAddForm.invalid){
this.vehicleVinFormSubmitClick = true;
return false;
}
let location;
this.vehicleVinFormSubmitClick = false;
this.ngZone.run(() => {
let place: google.maps.places.PlaceResult = this.autocompleteVin.getPlace();
if (place == undefined || place == null || place === undefined || place === null ||
place.geometry == undefined || place.geometry == null || place.geometry === undefined || place.geometry === null ||
place.formatted_address == undefined || place.formatted_address == null || place.formatted_address === undefined || place.formatted_address === null) {
this.searchLocError = true;
return;
}
location = {'location':place.formatted_address,
'location_lat':place.geometry.location.lat(),
'location_lng':place.geometry.location.lng()
};
});
this.addCustomerCar(2,vehicleData,location);
}
addCustomerCar(type,vehicleData,location){
this.loader = true;
let postData = {'type':type,'customer_id':this.loginDetails.customer_id,'vehicleData':vehicleData,'location':location};
this.webService.post_data('addCustomerCar',postData).subscribe(response => {
if ( response.status == '1' ) {
this.getCustVehDetails();
this.closeVehicleAddFormRef.nativeElement.click();
this.resetVehicleForm();
this.loader = false;
} else {
this.loader = false;
this.errMessage = {'errMsg':response.message}
    setTimeout (() => {
         this.errMessage = false;
      }, 2000);
}
});
}
cancelBooking(bookingId){
this.loader = true;
this.webService.post_data('cancelBooking', {'customer_id':this.loginDetails.customer_id,'booking_id':bookingId}).subscribe(response => {
if ( response.status == '1' ) {
this.getCustBookDetails();
this.loader = false;
}
});
}
deleteCustomerCar(customer_id,customer_veh_id){
this.loader = true;
this.webService.post_data('deleteCustomerCar', {'customer_id':customer_id,'customer_veh_id':customer_veh_id}).subscribe(response => {
if ( response.status == '1' ) {
this.getCustVehDetails();
this.loader = false;
}
}); });
} }
imageUpload(e) {
let reader = new FileReader();
this.profile_image = e.target.files[0];
reader.onloadend = () => {
this.imageUrl = reader.result;
}
reader.readAsDataURL(this.profile_image);
}
resetVehicleForm(){
this.vehicleVinAddForm.reset();
this.vehicleDetailsAddForm.reset();
}
routeToIndex(){ routeToIndex(){
this.router.navigate(["index"]); this.router.navigate(["index"]);
} }
bookVechile(customer_veh_id){
this.loader = true;
const thisObj = this;
thisObj.vehDetails.forEach(function (vehData) {
if(vehData.customer_veh_id == customer_veh_id){
thisObj.wizardData = {'pickup_data':
{'pickup_loc':vehData.car_location,
'pickup_lat':vehData.car_loc_lat,
'pickup_lng':vehData.car_loc_lng
}
};
thisObj.wizardData['vechile_info'] = {'trim':'','milage':'','emgine':'',
'maker':vehData.car_maker,
'modelName':vehData.car_model,
'modelYear':vehData.car_model_year}
}
});
this.getIssueData();
this.loader = false;
}
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;
} else {
return false;
}
},error => {
return false;
});
}
jumpToStep3(){
if(this.selectedIssues.length != 0){
this.step3nextRef.nativeElement.click();
}
}
getQuote(){
const thisObj = this;
this.loader = true;
let selSubIssues: any[] = new Array();
thisObj.selectedIssues.forEach(function (selIssues) {
selSubIssues.push(selIssues.sub_issue_id);
});
let searchData = {'pickup_data':this.wizardData.pickup_data,'sub_issues':selSubIssues}
this.webService.post_data('getNearByMechanics',searchData).subscribe(response => {
this.loader = false;
if(response.status == '1'){
this.mechanicData = response.mechanic_data;
this.dateSection.push(new Date(this.today.setDate(this.today.getDate())));
this.dateSection.push(new Date(this.today.setDate(this.today.getDate() + 1)));
} else {
return false;
}
},error => {
return false;
});
}
onMouseOver(infoWindow, gm) {
if (gm.lastOpen != null) {
gm.lastOpen.close();
}
gm.lastOpen = infoWindow;
infoWindow.open();
}
onMouseOut(gm){
if (gm.lastOpen != null) {
gm.lastOpen.close();
}
}
next(event) {
if(this.dateStep > 30){
return false;
}
this.dateSection = new Array();
this.nextDate.setDate(this.nextDate.getDate() + 1);
this.currDate.setDate(this.currDate.getDate() + 1);
this.dateSection[0] = new Date(this.currDate);
this.dateSection[1] = new Date(this.nextDate);
this.dateStep += 1;
}
prev(event) {
if(this.dateStep <= 0){
return false;
}
this.dateSection = new Array();
this.nextDate.setDate(this.nextDate.getDate() - 1);
this.currDate.setDate(this.currDate.getDate() - 1);
this.dateSection[0] = new Date(this.currDate);
this.dateSection[1] = new Date(this.nextDate);
this.dateStep -= 1;
}
getSchedule(time,index){
this.scheduleDateInit = true;
this.wizardData['schedule_date'] = {'date':this.formatDate(this.dateSection[index]),'time':time};
}
formatDate(date) {
const d = new Date(date);
let day = '' + d.getDate();
let month = ''+(d.getMonth()+1);
const year = d.getFullYear();
if (day.length < 2) { day = '0'+day; }
if (month.length < 2) { month = '0'+month; }
return [year,month,day].join('-');
}
scheduleNow(mechanic_id){
this.wizardData['mechanic_id'] = mechanic_id;
if(!this.loginDetails){
this.routeToIndex();
}
this.loader = true;
this.confirmBooking();
}
confirmBooking(){
this.wizardData['customer_id'] = this.loginDetails.customer_id;
this.wizardData['selected_issues'] = this.selectedIssues;
this.webService.post_data('scheduleNow',this.wizardData).subscribe(response => {
this.loader = false;
if(response.status == '1'){
this.closeWizardRef.nativeElement.click();
this.closeQuoteWizardRef.nativeElement.click();
this.goTostep1Ref.nativeElement.click();
this.selectedIssues = [];
} else {
return false;
}
},error => {
this.loader = false;
return false;
});
}
resetQuoteWizard(){
this.selectedIssues = [];
this.scheduleDateInit = false;
this.goTostep1Ref.nativeElement.click();
}
tab_swap(type) { this.tab = type; } tab_swap(type) { this.tab = type; }
} }
\ No newline at end of file
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 #closeWizard class="modal_close" data-dismiss="modal" (click)="resetWizard()"> <div #closeWizard class="modal_close" data-dismiss="modal" (click)="resetQuoteWizard()">
&times; &times;
</div> </div>
<div class="modal-body"> <div class="modal-body">
...@@ -300,8 +300,7 @@ ...@@ -300,8 +300,7 @@
<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 [ngClass]="{'log_btn_diabled':vehicleDataForm.invalid}" type="submit" class="log_btn next_btn floatRight">NEXT</button> <button [ngClass]="{'log_btn_diabled':vehicleDataForm.invalid}" type="submit" class="log_btn next_btn floatRight" (click)="jumpToStep(1)">NEXT</button>
<input #step2nextBtn type="hidden" nextStep>
</div> </div>
</div> </div>
</form> </form>
...@@ -340,8 +339,7 @@ ...@@ -340,8 +339,7 @@
<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>
<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)="jumpToStep(2)">NEXT</button>
<input #step3nextBtn type="hidden" nextStep>
</div> </div>
</div> </div>
</wizard-step> </wizard-step>
...@@ -406,7 +404,6 @@ ...@@ -406,7 +404,6 @@
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<h6 class="pt10 textLeft"><a goToStep="1">Add more services</a></h6> <h6 class="pt10 textLeft"><a goToStep="1">Add more services</a></h6>
<input #goTostep1 type="hidden" goToStep="1">
</div> </div>
</div> </div>
<div class="row"> <div class="row">
...@@ -416,6 +413,9 @@ ...@@ -416,6 +413,9 @@
<input type="hidden" #indexLoginModal data-toggle="modal" data-target="#login"> <input type="hidden" #indexLoginModal data-toggle="modal" data-target="#login">
</div> </div>
</div> </div>
<input #goTostep0 type="hidden" goToStep="0">
<input #goTostep1 type="hidden" goToStep="1">
<input #goTostep2 type="hidden" goToStep="2">
</wizard-step> </wizard-step>
</wizard> </wizard>
</div> </div>
...@@ -433,7 +433,7 @@ ...@@ -433,7 +433,7 @@
<div class="modal" id="quotes"> <div class="modal" id="quotes">
<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 #closeQuoteWizard class="modal_close" data-dismiss="modal"> <div #closeQuoteWizard class="modal_close" data-dismiss="modal" (click)="resetQuoteWizard()">
&times; &times;
</div> </div>
<div class="modal-body"> <div class="modal-body">
...@@ -487,7 +487,6 @@ ...@@ -487,7 +487,6 @@
<p>{{mechanic.address}}<br>{{mechanic.city+' , '+mechanic.state}}</p> <p>{{mechanic.address}}<br>{{mechanic.city+' , '+mechanic.state}}</p>
<h6>{{mechanic.phone}}</h6> <h6>{{mechanic.phone}}</h6>
</ng-template> </ng-template>
<button class="view_profile">View Profile</button>
<button (click)="scheduleNow(mechanic.mechanic_id)" <button (click)="scheduleNow(mechanic.mechanic_id)"
[ngClass]="{'book_now':scheduleDateInit == true, [ngClass]="{'book_now':scheduleDateInit == true,
'book_now_disabled':scheduleDateInit == false}"> 'book_now_disabled':scheduleDateInit == false}">
...@@ -495,6 +494,52 @@ ...@@ -495,6 +494,52 @@
</button> </button>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
<!-- <div class="offer">
<div class="panel-group" id="accordion">
<div class="panel panel-default" *ngFor="let sub_issues of mechanic.sub_issues">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#sub_issue_dtls_{{sub_issues.issue_id}}_{{sub_issues.issue_cat_id}}">
<div class="row">
<div class="col-md-5">{{sub_issues.issue_category}}</div>
<div class="col-md-1">:</div>
<div class="col-md-5"><strong>{{sub_issues.custom_service_fee}}</strong></div>
</div>
</a>
</h4>
</div>
<div id="sub_issue_dtls_{{sub_issues.issue_id}}_{{sub_issues.issue_cat_id}}" class="panel-collapse collapse in">
<div class="panel-body">{{sub_issues.custom_description}}</div>
</div>
</div>
</div>
</div> -->
<div class="offer">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#estimate_{{mechanic.mechanic_id}}">
<div class="row">
<div class="col-md-8">Estimated Price</div>
<div class="col-md-1"></div>
<div class="col-md-2 textRight"><strong>{{mechanic.estimate}}</strong></div>
</div>
</a>
</h4>
</div>
<div id="estimate_{{mechanic.mechanic_id}}" class="panel-collapse collapse in">
<div class="panel-body" *ngFor="let sub_issues of mechanic.sub_issues">
<div class="row">
<div class="col-md-8">{{sub_issues.issue_category}}</div>
<div class="col-md-1">:</div>
<div class="col-md-3 textRight"><strong>{{sub_issues.service_fee}}</strong></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -535,6 +580,8 @@ ...@@ -535,6 +580,8 @@
<p>{{selIssue.issue_category}}</p> <p>{{selIssue.issue_category}}</p>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
<p>Estimated Price : <strong>{{estimatedPrice}}</strong></p>
<div class="clear"></div>
</div> </div>
<div class="service_map"> <div class="service_map">
<agm-map #gm [latitude]="lat" [longitude]="lng"> <agm-map #gm [latitude]="lat" [longitude]="lng">
......
src/app/home/index/index.component.scss
...@@ -883,6 +883,7 @@ ...@@ -883,6 +883,7 @@
} }
} }
.book_now { .book_now {
float:right;
border: 1px solid #2655bf; border: 1px solid #2655bf;
color: #2655bf; color: #2655bf;
background: transparent; background: transparent;
...@@ -897,6 +898,7 @@ ...@@ -897,6 +898,7 @@
} }
} }
.book_now_disabled{ .book_now_disabled{
float:right;
border: 1px solid #808080; border: 1px solid #808080;
color: #808080; color: #808080;
background: transparent; background: transparent;
...@@ -915,6 +917,48 @@ ...@@ -915,6 +917,48 @@
} }
} }
} }
.offer{
color: #a8a8a8;
text-align: justify;
font-size: 12px;
.panel-heading{
padding: 10px;
margin-bottom: 5px;
padding-left: 15px;
padding-right: 15px;
background-color: #2655bf;
background-image: url("/assets/images/asset_double_right.png");
background-position: right 10px top 8px;
background-repeat: no-repeat;
.panel-title{
padding: 0px;
margin:0px;
a{
color: #fff;
font-weight: 300;
font-size: 15px;
}
}
}
.panel-collapse{
background-color: #f5f5f5;
.panel-body{
font-size: 15px;
font-weight: 400;
.row{
padding:10px;
border-bottom: 1px solid #fff;
}
}
}
}
} }
.scheduletiming_listing { .scheduletiming_listing {
width: calc(100% - 80px); width: calc(100% - 80px);
......
src/app/home/index/index.component.ts
...@@ -34,10 +34,12 @@ export class IndexComponent implements OnInit { ...@@ -34,10 +34,12 @@ export class IndexComponent implements OnInit {
//Basic Location Search: TAB 1 //Basic Location Search: TAB 1
autocomplete: any; autocomplete: any;
searchLocError: boolean; searchLocError: boolean;
@ViewChild("goTostep0") public goTostep0Ref: ElementRef;
@ViewChild("goTostep1") public goTostep1Ref: ElementRef; @ViewChild("goTostep1") public goTostep1Ref: ElementRef;
@ViewChild("goTostep2") public goTostep2Ref: ElementRef;
@ViewChild("closeWizard") public closeWizardRef: ElementRef; @ViewChild("closeWizard") public closeWizardRef: ElementRef;
@ViewChild("step2nextBtn") public step2nextRef: ElementRef;
@ViewChild("step3nextBtn") public step3nextRef: ElementRef;
@ViewChild("googleLocSearch") public searchElementRef: ElementRef; @ViewChild("googleLocSearch") public searchElementRef: ElementRef;
@ViewChild("indexLoginModal") loginModalRef: ElementRef; @ViewChild("indexLoginModal") loginModalRef: ElementRef;
@ViewChild("closeQuoteWizard") closeQuoteWizardRef: ElementRef; @ViewChild("closeQuoteWizard") closeQuoteWizardRef: ElementRef;
...@@ -52,6 +54,7 @@ export class IndexComponent implements OnInit { ...@@ -52,6 +54,7 @@ export class IndexComponent implements OnInit {
selectedIssues: any[] = new Array(); selectedIssues: any[] = new Array();
//Quote Page //Quote Page
step: number;
today: any = new Date(); today: any = new Date();
currDate: any; currDate: any;
nextDate: any; nextDate: any;
...@@ -60,6 +63,7 @@ export class IndexComponent implements OnInit { ...@@ -60,6 +63,7 @@ export class IndexComponent implements OnInit {
imageServer: string; imageServer: string;
mechanicData: any; mechanicData: any;
autoSchedule: boolean; autoSchedule: boolean;
estimatedPrice: number;
scheduleDateInit: boolean; scheduleDateInit: boolean;
carModel: any; carModel: any;
...@@ -72,6 +76,7 @@ export class IndexComponent implements OnInit { ...@@ -72,6 +76,7 @@ export class IndexComponent implements OnInit {
public webService : WebService, public webService : WebService,
public mapsAPILoader : MapsAPILoader, public mapsAPILoader : MapsAPILoader,
public subjectService : SubjectService) { public subjectService : SubjectService) {
this.step = 0;
this.autoSchedule = false; this.autoSchedule = false;
this.imageServer = ImageStorage; this.imageServer = ImageStorage;
this.currDate = new Date(); this.currDate = new Date();
...@@ -123,46 +128,6 @@ export class IndexComponent implements OnInit { ...@@ -123,46 +128,6 @@ export class IndexComponent implements OnInit {
this.carModel = this.carSearchJsonData[event].models; this.carModel = this.carSearchJsonData[event].models;
} }
setIssueSelected(event){
let issue_id = event.target.attributes.issue_id.value;
let sub_issue_id = event.target.attributes.sub_issue_id.value;
let index = this.selectedIssues.findIndex(x => x.sub_issue_id == sub_issue_id);
if(index > -1){
this.selectedIssues.splice(index, 1);
} else {
const thisObj = this;
this.issuesData.forEach(function (issData) {
if(issData.issue_id == issue_id){
issData.sub_categories.forEach(function (subIssData) {
if(subIssData.issue_cat_id == sub_issue_id){
let issue = issData.issue,
issue_image = issData.issue_image,
issue_category = subIssData.issue_category,
issue_cat_image = subIssData.issue_cat_image,
default_service_fee = subIssData.default_service_fee,
default_description = subIssData.default_description;
thisObj.selectedIssues.push({issue_id,sub_issue_id,issue,issue_image,issue_category,issue_cat_image,default_service_fee,default_description});
}
});
}
});
}
}
removeSelectedItem(issue_id,sub_issue_id){
let index = this.selectedIssues.findIndex(x => x.sub_issue_id == sub_issue_id);
if(index > -1){
this.selectedIssues.splice(index, 1);
$('[id="issue_'+issue_id+'_'+sub_issue_id+'"]').prop('checked', false);
}
if(this.selectedIssues.length == 0){
this.goTostep1Ref.nativeElement.click();
}
}
getVehicleLoc(lastLoc){ getVehicleLoc(lastLoc){
if(lastLoc == ''){ if(lastLoc == ''){
this.searchLocError = true; this.searchLocError = true;
...@@ -188,6 +153,8 @@ export class IndexComponent implements OnInit { ...@@ -188,6 +153,8 @@ export class IndexComponent implements OnInit {
this.lat = place.geometry.location.lat(); this.lat = place.geometry.location.lat();
this.lng = place.geometry.location.lng(); this.lng = place.geometry.location.lng();
this.wizardModalTrrigerInput.nativeElement.click(); this.wizardModalTrrigerInput.nativeElement.click();
this.getIssueData();
}); });
} }
...@@ -200,42 +167,96 @@ export class IndexComponent implements OnInit { ...@@ -200,42 +167,96 @@ export class IndexComponent implements OnInit {
'milage':vehicleData['milage'],'emgine':vehicleData['emgine'], 'milage':vehicleData['milage'],'emgine':vehicleData['emgine'],
'modelName':vehicleData['modelName'],'modelYear':vehicleData['modelYear'] 'modelName':vehicleData['modelName'],'modelYear':vehicleData['modelYear']
} }
this.getIssueData();
this.vehicleDataFormSubmit = false; this.vehicleDataFormSubmit = false;
this.step2nextRef.nativeElement.click();
} }
getIssueData(){ getIssueData(){
const This = this; const This = this;
this.loader = true; this.loader = true;
this.webService.get_data('getGeneralIssues').subscribe(response => { this.webService.get_data('getGeneralIssues').subscribe(response => {
this.loader = false;
if(response.status == '1'){ if(response.status == '1'){
this.issuesData = response.issue_data; this.issuesData = response.issue_data;
this.loader = false;
} else { } else {
return false; return false;
} }
this.loader = false;
},error => { },error => {
this.loader = false;
return false; return false;
}); });
} }
resetWizard(){ setIssueSelected(event){
this.vehicleDataForm.reset(); let issue_id = event.target.attributes.issue_id.value;
this.searchElementRef.nativeElement.value = ''; let sub_issue_id = event.target.attributes.sub_issue_id.value;
const thisObj = this;
let index = thisObj.selectedIssues.findIndex(x => x.sub_issue_id == sub_issue_id);
if(index > -1){
thisObj.selectedIssues.splice(index, 1);
} else {
thisObj.issuesData.forEach(function (issData) {
if(issData.issue_id == issue_id){
issData.sub_categories.forEach(function (subIssData) {
if(subIssData.issue_cat_id == sub_issue_id){
let issue = issData.issue,
issue_image = issData.issue_image,
issue_category = subIssData.issue_category,
issue_cat_image = subIssData.issue_cat_image,
default_service_fee = subIssData.default_service_fee,
default_description = subIssData.default_description;
thisObj.selectedIssues.push({issue_id,sub_issue_id,issue,issue_image,issue_category,issue_cat_image,default_service_fee,default_description});
}
});
}
});
}
this.calculateEstimate();
}
calculateEstimate(){
const thisObj = this;
thisObj.estimatedPrice = 0;
thisObj.selectedIssues.forEach(function (selIssues) {
thisObj.estimatedPrice = thisObj.estimatedPrice + Number(selIssues.default_service_fee);
});
} }
jumpToStep3(){ removeSelectedItem(issue_id,sub_issue_id){
if(this.selectedIssues.length != 0){ let index = this.selectedIssues.findIndex(x => x.sub_issue_id == sub_issue_id);
this.step3nextRef.nativeElement.click(); if(index > -1){
this.selectedIssues.splice(index, 1);
$('[id="issue_'+issue_id+'_'+sub_issue_id+'"]').prop('checked', false);
} }
if(this.selectedIssues.length == 0){
this.jumpToStep1();
}
this.calculateEstimate();
}
resetQuoteWizard(){
this.jumpToStep0();
this.vehicleDataForm.reset();
this.searchElementRef.nativeElement.value = '';
this.selectedIssues = [];
this.scheduleDateInit = false;
} }
getQuote(){ getQuote(){
const This = this; const thisObj = this;
this.loader = true; this.loader = true;
this.webService.post_data('getNearByMechanics',this.wizardData.pickup_data).subscribe(response => { let selSubIssues: any[] = new Array();
thisObj.selectedIssues.forEach(function (selIssues) {
selSubIssues.push(selIssues.sub_issue_id);
});
let searchData = {'pickup_data':this.wizardData.pickup_data,'sub_issues':selSubIssues}
this.webService.post_data('getNearByMechanics',searchData).subscribe(response => {
this.loader = false; this.loader = false;
if(response.status == '1'){ if(response.status == '1'){
this.mechanicData = response.mechanic_data; this.mechanicData = response.mechanic_data;
...@@ -270,13 +291,10 @@ export class IndexComponent implements OnInit { ...@@ -270,13 +291,10 @@ export class IndexComponent implements OnInit {
return false; return false;
} }
this.dateSection = new Array(); this.dateSection = new Array();
this.nextDate.setDate(this.nextDate.getDate() + 1); this.nextDate.setDate(this.nextDate.getDate() + 1);
this.currDate.setDate(this.currDate.getDate() + 1); this.currDate.setDate(this.currDate.getDate() + 1);
this.dateSection[0] = new Date(this.currDate); this.dateSection[0] = new Date(this.currDate);
this.dateSection[1] = new Date(this.nextDate); this.dateSection[1] = new Date(this.nextDate);
this.dateStep += 1; this.dateStep += 1;
} }
...@@ -285,13 +303,10 @@ export class IndexComponent implements OnInit { ...@@ -285,13 +303,10 @@ export class IndexComponent implements OnInit {
return false; return false;
} }
this.dateSection = new Array(); this.dateSection = new Array();
this.nextDate.setDate(this.nextDate.getDate() - 1); this.nextDate.setDate(this.nextDate.getDate() - 1);
this.currDate.setDate(this.currDate.getDate() - 1); this.currDate.setDate(this.currDate.getDate() - 1);
this.dateSection[0] = new Date(this.currDate); this.dateSection[0] = new Date(this.currDate);
this.dateSection[1] = new Date(this.nextDate); this.dateSection[1] = new Date(this.nextDate);
this.dateStep -= 1; this.dateStep -= 1;
} }
...@@ -324,6 +339,7 @@ export class IndexComponent implements OnInit { ...@@ -324,6 +339,7 @@ export class IndexComponent implements OnInit {
confirmBooking(){ confirmBooking(){
this.wizardData['customer_id'] = this.loginDetails.customer_id; this.wizardData['customer_id'] = this.loginDetails.customer_id;
this.wizardData['selected_issues'] = this.selectedIssues;
this.webService.post_data('scheduleNow',this.wizardData).subscribe(response => { this.webService.post_data('scheduleNow',this.wizardData).subscribe(response => {
this.loader = false; this.loader = false;
...@@ -340,6 +356,24 @@ export class IndexComponent implements OnInit { ...@@ -340,6 +356,24 @@ export class IndexComponent implements OnInit {
}); });
} }
jumpToStep0(){
this.goTostepRef.nativeElement.click();
}
jumpToStep1(){
if(!this.vehicleDataForm.invalid){
this.goTostepRef.nativeElement.click();
}
}
jumpToStep2(){
if(this.selectedIssues.length > 0){
this.goTostepRef.nativeElement.click();
}
}
featuredOnLoad() {return ''; } featuredOnLoad() {return ''; }
carouselTileLoad(){ return ''; } carouselTileLoad(){ return ''; }
} }
src/app/navbar/navbar.component.html
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<!-- Brand --> <!-- Brand -->
<a class="navbar-brand" href="#"> <a class="navbar-brand" (click)="goToPage('index')">
<img src="assets/images/asset_logo.png"> <img src="assets/images/asset_logo.png">
</a> </a>
......
src/app/provider/web.service.ts
...@@ -17,6 +17,14 @@ const httplive = { ...@@ -17,6 +17,14 @@ const httplive = {
}) })
}; };
const multipartHeader = {
headers: new HttpHeaders({
'enctype': 'multipart/form-data',
'Accept': 'application/json',
'Auth': 'my_key'
})
};
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
...@@ -27,6 +35,9 @@ export class WebService { ...@@ -27,6 +35,9 @@ export class WebService {
post_data(url: string, data) { post_data(url: string, data) {
return this.http.post(`${apiConfig + url}`, data, httpOptions).pipe(map((response: any) => response)); return this.http.post(`${apiConfig + url}`, data, httpOptions).pipe(map((response: any) => response));
} }
multipart_post(url: string, data) {
return this.http.post(`${apiConfig + url}`, data, multipartHeader).pipe(map((response: any) => response));
}
get_data(url) { get_data(url) {
return this.http.get(`${apiConfig + url}`, httpOptions).pipe(map((response: any) => response)); return this.http.get(`${apiConfig + url}`, httpOptions).pipe(map((response: any) => response));
} }
......
src/styles.scss
...@@ -51,8 +51,18 @@ button { ...@@ -51,8 +51,18 @@ button {
} }
} }
.pac-container {
z-index: 10000 !important;
}
a { a {
text-decoration: none !important; text-decoration: none !important;
cursor: pointer;
}
.text_truncate{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
} }
html, html,
......
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