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

View file

@ -48,20 +48,20 @@
<div class="tab-content">
<div class="tab-pane active" id="customer-info" role="tabpanel">
<div class="form-group m-form__group row">
<label class="col-lg-2 col-form-label" data-field="first_name">
First Name:
</label>
<div class="col-lg-3">
<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>
<label class="col-lg-2 col-form-label" data-field="last_name">
Last Name:
</label>
<div class="col-lg-3">
<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>
<div class="col-lg-6">
<label data-field="first_name">
First Name
</label>
<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>
<div class="col-lg-6">
<label data-field="last_name">
Last Name
</label>
<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>
</div>
</div>
<div class="tab-pane" id="mobile-numbers" role="tabpanel">
@ -1018,4 +1018,4 @@
var vehicleTable = $("#data-vehicles").mDatatable(vehicleOptions);
});
</script>
{% endblock %}
{% endblock %}