add support for multiple sections
This commit is contained in:
parent
807203ac01
commit
b77fe2083e
150
l3config.js
150
l3config.js
|
|
@ -54,7 +54,7 @@ class L3Section {
|
|||
optstrs.push(`option ${opt} '${values[0]}'`);
|
||||
} else {
|
||||
for (const value of values) {
|
||||
optstrs.push(`list ${opt} '${value}'`);
|
||||
optstrs.push(`list ${opt} '${value}'`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -62,6 +62,58 @@ class L3Section {
|
|||
}
|
||||
}
|
||||
|
||||
class L3MultiSection {
|
||||
constructor(legend, handleUpdate, template) {
|
||||
this.legend = legend;
|
||||
this.template = template;
|
||||
this.handleUpdate = handleUpdate;
|
||||
this.fieldset = undefined;
|
||||
this.sections = [];
|
||||
this.nsections = 0;
|
||||
}
|
||||
node() {
|
||||
this.fieldset = document.createElement('fieldset');
|
||||
let fieldsetlegend = document.createElement('legend');
|
||||
let fieldsetbutton = document.createElement('button');
|
||||
fieldsetbutton.setAttribute('type', 'button');
|
||||
console.log(this.template);
|
||||
fieldsetbutton.addEventListener('click', () => this.addSection());
|
||||
fieldsetbutton.innerHTML = this.legend;
|
||||
fieldsetlegend.appendChild(fieldsetbutton);
|
||||
this.fieldset.appendChild(fieldsetlegend);
|
||||
return this.fieldset;
|
||||
}
|
||||
addSection() {
|
||||
const idsuffix = `-${this.nsections++}`;
|
||||
let newsection = this.template(idsuffix);
|
||||
this.sections.push(newsection);
|
||||
let nodes = newsection.node();
|
||||
for (let input of nodes.getElementsByTagName('input')) {
|
||||
console.log(input);
|
||||
input.addEventListener('input', () => this.handleUpdate())
|
||||
}
|
||||
|
||||
let del = document.createElement('button');
|
||||
del.setAttribute('type', 'button');
|
||||
del.addEventListener('click', () => this.removeSection(newsection, nodes));
|
||||
del.innerHTML = 'Remove';
|
||||
nodes.append(del);
|
||||
|
||||
this.fieldset.before(nodes);
|
||||
this.handleUpdate();
|
||||
}
|
||||
removeSection(del, nodes) {
|
||||
console.log(this.sections);
|
||||
this.sections = this.sections.filter(section => section != del);
|
||||
console.log(this.sections);
|
||||
nodes.remove();
|
||||
this.handleUpdate();
|
||||
}
|
||||
render() {
|
||||
return this.sections.map(section => section.render()).filter(section => !!section)
|
||||
}
|
||||
}
|
||||
|
||||
class L3Input {
|
||||
constructor(label, id, optionName, attrs, datalist) {
|
||||
this.label = label;
|
||||
|
|
@ -82,7 +134,6 @@ class L3Input {
|
|||
this.input.setAttribute(attr, this.attrs[attr]);
|
||||
}
|
||||
|
||||
|
||||
let ret = (this.input.type === 'radio') ? [this.input, newLabel] : [newLabel, this.input];
|
||||
|
||||
if (this.datalist) {
|
||||
|
|
@ -141,44 +192,77 @@ class L3Input {
|
|||
}
|
||||
}
|
||||
|
||||
class L3Config {
|
||||
constructor() {
|
||||
this.sections = [];
|
||||
}
|
||||
addSection(section) {
|
||||
this.sections.push(section)
|
||||
}
|
||||
handleUpdate() {
|
||||
console.log('here');
|
||||
renderConfig(this.sections.flatMap(section => section.render()).filter(section => !!section));
|
||||
}
|
||||
node() {
|
||||
let nodes = this.sections.map(section => section.node())
|
||||
for (let node of nodes) {
|
||||
for (let input of node.getElementsByTagName('input')) {
|
||||
input.addEventListener('input', () => this.handleUpdate())
|
||||
}
|
||||
}
|
||||
return nodes;
|
||||
}
|
||||
}
|
||||
|
||||
function initForm() {
|
||||
let l3configinput = document.getElementById('l3configinput');
|
||||
let form = document.createElement('form');
|
||||
l3configinput.appendChild(form);
|
||||
|
||||
const L3Config = [
|
||||
new L3Section('gateway',
|
||||
new L3Input('name','gatewayName', 'name', {type: 'search', required: '', placeholder: 'Router Name'}),
|
||||
new L3Input('router_ip','gatewayRouterIP', 'router_ip', {type: 'text'}),
|
||||
new L3Input('router_ip6','gatewayRouterIP6', 'router_ip6', {type: 'text'}),
|
||||
),
|
||||
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 L3Input('server','dnsOther', 'server', {type: 'text', placeholder: 'Custom DNS Server'}),
|
||||
),
|
||||
new L3Section('babelpeer',
|
||||
new L3Input('vlan','babelpeerVLAN', 'vlan', {type: 'number', min: 1, max: 4094}),
|
||||
new L3Input('iface','babelpeerIFACE', 'iface', {type: 'text', placeholder: 'eth0, eth0.4, ...'}),
|
||||
const l3cfg = new L3Config();
|
||||
l3cfg.addSection(new L3Section('gateway',
|
||||
new L3Input('Router Name','gatewayName', 'name', {type: 'search', required: '', placeholder: 'Router Name'}),
|
||||
new L3Input('Router IPv4 Address','gatewayRouterIP', 'router_ip', {type: 'text'}),
|
||||
new L3Input('Router IPv6 Address','gatewayRouterIP6', 'router_ip6', {type: 'text'}),
|
||||
));
|
||||
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 L3Input('Custom DNS Server','dnsOther', 'server', {type: 'text', placeholder: 'Custom DNS Server'}),
|
||||
));
|
||||
l3cfg.addSection(new L3Section('wan',
|
||||
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, ...'}),
|
||||
));
|
||||
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) {
|
||||
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 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('+ wireguardpeer', () => 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}),
|
||||
new L3Input('Persistent Keepalive','wireguardpeerPersistentKeepalive', 'persistent_keepalive', {type: 'number', min: 0, max: 65535, placeholder: '1 - 65535 Seconds...'}),
|
||||
new L3Input('Remote Public Key', 'wireguardpeerRemotePubKey'+idsuffix, 'remote_public_key', {type: 'text', required: '', placeholder: 'base64 encoded public key'}),
|
||||
new L3Input('Local Private Key', 'wireguardpeerLocalPrivKey'+idsuffix, 'local_private_key', {type: 'text', placeholder: 'base64 encoded private key'}),
|
||||
new L3Input('rxcost','wireguardpeerRXCost', 'rxcost', {type: 'number', min: 96, max: 65535, value: 4096, placeholder: '4096'}),
|
||||
new L3Input('mtu','wireguardpeerMTU', 'mtu', {type: 'number', min: 1280, max: 65535, value: 1412, placeholder: '1412'}),
|
||||
);
|
||||
}));
|
||||
|
||||
];
|
||||
|
||||
form.replaceChildren(...L3Config.map((section) => section.node()));
|
||||
|
||||
function handleUpdate() {
|
||||
console.log(L3Config);
|
||||
renderConfig(L3Config.map(section => section.render()).filter(section => !!section));
|
||||
}
|
||||
|
||||
for (let input of form.getElementsByTagName('input')) {
|
||||
input.addEventListener('input', handleUpdate);
|
||||
}
|
||||
|
||||
renderConfig(L3Config.map(section => section.render()).filter(section => !!section));
|
||||
form.replaceChildren(...l3cfg.node())
|
||||
renderConfig(l3cfg.sections.map(section => section.render()).filter(section => !!section));
|
||||
}
|
||||
|
||||
function renderConfigOption(name, value) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue