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

add section name support

This commit is contained in:
Johannes Kimmel 2023-04-24 12:06:31 +02:00
parent 9f9067f11e
commit 62658fe2ce
1 changed files with 38 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
l3config.js
View File

@ -22,6 +22,15 @@ function makeText(text) {
return document.createTextNode(text);
}
function makeInput(id, attrs) {
let ret = document.createElement('input');
ret.setAttribute('id', id);
for (const attr in attrs) {
ret.setAttribute(attr, attrs[attr]);
}
return ret;
}
class L3Section {
constructor(legend, presetname, ...inputs) {
this.legend = legend;
@ -30,10 +39,11 @@ class L3Section {
}
node() {
let fieldset = makeFieldset();
fieldset.append(makeLegend(
makeText(this.legend),
(typeof this.presetname === 'string')?"":this.presetname)
);
let legend = this.legend;
if (this.presetname instanceof HTMLElement) {
legend = this.presetname;
}
fieldset.append(makeLegend(legend));
let sep = undefined;
for (const input of this.inputs) {
fieldset.append(input.node());
@ -69,10 +79,14 @@ class L3Section {
}
}
let sectionname = "";
if (this.presetname) {
sectionname = ` '${this.presetname}'`
if (typeof this.presetname === 'string') {
sectionname = ` '${this.presetname}'`;
} else if (this.presetname instanceof HTMLElement
&& this.presetname.tagName === 'INPUT'
&& this.presetname.value) {
sectionname = ` '${this.presetname.value}'`;
}
return `config ${this.legend}${sectionname}\n\t` + optstrs.join('\n\t')
return `config ${this.legend}${sectionname}\n\t` + optstrs.join('\n\t');
}
}
@ -87,7 +101,7 @@ class L3MultiSection {
let fieldset = makeFieldset();
fieldset.append(
makeLegend(
makeButton(`+ ${this.legend}`, () => { fieldset.before(this.#makeSection()); }),
makeButton(`+ ${this.legend}`, () => { fieldset.appendChild(this.#makeSection()); }),
)
);
return fieldset;
@ -133,11 +147,7 @@ class L3Input {
div.appendChild(newLabel);
}
this.input = document.createElement('input');
this.input.setAttribute('id', this.id);
for (const attr in this.attrs) {
this.input.setAttribute(attr, this.attrs[attr]);
}
this.input = makeInput(this.id, this.attrs);
div.appendChild(this.input);
if (this.datalist) {
@ -294,7 +304,7 @@ function initForm() {
}),
new L3Input('Config Version', 'gatewayConfigVersion', 'config_version', {type: 'text', value: 2, disabled: ''}),
));
l3cfg.addSection(new L3Section('dns', '',
l3cfg.addSection(new L3Section('dns', 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'],
@ -304,11 +314,11 @@ function initForm() {
return new L3Input(undefined,'dnsOther'+idsuffix, 'server', {type: 'text', maxlength: 39, placeholder: 'Custom DNS Server'});
}),
));
l3cfg.addSection(new L3Section('wan', '',
l3cfg.addSection(new L3Section('wan', undefined,
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 L3Section('client', '',
l3cfg.addSection(new L3Section('client', undefined,
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', function(idsuffix) {
@ -325,32 +335,32 @@ function initForm() {
new L3Input('Wifi 5 GHz Channel','client5GHZ', 'chan5ghz', {type: 'number', min: 36, max: 140}),
));
l3cfg.addSection(new L3MultiSection('VLAN', 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, ...'}),
return new L3Section('vlan', makeInput('vlanSectionName'+idsuffix, {type: 'number', min: 1, max: 4094, required: ''}),
new L3Input('Comment','vlanComment'+idsuffix, 'comment', {type: 'text'}, ['client', 'wan']),
new L3Input('Ports','vlanPorts'+idsuffix, 'ports', {type: 'text', placeholder: 'eth0:*, eth1.4:u, ...'}),
);
}));
l3cfg.addSection(new L3MultiSection('Direct Babel Peering', 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 L3Select('Babel Interface Type','babelpeerType', 'type', {name: 'type'}, [
['---', undefined],
return new L3Section('babelpeer', makeInput('babelpeerSectionName'+idsuffix, {type: 'text'}),
new L3Input('Use VLAN','babelpeerVLAN'+idsuffix, 'vlan', {type: 'number', min: 1, max: 4094}),
new L3Input('Use Interface directly','babelpeerIFACE'+idsuffix, 'iface', {type: 'text', placeholder: 'eth0, eth0.4, ...'}),
new L3Select('Babel Interface Type','babelpeerType'+idsuffix, 'type', {name: 'type'}, [
['Default', undefined],
['Wired', 'wired'],
['Wireless', 'wireless'],
]),
new L3Input('rxcost','babelpeerRXCost', 'rxcost', {type: 'number', min: 96, max: 65535, placeholder: 'LAN: 96, Tunnel: 4096, ...'}),
new L3Input('rxcost','babelpeerRXCost'+idsuffix, 'rxcost', {type: 'number', min: 96, max: 65535, placeholder: 'LAN: 96, Tunnel: 4096, ...'}),
);
}));
l3cfg.addSection(new L3MultiSection('WireGuard Peering', function(idsuffix) {
return new L3Section('wireguardpeer', '',
return new L3Section('wireguardpeer', makeInput('wireguardpeerSectionName'+idsuffix, {type: 'text'}),
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', minlength: 44, maxlength: 44, required: '', placeholder: 'base64 encoded public 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('mtu','wireguardpeerMTU', 'mtu', {type: 'number', min: 1280, max: 65535, value: 1412, placeholder: '1412'}),
new L3Input('rxcost','wireguardpeerRXCost'+idsuffix, 'rxcost', {type: 'number', min: 96, max: 65535, value: 4096, placeholder: '4096'}),
new L3Input('mtu','wireguardpeerMTU'+idsuffix, 'mtu', {type: 'number', min: 1280, max: 65535, value: 1412, placeholder: '1412'}),
);
}));