diff options
-rw-r--r-- | modules-available/usblockoff/templates/usb-edit-rule.html | 179 |
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 |