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

Resolve "Display compatible batteries in edit vehicle" #949

Merged
jankstudio merged 1 commit from 140-display-compatible-batteries-in-edit-vehicle into master 2018-06-11 15:25:36 +00:00
Conversation 2 Commits 1 Files changed 1 +127 -58
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"> <div class="m-content">
<!--Begin::Section--> <!--Begin::Section-->
<div class="row"> <div class="row">
<div class="col-xl-8"> <div class="col-xl-10">
<div class="m-portlet m-portlet--mobile"> <div class="m-portlet m-portlet--mobile">
<div class="m-portlet__head"> <div class="m-portlet__head">
<div class="m-portlet__head-caption"> <div class="m-portlet__head-caption">
@ -94,6 +94,24 @@
</span> </span>
</div> </div>
</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>
<div class="m-portlet__foot m-portlet__foot--fit"> <div class="m-portlet__foot m-portlet__foot--fit">
<div class="m-form__actions m-form__actions--solid m-form__actions--right"> <div class="m-form__actions m-form__actions--solid m-form__actions--right">
@ -113,72 +131,123 @@
{% endblock %} {% endblock %}
{% block scripts %} {% block scripts %}
<script> <script>
$(function() { $(function() {
$("#row-form").submit(function(e) { $("#row-form").submit(function(e) {
var form = $(this); var form = $(this);
e.preventDefault(); e.preventDefault();
$.ajax({ $.ajax({
method: "POST", method: "POST",
url: form.prop('action'), url: form.prop('action'),
data: form.serialize() data: form.serialize()
}).done(function(response) { }).done(function(response) {
// remove all error classes // remove all error classes
removeErrors(); removeErrors();
swal({ swal({
title: 'Done!', title: 'Done!',
text: 'Your changes have been saved!', text: 'Your changes have been saved!',
type: 'success', type: 'success',
onClose: function() { onClose: function() {
window.location.href = "{{ url('vehicle_list') }}"; window.location.href = "{{ url('vehicle_list') }}";
} }
}); });
}).fail(function(response) { }).fail(function(response) {
if (response.status == 422) { if (response.status == 422) {
var errors = response.responseJSON.errors; var errors = response.responseJSON.errors;
var firstfield = false; var firstfield = false;
// remove all error classes first // remove all error classes first
removeErrors(); removeErrors();
// display errors contextually // display errors contextually
$.each(errors, function(field, msg) { $.each(errors, function(field, msg) {
var formfield = $("[name='" + field + "']"); var formfield = $("[name='" + field + "']");
var label = $("label[data-field='" + field + "']"); var label = $("label[data-field='" + field + "']");
var msgbox = $(".form-control-feedback[data-field='" + field + "']"); var msgbox = $(".form-control-feedback[data-field='" + field + "']");
// add error classes to bad fields // add error classes to bad fields
formfield.addClass('form-control-danger'); formfield.addClass('form-control-danger');
label.addClass('has-danger'); label.addClass('has-danger');
msgbox.html(msg).addClass('has-danger').removeClass('hide'); msgbox.html(msg).addClass('has-danger').removeClass('hide');
// check if this field comes first in DOM // check if this field comes first in DOM
var domfield = formfield.get(0); var domfield = formfield.get(0);
if (!firstfield || (firstfield && firstfield.compareDocumentPosition(domfield) === 2)) { if (!firstfield || (firstfield && firstfield.compareDocumentPosition(domfield) === 2)) {
firstfield = domfield; firstfield = domfield;
} }
}); });
// focus on first bad field // focus on first bad field
firstfield.focus(); firstfield.focus();
// scroll to above that field to make it visible // scroll to above that field to make it visible
$('html, body').animate({ $('html, body').animate({
scrollTop: $(firstfield).offset().top - 200 scrollTop: $(firstfield).offset().top - 200
}, 100); }, 100);
} }
}); });
}); });
// remove all error classes var battRows = [];
function removeErrors() {
$(".form-control-danger").removeClass('form-control-danger'); {% for batt in obj.getBatteries %}
$("[data-field]").removeClass('has-danger'); trow = {
$(".form-control-feedback[data-field]").addClass('hide'); 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 %} {% endblock %}