path: root/modules-available/usblockoff/templates/usb-edit-rule.html

<form method="post" action="?do=usblockoff" id="editRuleForm">
	<input type="hidden" name="token" value="{{token}}">
	<input type="hidden" name="action" value="editRule">
	<input type="hidden" name="configid" value="{{configid}}" id="configid">
	<input type="hidden" name="ruleid" value="{{ruleid}}" id="ruleid">
	<input type="hidden" name="attributes" value="" id="attributes">

	<div class="panel panel-default">
		<div class="panel-heading">{{lang_editRule}}</div>
		<div class="panel-body">
			<div class="list-group">

				{{#attributes}}
				{{{attributesHtml}}}
				{{/attributes}}

			</div>
		</div>
	</div>

	<div class="pull-right">
		<a href="?do=usblockoff&show=edit-config&configid={{configid}}" class="btn btn-default">Cancel</a>

		<button id="addButton" class="btn btn-primary" type="submit">
			<span class="glyphicon glyphicon-floppy-disk"></span> {{lang_save}}
		</button>
	</div>

</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});

		// 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 (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');
			}
		});

		// Create the change event for all props.
		$('[id^="prop-"]').change(function () {
			updateAttributes();
		});

		// Initializes (fills) the dropdown boxes and creates the change events.
		fillVendors();
		fillProducts();
		updateAttributes();
		createVendorOnChange();
		createProductOnChange();
	});

	// 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']));
		});

		// If the value exist in the array.
		if (value in idArray) {
			// Assign vendor value.
			vendorid.val(value);
		}
	}

	// Creates the onChange event for the vendor dropdown.
	function createVendorOnChange() {
		var vendorid = $('#prop-vid');
		vendorid.change(function() {
			fillProducts();
			updateAttributes();
		});
	}

	// Fills the product dropdown box with options.
	function fillProducts() {
		var vendorid = $('#prop-vid');
		var productid = $('#prop-pid');
		var value = productid.val();
		productid.empty();

		// 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);
			}
		}
	}

	// Creates the onChange event for the products dropdown.
	function createProductOnChange() {
		var productid = $('#prop-pid');

		productid.change(function() {
			updateAttributes();
		});
	}

	// Updates the attributes variable which is send to the page.php on save.
	function updateAttributes() {
		var attributes = [];

		// Add all attributes in an array.
		$.each($('[id^="prop-"]'), function () {
			var attr = {};
			attr['prop'] = $(this).attr('id');
			attr['value'] = $(this).val();

			attributes.push(attr);
		});

		// Save the array as JSON in the attributes hidden input.
		$('#attributes').val(JSON.stringify(attributes));
	}
</script>