jkimmel
/
l3config.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add L3Select for <select> elements

This commit is contained in:
Johannes Kimmel 2023-04-24 00:06:38 +02:00
parent ba5913fc47
commit f2bfa170fc
1 changed files with 64 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
l3config.js
View File

@ -96,6 +96,9 @@ class L3MultiSection {
for (let input of nodes.getElementsByTagName('input')) {
input.addEventListener('input', () => this.handleUpdate())
}
for (let input of nodes.getElementsByTagName('select')) {
input.addEventListener('input', () => this.handleUpdate())
}
let del = document.createElement('button');
del.setAttribute('type', 'button');
@ -178,6 +181,53 @@ class L3Input {
}
}
class L3Select {
constructor(label, id, optionName, attrs, optionList) {
this.label = label;
this.id = id;
this.optionName = optionName;
this.attrs = attrs;
this.optionList = optionList;
this.input = undefined;
}
node() {
let div = document.createElement('div')
if (this.label) {
let newLabel = document.createElement('label');
newLabel.setAttribute('for', this.id);
newLabel.innerHTML = this.label;
div.appendChild(newLabel);
}
this.input = document.createElement('select');
this.input.setAttribute('id', this.id);
for (const attr in this.attrs) {
this.input.setAttribute(attr, this.attrs[attr]);
}
div.appendChild(this.input);
for (const [label, value] of this.optionList) {
let option = document.createElement('option');
option.setAttribute('value', value);
option.appendChild(makeText(label));
this.input.appendChild(option);
}
return div;
}
option() {
if (this.input.value == 'undefined') { return undefined; }
const ret = {
optionName: this.optionName,
value: this.input.value,
};
return ret;
}
}
class L3MultiInput {
constructor(label, handleUpdate, template) {
this.label = label;
@ -243,6 +293,9 @@ class L3Config {
for (let input of node.getElementsByTagName('input')) {
input.addEventListener('input', () => this.handleUpdate())
}
for (let input of node.getElementsByTagName('select')) {
input.addEventListener('input', () => this.handleUpdate())
}
}
return nodes;
}
@ -262,11 +315,14 @@ function initForm() {
new L3MultiInput('Router IPv6 Address', () => l3cfg.handleUpdate(), function(idsuffix) {
return new L3Input(undefined,'gatewayRouterIP6'+idsuffix, 'router_ip6', {type: 'text', maxlength: 39, placeholder: 'Router IPv6 Address'});
}),
new L3Input('Config Version', 'gatewayConfigVersion', 'config_version', {type: 'text', value: 2, disabled: ''}),
));
l3cfg.addSection(new L3Section('dns',
new L3Input('Anycast DNS','dnsAnycast', 'server', {type: 'radio', name: 'anycast', value: 'fd43:5602:29bd:ffff:1:1:1:1', checked: ''}),
new L3Input('Anycast DNS64','dnsAnycast64', 'server', {type: 'radio', name: 'anycast', value: 'fd43:5602:29bd:ffff:1:1:1:64'}),
new L3Input('Disable','dnsAnycastNone', 'server', {type: 'radio', name: 'anycast', value: undefined}),
new L3Select('Preset','dnsAnycastSelect', 'server', {name: 'anycast'}, [
['Anycast DNS', 'fd43:5602:29bd:ffff:1:1:1:1'],
['Anycast DNS64', 'fd43:5602:29bd:ffff:1:1:1:64'],
['---', undefined],
]),
new L3MultiInput('Custom DNS Server', () => l3cfg.handleUpdate(), function(idsuffix) {
return new L3Input(undefined,'dnsOther'+idsuffix, 'server', {type: 'text', maxlength: 39, placeholder: 'Custom DNS Server'});
}),
@ -301,7 +357,11 @@ function initForm() {
return new L3Section('babelpeer',
new L3Input('Use VLAN','babelpeerVLAN', 'vlan', {type: 'number', min: 1, max: 4094}),
new L3Input('Use Interface directly','babelpeerIFACE', 'iface', {type: 'text', placeholder: 'eth0, eth0.4, ...'}),
new L3Input('type','babelpeerType', 'type', {type: 'search', placeholder: 'wired, wireless, ...'}, ['wired', 'wireless'] ),
new L3Select('Babel Interface Type','babelpeerType', 'type', {name: 'type'}, [
['---', undefined],
['Wired', 'wired'],
['Wireless', 'wireless'],
]),
new L3Input('rxcost','babelpeerRXCost', 'rxcost', {type: 'number', min: 96, max: 65535, placeholder: 'LAN: 96, Tunnel: 4096, ...'}),
);
}));