diff --git a/l3config.js b/l3config.js index da08a88..be29b84 100644 --- a/l3config.js +++ b/l3config.js @@ -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, ...'}), ); }));