rgutierrez/resq
1
0
Fork 0
Code Issues 126 Pull requests 49 Projects Releases 4 Packages Wiki Activity Actions

Add compatible battery list for vehicle edit screen #140

Browse source
This commit is contained in:
Kendrick Chan 2018-06-11 23:24:55 +08:00
parent c46d43b001
commit 2d29ced74c
1 changed files with 127 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

185
templates/vehicle/form.html.twig
View file

@ -13,7 +13,7 @@
<div class="m-content">
<!--Begin::Section-->
<div class="row">
<div class="col-xl-8">
<div class="col-xl-10">
<div class="m-portlet m-portlet--mobile">
<div class="m-portlet__head">
<div class="m-portlet__head-caption">
@ -94,6 +94,24 @@
</span>
</div>
</div>
{% if mode == 'update' %}
<div class="m-form__seperator m-form__seperator--dashed"></div>
<div class="m-form__section m-form__section--last">
<div class="m-form__heading">
<h3 class="m-form__heading-title">
Compatible Batteries
</h3>
</div>
<div class="form-group m-form__group row">
<div class="col-lg-12">
<div class="m_datatable" id="data-batts"></div>
</div>
</div>
</div>
{% endif %}
</div>
<div class="m-portlet__foot m-portlet__foot--fit">
<div class="m-form__actions m-form__actions--solid m-form__actions--right">
@ -113,72 +131,123 @@
{% endblock %}
{% block scripts %}
<script>
$(function() {
$("#row-form").submit(function(e) {
var form = $(this);
<script>
$(function() {
$("#row-form").submit(function(e) {
var form = $(this);
e.preventDefault();
e.preventDefault();
$.ajax({
method: "POST",
url: form.prop('action'),
data: form.serialize()
}).done(function(response) {
// remove all error classes
removeErrors();
swal({
title: 'Done!',
text: 'Your changes have been saved!',
type: 'success',
onClose: function() {
window.location.href = "{{ url('vehicle_list') }}";
}
});
}).fail(function(response) {
if (response.status == 422) {
var errors = response.responseJSON.errors;
var firstfield = false;
$.ajax({
method: "POST",
url: form.prop('action'),
data: form.serialize()
}).done(function(response) {
// remove all error classes
removeErrors();
swal({
title: 'Done!',
text: 'Your changes have been saved!',
type: 'success',
onClose: function() {
window.location.href = "{{ url('vehicle_list') }}";
}
});
}).fail(function(response) {
if (response.status == 422) {
var errors = response.responseJSON.errors;
var firstfield = false;
// remove all error classes first
removeErrors();
// remove all error classes first
removeErrors();
// display errors contextually
$.each(errors, function(field, msg) {
var formfield = $("[name='" + field + "']");
var label = $("label[data-field='" + field + "']");
var msgbox = $(".form-control-feedback[data-field='" + field + "']");
// display errors contextually
$.each(errors, function(field, msg) {
var formfield = $("[name='" + field + "']");
var label = $("label[data-field='" + field + "']");
var msgbox = $(".form-control-feedback[data-field='" + field + "']");
// add error classes to bad fields
formfield.addClass('form-control-danger');
label.addClass('has-danger');
msgbox.html(msg).addClass('has-danger').removeClass('hide');
// add error classes to bad fields
formfield.addClass('form-control-danger');
label.addClass('has-danger');
msgbox.html(msg).addClass('has-danger').removeClass('hide');
// check if this field comes first in DOM
var domfield = formfield.get(0);
// check if this field comes first in DOM
var domfield = formfield.get(0);
if (!firstfield || (firstfield && firstfield.compareDocumentPosition(domfield) === 2)) {
firstfield = domfield;
}
});
if (!firstfield || (firstfield && firstfield.compareDocumentPosition(domfield) === 2)) {
firstfield = domfield;
}
});
// focus on first bad field
firstfield.focus();
// focus on first bad field
firstfield.focus();
// scroll to above that field to make it visible
$('html, body').animate({
scrollTop: $(firstfield).offset().top - 200
}, 100);
}
});
});
// scroll to above that field to make it visible
$('html, body').animate({
scrollTop: $(firstfield).offset().top - 200
}, 100);
}
});
});
// remove all error classes
function removeErrors() {
$(".form-control-danger").removeClass('form-control-danger');
$("[data-field]").removeClass('has-danger');
$(".form-control-feedback[data-field]").addClass('hide');
var battRows = [];
{% for batt in obj.getBatteries %}
trow = {
id: "{{ batt.getID }}",
model: "{{ batt.getModel.getName|default('') }}",
size: "{{ batt.getSize.getName|default('') }}",
sell_price: "{{ batt.getSellingPrice }}"
};
battRows.push(trow);
{% endfor %}
// battery data table
var battOptions = {
data: {
type: 'local',
source: battRows,
saveState: {
cookie: false,
webstorage: false
}
});
</script>
},
layout: {
scroll: true
},
columns: [
{
field: 'id',
title: 'ID',
width: 50
},
{
field: 'size',
title: 'Size'
},
{
field: 'model',
title: 'Model',
width: 150
},
{
field: 'sell_price',
title: 'Price'
}
],
pagination: false
};
var battTable = $("#data-batts").mDatatable(battOptions);
// remove all error classes
function removeErrors() {
$(".form-control-danger").removeClass('form-control-danger');
$("[data-field]").removeClass('has-danger');
$(".form-control-feedback[data-field]").addClass('hide');
}
});
</script>
{% endblock %}