From f9c45ccf667481ca9b762712d9a845bd2fc1200c Mon Sep 17 00:00:00 2001 From: Johannes Kimmel Date: Sun, 23 Apr 2023 00:41:54 +0200 Subject: [PATCH] put L3MultiInput in flieldsets and handle removals --- l3config.js | 52 +++++++++++++++++++++++++++------------------------- 1 file changed, 27 insertions(+), 25 deletions(-) diff --git a/l3config.js b/l3config.js index 880d4cb..453af01 100644 --- a/l3config.js +++ b/l3config.js @@ -75,7 +75,7 @@ class L3MultiSection { fieldsetbutton.setAttribute('type', 'button'); console.log(this.template); fieldsetbutton.addEventListener('click', () => this.addSection(fieldset)); - fieldsetbutton.innerHTML = this.legend; + fieldsetbutton.innerHTML = `+ ${this.legend}`; fieldsetlegend.appendChild(fieldsetbutton); fieldset.appendChild(fieldsetlegend); return fieldset; @@ -206,32 +206,34 @@ class L3MultiInput { this.ninputs = 0; } node() { - let inputcontainer = document.createElement('div'); - let inputbutton = document.createElement('button'); - inputbutton.setAttribute('type', 'button'); - console.log(this.template); - inputbutton.addEventListener('click', () => this.addInput(inputcontainer)); - inputbutton.innerHTML = this.label; - inputcontainer.appendChild(inputbutton); - return inputcontainer; + let fieldset = document.createElement('fieldset'); + let fieldsetlegend = document.createElement('legend'); + let fieldsetbutton = document.createElement('button'); + fieldsetbutton.setAttribute('type', 'button'); + fieldsetbutton.addEventListener('click', () => this.addInput(fieldset)); + fieldsetbutton.innerHTML = `+ ${this.label}`; + fieldsetlegend.appendChild(fieldsetbutton); + fieldset.appendChild(fieldsetlegend); + return fieldset; } addInput(inputcontainer) { const idsuffix = `-${this.ninputs++}`; let newinput = this.template(idsuffix); this.inputs.push(newinput); let div = newinput.node(); + let delbutton = document.createElement('button'); + delbutton.setAttribute('type', 'button'); + delbutton.innerHTML = '-'; + delbutton.addEventListener('click', () => { + this.removeInput(newinput, div); + this.handleUpdate(); + }); + div.prepend(delbutton); for (let input of div.getElementsByTagName('input')) { - console.log(input); input.addEventListener('input', () => this.handleUpdate()); - input.addEventListener('focusout', () => { - if (input.value) return; - - this.removeInput(input, input.parentElement) - this.handleUpdate(); - }); } - inputcontainer.before(div); + inputcontainer.append(div); this.handleUpdate(); } removeInput(del, div) { @@ -277,10 +279,10 @@ function initForm() { const l3cfg = new L3Config(); l3cfg.addSection(new L3Section('gateway', new L3Input('Router Name','gatewayName', 'name', {type: 'search', placeholder: 'Router Name'}), - new L3MultiInput('+ Router IPv4 Address', () => l3cfg.handleUpdate(), function(idsuffix) { + new L3MultiInput('Router IPv4 Address', () => l3cfg.handleUpdate(), function(idsuffix) { return new L3Input(undefined,'gatewayRouterIP4'+idsuffix, 'router_ip', {type: 'search', maxlength: 15, placeholder: 'Router IPv4 Address'}); }), - new L3MultiInput('+ Router IPv6 Address', () => l3cfg.handleUpdate(), function(idsuffix) { + 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'}); }), )); @@ -288,7 +290,7 @@ function initForm() { 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 L3MultiInput('+ Custom DNS Server', () => l3cfg.handleUpdate(), function(idsuffix) { + new L3MultiInput('Custom DNS Server', () => l3cfg.handleUpdate(), function(idsuffix) { return new L3Input(undefined,'dnsOther'+idsuffix, 'server', {type: 'text', maxlength: 39, placeholder: 'Custom DNS Server'}); }), )); @@ -299,10 +301,10 @@ function initForm() { l3cfg.addSection(new L3Section('client', new L3Input('Use VLAN','clientVLAN', 'vlan', {type: 'number', min: 1, max: 4094}), new L3Input('Use Interface directly','clientIFACE', 'iface', {type: 'text', placeholder: 'eth0, eth0.4, ...'}), - new L3MultiInput('+ Client IPv6 Subnet', () => l3cfg.handleUpdate(), function(idsuffix) { + new L3MultiInput('Client IPv6 Subnet', () => l3cfg.handleUpdate(), function(idsuffix) { return new L3Input(undefined,'clientIP6Addr'+idsuffix, 'ip6addr', {type: 'text', maxlength: 39, placeholder: 'IPv6 CIDR, 2a0b:f4c0:XX:YYYY::/64, fd43:5602:29bd:XXXX::/64,...'}); }), - new L3MultiInput('+ Client IPv4 Subnet', () => l3cfg.handleUpdate(), function(idsuffix) { + new L3MultiInput('Client IPv4 Subnet', () => l3cfg.handleUpdate(), function(idsuffix) { return new L3Input(undefined,'clientIPAddr'+idsuffix, 'ipaddr', {type: 'text', maxlength: 15, placeholder: 'IPv4 CIDR, 10.XX.YY.ZZ/24'}); }), new L3Input('IPv4 SNAT','clientSNAT', 'snat', {type: 'checkbox', value: 1}), @@ -312,13 +314,13 @@ function initForm() { new L3Input('Wifi 2.4 GHz Channel','client2GHZ', 'chan2ghz', {type: 'number', min: 1, max: 13}), new L3Input('Wifi 5 GHz Channel','client5GHZ', 'chan5ghz', {type: 'number', min: 36, max: 140}), )); - l3cfg.addSection(new L3MultiSection('+ vlan', () => l3cfg.handleUpdate(), function(idsuffix) { + l3cfg.addSection(new L3MultiSection('VLAN', () => l3cfg.handleUpdate(), function(idsuffix) { return new L3Section('vlan', new L3Input('Comment','vlanComment', 'comment', {type: 'text'}, ['client', 'wan']), new L3Input('Ports','vlanPorts', 'ports', {type: 'text', placeholder: 'eth0:*, eth1.4:u, ...'}), ); })); - l3cfg.addSection(new L3MultiSection('+ babelpeer', () => l3cfg.handleUpdate(), function(idsuffix) { + l3cfg.addSection(new L3MultiSection('Direct Babel Peering', () => l3cfg.handleUpdate(), function(idsuffix) { 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, ...'}), @@ -326,7 +328,7 @@ function initForm() { new L3Input('rxcost','babelpeerRXCost', 'rxcost', {type: 'number', min: 96, max: 65535, placeholder: 'LAN: 96, Tunnel: 4096, ...'}), ); })); - l3cfg.addSection(new L3MultiSection('+ wireguardpeer', () => l3cfg.handleUpdate(), function(idsuffix) { + l3cfg.addSection(new L3MultiSection('WireGuard Peering', () => l3cfg.handleUpdate(), function(idsuffix) { return new L3Section('wireguardpeer', new L3Input('Endpoint Host', 'wireguardpeerEPHost'+idsuffix, 'endpoint_host', {type: 'text', required: ''}, ['peering.nue3.fff.community','ff1.zbau.f3netze.de','nsvm.f3netze.de','2a0b:f4c0:400::']), new L3Input('Endpoint Port','wireguardpeerEPPort'+idsuffix, 'endpoint_port', {type: 'number', required: '', min:1, max: 65535}),