ui: improve the subnet size selector

o toggle between 32 and 64 to indicate it's working
o serialize the option change event
o remove disabled option workaround
This commit is contained in:
Franco Fichtner 2021-06-07 08:33:55 +02:00
parent 2f98cad8c3
commit 89922cc191
2 changed files with 28 additions and 31 deletions

View File

@ -374,14 +374,11 @@ $( document ).ready(function() {
</td>
<td>
<select name="subnet_bits" data-network-id="subnet" class="selectpicker ipv4v6net" data-size="10" data-width="auto" id="subnet_bits">
<option disabled="disabled"></option> <!-- workaround for selectpicker -->
<?php
for ($i = 128; $i >= 1; $i--): ?>
<?php for ($i = 128; $i >= 1; $i--): ?>
<option value="<?=$i;?>" <?= $i == $pconfig['subnet_bits'] ? "selected=\"selected\"" :""; ?>>
<?=$i;?>
</option>
<?php
endfor; ?>
<?php endfor ?>
</select>
</td>
</tr>

View File

@ -47,32 +47,32 @@ function notice_action(action,msgid) {
* @param classname: classname to hook on to, select list of netmasks
* @param data_id: data field reference to network input field
*/
function hook_ipv4v6(classname, data_id) {
$("select."+classname).each(function(){
var selectlist_id = $(this).attr('id');
if ($(this).data(data_id) != undefined) {
$("#"+$(this).data(data_id)).change(function(){
var itemValue = $(this).val();
$("#"+selectlist_id+" > option").each(function() {
if (parseInt($(this).val()) > 32 && itemValue.indexOf(":") == -1 ) {
$(this).hide()
} else {
$(this).show();
}
});
// select highest visible option
if (parseInt($("#"+selectlist_id).val()) > 32 && itemValue.indexOf(":") == -1) {
$("#"+selectlist_id+' option[value=32]').attr('selected','selected');
}
// when select list uses selectpicker, refresh
if ($("#"+selectlist_id).hasClass('selectpicker')) {
$("#"+selectlist_id).selectpicker('refresh');
}
});
}
// trigger initial onChange event
$("#"+$(this).data(data_id)).change();
});
function hook_ipv4v6(classname, data_id)
{
$("select."+classname).each(function(){
var selectlist_id = $(this).attr('id');
if ($(this).data(data_id) != undefined) {
$("#"+$(this).data(data_id)).change(function () {
if ($(this).val().indexOf(":") == -1) {
$("#"+selectlist_id).val('32');
for (let i = 33; i <= 128; ++i) {
$("#"+selectlist_id+' option[value=' + i + ']').hide()
}
} else {
for (let i = 33; i <= 128; ++i) {
$("#"+selectlist_id+' option[value=' + i + ']').show()
}
$("#"+selectlist_id).val('64');
}
/* when select list uses selectpicker, refresh */
if ($("#"+selectlist_id).hasClass('selectpicker')) {
$("#"+selectlist_id).selectpicker('refresh');
}
});
}
/* trigger initial onChange event */
$("#"+$(this).data(data_id)).change();
});
}
/**