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

simplify event handling for updates

Browse Source
This commit is contained in:
Johannes Kimmel 2023-04-24 11:05:15 +02:00
parent f2bfa170fc
commit bb52a90c22
1 changed files with 15 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
l3config.js
View File

@ -69,10 +69,9 @@ class L3Section {
} }
class L3MultiSection { class L3MultiSection {
constructor(legend, handleUpdate, template) { constructor(legend, template) {
this.legend = legend; this.legend = legend;
this.template = template; this.template = template;
this.handleUpdate = handleUpdate;
this.sections = []; this.sections = [];
this.nsections = 0; this.nsections = 0;
} }
@ -80,10 +79,7 @@ class L3MultiSection {
let fieldset = makeFieldset(); let fieldset = makeFieldset();
fieldset.append( fieldset.append(
makeLegend( makeLegend(
makeButton(`+ ${this.legend}`, () => { makeButton(`+ ${this.legend}`, () => { fieldset.before(this.#makeSection()); }),
fieldset.before(this.#makeSection());
this.handleUpdate();
}),
) )
); );
return fieldset; return fieldset;
@ -93,12 +89,6 @@ class L3MultiSection {
let newsection = this.template(idsuffix); let newsection = this.template(idsuffix);
this.sections.push(newsection); this.sections.push(newsection);
let nodes = newsection.node(); let nodes = newsection.node();
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'); let del = document.createElement('button');
del.setAttribute('type', 'button'); del.setAttribute('type', 'button');
@ -111,7 +101,6 @@ class L3MultiSection {
#removeSection(del, nodes) { #removeSection(del, nodes) {
this.sections = this.sections.filter(section => section != del); this.sections = this.sections.filter(section => section != del);
nodes.remove(); nodes.remove();
this.handleUpdate();
} }
render() { render() {
return this.sections.map(section => section.render()).filter(section => !!section) return this.sections.map(section => section.render()).filter(section => !!section)
@ -229,10 +218,9 @@ class L3Select {
} }
class L3MultiInput { class L3MultiInput {
constructor(label, handleUpdate, template) { constructor(label, template) {
this.label = label; this.label = label;
this.template = template; this.template = template;
this.handleUpdate = handleUpdate;
this.inputs = []; this.inputs = [];
this.ninputs = 0; this.ninputs = 0;
} }
@ -240,10 +228,7 @@ class L3MultiInput {
let fieldset = makeFieldset(); let fieldset = makeFieldset();
fieldset.append( fieldset.append(
makeLegend( makeLegend(
makeButton(`+ ${this.label}`, () => { makeButton(`+ ${this.label}`, () => { fieldset.append(this.#makeInput()); }),
fieldset.append(this.#makeInput());
this.handleUpdate();
}),
) )
); );
return fieldset; return fieldset;
@ -257,20 +242,13 @@ class L3MultiInput {
delbutton.setAttribute('type', 'button'); delbutton.setAttribute('type', 'button');
delbutton.classList.add('del'); delbutton.classList.add('del');
delbutton.innerHTML = '-'; delbutton.innerHTML = '-';
delbutton.addEventListener('click', () => { delbutton.addEventListener('click', () => { this.#removeInput(newinput, div); });
this.#removeInput(newinput, div);
this.handleUpdate();
});
div.prepend(delbutton); div.prepend(delbutton);
for (let input of div.getElementsByTagName('input')) {
input.addEventListener('input', () => this.handleUpdate());
}
return div; return div;
} }
#removeInput(del, div) { #removeInput(del, div) {
this.inputs = this.inputs.filter(input => input != del); this.inputs = this.inputs.filter(input => input != del);
div.remove(); div.remove();
this.handleUpdate();
} }
option() { option() {
return this.inputs.map(input => input.option()); return this.inputs.map(input => input.option());
@ -288,16 +266,7 @@ class L3Config {
renderConfig(this.sections.flatMap(section => section.render()).filter(section => !!section)); renderConfig(this.sections.flatMap(section => section.render()).filter(section => !!section));
} }
node() { node() {
let nodes = this.sections.map(section => section.node()) return this.sections.map(section => section.node())
for (let node of nodes) {
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;
} }
} }
@ -309,10 +278,10 @@ function initForm() {
const l3cfg = new L3Config(); const l3cfg = new L3Config();
l3cfg.addSection(new L3Section('gateway', l3cfg.addSection(new L3Section('gateway',
new L3Input('Router Name','gatewayName', 'name', {type: 'search', placeholder: 'Router Name'}), 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', function(idsuffix) {
return new L3Input(undefined,'gatewayRouterIP4'+idsuffix, 'router_ip', {type: 'search', maxlength: 15, placeholder: 'Router IPv4 Address'}); 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', function(idsuffix) {
return new L3Input(undefined,'gatewayRouterIP6'+idsuffix, 'router_ip6', {type: 'text', maxlength: 39, placeholder: 'Router IPv6 Address'}); 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: ''}), new L3Input('Config Version', 'gatewayConfigVersion', 'config_version', {type: 'text', value: 2, disabled: ''}),
@ -323,7 +292,7 @@ function initForm() {
['Anycast DNS64', 'fd43:5602:29bd:ffff:1:1:1:64'], ['Anycast DNS64', 'fd43:5602:29bd:ffff:1:1:1:64'],
['---', undefined], ['---', undefined],
]), ]),
new L3MultiInput('Custom DNS Server', () => l3cfg.handleUpdate(), function(idsuffix) { new L3MultiInput('Custom DNS Server', function(idsuffix) {
return new L3Input(undefined,'dnsOther'+idsuffix, 'server', {type: 'text', maxlength: 39, placeholder: 'Custom DNS Server'}); return new L3Input(undefined,'dnsOther'+idsuffix, 'server', {type: 'text', maxlength: 39, placeholder: 'Custom DNS Server'});
}), }),
)); ));
@ -334,10 +303,10 @@ function initForm() {
l3cfg.addSection(new L3Section('client', l3cfg.addSection(new L3Section('client',
new L3Input('Use VLAN','clientVLAN', 'vlan', {type: 'number', min: 1, max: 4094}), 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 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', 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,...'}); 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', function(idsuffix) {
return new L3Input(undefined,'clientIPAddr'+idsuffix, 'ipaddr', {type: 'text', maxlength: 15, placeholder: 'IPv4 CIDR, 10.XX.YY.ZZ/24'}); 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}), new L3Input('IPv4 SNAT','clientSNAT', 'snat', {type: 'checkbox', value: 1}),
@ -347,13 +316,13 @@ function initForm() {
new L3Input('Wifi 2.4 GHz Channel','client2GHZ', 'chan2ghz', {type: 'number', min: 1, max: 13}), 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}), 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', function(idsuffix) {
return new L3Section('vlan', return new L3Section('vlan',
new L3Input('Comment','vlanComment', 'comment', {type: 'text'}, ['client', 'wan']), new L3Input('Comment','vlanComment', 'comment', {type: 'text'}, ['client', 'wan']),
new L3Input('Ports','vlanPorts', 'ports', {type: 'text', placeholder: 'eth0:*, eth1.4:u, ...'}), new L3Input('Ports','vlanPorts', 'ports', {type: 'text', placeholder: 'eth0:*, eth1.4:u, ...'}),
); );
})); }));
l3cfg.addSection(new L3MultiSection('Direct Babel Peering', () => l3cfg.handleUpdate(), function(idsuffix) { l3cfg.addSection(new L3MultiSection('Direct Babel Peering', function(idsuffix) {
return new L3Section('babelpeer', return new L3Section('babelpeer',
new L3Input('Use VLAN','babelpeerVLAN', 'vlan', {type: 'number', min: 1, max: 4094}), 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('Use Interface directly','babelpeerIFACE', 'iface', {type: 'text', placeholder: 'eth0, eth0.4, ...'}),
@ -365,7 +334,7 @@ function initForm() {
new L3Input('rxcost','babelpeerRXCost', 'rxcost', {type: 'number', min: 96, max: 65535, placeholder: 'LAN: 96, Tunnel: 4096, ...'}), new L3Input('rxcost','babelpeerRXCost', 'rxcost', {type: 'number', min: 96, max: 65535, placeholder: 'LAN: 96, Tunnel: 4096, ...'}),
); );
})); }));
l3cfg.addSection(new L3MultiSection('WireGuard Peering', () => l3cfg.handleUpdate(), function(idsuffix) { l3cfg.addSection(new L3MultiSection('WireGuard Peering', function(idsuffix) {
return new L3Section('wireguardpeer', 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 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}), new L3Input('Endpoint Port','wireguardpeerEPPort'+idsuffix, 'endpoint_port', {type: 'number', required: '', min:1, max: 65535}),
@ -377,6 +346,7 @@ function initForm() {
); );
})); }));
form.addEventListener('input', () => l3cfg.handleUpdate());
form.replaceChildren(...l3cfg.node()) form.replaceChildren(...l3cfg.node())
renderConfig(l3cfg.sections.flatMap(section => section.render()).filter(section => !!section)); renderConfig(l3cfg.sections.flatMap(section => section.render()).filter(section => !!section));
} }