blob: ef5d48d5485661834a6f79103c88407301452f74 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
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>
|
