1145 lines
40 KiB
Twig
1145 lines
40 KiB
Twig
{% extends 'base.html.twig' %}
|
||
|
||
{% block body %}
|
||
<!-- BEGIN: Subheader -->
|
||
<div class="m-subheader">
|
||
<div class="d-flex align-items-center">
|
||
<div class="mr-auto">
|
||
<h3 class="m-subheader__title">Customers</h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- END: Subheader -->
|
||
<div class="m-content">
|
||
<!--Begin::Section-->
|
||
<div class="row">
|
||
<div class="col-xl-12">
|
||
<div class="m-portlet m-portlet--mobile">
|
||
<div class="m-portlet__head">
|
||
<div class="m-portlet__head-caption">
|
||
<div class="m-portlet__head-title">
|
||
<span class="m-portlet__head-icon">
|
||
<i class="la la-industry"></i>
|
||
</span>
|
||
<h3 class="m-portlet__head-text">
|
||
{% if mode == 'update' %}
|
||
Edit Customer
|
||
<small>{{ obj.getFirstName() ~ ' ' ~ obj.getLastName() }}</small>
|
||
{% else %}
|
||
New Customer
|
||
{% endif %}
|
||
</h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<form id="row-form" class="m-form m-form--label-align-right" method="post" action="{{ mode == 'update' ? url('customer_update_submit', {'id': obj.getId()}) : url('customer_create_submit') }}">
|
||
<div class="m-portlet__body">
|
||
<ul id="customer-tabs" class="nav nav-tabs" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" data-toggle="tab" href="#customer-info">Customer Info</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" data-toggle="tab" href="#mobile-numbers">Mobile Numbers</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" data-toggle="tab" href="#vehicles">Vehicles</a>
|
||
</li>
|
||
{% if mode == 'update' %}
|
||
<li class="nav-item">
|
||
<a class="nav-link" data-toggle="tab" href="#tickets">Tickets</a>
|
||
</li>
|
||
{% endif %}
|
||
</ul>
|
||
<div class="tab-content">
|
||
<div class="tab-pane active" id="customer-info" role="tabpanel">
|
||
<div class="form-group m-form__group row">
|
||
<div class="col-lg-6">
|
||
<label data-field="customer_classification">
|
||
Customer Classification
|
||
</label>
|
||
<select name="customer_classification" class="form-control m-input">
|
||
{% for key, classification in classifications %}
|
||
<option value="{{ key }}"{{ obj.getCustomerClassification == key ? ' selected' }}>{{ classification }}</option>
|
||
{% endfor %}
|
||
</select>
|
||
<div class="form-control-feedback hide" data-field="customer_classification"></div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group m-form__group row">
|
||
<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 class="form-group m-form__group row">
|
||
<div class="col-lg-6">
|
||
<label data-field="customer_notes">
|
||
Customer Notes
|
||
</label>
|
||
<textarea name="customer_notes" class="form-control m-input" value="{{ obj.getCustomerNotes() }}" data-name="customer_notes" rows="4"></textarea>
|
||
<div class="form-control-feedback hide" data-field="customer_notes"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-pane" id="mobile-numbers" role="tabpanel">
|
||
<div class="form-group m-form__group row form-group-inner row">
|
||
<div class="col-lg-12">
|
||
<div id="data-mobile-numbers"></div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group m-form__group row form-group-inner row">
|
||
<div class="col-lg-4">
|
||
<input type="text" class="form-control m-input" placeholder="Mobile number" id="mobile-number">
|
||
<div class="form-control-feedback hide" data-field="mobile-number"></div>
|
||
<span class="m-form__help">Use the format <span class="text-info">63xxxxxxxxxx</span></span>
|
||
</div>
|
||
<div class="col-lg-4">
|
||
<div class="input-group date dtp">
|
||
<input type="text" id="date-confirmed" class="form-control m-input" readonly placeholder="Date confirmed">
|
||
<span class="input-group-addon">
|
||
<i class="la la-calendar glyphicon-th"></i>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4">
|
||
<button type="button" class="btn btn-primary" id="btn-add-mobile-number">Add to List</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-pane" id="vehicles" role="tabpanel">
|
||
<div class="form-group m-form__group row form-group-inner row">
|
||
<div class="col-lg-12">
|
||
<div class="m_datatable" id="data-vehicles"></div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group m-form__group row form-group-inner row">
|
||
<div class="col-lg-12">
|
||
<button type="button" class="btn btn-primary" id="add-vehicle">Add Vehicle</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% if mode == 'update' %}
|
||
<div class="tab-pane" id="tickets" role="tabpanel">
|
||
<div class="form-group m-form__group row form-group-inner row">
|
||
<div class="col-lg-12">
|
||
<div class="m_datatable" id="data-tickets"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
<div class="m-portlet__foot m-portlet__foot--fit">
|
||
<div class="m-form__actions m-form__actions--solid m-form__actions--right">
|
||
<div class="row">
|
||
<div class="col-lg-6 text-left">
|
||
{% if mode == 'update' %}
|
||
<a href="{{ url('ticket_create', {'customer_id': obj.getID}) }}" class="btn btn-info"><i class="fa fa-ticket fa-fw"></i>Create Ticket</a>
|
||
{% endif %}
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<button type="submit" class="btn btn-success">Submit</button>
|
||
<a href="{{ url('customer_list') }}" class="btn btn-secondary">Cancel</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal fade" id="vehicle-form-modal" tabindex="-1" role="dialog" aria-labelledby="vehicle-form-title" aria-hidden="true">
|
||
<div class="modal-dialog modal-lg" role="document">
|
||
<div class="modal-content">
|
||
<form class="m-form" id="vehicle-form" data-mode="create">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="vehicle-form-title">
|
||
Add Vehicle
|
||
</h5>
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">
|
||
×
|
||
</span>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="m-form__section m-form__section--first">
|
||
<div class="m-form__heading">
|
||
<h3 class="m-form__heading-title">
|
||
Vehicle Info
|
||
</h3>
|
||
</div>
|
||
<div class="form-group m-form__group row">
|
||
<div class="col-lg-3">
|
||
<label for="vehicle-name" data-field="name">Vehicle Name</label>
|
||
<input type="text" name="name" id="vehicle-name" class="form-control m-input" data-required="0">
|
||
<div class="form-control-feedback hide" data-field="name"></div>
|
||
<span class="m-form__help">Display name for this vehicle</span>
|
||
</div>
|
||
<div class="col-lg-3">
|
||
<label for="vmfg" data-field="vmfg">Manufacturer</label>
|
||
<select name="vmfg" class="form-control m-input" id="vmfg" data-required="0">
|
||
<option value="">Select a manufacturer</option>
|
||
{% for manufacturer in vmfgs %}
|
||
<option value="{{ manufacturer.getID() }}">{{ manufacturer.getName() }}</option>
|
||
{% endfor %}
|
||
</select>
|
||
<div class="form-control-feedback hide" data-field="vmfg"></div>
|
||
</div>
|
||
<div class="col-lg-3">
|
||
<label for="vehicle" data-field="vehicle">Vehicle</label>
|
||
<select name="vehicle" class="form-control m-input" id="vehicle" data-value="" data-required="1" disabled>
|
||
<option value="">Select a manufacturer first</option>
|
||
</select>
|
||
<div class="form-control-feedback hide" data-field="vehicle"></div>
|
||
</div>
|
||
<div class="col-lg-3">
|
||
<label for="vehicle-year" data-field="model_year">Year</label>
|
||
<select class="form-control m-input" id="vehicle-year" name="model_year" data-required="1">
|
||
<option value=""></option>
|
||
{% for year in years %}
|
||
<option value="{{ year }}">{{ year }}</option>
|
||
{% endfor %}
|
||
</select>
|
||
<div class="form-control-feedback hide" data-field="model_year"></div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group m-form__group row">
|
||
<div class="col-lg-3">
|
||
<label for="vehicle-plate-number" data-field="plate_number">Plate Number</label>
|
||
<input type="text" name="plate_number" id="vehicle-plate-number" class="form-control m-input" data-required="1">
|
||
<div class="form-control-feedback hide" data-field="plate_number"></div>
|
||
</div>
|
||
<div class="col-lg-3">
|
||
<label for="vehicle-color" data-field="color">Color</label>
|
||
<input type="text" name="color" id="vehicle-color" class="form-control m-input" data-required="1">
|
||
<div class="form-control-feedback hide" data-field="color"></div>
|
||
</div>
|
||
<div class="col-lg-3">
|
||
<label for="vehicle-status" data-field="status_condition">Status</label>
|
||
<select name="status_condition" class="form-control m-input" id="vehicle-status" data-required="1">
|
||
<option value=""></option>
|
||
{% for key, status_condition in status_conditions %}
|
||
<option value="{{ key }}">{{ status_condition }}</option>
|
||
{% endfor %}
|
||
</select>
|
||
<div class="form-control-feedback hide" data-field="status_condition"></div>
|
||
</div>
|
||
<div class="col-lg-3">
|
||
<label for="vehicle-fuel-type" data-field="fuel_type">Fuel Type</label>
|
||
<select name="fuel_type" class="form-control m-input" id="vehicle-fuel-type" data-required="1">
|
||
<option value=""></option>
|
||
{% for key, fuel_type in fuel_types %}
|
||
<option value="{{ key }}">{{ fuel_type }}</option>
|
||
{% endfor %}
|
||
</select>
|
||
<div class="form-control-feedback hide" data-field="fuel_type"></div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group m-form__group row">
|
||
<div class="col-lg-12">
|
||
<span class="m-switch m-switch--icon block-switch">
|
||
<label>
|
||
<input type="checkbox" name="flag_active" id="flag-active" value="1" checked>
|
||
<label class="switch-label">This vehicle is currently active</label>
|
||
<span></span>
|
||
</label>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<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">
|
||
Battery Info
|
||
</h3>
|
||
</div>
|
||
<div class="form-group m-form__group row">
|
||
<div class="col-lg-12">
|
||
<span class="m-switch m-switch--icon block-switch">
|
||
<label>
|
||
<input type="checkbox" name="flag_motolite_battery" id="flag-motolite-battery" value="1">
|
||
<label class="switch-label">This vehicle is using a Motolite battery</label>
|
||
<span></span>
|
||
</label>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="form-group m-form__group row curr_battery_row hide">
|
||
<div class="col-lg-3">
|
||
<label for="bmfg" data-field="bmfg">Manufacturer</label>
|
||
<select name="bmfg" class="form-control m-input" id="bmfg" data-required="0">
|
||
<option value="">Select a manufacturer</option>
|
||
{% for manufacturer in bmfgs %}
|
||
<option value="{{ manufacturer.getID() }}">{{ manufacturer.getName() }}</option>
|
||
{% endfor %}
|
||
</select>
|
||
<div class="form-control-feedback hide" data-field="bmfg"></div>
|
||
</div>
|
||
<div class="col-lg-3">
|
||
<label for="battery" data-field="battery">Product</label>
|
||
<select name="battery" class="form-control m-input" id="battery" data-value="" disabled data-required="0">
|
||
<option value="">Select a manufacturer first</option>
|
||
</select>
|
||
<div class="form-control-feedback hide" data-field="battery"></div>
|
||
</div>
|
||
<div class="col-lg-3">
|
||
<label for="battery-warranty-code" data-field="warranty_code">Warranty Code</label>
|
||
<input type="text" name="warranty_code" id="battery-warranty-code" class="form-control m-input" data-required="0">
|
||
<div class="form-control-feedback hide" data-field="warranty_code"></div>
|
||
</div>
|
||
<div class="col-lg-3">
|
||
<label for="battery-warranty-expiration" data-field="warranty_expiration">Warranty Expiration</label>
|
||
<div class="input-group date dp">
|
||
<input type="text" name="warranty_expiration" id="battery-warranty-expiration" class="form-control m-input" readonly placeholder="Select a date" data-required="0">
|
||
<span class="input-group-addon">
|
||
<i class="la la-calendar glyphicon-th"></i>
|
||
</span>
|
||
</div>
|
||
<div class="form-control-feedback hide" data-field="warranty_expiration"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<input type="hidden" name="id" id="cv-id" value="" data-required="0">
|
||
<input type="hidden" name="index" id="row-index" value="" data-required="0">
|
||
<button type="button" class="btn btn-secondary" data-dismiss="modal">
|
||
Close
|
||
</button>
|
||
<button type="submit" class="btn btn-primary">
|
||
Save changes
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script>
|
||
$(function() {
|
||
$("#row-form").submit(function(e) {
|
||
var form = $(this);
|
||
var formdata = form.serializeArray();
|
||
|
||
e.preventDefault();
|
||
|
||
// add mobile number data
|
||
formdata.push({
|
||
name: 'mobile_numbers',
|
||
value: JSON.stringify(numberRows)
|
||
});
|
||
|
||
// add vehicle data
|
||
formdata.push({
|
||
name: 'vehicles',
|
||
value: JSON.stringify(vehicleRows)
|
||
});
|
||
|
||
$.ajax({
|
||
method: "POST",
|
||
url: form.prop('action'),
|
||
data: formdata
|
||
}).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('customer_list') }}";
|
||
}
|
||
});
|
||
}).fail(function(response) {
|
||
var json = response.responseJSON;
|
||
var errors = json.errors;
|
||
var nerrors = json.nerrors;
|
||
var verrors = json.verrors;
|
||
var firstfield = false;
|
||
|
||
// remove all error classes first
|
||
removeErrors();
|
||
|
||
// display errors contextually
|
||
$.each(errors, function(field, msg) {
|
||
var formfield = $("[data-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');
|
||
|
||
// check if this field comes first in DOM
|
||
var domfield = formfield.get(0);
|
||
|
||
if (!firstfield || (firstfield && firstfield.compareDocumentPosition(domfield) === 2)) {
|
||
firstfield = domfield;
|
||
}
|
||
|
||
// add error class to this tab
|
||
var tabId = $(formfield).closest('.tab-pane').prop('id');
|
||
$("#customer-tabs").find("a[href='#" + tabId + "']").addClass('has-danger');
|
||
});
|
||
|
||
// loop through mobile number errors
|
||
$.each(nerrors, function(rowindex, errorlist) {
|
||
var row = $("#data-mobile-numbers table").find("[name='index'][value='" + rowindex + "']").closest('tr');
|
||
|
||
$.each(errorlist, function(field, msg) {
|
||
var msgbox = row.find(".form-control-feedback[data-field='" + field + "']");
|
||
var col = msgbox.closest('span');
|
||
|
||
// add error classes to bad fields
|
||
col.addClass('has-danger');
|
||
msgbox.html(msg).addClass('has-danger').removeClass('hide');
|
||
|
||
// check if this field comes first in DOM
|
||
var domfield = col.get(0);
|
||
|
||
if (!firstfield || (firstfield && firstfield.compareDocumentPosition(domfield) === 2)) {
|
||
firstfield = domfield;
|
||
}
|
||
|
||
// add error class to this tab
|
||
var tabId = $(col).closest('.tab-pane').prop('id');
|
||
$("#customer-tabs").find("a[href='#" + tabId + "']").addClass('has-danger');
|
||
});
|
||
});
|
||
|
||
// loop through vehicle errors
|
||
$.each(verrors, function(rowindex, errorlist) {
|
||
var row = $("#data-vehicles table").find("[name='index'][value='" + rowindex + "']").closest('tr');
|
||
|
||
$.each(errorlist, function(field, msg) {
|
||
var msgbox = row.find(".form-control-feedback[data-field='" + field + "']");
|
||
var col = msgbox.closest('span');
|
||
|
||
// add error classes to bad fields
|
||
col.addClass('has-danger');
|
||
msgbox.html(msg).addClass('has-danger').removeClass('hide');
|
||
|
||
// check if this field comes first in DOM
|
||
var domfield = col.get(0);
|
||
|
||
if (!firstfield || (firstfield && firstfield.compareDocumentPosition(domfield) === 2)) {
|
||
firstfield = domfield;
|
||
}
|
||
|
||
// add error class to this tab
|
||
var tabId = $(col).closest('.tab-pane').prop('id');
|
||
$("#customer-tabs").find("a[href='#" + tabId + "']").addClass('has-danger');
|
||
});
|
||
});
|
||
|
||
// focus on tab containing first field
|
||
var firstTabId = $(firstfield).closest('.tab-pane').prop('id');
|
||
$("#customer-tabs").find("a[href='#" + firstTabId + "']").tab('show');
|
||
|
||
// 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);
|
||
});
|
||
});
|
||
|
||
// remove all error classes
|
||
function removeErrors() {
|
||
$(".form-control-danger").removeClass('form-control-danger');
|
||
$(".has-danger").removeClass('has-danger');
|
||
$(".form-control-feedback[data-field]").addClass('hide');
|
||
}
|
||
|
||
// datetimepicker
|
||
$(".dtp").datetimepicker({
|
||
format: "dd M yyyy - HH:ii P",
|
||
showMeridian: true,
|
||
todayHighlight: true,
|
||
autoclose: true,
|
||
pickerPosition: 'top-left',
|
||
bootcssVer: 3,
|
||
todayBtn: true,
|
||
clearBtn: true
|
||
});
|
||
|
||
// datepicker
|
||
$(".dp").datepicker({
|
||
format: "dd M yyyy",
|
||
todayHighlight: true,
|
||
autoclose: true,
|
||
pickerPosition: 'top-left',
|
||
bootcssVer: 3,
|
||
clearBtn: true
|
||
});
|
||
|
||
// input mask
|
||
$("#mobile-number").inputmask("mask", {
|
||
mask: "639999999999",
|
||
placeholder: ""
|
||
});
|
||
|
||
$("#vehicle-year").inputmask("mask", {
|
||
mask: "9999",
|
||
placeholder: ""
|
||
});
|
||
|
||
// initialize arrays
|
||
var numberRows = [];
|
||
var numberIds = [];
|
||
var mfgVehicles = [];
|
||
var vehicleRows = [];
|
||
var ticketRows = [];
|
||
|
||
{% for number in obj.getMobileNumbers() %}
|
||
nrow = {
|
||
id: "{{ number.getID() }}",
|
||
date_registered: "{{ number.getDateRegistered()|date('d M Y - h:i A') }}",
|
||
date_confirmed: "{{ number.getDateConfirmed()|date('d M Y - h:i A') }}"
|
||
};
|
||
|
||
numberRows.push(nrow);
|
||
numberIds.push("{{ number.getID() }}");
|
||
{% endfor %}
|
||
|
||
{% for cv in obj.getVehicles() %}
|
||
{% set vehicle = cv.getVehicle() %}
|
||
{% set battery = cv.getCurrentBattery() %}
|
||
|
||
vrow = {
|
||
id: "{{ cv.getID() }}",
|
||
name: "{{ cv.getName() }}",
|
||
index: moment().unix(),
|
||
battery: "{{ battery ? battery.getID() }}",
|
||
battery_label: "{{ battery ? battery.getModel().getName() ~ ' ' ~ battery.getSize().getName() ~ ' (' ~ battery.getProductCode() ~ ')' }}",
|
||
bmfg: "{{ battery ? battery.getManufacturer().getID() }}",
|
||
color: "{{ cv.getColor() }}",
|
||
flag_active: {{ cv.isActive() ? 'true' : 'false' }},
|
||
flag_motolite_battery: {{ cv.hasMotoliteBattery() ? 'true' : 'false' }},
|
||
fuel_type: "{{ cv.getFuelType() }}",
|
||
model_year: "{{ cv.getModelYear() }}",
|
||
plate_number: "{{ cv.getPlateNumber() }}",
|
||
status_condition: "{{ cv.getStatusCondition() }}",
|
||
vehicle: "{{ vehicle ? vehicle.getID() }}",
|
||
vehicle_label: "{{ vehicle ? vehicle.getManufacturer().getName() ~ ' ' ~ vehicle.getMake() ~ ' (' ~ vehicle.getModelYearFrom() ~ ' ' ~ vehicle.getModelYearTo() ~ ')' }}",
|
||
vmfg: "{{ vehicle ? vehicle.getManufacturer().getID() }}",
|
||
warranty_code: "{{ cv.getWarrantyCode() }}",
|
||
warranty_expiration: "{{ cv.getWarrantyExpiration() ? cv.getWarrantyExpiration()|date('d M Y') }}"
|
||
};
|
||
|
||
vehicleRows.push(vrow);
|
||
{% endfor %}
|
||
|
||
{% for ticket in obj.getTickets %}
|
||
trow = {
|
||
id: "{{ ticket.getID }}",
|
||
date_create: "{{ ticket.getDateCreate|date('d M Y - h:i A') }}",
|
||
subject: "{{ ticket.getSubject }}",
|
||
ticket_type: "{{ ticket.getTicketTypeText }}",
|
||
status: "{{ ticket.getStatusText }}",
|
||
edit_url: "{{ url('ticket_update', {'id': ticket.getID}) }}"
|
||
};
|
||
|
||
ticketRows.push(trow);
|
||
{% endfor %}
|
||
|
||
// add a mobile number to the table
|
||
$("#btn-add-mobile-number").click(function() {
|
||
var id = $("#mobile-number").val();
|
||
var dateRegistered = moment().format("DD MMM YYYY - hh:mm A");
|
||
var dateConfirmed = $("#date-confirmed").val();
|
||
var index = $("#vehicle").find(":selected").data('index');
|
||
|
||
if (!id) {
|
||
swal({
|
||
title: 'Whoops',
|
||
text: 'You did not specify a mobile number.',
|
||
type: 'warning'
|
||
});
|
||
|
||
return true;
|
||
} else if (id.toString().length != 12) {
|
||
swal({
|
||
title: 'Whoops',
|
||
text: 'Invalid mobile number specified.',
|
||
type: 'warning'
|
||
});
|
||
|
||
return true;
|
||
} else if (numberIds.indexOf(id) !== -1) {
|
||
swal({
|
||
title: 'Whoops',
|
||
text: 'This mobile number is already on the list.',
|
||
type: 'warning'
|
||
});
|
||
|
||
return true;
|
||
}
|
||
|
||
// add number to arrays
|
||
numberIds.push(id);
|
||
numberRows.push({
|
||
id: id,
|
||
date_registered: dateRegistered,
|
||
date_confirmed: dateConfirmed
|
||
});
|
||
|
||
// clear input fields
|
||
$("#mobile-number, #date-confirmed").val("");
|
||
|
||
// refresh the data table
|
||
numberTable.originalDataSet = numberRows;
|
||
numberTable.reload();
|
||
});
|
||
|
||
// remove mobile number from table
|
||
$(document).on('click', '.btn-delete-number', function(e) {
|
||
var btn = $(this);
|
||
var id = $(this).data('id');
|
||
var table = $(this).closest('table');
|
||
|
||
// remove from ids
|
||
numberIds.splice(numberIds.indexOf(id), 1);
|
||
|
||
$.each(numberRows, function(index, row) {
|
||
if (row.id == id) {
|
||
numberRows.splice(index, 1);
|
||
return false;
|
||
}
|
||
});
|
||
|
||
// reload table
|
||
numberTable.row(btn.parents('tr')).remove();
|
||
numberTable.originalDataSet = numberRows;
|
||
numberTable.reload();
|
||
});
|
||
|
||
// remove vehicle from table
|
||
$(document).on('click', '.btn-delete-vehicle', function(e) {
|
||
var btn = $(this);
|
||
var id = $(this).data('index');
|
||
var table = $(this).closest('table');
|
||
|
||
$.each(vehicleRows, function(index, row) {
|
||
if (row.index == id) {
|
||
vehicleRows.splice(index, 1);
|
||
return false;
|
||
}
|
||
});
|
||
|
||
// reload table
|
||
vehicleTable.row(btn.parents('tr')).remove();
|
||
vehicleTable.originalDataSet = vehicleRows;
|
||
vehicleTable.reload();
|
||
});
|
||
|
||
// display create vehicle form
|
||
$("#add-vehicle").click(function() {
|
||
$("#vehicle-form").data('mode', 'create');
|
||
$("#vehicle-form-title").html("Add Vehicle");
|
||
$("#vehicle-form-modal").modal('show');
|
||
});
|
||
|
||
// find vehicle row by index
|
||
function findVehicleRow(index) {
|
||
for (var i = 0, len = vehicleRows.length; i < len; i++) {
|
||
if (vehicleRows[i].index === index) {
|
||
return {
|
||
row: vehicleRows[i],
|
||
index: i
|
||
};
|
||
}
|
||
}
|
||
|
||
return false;
|
||
}
|
||
|
||
// display edit vehicle form
|
||
$(document).on("click", ".btn-edit-vehicle", function() {
|
||
var form = $("#vehicle-form");
|
||
var tr = $(this).closest('tr');
|
||
var index = parseInt(tr.find("[name='index']").val());
|
||
var rowData = findVehicleRow(index);
|
||
|
||
if (!rowData) {
|
||
return;
|
||
}
|
||
|
||
row = rowData.row;
|
||
|
||
// set form mode
|
||
form.data('mode', 'update');
|
||
$("#vehicle-form-title").html("Edit Vehicle");
|
||
|
||
// set index
|
||
$("#row-index").val(row.index);
|
||
|
||
// set text/select field values manually
|
||
form.find("input[type='text'], select").each(function() {
|
||
var rowval = row[$(this).prop('name')];
|
||
|
||
if (typeof rowval !== 'undefined') {
|
||
$(this).val(rowval);
|
||
}
|
||
});
|
||
|
||
// set entity ids
|
||
$("#vehicle").data('id', row.vehicle);
|
||
$("#battery").data('id', row.battery);
|
||
$("#cv-id").val(row.id);
|
||
|
||
// set select box values
|
||
$("#vmfg").val(row.vmfg).change();
|
||
|
||
if (row.battery) {
|
||
$("#flag-motolite-battery").prop('checked', true).change();
|
||
$("#bmfg").val(row.bmfg).change();
|
||
}
|
||
|
||
$("#flag-active").prop('checked', row.flag_active);
|
||
|
||
// show modal
|
||
$("#vehicle-form-modal").modal('show');
|
||
});
|
||
|
||
// update vehicle list when changing manufacturer
|
||
$("#vmfg").change(function() {
|
||
var id = $(this).val();
|
||
var field = $("#vehicle");
|
||
|
||
// no id specified
|
||
if (!id) {
|
||
field.html('<option value="">Select a manufacturer first</option>').prop('disabled', true);
|
||
return true;
|
||
}
|
||
|
||
// get vehicles for this manufacturer
|
||
$.ajax({
|
||
method: "POST",
|
||
url: "{{ url('vmfg_vehicles') }}",
|
||
data: {id: id}
|
||
}).done(function(response) {
|
||
if (response.data.length > 0) {
|
||
var html = '';
|
||
|
||
$.each(response.data, function(index, vehicle) {
|
||
html += '<option value="' + vehicle.id + '" data-index="' + index + '">' + vehicle.make + ' (' + vehicle.model_year_from + '-' + vehicle.model_year_to + ')</option>';
|
||
});
|
||
|
||
field.html(html).prop('disabled', false);
|
||
} else {
|
||
field.html('<option value="">No vehicles found</option>').prop('disabled', true);
|
||
}
|
||
})
|
||
});
|
||
|
||
// update battery list when changing manufacturer
|
||
$("#bmfg").change(function() {
|
||
var id = $(this).val();
|
||
var field = $("#battery");
|
||
|
||
// no id specified
|
||
if (!id) {
|
||
field.html('<option value="">Select a manufacturer first</option>').prop('disabled', true);
|
||
return true;
|
||
}
|
||
|
||
// get vehicles for this manufacturer
|
||
$.ajax({
|
||
method: "POST",
|
||
url: "{{ url('bmfg_batteries') }}",
|
||
data: {id: id}
|
||
}).done(function(response) {
|
||
if (response.data.length > 0) {
|
||
var html = '';
|
||
|
||
$.each(response.data, function(index, battery) {
|
||
html += '<option value="' + battery.id + '" data-index="' + index + '">' + battery.model_name + ' ' + battery.size_name + ' (' + battery.prod_code + ')</option>';
|
||
});
|
||
|
||
field.html(html).prop('disabled', false);
|
||
} else {
|
||
field.html('<option value="">No batteries found</option>').prop('disabled', true);
|
||
}
|
||
})
|
||
});
|
||
|
||
// toggle motolite battery area
|
||
$("#flag-motolite-battery").change(function() {
|
||
var currBatteryRows = $(".curr_battery_row");
|
||
|
||
if ($(this).prop('checked') == true) {
|
||
currBatteryRows.removeClass('hide').find("[name='battery']").data('required', 1);
|
||
} else {
|
||
currBatteryRows.addClass('hide').find("[name='battery']").data('required', 0);
|
||
}
|
||
});
|
||
|
||
// save vehicle form
|
||
$("#vehicle-form").submit(function(e) {
|
||
var form = $(this);
|
||
var mode = form.data('mode');
|
||
|
||
// get all fields, including disabled ones
|
||
var disabled = form.find(":input:disabled").prop('disabled', false);
|
||
var fields = form.serializeArray().map(function(x){this[x.name] = x.value; return this;}.bind({}))[0];
|
||
disabled.prop('disabled', true);
|
||
|
||
e.preventDefault();
|
||
|
||
var errors = 0;
|
||
var firstfield = false;
|
||
|
||
// remove all error classes first
|
||
removeVehicleErrors();
|
||
|
||
// check for required fields
|
||
$.each(fields, function(field, value) {
|
||
var formfield = form.find("[name='" + field + "']");
|
||
var label = form.find("label[data-field='" + field + "']");
|
||
var msgbox = form.find(".form-control-feedback[data-field='" + field + "']");
|
||
var required = formfield.data('required');
|
||
|
||
if (required === 1 && !value) {
|
||
errors++;
|
||
|
||
// add error classes to bad fields
|
||
formfield.addClass('form-control-danger');
|
||
label.addClass('has-danger');
|
||
msgbox.html("This value should not be blank.").addClass('has-danger').removeClass('hide');
|
||
|
||
// check if this field comes first in DOM
|
||
var domfield = formfield.get(0);
|
||
|
||
if (!firstfield || (firstfield && firstfield.compareDocumentPosition(domfield) === 2)) {
|
||
firstfield = domfield;
|
||
}
|
||
}
|
||
});
|
||
|
||
// errors were found
|
||
if (errors > 0) {
|
||
// 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);
|
||
|
||
return false;
|
||
}
|
||
|
||
// build table row
|
||
var row = fields;
|
||
row.vehicle_label = $("#vmfg option:selected").text() + " " + $("#vehicle option:selected").text();
|
||
row.flag_active = row.flag_active == 1 ? true : false;
|
||
|
||
// add optional field
|
||
if (typeof fields.flag_motolite_battery === 'undefined') {
|
||
row.flag_motolite_battery = false;
|
||
row.battery_label = "";
|
||
} else {
|
||
row.flag_motolite_battery = true;
|
||
row.battery_label = $("#battery option:selected").text();
|
||
}
|
||
|
||
if (mode == 'create') {
|
||
// set an index
|
||
row.index = moment().unix();
|
||
|
||
// save to table
|
||
vehicleRows.push(row);
|
||
} else {
|
||
// get vehicle row by index
|
||
row.index = parseInt(row.index);
|
||
rowData = findVehicleRow(row.index);
|
||
vehicleRows[rowData.index] = row;
|
||
}
|
||
|
||
// refresh the data table
|
||
vehicleTable.originalDataSet = vehicleRows;
|
||
vehicleTable.reload();
|
||
|
||
// close modal
|
||
$("#vehicle-form-modal").modal('hide');
|
||
});
|
||
|
||
// reset vehicle form status on close
|
||
$("#vehicle-form-modal").on('hidden.bs.modal', function(e) {
|
||
$("#flag-motolite-battery").prop('checked', false).change();
|
||
$("#flag-active").prop('checked', true);
|
||
$("#vehicle-form").find("input[type='text'], select").val("").change();
|
||
removeVehicleErrors();
|
||
});
|
||
|
||
// remove all error classes on vehicle form
|
||
function removeVehicleErrors() {
|
||
var form = $("#vehicle-form");
|
||
form.find(".form-control-danger").removeClass('form-control-danger');
|
||
form.find("[data-field]").removeClass('has-danger');
|
||
form.find(".form-control-feedback[data-field]").addClass('hide');
|
||
}
|
||
|
||
// mobile numbers data table
|
||
var numberOptions = {
|
||
data: {
|
||
type: 'local',
|
||
source: numberRows,
|
||
saveState: {
|
||
cookie: false,
|
||
webstorage: false
|
||
}
|
||
},
|
||
layout: {
|
||
scroll: true
|
||
},
|
||
columns: [
|
||
{
|
||
field: 'id',
|
||
title: 'Mobile Number',
|
||
template: function (row, index, datatable) {
|
||
return row.id + '<div class="form-control-feedback hide" data-field="id"></div>';
|
||
}
|
||
},
|
||
{
|
||
field: 'date_registered',
|
||
title: 'Date Registered',
|
||
width: 200,
|
||
template: function (row, index, datatable) {
|
||
return row.date_registered + '<div class="form-control-feedback hide" data-field="date_registered"></div>';
|
||
}
|
||
},
|
||
{
|
||
field: 'date_confirmed',
|
||
title: 'Date Confirmed',
|
||
width: 200,
|
||
template: function (row, index, datatable) {
|
||
return row.date_confirmed + '<div class="form-control-feedback hide" data-field="date_confirmed"></div>';
|
||
}
|
||
},
|
||
{
|
||
field: 'Actions',
|
||
width: 70,
|
||
title: 'Actions',
|
||
sortable: false,
|
||
overflow: 'visible',
|
||
template: function (row, index, datatable) {
|
||
return '<button data-id="' + row.id + '" type="button" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill btn-delete-number" title="Delete"><i class="la la-trash"></i></button>';
|
||
},
|
||
}
|
||
],
|
||
pagination: false
|
||
};
|
||
|
||
var numberTable = $("#data-mobile-numbers").mDatatable(numberOptions);
|
||
|
||
// vehicles data table
|
||
var vehicleOptions = {
|
||
data: {
|
||
type: 'local',
|
||
source: vehicleRows,
|
||
saveState: {
|
||
cookie: false,
|
||
webstorage: false
|
||
}
|
||
},
|
||
layout: {
|
||
scroll: true
|
||
},
|
||
columns: [
|
||
{
|
||
field: 'name',
|
||
title: 'Name',
|
||
template: function (row, index, datatable) {
|
||
return row.name + '<div class="form-control-feedback hide" data-field="name"></div>';
|
||
}
|
||
},
|
||
{
|
||
field: 'vehicle_label',
|
||
title: 'Vehicle',
|
||
width: 150,
|
||
template: function (row, index, datatable) {
|
||
return row.vehicle_label + '<div class="form-control-feedback hide" data-field="vehicle"></div>';
|
||
}
|
||
},
|
||
{
|
||
field: 'model_year',
|
||
title: 'Year',
|
||
template: function (row, index, datatable) {
|
||
return row.model_year + '<div class="form-control-feedback hide" data-field="model_year"></div>';
|
||
}
|
||
},
|
||
{
|
||
field: 'plate_number',
|
||
title: 'Plate No.',
|
||
template: function (row, index, datatable) {
|
||
return row.plate_number + '<div class="form-control-feedback hide" data-field="plate_number"></div>';
|
||
}
|
||
},
|
||
{
|
||
field: 'color',
|
||
title: 'Color',
|
||
width: 70,
|
||
template: function (row, index, datatable) {
|
||
return row.color + '<div class="form-control-feedback hide" data-field="color"></div>';
|
||
}
|
||
},
|
||
{
|
||
field: 'status_condition',
|
||
title: 'Cond.',
|
||
template: function (row, index, datatable) {
|
||
var status_conditions = {
|
||
{% for key, status_condition in status_conditions %}
|
||
"{{ key }}": "{{ status_condition }}",
|
||
{% endfor %}
|
||
};
|
||
|
||
return status_conditions[row.status_condition] + '<div class="form-control-feedback hide" data-field="status_condition"></div>';
|
||
}
|
||
},
|
||
{
|
||
field: 'fuel_type',
|
||
title: 'Fuel Type',
|
||
template: function (row, index, datatable) {
|
||
var fuel_types = {
|
||
{% for key, fuel_type in fuel_types %}
|
||
"{{ key }}": "{{ fuel_type }}",
|
||
{% endfor %}
|
||
};
|
||
|
||
return fuel_types[row.fuel_type] + '<div class="form-control-feedback hide" data-field="fuel_type"></div>';
|
||
}
|
||
},
|
||
{
|
||
field: 'warranty_code',
|
||
title: 'Wty. Code',
|
||
template: function (row, index, datatable) {
|
||
return row.warranty_code + '<div class="form-control-feedback hide" data-field="warranty_code"></div>';
|
||
}
|
||
},
|
||
{
|
||
field: 'warranty_expiration',
|
||
title: 'Wty. Exp.',
|
||
width: 80,
|
||
template: function (row, index, datatable) {
|
||
return row.warranty_expiration + '<div class="form-control-feedback hide" data-field="warranty_expiration"></div>';
|
||
}
|
||
},
|
||
{
|
||
field: 'battery_label',
|
||
title: 'Battery',
|
||
width: 150,
|
||
template: function (row, index, datatable) {
|
||
return row.battery_label + '<div class="form-control-feedback hide" data-field="battery"></div>';
|
||
}
|
||
},
|
||
{
|
||
field: 'flag_active',
|
||
title: 'Status',
|
||
template: function (row, index, datatable) {
|
||
if (row.flag_active === true) {
|
||
html = '<span class="m-badge m-badge--success m-badge--wide">Active</span>';
|
||
} else {
|
||
html = '<span class="m-badge m-badge--danger m-badge--wide">Inactive</span>';
|
||
}
|
||
|
||
html += '<div class="form-control-feedback hide" data-field="flag_active"></div>';
|
||
|
||
return html;
|
||
}
|
||
},
|
||
{
|
||
field: 'Actions',
|
||
width: 70,
|
||
title: 'Actions',
|
||
sortable: false,
|
||
overflow: 'visible',
|
||
template: function (row, index, datatable) {
|
||
html = '<input type="hidden" name="index" value="' + row.index + '">';
|
||
|
||
html += '<button type="button" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-edit-vehicle" title="Edit"><i class="la la-edit"></i></button>' +
|
||
'<button data-index="' + row.index + '" type="button" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill btn-delete-vehicle" title="Delete"><i class="la la-trash"></i></button>';
|
||
|
||
return html;
|
||
},
|
||
}
|
||
],
|
||
pagination: false
|
||
};
|
||
|
||
var vehicleTable = $("#data-vehicles").mDatatable(vehicleOptions);
|
||
|
||
// tickets data table
|
||
var ticketOptions = {
|
||
data: {
|
||
type: 'local',
|
||
source: ticketRows,
|
||
saveState: {
|
||
cookie: false,
|
||
webstorage: false
|
||
}
|
||
},
|
||
layout: {
|
||
scroll: true
|
||
},
|
||
columns: [
|
||
{
|
||
field: 'id',
|
||
title: 'ID',
|
||
width: 30
|
||
},
|
||
{
|
||
field: 'date_create',
|
||
title: 'Date Created',
|
||
width: 200
|
||
},
|
||
{
|
||
field: 'subject',
|
||
title: 'Subject',
|
||
width: 300
|
||
},
|
||
{
|
||
field: 'ticket_type',
|
||
title: 'Ticket Type'
|
||
},
|
||
{
|
||
field: 'status',
|
||
title: 'Status'
|
||
},
|
||
{
|
||
field: 'Actions',
|
||
width: 70,
|
||
title: 'Actions',
|
||
sortable: false,
|
||
overflow: 'visible',
|
||
template: function (row, index, datatable) {
|
||
return '<a href="' + row.edit_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-edit-ticket" title="Edit"><i class="la la-edit"></i></a>';
|
||
},
|
||
}
|
||
],
|
||
pagination: false
|
||
};
|
||
|
||
var numberTable = $("#data-tickets").mDatatable(ticketOptions);
|
||
});
|
||
</script>
|
||
{% endblock %}
|