Skip to content

D
dcarfixers_angular
Commit 4e8dbccc by Tobin
Options

daily commit

parent c40a9ee1
Showing with 1078 additions and 24 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>
<!-- 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
...@@ -72,6 +72,45 @@ ...@@ -72,6 +72,45 @@
.dashboard_tab_content { .dashboard_tab_content {
padding-bottom: 80px; padding-bottom: 80px;
table {
width: 100%;
thead {
background: rgba(0, 0, 0, 0.5);
tr {
th {
color: #fff;
font-size: 18px;
font-weight: 400;
padding: 10px;
padding-left: 25px;
}
}
}
tbody {
tr {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
td {
font-size: 16px;
font-weight: 400;
padding: 10px;
padding-left: 25px;
p {
margin: 0px !important;
padding: 0px !important;
}
.success_status {
color: #4CAF50 !important;
}
.pending_status {
color: #ffc107 !important;
}
.canceled_status {
color: #b21f2d !important;
}
}
}
}
}
.container-fluid { .container-fluid {
width: calc(100% - 15%); width: calc(100% - 15%);
.tab-content { .tab-content {
...@@ -79,6 +118,113 @@ ...@@ -79,6 +118,113 @@
max-width: 100%; max-width: 100%;
.line_row { .line_row {
margin-bottom: 20px; margin-bottom: 20px;
.vehicle_list {
width: 100%;
ul {
padding: 0px;
margin: 0px;
li {
list-style: none;
display: inline-block;
position: relative;
border: 1px solid #e2e2e2;
width: 49%;
padding: 15px;
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 { h3 {
font-weight: 400; font-weight: 400;
...@@ -99,6 +245,29 @@ ...@@ -99,6 +245,29 @@
-moz-border-radius: 0px; -moz-border-radius: 0px;
-ms-border-radius: 0px; -ms-border-radius: 0px;
-o-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 { .profile_pic {
width: 120px; width: 120px;
...@@ -181,3 +350,191 @@ ...@@ -181,3 +350,191 @@
} }
} }
} }
.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;
}
.vehicle_input_select {
width: 100%;
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;
padding-left: 15px;
-webkit-appearance: none;
-moz-appearance: none;
}
}
.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
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>
......
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;
......
src/app/home/index/index.component.ts
...@@ -45,6 +45,9 @@ export class IndexComponent implements OnInit { ...@@ -45,6 +45,9 @@ export class IndexComponent implements OnInit {
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();
...@@ -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="/">
......
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