Improve usability of battery and customer forms

This commit is contained in:
Kendrick Chan 2018-01-17 15:09:57 +08:00
parent 929187f45c
commit 84784a850f
2 changed files with 114 additions and 115 deletions

View file

@ -51,39 +51,38 @@
</h3> </h3>
</div> </div>
<div class="form-group m-form__group row"> <div class="form-group m-form__group row">
<label class="col-lg-1 col-form-label" data-field="prod_code"> <div class="col-lg-4">
Product Code: <label data-field="prod_code">
</label> Product Code:
<div class="col-lg-3"> </label>
<input type="text" name="prod_code" class="form-control m-input" value="{{ obj.getProductCode() }}"> <input type="text" name="prod_code" class="form-control m-input" value="{{ obj.getProductCode() }}">
<div class="form-control-feedback hide" data-field="prod_code"></div> <div class="form-control-feedback hide" data-field="prod_code"></div>
<span class="m-form__help">Unique identifier for this product</span> </div>
</div> <div class="col-lg-4">
<label class="col-lg-1 col-form-label" data-field="sell_price"> <label data-field="sell_price">
Selling Price: Selling Price:
</label> </label>
<div class="col-lg-3"> <input type="text" name="sell_price" class="form-control m-input" value="{{ obj.getSellingPrice() }}">
<input type="text" name="sell_price" class="form-control m-input" value="{{ obj.getSellingPrice() }}"> <div class="form-control-feedback hide" data-field="sell_price"></div>
<div class="form-control-feedback hide" data-field="sell_price"></div> </div>
</div>
</div> </div>
<div class="form-group m-form__group row"> <div class="form-group m-form__group row">
<label class="col-lg-1 col-form-label" data-field="manufacturer"> <div class="col-lg-4">
Manufacturer: <label data-field="manufacturer">
</label> Manufacturer:
<div class="col-lg-3"> </label>
<select class="form-control m-input" id="manufacturer" name="manufacturer"> <select class="form-control m-input" id="manufacturer" name="manufacturer">
<option value=""></option> <option value=""></option>
{% for manufacturer in bmfgs %} {% for manufacturer in bmfgs %}
<option value="{{ manufacturer.getID() }}"{{ obj.getManufacturer() and manufacturer.getID() == obj.getManufacturer().getID() ? ' selected' }}>{{ manufacturer.getName() }}</option> <option value="{{ manufacturer.getID() }}"{{ obj.getManufacturer() and manufacturer.getID() == obj.getManufacturer().getID() ? ' selected' }}>{{ manufacturer.getName() }}</option>
{% endfor %} {% endfor %}
</select> </select>
<div class="form-control-feedback hide" data-field="manufacturer"></div> <div class="form-control-feedback hide" data-field="manufacturer"></div>
</div> </div>
<label class="col-lg-1 col-form-label" data-field="model"> <div class="col-lg-4">
Model: <label data-field="model">
</label> Model:
<div class="col-lg-3"> </label>
<select class="form-control m-input" id="model" name="model"> <select class="form-control m-input" id="model" name="model">
<option value=""></option> <option value=""></option>
{% for model in models %} {% for model in models %}
@ -92,10 +91,10 @@
</select> </select>
<div class="form-control-feedback hide" data-field="model"></div> <div class="form-control-feedback hide" data-field="model"></div>
</div> </div>
<label class="col-lg-1 col-form-label" data-field="size"> <div class="col-lg-4">
Size: <label data-field="size">
</label> Size:
<div class="col-lg-3"> </label>
<select class="form-control m-input" id="size" name="size"> <select class="form-control m-input" id="size" name="size">
<option value=""></option> <option value=""></option>
{% for size in sizes %} {% for size in sizes %}
@ -114,77 +113,77 @@
</h3> </h3>
</div> </div>
<div class="form-group m-form__group row"> <div class="form-group m-form__group row">
<label class="col-lg-1 col-form-label" data-field="warr_personal"> <div class="col-lg-4">
Personal: <label data-field="warr_personal">
</label> Personal:
<div class="col-lg-3"> </label>
<input type="number" name="warr_personal" class="form-control m-input" value="{{ obj.getWarrantyPersonal() }}"> <input type="number" name="warr_personal" class="form-control m-input" value="{{ obj.getWarrantyPersonal() }}">
<div class="form-control-feedback hide" data-field="warr_personal"></div> <div class="form-control-feedback hide" data-field="warr_personal"></div>
<span class="m-form__help">In months</span> <span class="m-form__help">In months</span>
</div> </div>
<label class="col-lg-1 col-form-label" data-field="warr_commercial"> <div class="col-lg-4">
Commercial: <label data-field="warr_commercial">
</label> Commercial:
<div class="col-lg-3"> </label>
<input type="number" name="warr_commercial" class="form-control m-input" value="{{ obj.getWarrantyCommercial() }}"> <input type="number" name="warr_commercial" class="form-control m-input" value="{{ obj.getWarrantyCommercial() }}">
<div class="form-control-feedback hide" data-field="warr_commercial"></div> <div class="form-control-feedback hide" data-field="warr_commercial"></div>
<span class="m-form__help">In months</span> <span class="m-form__help">In months</span>
</div> </div>
</div> </div>
</div> </div>
<div class="m-form__section"> <div class="m-form__section">
<div class="m-form__heading"> <div class="m-form__heading">
<h3 class="m-form__heading-title"> <h3 class="m-form__heading-title">
Specifications Specifications
</h3> </h3>
</div> </div>
<div class="form-group m-form__group row"> <div class="form-group m-form__group row">
<label class="col-lg-1 col-form-label" data-field="length"> <div class="col-lg-4">
Length: <label data-field="length">
</label> Length:
<div class="col-lg-3"> </label>
<input type="number" name="length" class="form-control m-input" value="{{ obj.getLength() }}"> <input type="number" name="length" class="form-control m-input" value="{{ obj.getLength() }}">
<div class="form-control-feedback hide" data-field="length"></div> <div class="form-control-feedback hide" data-field="length"></div>
<span class="m-form__help">In millimeters (mm)</span> <span class="m-form__help">In millimeters (mm)</span>
</div> </div>
<label class="col-lg-1 col-form-label" data-field="width"> <div class="col-lg-4">
Width: <label data-field="width">
</label> Width:
<div class="col-lg-3"> </label>
<input type="number" name="width" class="form-control m-input" value="{{ obj.getWidth() }}"> <input type="number" name="width" class="form-control m-input" value="{{ obj.getWidth() }}">
<div class="form-control-feedback hide" data-field="width"></div> <div class="form-control-feedback hide" data-field="width"></div>
<span class="m-form__help">In millimeters (mm)</span> <span class="m-form__help">In millimeters (mm)</span>
</div> </div>
<label class="col-lg-1 col-form-label" data-field="height"> <div class="col-lg-4">
Height: <label data-field="height">
</label> Height:
<div class="col-lg-3"> </label>
<input type="number" name="height" class="form-control m-input" value="{{ obj.getHeight() }}"> <input type="number" name="height" class="form-control m-input" value="{{ obj.getHeight() }}">
<div class="form-control-feedback hide" data-field="height"></div> <div class="form-control-feedback hide" data-field="height"></div>
<span class="m-form__help">In millimeters (mm)</span> <span class="m-form__help">In millimeters (mm)</span>
</div> </div>
</div> </div>
<div class="form-group m-form__group row"> <div class="form-group m-form__group row">
<label class="col-lg-1 col-form-label" data-field="total_height"> <div class="col-lg-4">
Total Height: <label data-field="total_height">
</label> Total Height:
<div class="col-lg-3"> </label>
<input type="number" name="total_height" class="form-control m-input" value="{{ obj.getTotalHeight() }}"> <input type="number" name="total_height" class="form-control m-input" value="{{ obj.getTotalHeight() }}">
<div class="form-control-feedback hide" data-field="total_height"></div> <div class="form-control-feedback hide" data-field="total_height"></div>
<span class="m-form__help">In millimeters (mm)</span> <span class="m-form__help">In millimeters (mm)</span>
</div> </div>
<label class="col-lg-1 col-form-label" data-field="res_capacity"> <div class="col-lg-4">
Reserve Capacity <label data-field="res_capacity">
</label> Reserve Capacity
<div class="col-lg-3"> </label>
<input type="number" name="res_capacity" class="form-control m-input" value="{{ obj.getReserveCapacity() }}"> <input type="number" name="res_capacity" class="form-control m-input" value="{{ obj.getReserveCapacity() }}">
<div class="form-control-feedback hide" data-field="res_capacity"></div> <div class="form-control-feedback hide" data-field="res_capacity"></div>
<span class="m-form__help">In minutes</span> <span class="m-form__help">In minutes</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="tab-pane" id="vehicle-compatibility" role="tabpanel"> <div class="tab-pane" id="vehicle-compatibility" role="tabpanel">
<div class="form-group m-form__group row form-group-inner"> <div class="form-group m-form__group row form-group-inner">
<div class="col-lg-12"> <div class="col-lg-12">
<div id="data-vehicles"></div> <div id="data-vehicles"></div>

