[usb-lock-off] Edit rule cleanup and fix of the dropdown boxes.

1 files changed, 105 insertions, 74 deletions

diff --git a/modules-available/usblockoff/templates/usb-edit-rule.html b/modules-available/usblockoff/templates/usb-edit-rule.html
index e2854f50..ef5d48d5 100644
--- a/modules-available/usblockoff/templates/usb-edit-rule.html
+++ b/modules-available/usblockoff/templates/usb-edit-rule.html
@@ -29,111 +29,142 @@
 </form>
 
 <script>
+	// JSON with the vendor / product lists.
 	var idArray = {{{usbJson}}};
 
+	// Page loaded event listener.
 	document.addEventListener("DOMContentLoaded", function() {
+		// Init the tooltips.
 		$('a.btn[title]').tooltip({placement: "auto", html: true});
 
-		$('.switch-input').click(function() {
-			//var $op = $(this).parent().find('select');
-			var $op = $(this).parent().find(':input').not('button');
-			var val = $op.val();
-			console.log(val);
-			if ($op[0].localName == 'select') {
-				$op.replaceWith($('<input class="form-control" type="text">').attr('name', $op.attr('name')).attr('id', $op.attr('id')).val(val));
-
-				if ($op.attr('id') === 'prop-vid') {
-					remakeChangeEvent(val);
+		// Add the click event to the switch input button.
+		$('.switch-input').click(function () {
+			var oldInput = $(this).parent().find(':input').not('button');
+			var value = oldInput.val();
+
+			// Switch case: Either input type=text or select.
+			if (oldInput[0].localName == 'select') {
+				// Replace it with an input type=text field.
+				oldInput.replaceWith($('<input class="form-control" type="text">').attr('name', oldInput.attr('name')).attr('id', oldInput.attr('id')).val(value));
+
+				if (oldInput.attr('id') === 'prop-vid') {
+					// Adds the onchange event for the vendor input field.
+					createVendorOnChange();
+				} else if (oldInput.attr('id') === 'prop-pid') {
+					// Adds the onchange event for the products input field.
+					createProductOnChange();
 				}
 
+				// Change the buttons glyphicon.
 				$(this).parent().find('button span').removeClass('glyphicon-pencil').addClass('glyphicon glyphicon-list-alt');
-
-			} else if ($op[0].localName == 'input') {
-				$op.replaceWith($('<select class="form-control">').attr('name', $op.attr('name')).attr('id', $op.attr('id')).val(val));
-
-				if ($op.attr('id') === 'prop-vid') {
-					var vendorid = $('#prop-vid');
-					$.each(idArray, function (key, value) {
-						vendorid.append($('<option></option>').val(key).html(value['name']));
-					});
-
-					vendorid.val(val);
-					remakeChangeEvent(val);
-				} else if ($op.attr('id') === 'prop-pid') {
-					var productid = $('#prop-pid');
-					$.each(idArray[$('#prop-vid').val()]['products'], function(key, value) {
-						productid.append($('<option></option>').val(key).html(value));
-					});
-					productid.val(val);
+			} else if (oldInput[0].localName == 'input') {
+				// Replace it with a select input field.
+				oldInput.replaceWith($('<select class="form-control"><option id="option" selected></option></select>').attr('name', oldInput.attr('name')).attr('id', oldInput.attr('id')));
+				$('#option').val(value).text("unknown");
+
+				if (oldInput.attr('id') === 'prop-vid') {
+					// Initializes (fills) the vendor select dropdown box.
+					fillVendors();
+
+					// Adds the onchange event for the vendor input dropdown.
+					createVendorOnChange();
+				} else if (oldInput.attr('id') === 'prop-pid') {
+					// Initializes (fills) the product select dropdown box.
+					fillProducts();
+
+					// Adds the onchange event for the products input dropdown.
+					createProductOnChange();
 				}
+
+				// Change the buttons glyphicon.
 				$(this).parent().find('button span').removeClass('glyphicon-list-alt').addClass('glyphicon-pencil');
 			}
-			remakeUpdateEvent();
 		});
-		remakeUpdateEvent();
 
-		var vendorid = $('#prop-vid');
-		var productid = $('#prop-pid');
+		// Create the change event for all props.
+		$('[id^="prop-"]').change(function () {
+			updateAttributes();
+		});
 
-		var vid = vendorid.val();
-		vendorid.empty();
+		// Initializes (fills) the dropdown boxes and creates the change events.
+		fillVendors();
+		fillProducts();
+		updateAttributes();
+		createVendorOnChange();
+		createProductOnChange();
+	});
 
-		vendorid.change(function () {
-			var $this = $(this);
-			var vid = $this.val();
-			var pid = productid.val();
-			productid.empty();
-			$.each(idArray[vid]['products'], function(key, value) {
-				productid.append($('<option></option>').val(key).html(value));
-			});
-			productid.val(pid);
-		});
+	// Fills the vendor dropdown box with options.
+	function fillVendors() {
+		var vendorid = $('#prop-vid');
+		var value = vendorid.val();
+		vendorid.empty();
 
+		// Fill the select with options.
 		$.each(idArray, function(key, value) {
 			vendorid.append($('<option></option>').val(key).html(value['name']));
 		});
 
-		vendorid.val(vid);
-		vendorid.change();
-	});
+		// If the value exist in the array.
+		if (value in idArray) {
+			// Assign vendor value.
+			vendorid.val(value);
+		}
+	}
 
-	function updateAttributes() {
-		var attributes = [];
+	// Creates the onChange event for the vendor dropdown.
+	function createVendorOnChange() {
+		var vendorid = $('#prop-vid');
+		vendorid.change(function() {
+			fillProducts();
+			updateAttributes();
+		});
+	}
 
-		$.each($('[id^="prop-"]'), function () {
-			var attr = {};
-			attr['prop'] = $(this).attr('id');
-			attr['value'] = $(this).val();
+	// Fills the product dropdown box with options.
+	function fillProducts() {
+		var vendorid = $('#prop-vid');
+		var productid = $('#prop-pid');
+		var value = productid.val();
+		productid.empty();
 
-			attributes.push(attr);
-		});
-		$('#attributes').val(JSON.stringify(attributes));
+		// If the key exists load the option list.
+		if (vendorid.val() in idArray) {
+			$.each(idArray[vendorid.val()]['products'], function(key, value) {
+				productid.append($('<option></option>').val(key).html(value));
+			});
+
+			// IF the value exist in the array.
+			if (value in idArray[vendorid.val()]['products']) {
+				// Assign product value.
+				productid.val(value);
+			}
+		}
 	}
 
-	function remakeUpdateEvent() {
-		$('[id^="prop-"]').change(function () {
+	// Creates the onChange event for the products dropdown.
+	function createProductOnChange() {
+		var productid = $('#prop-pid');
+
+		productid.change(function() {
 			updateAttributes();
 		});
 	}
 
-	function remakeChangeEvent(val) {
-		var vendorid = $('#prop-vid');
+	// Updates the attributes variable which is send to the page.php on save.
+	function updateAttributes() {
+		var attributes = [];
 
-		vendorid.change(function () {
-			var productid = $('#prop-pid');
+		// Add all attributes in an array.
+		$.each($('[id^="prop-"]'), function () {
+			var attr = {};
+			attr['prop'] = $(this).attr('id');
+			attr['value'] = $(this).val();
 
-			var $this = $(this);
-			var vid = $this.val();
-			var pid = productid.val();
-			productid.empty();
-			$.each(idArray[vid]['products'], function(key, value) {
-				productid.append($('<option></option>').val(key).html(value));
-			});
-			productid.val(pid);
+			attributes.push(attr);
 		});
 
-		vendorid.val(val);
-		vendorid.change();
+		// Save the array as JSON in the attributes hidden input.
+		$('#attributes').val(JSON.stringify(attributes));
 	}
-
-</script>
+</script>
\ No newline at end of file