Skip to content

D
dcarfixers_angular
Commit 4e8dbccc by Tobin
Options

daily commit

parent c40a9ee1
Showing with 1232 additions and 183 deletions
src/app/home/dashboard/dashboard.component.html
...@@ -28,6 +28,11 @@ ...@@ -28,6 +28,11 @@
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>
...@@ -158,13 +163,610 @@ ...@@ -158,13 +163,610 @@
<hr> <hr>
</div> </div>
</div> </div>
<div class="row line_row">
<div class="col-md-12">
<button class="add_btn" data-toggle="modal" data-target="#addvehicle">Add Vehicle</button>
<div class="clear"></div>
</div>
</div>
<div class="row line_row">
<div class="col-md-12">
<div class="vehicle_list">
<ul>
<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-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>
<!-- <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>
</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-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>
<!-- <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>
</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-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>
<!-- <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>
</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-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>
<!-- <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>
</li>
</ul>
</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="row">
<div class="col-md-12">
<div class="row line_row">
<div class="col-md-12">
<h3>Appointment Details</h3>
<hr>
</div>
</div>
<div class="row line_row">
<div class="col-md-12">
<div class="table-responsive">
<table>
<thead>
<tr>
<th>Order no</th>
<th>Order Date</th>
<th>Vehicle</th>
<th>Mechanic</th>
<th>Cost</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tbody>
<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>
<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>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane container fade" id="service">
<div class="row">
<div class="col-md-12">
<div class="row line_row">
<div class="col-md-12">
<h3>Service History</h3>
<hr>
</div>
</div>
<div class="row line_row">
<div class="col-md-12">
<div class="table-responsive">
<table>
<thead>
<tr>
<th>Order no</th>
<th>Order Date</th>
<th>Vehicle</th>
<th>Mechanic</th>
<th>Service Charge</th>
<th>Order Status</th>
</tr>
</thead>
<tbody>
<tbody>
<tr>
<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>
<td>15DFR64</td>
<td>22-01-2019</td>
<td>Ford Explorer V8</td>
<td>Robin Carten</td>
<td>$203 </td>
<td>
<p class="pending_status">Pending</p>
</td>
</tr>
<tr>
<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>
</table>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="tab-pane container fade" id="estimate">3</div>
<div class="tab-pane container fade" id="appointment">4</div>
<div class="tab-pane container fade" id="service">5</div>
</div> </div>
</div> </div>
</section> </section>
</div> </div>
\ No newline at end of file
<!-- ADD-VEHICLE-MODAL-STARTS -->
<div class="modal" id="addvehicle">
<div class="modal-dialog">
<div class="modal-content add_modal_wrapper">
<h3>Add Vehicle
<span data-dismiss="modal" class="close">&times;</span>
</h3>
<div class="modal-body">
<div class="add_modal_tab_head">
<label class="check_container" [class.active]="tab == 'active'" (click)="tab_swap('active')">Vehicle Details
<input type="radio" checked="checked" name="radio">
<span class="checkmark"></span>
</label>
<label class="check_container" [class.active]="tab == 'inactive'" (click)="tab_swap('inactive')">Use VIN
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
</div>
<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="col-md-12">
<p>Add Vehicle Details</p>
</div>
</div>
<div class="row line_row">
<div class="col-md-6">
<select class="vehicle_input_select" placeholder="Choose Year">
<option>Choose Year</option>
</select>
</div>
<div class="col-md-6">
<select class="vehicle_input_select" placeholder="Choose Make">
<option>Choose Make</option>
</select>
</div>
</div>
<div class="row line_row">
<div class="col-md-6">
<select class="vehicle_input_select" placeholder="Choose Model">
<option>Choose Model</option>
</select>
</div>
<div class="col-md-6">
<select class="vehicle_input_select" placeholder="Choose Engine">
<option>Choose Engine</option>
</select>
</div>
</div>
<div class="row line_row mb0">
<div class="col-md-12">
<button class="add_btn">Add Vehicle</button>
</div>
</div>
</div>
<div class="add_modal_inner" [hidden]="tab=='active'">
<div class="row">
<div class="col-md-12">
<p>Add Vehicle Identification number</p>
</div>
</div>
<div class="row line_row">
<div class="col-md-12">
<input class="vehicle_input" placeholder="Add VIN ">
</div>
</div>
<div class="row line_row mb0">
<div class="col-md-12">
<button class="add_btn">Add Vehicle</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ADD-VEHICLE-MODAL-ENDS -->
<!-- EDIT-VEHICLE-MODAL-STARTS -->
<div class="modal" id="editvehicle">
<div class="modal-dialog">
<div class="modal-content add_modal_wrapper">
<h3>Edit Vehicle
<span data-dismiss="modal" class="close">&times;</span>
</h3>
<div class="modal-body">
<div class="add_modal_inner">
<!-- <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="col-md-12">
<p>Edit Vehicle Details</p>
</div>
</div>
<div class="row line_row">
<div class="col-md-12">
<input class="vehicle_input" placeholder="Edit VIN">
</div>
</div>
<div class="row line_row">
<div class="col-md-12">
<input class="vehicle_input" placeholder="Edit Registration Number">
</div>
</div>
<div class="row line_row mb0">
<div class="col-md-12">
<button class="add_btn">Save Vehicle</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- EDIT-VEHICLE-MODAL-ENDS -->
\ No newline at end of file
src/app/home/dashboard/dashboard.component.scss
.parallax_title { .parallax_title {
background: url("/assets/images/asset_landing_background.png"); background: url("/assets/images/asset_landing_background.png");
} }
.title_banner { .title_banner {
width: 100%; width: 100%;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
height: 300px; height: 300px;
} }
.dashboard_tabs { .dashboard_tabs {
background: rgba(0, 0, 0, 0.9); background: rgba(0, 0, 0, 0.9);
.container-fluid { .container-fluid {
width: calc(100% - 15%); width: calc(100% - 15%);
ul { ul {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
border: none; border: none;
li { li {
list-style: none; list-style: none;
display: inline-block; display: inline-block;
width: 20%; width: 20%;
color: #fff;
background: transparent;
cursor: pointer;
a.active {
background-color: rgba(273, 273, 273, 0.2) !important;
}
a.profile {
background-image: url("/assets/images/asset_dashboard.png");
}
a.vehicle {
background-image: url("/assets/images/asset_car.png");
}
a.estimate {
background-image: url("/assets/images/asset_doc.png");
}
a.appointment {
background-image: url("/assets/images/asset_calender.png");
}
a.time {
background-image: url("/assets/images/asset_time.png");
}
a {
color: #fff; color: #fff;
padding: 20px;
font-size: 18px;
font-weight: 500;
cursor: pointer;
border: 1px solid transparent;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
background: transparent; background: transparent;
background-size: 30px; cursor: pointer;
background-repeat: no-repeat; a.active {
background-position: 20px; background-color: rgba(273, 273, 273, 0.2) !important;
padding-left: 65px;
&:focus {
background-color: rgba(273, 273, 273, 0.2);
} }
&:hover { a.profile {
background-color: rgba(273, 273, 273, 0.2); background-image: url("/assets/images/asset_dashboard.png");
}
a.vehicle {
background-image: url("/assets/images/asset_car.png");
}
a.estimate {
background-image: url("/assets/images/asset_doc.png");
}
a.appointment {
background-image: url("/assets/images/asset_calender.png");
}
a.time {
background-image: url("/assets/images/asset_time.png");
}
a {
color: #fff;
padding: 20px;
font-size: 18px;
font-weight: 500;
cursor: pointer;
border: 1px solid transparent;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
background: transparent;
background-size: 30px;
background-repeat: no-repeat;
background-position: 20px;
padding-left: 65px;
&:focus {
background-color: rgba(273, 273, 273, 0.2);
}
&:hover {
background-color: rgba(273, 273, 273, 0.2);
}
} }
} }
} }
} }
} }
}
.dashboard_tab_content {
.dashboard_tab_content { padding-bottom: 80px;
padding-bottom: 80px; table {
.container-fluid { width: 100%;
width: calc(100% - 15%); thead {
.tab-content { background: rgba(0, 0, 0, 0.5);
.container { tr {
max-width: 100%; th {
.line_row { color: #fff;
margin-bottom: 20px; font-size: 18px;
} font-weight: 400;
h3 { padding: 10px;
font-weight: 400; padding-left: 25px;
padding-top: 60px; }
} }
hr {} }
.save_btn { tbody {
height: 45px; tr {
border-radius: 0px; border-bottom: 1px solid rgba(0, 0, 0, 0.2);
padding-left: 10%; td {
padding-right: 10%; font-size: 16px;
color: #fff; font-weight: 400;
background: #2655bf; padding: 10px;
border: none; padding-left: 25px;
font-size: 20px; p {
font-weight: 300; margin: 0px !important;
-webkit-border-radius: 0px; padding: 0px !important;
-moz-border-radius: 0px; }
-ms-border-radius: 0px; .success_status {
-o-border-radius: 0px; color: #4CAF50 !important;
}
.pending_status {
color: #ffc107 !important;
}
.canceled_status {
color: #b21f2d !important;
}
}
} }
.profile_pic { }
width: 120px; }
height: 120px; .container-fluid {
background: #a8a8a8; width: calc(100% - 15%);
border-radius: 50%; .tab-content {
-webkit-border-radius: 50%; .container {
-moz-border-radius: 50%; max-width: 100%;
-ms-border-radius: 50%; .line_row {
-o-border-radius: 50%; margin-bottom: 20px;
object-fit: cover; .vehicle_list {
object-position: center; width: 100%;
margin-top: 20px; ul {
position: relative; padding: 0px;
.edit { margin: 0px;
width: 35px; li {
height: 35px; list-style: none;
cursor: pointer; display: inline-block;
background-color: #1e1e1e; position: relative;
background-image: url("/assets/images/asset_edit.png"); border: 1px solid #e2e2e2;
background-position: center; width: 49%;
background-repeat: no-repeat; padding: 15px;
background-size: 20px; margin: 5px;
min-height: 170px;
.car_photo {
width: 120px;
height: 120px;
background: #a8a8a8;
float: left;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.car_details {
width: calc(100% - 120px);
float: left;
padding: 8px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 15px;
h5 {
color: #2655bf;
font-size: 18px;
strong {
color: #2b4468;
padding-right: 5px;
}
}
h6 {
color: #3d3d3a;
}
p {
margin: 0px;
padding: 0px;
}
}
.button_bay {
padding-top: 10px;
.btn-group-justified {
.btn {
padding-left: 20px;
padding-right: 20px;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
&:focus {
outline: none;
border: none;
}
}
}
.book {
background: #2655bf;
color: #fff;
&:focus {
outline: none;
}
}
.edit {
width: 40px;
height: 40px;
background-image: url("/assets/images/asset_edit_dark.png");
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: 22px !important;
cursor: pointer;
float: right;
border: none;
&:focus {
outline: none;
}
}
.delete {
width: 40px;
height: 40px;
background-image: url("/assets/images/asset_delete_dark.png");
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: 22px !important;
cursor: pointer;
float: right;
border: none;
&:focus {
outline: none;
}
}
}
}
}
}
}
h3 {
font-weight: 400;
padding-top: 60px;
}
hr {}
.save_btn {
height: 45px;
border-radius: 0px;
padding-left: 10%;
padding-right: 10%;
color: #fff;
background: #2655bf;
border: none;
font-size: 20px;
font-weight: 300;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
&:focus {
outline: none;
}
}
.add_btn {
height: 45px;
border-radius: 0px;
padding-left: 3%;
padding-right: 3%;
color: #fff;
background: transparent;
border: 2px solid #2655bf;
color: #2655bf;
font-size: 20px;
font-weight: 500;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
float: right;
&:focus {
outline: none;
}
}
.profile_pic {
width: 120px;
height: 120px;
background: #a8a8a8;
border-radius: 50%; border-radius: 50%;
-webkit-border-radius: 50%; -webkit-border-radius: 50%;
-moz-border-radius: 50%; -moz-border-radius: 50%;
-ms-border-radius: 50%; -ms-border-radius: 50%;
-o-border-radius: 50%; -o-border-radius: 50%;
position: absolute; object-fit: cover;
top: 0px; object-position: center;
right: 0px; margin-top: 20px;
input { position: relative;
position: absolute; .edit {
top: 0px;
width: 35px; width: 35px;
cursor: pointer;
height: 35px; height: 35px;
left: 0px; cursor: pointer;
background-color: #1e1e1e;
background-image: url("/assets/images/asset_edit.png");
background-position: center;
background-repeat: no-repeat;
background-size: 20px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
position: absolute;
top: 0px;
right: 0px; right: 0px;
bottom: 0px; input {
position: absolute;
top: 0px;
width: 35px;
cursor: pointer;
height: 35px;
left: 0px;
right: 0px;
bottom: 0px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
opacity: 0;
}
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 50%; border-radius: 50%;
-webkit-border-radius: 50%; -webkit-border-radius: 50%;
-moz-border-radius: 50%; -moz-border-radius: 50%;
-ms-border-radius: 50%; -ms-border-radius: 50%;
-o-border-radius: 50%; -o-border-radius: 50%;
opacity: 0;
} }
} }
img { p {
margin: 0px;
padding-bottom: 10px;
color: #1e1e1e;
font-weight: 600;
font-size: 16px;
}
.text_input {
width: 100%; width: 100%;
height: 100%; border: 1px solid #1e1e1e;
object-fit: cover; height: 40px;
object-position: center; padding-left: 15px;
border-radius: 50%; border-radius: 0px;
-webkit-border-radius: 50%; -webkit-border-radius: 0px;
-moz-border-radius: 50%; -moz-border-radius: 0px;
-ms-border-radius: 50%; -ms-border-radius: 0px;
-o-border-radius: 50%; -o-border-radius: 0px;
} }
} }
p { }
margin: 0px; }
padding-bottom: 10px; }
color: #1e1e1e;
font-weight: 600; .add_modal_wrapper {
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
h3 {
font-weight: 300;
padding: 10px;
margin: 0px;
background: #2b4468;
color: #fff;
position: relative;
.close {
position: absolute;
top: 15px;
right: 15px;
color: #fff;
}
}
p {
margin: 0px;
padding-bottom: 10px;
color: #1e1e1e;
font-weight: 600;
font-size: 16px;
}
.add_pic {
width: 100px;
height: 100px;
background: #a8a8a8;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
object-fit: cover;
object-position: center;
position: relative;
.edit {
width: 35px;
height: 35px;
cursor: pointer;
background-color: #1e1e1e;
background-image: url("/assets/images/asset_edit.png");
background-position: center;
background-repeat: no-repeat;
background-size: 20px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
position: absolute;
top: 0px;
right: 0px;
input {
position: absolute;
top: 0px;
width: 35px;
cursor: pointer;
height: 35px;
left: 0px;
right: 0px;
bottom: 0px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
opacity: 0;
}
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
}
.add_modal_tab_head {
border-bottom: 1px solid rgba(0, 0, 0, .1);
padding-bottom: 20px;
padding-top: 10px;
.check_container {
display: inline-block;
position: relative;
padding-left: 35px;
margin-bottom: 0px;
padding-right: 30px;
cursor: pointer;
font-size: 16px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.check_container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.check_container:hover input~.checkmark {
background-color: #ccc;
}
.check_container input:checked~.checkmark {
background-color: #2b4468;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.check_container input:checked~.checkmark:after {
display: block;
}
.check_container .checkmark:after {
top: 4px;
left: 4px;
width: 12px;
height: 12px;
border-radius: 50%;
background: white;
}
}
.add_modal_inner {
padding: 10px;
.line_row {
margin-bottom: 20px;
.vehicle_input {
width: 100%;
border: 1px solid #1e1e1e;
height: 40px;
padding-left: 15px;
font-size: 16px; font-size: 16px;
} }
.text_input { .vehicle_input_select {
width: 100%; width: 100%;
border: 1px solid #1e1e1e; border: 1px solid #1e1e1e;
background: url("/assets/images/asset_down_arrow.png");
font-size: 16px;
cursor: pointer;
background-position: right 10px top 10px;
background-repeat: no-repeat;
height: 40px; height: 40px;
padding-left: 15px; padding-left: 15px;
border-radius: 0px; -webkit-appearance: none;
-webkit-border-radius: 0px; -moz-appearance: none;
-moz-border-radius: 0px; }
-ms-border-radius: 0px; }
-o-border-radius: 0px; .add_btn {
height: 45px;
border-radius: 0px;
width: 100%;
padding-left: 5%;
padding-right: 5%;
color: #fff;
background: #2b4468;
border: none;
font-size: 20px;
font-weight: 500;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
float: right;
&:focus {
outline: none;
} }
} }
} }
} }
} \ No newline at end of file
\ No newline at end of file
src/app/home/dashboard/dashboard.component.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
@Component({ @Component({
selector: 'app-dashboard', selector: 'app-dashboard',
...@@ -6,10 +7,16 @@ import { Component, OnInit } from '@angular/core'; ...@@ -6,10 +7,16 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./dashboard.component.scss'] styleUrls: ['./dashboard.component.scss']
}) })
export class DashboardComponent implements OnInit { export class DashboardComponent implements OnInit {
tab: any;
constructor() { } constructor(private router : Router) { }
ngOnInit() { ngOnInit() {
this.tab = 'active';
}
routeToIndex(){
this.router.navigate(["index"]);
} }
} tab_swap(type) { this.tab = type; }
}
\ No newline at end of file
src/app/home/home.routing.ts
...@@ -5,9 +5,8 @@ import { DashboardComponent } from './dashboard/dashboard.component'; ...@@ -5,9 +5,8 @@ import { DashboardComponent } from './dashboard/dashboard.component';
const ModuleRoutes: Routes = [ const ModuleRoutes: Routes = [
{ path: 'index', component: IndexComponent}, { path: 'index', component: IndexComponent},
{path: 'dashboard', component: DashboardComponent} { path: 'dashboard', component: DashboardComponent}
]; ];
export const moduleRouting: ModuleWithProviders = RouterModule.forChild(ModuleRoutes) export const moduleRouting: ModuleWithProviders = RouterModule.forChild(ModuleRoutes)
......
src/app/home/index/index.component.html
...@@ -352,7 +352,7 @@ ...@@ -352,7 +352,7 @@
<h6 class="pt10 textLeft">Add notes for General Diagnosis (Please provide description in notes section) (optional) *</h6> <h6 class="pt10 textLeft">Add notes for General Diagnosis (Please provide description in notes section) (optional) *</h6>
</div> </div>
</div> </div>
<div class="row"> <div class="row m0">
<div class="col-md-12"> <div class="col-md-12">
<textarea class="textarea_input" rows="5" placeholder="Additional Informations you may can gave"> <textarea class="textarea_input" rows="5" placeholder="Additional Informations you may can gave">
Additional Informations you may can gave Additional Informations you may can gave
...@@ -360,31 +360,38 @@ ...@@ -360,31 +360,38 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-12"> <h6 class="pt10 textLeft">Add Images or Videos (Optional)</h6>
<h6 class="pt10 textLeft">Add notes for General Diagnosis (Please provide description in notes section) (optional) *</h6> <hr>
</div> <div class="add_images">
</div> <ul>
<div class="row"> <li><span>+</span>
<div class="col-md-12"> <input type="file">
<textarea class="textarea_input" rows="5"> </li>
Additional Informations you may can gave <li><span>+</span>
</textarea> <input type="file">
</li>
<li><span>+</span>
<input type="file">
</li>
<li><span>+</span>
<input type="file">
</li>
</ul>
</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" previousStep>PREVIOUS</button> <button class="log_btn prev_btn floatLeft" type="button" previousStep>PREVIOUS</button>
<button class="log_btn next_btn floatRight" type="button" nextStep> <button class="log_btn next_btn floatRight" type="button" nextStep>NEXT</button>
NEXT
</button>
</div> </div>
</div> </div>
</wizard-step> </wizard-step>
<wizard-step stepTitle="Title of step 4"> <wizard-step stepTitle="Title of step 4">
<h3>SUMMARY</h3> <h3>SUMMARY</h3>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<h6 class="pt10 textLeft">Please check and confirm your services</h6> <h6 class="pt10 textLeft">Please add a photo or video</h6>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
...@@ -405,7 +412,7 @@ ...@@ -405,7 +412,7 @@
<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-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 (click)="getQuote()" class="wizard_quotes" type="button" data-toggle="modal" data-target="#quotes">VIEW SERVICE QUOTE</button>
</div> </div>
</div> </div>
</wizard-step> </wizard-step>
...@@ -762,4 +769,4 @@ ...@@ -762,4 +769,4 @@
</div> </div>
</div> </div>
<!-- QUOTES-MODAL-ENDS--> <!-- QUOTES-MODAL-ENDS-->
\ No newline at end of file
src/app/home/index/index.component.scss
...@@ -541,6 +541,44 @@ ...@@ -541,6 +541,44 @@
.wizard_inner { .wizard_inner {
width: 100%; 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{ .service_methods{
max-height: 200px; max-height: 200px;
overflow: scroll; overflow: scroll;
...@@ -938,4 +976,4 @@ ...@@ -938,4 +976,4 @@
agm-map { agm-map {
height: 100%; height: 100%;
} }
\ No newline at end of file
src/app/home/index/index.component.ts
...@@ -40,11 +40,14 @@ export class IndexComponent implements OnInit { ...@@ -40,11 +40,14 @@ export class IndexComponent implements OnInit {
vehicleDataForm; vehicleDataForm;
vehicleDataFormSubmit; vehicleDataFormSubmit;
//Service Details: TAB 3 //Service Details: TAB 3
loader: boolean; loader: boolean;
issuesData: any; issuesData: any;
selectedIssues: any[] = new Array(); selectedIssues: any[] = new Array();
//Quote Page
carModel: any; carModel: any;
carSearchJsonData: any; carSearchJsonData: any;
modelDates: number[] = new Array(); modelDates: number[] = new Array();
...@@ -153,8 +156,8 @@ export class IndexComponent implements OnInit { ...@@ -153,8 +156,8 @@ export class IndexComponent implements OnInit {
this.wizardData = {'pickup_data': this.wizardData = {'pickup_data':
{'pickup_loc':place.formatted_address, {'pickup_loc':place.formatted_address,
'pickup_lat':place.geometry.location.lat(), 'pickup_lat':place.geometry.location.lat(),
'pickup_lng':place.geometry.location.lng() 'pickup_lng':place.geometry.location.lng()
} }
}; };
this.searchLocError = false; this.searchLocError = false;
...@@ -202,6 +205,22 @@ export class IndexComponent implements OnInit { ...@@ -202,6 +205,22 @@ export class IndexComponent implements OnInit {
} }
} }
getQuote(){
const This = this;
this.loader = true;
this.webService.post_data('getNearByMechanics',this.wizardData.pickup_data).subscribe(response => {
this.loader = false;
if(response.status == '1'){
this.issuesData = response.issue_data;
} else {
this.router.navigate(["index"]);
}
},error => {
this.router.navigate(["index"]);
});
}
featuredOnLoad() {return ''; } featuredOnLoad() {return ''; }
carouselTileLoad(){ return ''; } carouselTileLoad(){ return ''; }
} }
src/assets/css/responsive.scss
...@@ -42,6 +42,28 @@ ...@@ -42,6 +42,28 @@
.title_banner { .title_banner {
padding: 15px !important; padding: 15px !important;
} }
.dashboard_tab_content {
.container-fluid {
width: 100% !important;
}
.vehicle_list {
ul {
li {
width: 100% !important;
}
}
}
}
.dashboard_tabs {
.container-fluid {
width: 100% !important;
ul {
li {
width: 100% !important;
}
}
}
}
} }
......
src/index.html
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>CarFixers</title> <title>CarFixxers</title>
<base href="/"> <base href="/">
......
src/styles.scss
...@@ -454,4 +454,4 @@ section.module.parallax { ...@@ -454,4 +454,4 @@ section.module.parallax {
.error{ .error{
border:2px solid red !important; border:2px solid red !important;
} }
\ No newline at end of file
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