View file

@ -48,20 +48,20 @@
<div class="tab-content"> <div class="tab-content">
<div class="tab-pane active" id="customer-info" role="tabpanel"> <div class="tab-pane active" id="customer-info" role="tabpanel">
<div class="form-group m-form__group row"> <div class="form-group m-form__group row">
<label class="col-lg-2 col-form-label" data-field="first_name"> <div class="col-lg-6">
First Name: <label data-field="first_name">
</label> First Name
<div class="col-lg-3"> </label>
<input type="text" name="first_name" class="form-control m-input" value="{{ obj.getFirstName() }}" data-name="first_name"> <input type="text" name="first_name" class="form-control m-input" value="{{ obj.getFirstName() }}" data-name="first_name">
<div class="form-control-feedback hide" data-field="first_name"></div> <div class="form-control-feedback hide" data-field="first_name"></div>
</div> </div>
<label class="col-lg-2 col-form-label" data-field="last_name"> <div class="col-lg-6">
Last Name: <label data-field="last_name">
</label> Last Name
<div class="col-lg-3"> </label>
<input type="text" name="last_name" class="form-control m-input" value="{{ obj.getLastName() }}" data-name="last_name"> <input type="text" name="last_name" class="form-control m-input" value="{{ obj.getLastName() }}" data-name="last_name">
<div class="form-control-feedback hide" data-field="last_name"></div> <div class="form-control-feedback hide" data-field="last_name"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="tab-pane" id="mobile-numbers" role="tabpanel"> <div class="tab-pane" id="mobile-numbers" role="tabpanel">