Add compatible battery list for vehicle edit screen #140

templates/vehicle/form.html.twig

@@ -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">
@@ -173,6 +191,57 @@
         });
     });
 
+	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
+			}
+		},
+		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');