add multiple inputs
This commit is contained in:
parent
a72668593b
commit
04dcf1a69c
89
l3config.js
89
l3config.js
|
@ -17,9 +17,7 @@ class L3Section {
|
||||||
let fs = makeFieldset(this.legend);
|
let fs = makeFieldset(this.legend);
|
||||||
let sep = undefined;
|
let sep = undefined;
|
||||||
for (const input of this.inputs) {
|
for (const input of this.inputs) {
|
||||||
let div = document.createElement('div');
|
fs.append(input.node());
|
||||||
div.append(...input.node());
|
|
||||||
fs.append(div);
|
|
||||||
}
|
}
|
||||||
return fs;
|
return fs;
|
||||||
}
|
}
|
||||||
|
@ -28,7 +26,7 @@ class L3Section {
|
||||||
}
|
}
|
||||||
render() {
|
render() {
|
||||||
const options = this.inputs
|
const options = this.inputs
|
||||||
.map(input => input.option())
|
.flatMap(input => input.option())
|
||||||
.filter(option => !!option);
|
.filter(option => !!option);
|
||||||
|
|
||||||
if (options.length == 0) {
|
if (options.length == 0) {
|
||||||
|
@ -67,23 +65,22 @@ class L3MultiSection {
|
||||||
this.legend = legend;
|
this.legend = legend;
|
||||||
this.template = template;
|
this.template = template;
|
||||||
this.handleUpdate = handleUpdate;
|
this.handleUpdate = handleUpdate;
|
||||||
this.fieldset = undefined;
|
|
||||||
this.sections = [];
|
this.sections = [];
|
||||||
this.nsections = 0;
|
this.nsections = 0;
|
||||||
}
|
}
|
||||||
node() {
|
node() {
|
||||||
this.fieldset = document.createElement('fieldset');
|
let fieldset = document.createElement('fieldset');
|
||||||
let fieldsetlegend = document.createElement('legend');
|
let fieldsetlegend = document.createElement('legend');
|
||||||
let fieldsetbutton = document.createElement('button');
|
let fieldsetbutton = document.createElement('button');
|
||||||
fieldsetbutton.setAttribute('type', 'button');
|
fieldsetbutton.setAttribute('type', 'button');
|
||||||
console.log(this.template);
|
console.log(this.template);
|
||||||
fieldsetbutton.addEventListener('click', () => this.addSection());
|
fieldsetbutton.addEventListener('click', () => this.addSection(fieldset));
|
||||||
fieldsetbutton.innerHTML = this.legend;
|
fieldsetbutton.innerHTML = this.legend;
|
||||||
fieldsetlegend.appendChild(fieldsetbutton);
|
fieldsetlegend.appendChild(fieldsetbutton);
|
||||||
this.fieldset.appendChild(fieldsetlegend);
|
fieldset.appendChild(fieldsetlegend);
|
||||||
return this.fieldset;
|
return fieldset;
|
||||||
}
|
}
|
||||||
addSection() {
|
addSection(fieldset) {
|
||||||
const idsuffix = `-${this.nsections++}`;
|
const idsuffix = `-${this.nsections++}`;
|
||||||
let newsection = this.template(idsuffix);
|
let newsection = this.template(idsuffix);
|
||||||
this.sections.push(newsection);
|
this.sections.push(newsection);
|
||||||
|
@ -99,7 +96,7 @@ class L3MultiSection {
|
||||||
del.innerHTML = 'Remove';
|
del.innerHTML = 'Remove';
|
||||||
nodes.append(del);
|
nodes.append(del);
|
||||||
|
|
||||||
this.fieldset.before(nodes);
|
fieldset.before(nodes);
|
||||||
this.handleUpdate();
|
this.handleUpdate();
|
||||||
}
|
}
|
||||||
removeSection(del, nodes) {
|
removeSection(del, nodes) {
|
||||||
|
@ -134,7 +131,7 @@ class L3Input {
|
||||||
this.input.setAttribute(attr, this.attrs[attr]);
|
this.input.setAttribute(attr, this.attrs[attr]);
|
||||||
}
|
}
|
||||||
|
|
||||||
let ret = (this.input.type === 'radio') ? [this.input, newLabel] : [newLabel, this.input];
|
let inner = (this.input.type === 'radio') ? [this.input, newLabel] : [newLabel, this.input];
|
||||||
|
|
||||||
if (this.datalist) {
|
if (this.datalist) {
|
||||||
let datalist = document.createElement('datalist');
|
let datalist = document.createElement('datalist');
|
||||||
|
@ -148,10 +145,12 @@ class L3Input {
|
||||||
datalist.append(option);
|
datalist.append(option);
|
||||||
}
|
}
|
||||||
|
|
||||||
ret.push(datalist);
|
inner.push(datalist);
|
||||||
}
|
}
|
||||||
|
|
||||||
return ret;
|
let div = document.createElement('div')
|
||||||
|
div.append(...inner);
|
||||||
|
return div;
|
||||||
|
|
||||||
}
|
}
|
||||||
id() {
|
id() {
|
||||||
|
@ -192,6 +191,56 @@ class L3Input {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
class L3MultiInput {
|
||||||
|
constructor(label, handleUpdate, template) {
|
||||||
|
this.label = label;
|
||||||
|
this.template = template;
|
||||||
|
this.handleUpdate = handleUpdate;
|
||||||
|
this.inputs = [];
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
addInput(inputcontainer) {
|
||||||
|
const idsuffix = `-${this.ninputs++}`;
|
||||||
|
let newinput = this.template(idsuffix);
|
||||||
|
this.inputs.push(newinput);
|
||||||
|
let div = newinput.node();
|
||||||
|
for (let input of div.getElementsByTagName('input')) {
|
||||||
|
console.log(input);
|
||||||
|
input.addEventListener('input', () => this.handleUpdate())
|
||||||
|
}
|
||||||
|
|
||||||
|
let del = document.createElement('button');
|
||||||
|
del.setAttribute('type', 'button');
|
||||||
|
del.addEventListener('click', () => this.removeInput(newinput, div));
|
||||||
|
del.innerHTML = 'Remove';
|
||||||
|
div.append(del);
|
||||||
|
|
||||||
|
inputcontainer.before(div);
|
||||||
|
this.handleUpdate();
|
||||||
|
}
|
||||||
|
removeInput(del, div) {
|
||||||
|
this.inputs = this.inputs.filter(input => input != del);
|
||||||
|
div.remove();
|
||||||
|
this.handleUpdate();
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return this.inputs.map(input => input.render()).filter(input => !!input)
|
||||||
|
}
|
||||||
|
option() {
|
||||||
|
return this.inputs.map(input => input.option());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
class L3Config {
|
class L3Config {
|
||||||
constructor() {
|
constructor() {
|
||||||
this.sections = [];
|
this.sections = [];
|
||||||
|
@ -222,14 +271,16 @@ 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 L3Input('Router IPv4 Address','gatewayRouterIP', 'router_ip', {type: 'text'}),
|
new L3Input('Router IPv4 Address','gatewayRouterIP', 'router_ip', {type: 'text', maxlength: 15}),
|
||||||
new L3Input('Router IPv6 Address','gatewayRouterIP6', 'router_ip6', {type: 'text'}),
|
new L3Input('Router IPv6 Address','gatewayRouterIP6', 'router_ip6', {type: 'text', maxlength: 39}),
|
||||||
));
|
));
|
||||||
l3cfg.addSection(new L3Section('dns',
|
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 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('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('Disable','dnsAnycastNone', 'server', {type: 'radio', name: 'anycast', value: undefined}),
|
||||||
new L3Input('Custom DNS Server','dnsOther', 'server', {type: 'text', placeholder: 'Custom DNS Server'}),
|
new L3MultiInput('+ Custom DNS Server', () => l3cfg.handleUpdate(), function(idsuffix) {
|
||||||
|
return new L3Input('Custom DNS Server','dnsOther'+idsuffix, 'server', {type: 'text', maxlength: 39, placeholder: 'Custom DNS Server'});
|
||||||
|
}),
|
||||||
));
|
));
|
||||||
l3cfg.addSection(new L3Section('wan',
|
l3cfg.addSection(new L3Section('wan',
|
||||||
new L3Input('Use VLAN','babelpeerVLAN', 'vlan', {type: 'number', min: 1, max: 4094}),
|
new L3Input('Use VLAN','babelpeerVLAN', 'vlan', {type: 'number', min: 1, max: 4094}),
|
||||||
|
@ -254,8 +305,8 @@ function initForm() {
|
||||||
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}),
|
||||||
new L3Input('Persistent Keepalive','wireguardpeerPersistentKeepalive', 'persistent_keepalive', {type: 'number', min: 0, max: 65535, placeholder: '1 - 65535 Seconds...'}),
|
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('Remote Public Key', 'wireguardpeerRemotePubKey'+idsuffix, 'remote_public_key', {type: 'text', minlength: 44, maxlength: 44, 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('Local Private Key', 'wireguardpeerLocalPrivKey'+idsuffix, 'local_private_key', {type: 'text', minlength: 44, maxlength: 44, placeholder: 'base64 encoded private key'}),
|
||||||
new L3Input('rxcost','wireguardpeerRXCost', 'rxcost', {type: 'number', min: 96, max: 65535, value: 4096, placeholder: '4096'}),
|
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'}),
|
new L3Input('mtu','wireguardpeerMTU', 'mtu', {type: 'number', min: 1280, max: 65535, value: 1412, placeholder: '1412'}),
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue