From 2d29ced74cce911e3252ed4b65f822e3a083ee9d Mon Sep 17 00:00:00 2001
From: Kendrick Chan <kc@jankstudio.com>
Date: Mon, 11 Jun 2018 23:24:55 +0800
Subject: [PATCH] Add compatible battery list for vehicle edit screen #140

---
 templates/vehicle/form.html.twig | 185 +++++++++++++++++++++----------
 1 file changed, 127 insertions(+), 58 deletions(-)

diff --git a/templates/vehicle/form.html.twig b/templates/vehicle/form.html.twig
index c182512e..bd6fa482 100644
--- a/templates/vehicle/form.html.twig
+++ b/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">
@@ -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 %}