diff options
Diffstat (limited to 'modules-available/usblockoff/templates/usb-edit-rule.html')
| -rw-r--r-- | modules-available/usblockoff/templates/usb-edit-rule.html | 170 |
1 files changed, 170 insertions, 0 deletions
diff --git a/modules-available/usblockoff/templates/usb-edit-rule.html b/modules-available/usblockoff/templates/usb-edit-rule.html new file mode 100644 index 00000000..ef5d48d5 --- /dev/null +++ b/modules-available/usblockoff/templates/usb-edit-rule.html @@ -0,0 +1,170 @@ +<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>
\ No newline at end of file |