2023-04-21 18:36:06 +02:00
"use strict" ;
2023-04-23 23:08:56 +02:00
function makeFieldset ( ) {
return document . createElement ( 'fieldset' ) ;
}
function makeLegend ( ... legend ) {
let ret = document . createElement ( 'legend' ) ;
ret . append ( ... legend ) ;
return ret ;
}
function makeButton ( label , onClick ) {
let ret = document . createElement ( 'button' ) ;
ret . setAttribute ( 'type' , 'button' ) ;
ret . append ( label ) ;
ret . addEventListener ( 'click' , onClick ) ;
return ret ;
}
function makeText ( text ) {
return document . createTextNode ( text ) ;
2023-04-21 18:36:06 +02:00
}
2023-04-24 12:06:31 +02:00
function makeInput ( id , attrs ) {
let ret = document . createElement ( 'input' ) ;
ret . setAttribute ( 'id' , id ) ;
2023-04-25 13:06:06 +02:00
for ( const [ attr , value ] of Object . entries ( attrs ) ) {
ret . setAttribute ( attr , value ) ;
2023-04-24 12:06:31 +02:00
}
return ret ;
}
2023-04-25 13:24:53 +02:00
function makeLabel ( label , forId ) {
let ret = document . createElement ( 'label' ) ;
ret . setAttribute ( 'for' , forId ) ;
ret . innerHTML = label ;
return ret ;
}
2023-04-24 12:06:31 +02:00
2023-04-21 18:36:06 +02:00
class L3Section {
2023-04-24 11:13:57 +02:00
constructor ( legend , presetname , ... inputs ) {
2023-04-21 18:36:06 +02:00
this . legend = legend ;
2023-04-24 11:13:57 +02:00
this . presetname = presetname ;
2023-04-21 18:36:06 +02:00
this . inputs = inputs ;
}
node ( ) {
2023-04-23 23:08:56 +02:00
let fieldset = makeFieldset ( ) ;
2023-04-24 12:06:31 +02:00
let legend = this . legend ;
if ( this . presetname instanceof HTMLElement ) {
legend = this . presetname ;
}
fieldset . append ( makeLegend ( legend ) ) ;
2023-04-21 18:36:06 +02:00
let sep = undefined ;
for ( const input of this . inputs ) {
2023-04-23 23:08:56 +02:00
fieldset . append ( input . node ( ) ) ;
2023-04-21 18:36:06 +02:00
}
2023-04-23 23:08:56 +02:00
return fieldset ;
2023-04-21 18:36:06 +02:00
}
render ( ) {
const options = this . inputs
2023-04-22 13:53:32 +02:00
. flatMap ( input => input . option ( ) )
2023-04-21 18:36:06 +02:00
. filter ( option => ! ! option ) ;
if ( options . length == 0 ) {
2023-05-06 00:52:04 +02:00
return undefined ;
2023-04-21 18:36:06 +02:00
}
2023-05-06 00:52:04 +02:00
var compiledopts = new Map ( ) ;
2023-04-21 18:36:06 +02:00
for ( const option of options ) {
2023-05-06 00:52:04 +02:00
let c = compiledopts . get ( option . optionName ) ? ? [ ] ;
c . push ( option . value ) ;
compiledopts . set ( option . optionName , c ) ;
2023-04-21 18:36:06 +02:00
}
let optstrs = [ ] ;
2023-05-06 00:52:04 +02:00
for ( const [ opt , values ] of compiledopts ) {
2023-04-21 18:36:06 +02:00
if ( values . length == 1 ) {
optstrs . push ( ` option ${ opt } ' ${ values [ 0 ] } ' ` ) ;
} else {
for ( const value of values ) {
2023-04-22 10:33:33 +02:00
optstrs . push ( ` list ${ opt } ' ${ value } ' ` ) ;
2023-04-21 18:36:06 +02:00
}
}
}
2023-04-24 11:13:57 +02:00
let sectionname = "" ;
2023-04-24 12:06:31 +02:00
if ( typeof this . presetname === 'string' ) {
sectionname = ` ' ${ this . presetname } ' ` ;
} else if ( this . presetname instanceof HTMLElement
2023-04-25 02:01:32 +02:00
&& this . presetname . tagName === 'INPUT'
&& this . presetname . value ) {
2023-04-24 12:06:31 +02:00
sectionname = ` ' ${ this . presetname . value } ' ` ;
2023-04-24 11:13:57 +02:00
}
2023-04-24 12:06:31 +02:00
return ` config ${ this . legend } ${ sectionname } \n \t ` + optstrs . join ( '\n\t' ) ;
2023-04-21 18:36:06 +02:00
}
}
2023-04-22 10:33:33 +02:00
class L3MultiSection {
2023-04-24 11:05:15 +02:00
constructor ( legend , template ) {
2023-04-22 10:33:33 +02:00
this . legend = legend ;
this . template = template ;
this . sections = [ ] ;
this . nsections = 0 ;
}
node ( ) {
2023-04-23 23:08:56 +02:00
let fieldset = makeFieldset ( ) ;
fieldset . append (
makeLegend (
2023-04-24 16:50:33 +02:00
makeButton ( ` + ${ this . legend } ` , ( ) => fieldset . appendChild ( this . # makeSection ( ) ) ) ,
2023-04-23 23:08:56 +02:00
)
) ;
2023-04-22 13:53:32 +02:00
return fieldset ;
2023-04-22 10:33:33 +02:00
}
2023-04-23 23:08:56 +02:00
# makeSection ( ) {
2023-04-22 10:33:33 +02:00
const idsuffix = ` - ${ this . nsections ++ } ` ;
let newsection = this . template ( idsuffix ) ;
this . sections . push ( newsection ) ;
let nodes = newsection . node ( ) ;
2023-04-25 13:24:53 +02:00
let del = makeButton ( 'Remove' , ( ) => this . # removeSection ( newsection , nodes ) ) ;
2023-04-23 00:58:19 +02:00
del . classList . add ( 'del' ) ;
2023-04-25 13:24:53 +02:00
2023-04-22 10:33:33 +02:00
nodes . append ( del ) ;
2023-04-23 23:08:56 +02:00
return nodes ;
2023-04-22 10:33:33 +02:00
}
2023-04-23 23:08:56 +02:00
# removeSection ( del , nodes ) {
2023-04-22 10:33:33 +02:00
this . sections = this . sections . filter ( section => section != del ) ;
nodes . remove ( ) ;
}
render ( ) {
return this . sections . map ( section => section . render ( ) ) . filter ( section => ! ! section )
}
}
2023-04-21 18:36:06 +02:00
class L3Input {
constructor ( label , id , optionName , attrs , datalist ) {
this . label = label ;
this . id = id ;
this . optionName = optionName ;
this . attrs = attrs ;
this . datalist = datalist
this . input = undefined ;
}
node ( ) {
2023-04-23 23:08:56 +02:00
let div = document . createElement ( 'div' )
2023-04-22 17:53:55 +02:00
if ( this . label ) {
2023-04-25 13:24:53 +02:00
div . appendChild ( makeLabel ( this . label , this . id ) ) ;
2023-04-22 17:53:55 +02:00
}
2023-04-21 18:36:06 +02:00
2023-04-24 12:06:31 +02:00
this . input = makeInput ( this . id , this . attrs ) ;
2023-04-23 23:08:56 +02:00
div . appendChild ( this . input ) ;
2023-04-21 18:36:06 +02:00
if ( this . datalist ) {
let datalist = document . createElement ( 'datalist' ) ;
let datalistid = this . id + '-datalist' ;
datalist . setAttribute ( 'id' , datalistid ) ;
this . input . setAttribute ( 'list' , datalistid ) ;
for ( const value of this . datalist ) {
let option = document . createElement ( 'option' ) ;
option . setAttribute ( 'value' , value ) ;
datalist . append ( option ) ;
}
2023-04-23 23:08:56 +02:00
div . appendChild ( datalist ) ;
2023-04-21 18:36:06 +02:00
}
2023-04-22 13:53:32 +02:00
return div ;
2023-04-21 18:36:06 +02:00
}
option ( ) {
switch ( this . input . type ) {
case 'radio' :
2023-04-23 00:19:35 +02:00
case 'checkbox' :
2023-04-21 18:36:06 +02:00
if ( ! this . input . checked || this . input . value == 'undefined' ) return undefined ;
break ;
default :
if ( ! this . input . value ) return undefined ;
break ;
}
const ret = {
optionName : this . optionName ,
value : this . input . value ,
} ;
return ret ;
}
}
2023-04-24 00:06:38 +02:00
class L3Select {
2023-04-25 13:07:05 +02:00
constructor ( label , id , optionName , attrs , ... optionList ) {
2023-04-24 00:06:38 +02:00
this . label = label ;
this . id = id ;
this . optionName = optionName ;
this . attrs = attrs ;
this . optionList = optionList ;
this . input = undefined ;
}
node ( ) {
let div = document . createElement ( 'div' )
if ( this . label ) {
2023-04-25 13:24:53 +02:00
div . appendChild ( makeLabel ( this . label , this . id ) ) ;
2023-04-24 00:06:38 +02:00
}
this . input = document . createElement ( 'select' ) ;
this . input . setAttribute ( 'id' , this . id ) ;
2023-04-25 13:06:06 +02:00
for ( const [ attr , value ] of Object . entries ( this . attrs ) ) {
this . input . setAttribute ( attr , value ) ;
2023-04-24 00:06:38 +02:00
}
div . appendChild ( this . input ) ;
2023-04-25 02:01:32 +02:00
for ( const [ optgrouplabel , options ] of this . optionList ) {
let target = this . input ;
if ( optgrouplabel != '' ) {
target = document . createElement ( 'optgroup' ) ;
target . setAttribute ( 'label' , optgrouplabel ) ;
this . input . appendChild ( target ) ;
}
for ( const [ label , value ] of options ) {
let option = document . createElement ( 'option' ) ;
option . setAttribute ( 'value' , value ) ;
option . appendChild ( makeText ( label ) ) ;
target . appendChild ( option ) ;
}
2023-04-24 00:06:38 +02:00
}
return div ;
}
option ( ) {
if ( this . input . value == 'undefined' ) { return undefined ; }
const ret = {
optionName : this . optionName ,
value : this . input . value ,
} ;
return ret ;
}
}
2023-04-22 13:53:32 +02:00
class L3MultiInput {
2023-04-24 11:05:15 +02:00
constructor ( label , template ) {
2023-04-22 13:53:32 +02:00
this . label = label ;
this . template = template ;
this . inputs = [ ] ;
this . ninputs = 0 ;
}
node ( ) {
2023-04-23 23:08:56 +02:00
let fieldset = makeFieldset ( ) ;
fieldset . append (
makeLegend (
2023-04-24 16:50:33 +02:00
makeButton ( ` + ${ this . label } ` , ( ) => fieldset . append ( this . # makeInput ( ) ) ) ,
2023-04-23 23:08:56 +02:00
)
) ;
2023-04-23 00:41:54 +02:00
return fieldset ;
2023-04-22 13:53:32 +02:00
}
2023-04-23 23:08:56 +02:00
# makeInput ( ) {
2023-04-22 13:53:32 +02:00
const idsuffix = ` - ${ this . ninputs ++ } ` ;
let newinput = this . template ( idsuffix ) ;
this . inputs . push ( newinput ) ;
let div = newinput . node ( ) ;
2023-04-23 00:41:54 +02:00
let delbutton = document . createElement ( 'button' ) ;
delbutton . setAttribute ( 'type' , 'button' ) ;
2023-04-23 00:58:19 +02:00
delbutton . classList . add ( 'del' ) ;
2023-04-23 00:41:54 +02:00
delbutton . innerHTML = '-' ;
2023-04-24 16:50:33 +02:00
delbutton . addEventListener ( 'click' , ( ) => this . # removeInput ( newinput , div ) ) ;
2023-04-23 00:41:54 +02:00
div . prepend ( delbutton ) ;
2023-04-23 23:08:56 +02:00
return div ;
2023-04-22 13:53:32 +02:00
}
2023-04-23 23:08:56 +02:00
# removeInput ( del , div ) {
2023-04-22 13:53:32 +02:00
this . inputs = this . inputs . filter ( input => input != del ) ;
div . remove ( ) ;
}
option ( ) {
return this . inputs . map ( input => input . option ( ) ) ;
}
}
2023-04-22 10:33:33 +02:00
class L3Config {
constructor ( ) {
this . sections = [ ] ;
}
addSection ( section ) {
this . sections . push ( section )
}
handleUpdate ( ) {
renderConfig ( this . sections . flatMap ( section => section . render ( ) ) . filter ( section => ! ! section ) ) ;
}
node ( ) {
2023-04-24 11:05:15 +02:00
return this . sections . map ( section => section . node ( ) )
2023-04-22 10:33:33 +02:00
}
}
2023-04-21 18:36:06 +02:00
function initForm ( ) {
let l3configinput = document . getElementById ( 'l3configinput' ) ;
let form = document . createElement ( 'form' ) ;
l3configinput . appendChild ( form ) ;
2023-04-25 02:01:32 +02:00
const label5ghz = ( chan ) => [ ` ${ chan } ( ${ 5000 + chan * 5 } MHz) ` , chan . toString ( ) ]
const label2ghz = ( chan ) => [ ` ${ chan } ( ${ 2407 + chan * 5 } MHz) ` , chan . toString ( ) ]
const UNII1Channels = [ 36 , 40 , 44 , 48 ] . map ( label5ghz ) ;
const UNII2Channels = [ 52 , 56 , 60 , 64 ] . map ( label5ghz ) ;
const UNII2EChannels = [ 100 , 104 , 108 , 112 , 116 , 120 , 124 , 128 , 132 , 136 , 140 ] . map ( label5ghz ) ;
const Channels5GHz = [ ... UNII1Channels , ... UNII2Channels , ... UNII2EChannels ] ;
2023-04-25 01:29:34 +02:00
const Channels2GHz = Array ( 13 ) . fill ( ) . map ( ( _ , chan ) => [ ` ${ chan + 1 } ( ${ 2412 + chan * 5 } MHz) ` , ( chan + 1 ) . toString ( ) ] ) ;
2023-04-25 02:01:32 +02:00
const Channels2GHzOFDM = [ 1 , 5 , 9 , 13 ] . map ( label2ghz ) ;
const Channels2GHzDSSS = [ 1 , 6 , 11 ] . map ( label2ghz ) ;
2023-04-24 12:22:07 +02:00
2023-04-22 10:33:33 +02:00
const l3cfg = new L3Config ( ) ;
2023-04-24 11:13:57 +02:00
l3cfg . addSection ( new L3Section ( 'gateway' , 'meta' ,
2023-04-22 12:22:35 +02:00
new L3Input ( 'Router Name' , 'gatewayName' , 'name' , { type : 'search' , placeholder : 'Router Name' } ) ,
2023-04-24 11:05:15 +02:00
new L3MultiInput ( 'Router IPv4 Address' , function ( idsuffix ) {
2023-04-23 00:19:49 +02:00
return new L3Input ( undefined , 'gatewayRouterIP4' + idsuffix , 'router_ip' , { type : 'search' , maxlength : 15 , placeholder : 'Router IPv4 Address' } ) ;
} ) ,
2023-04-24 11:05:15 +02:00
new L3MultiInput ( 'Router IPv6 Address' , function ( idsuffix ) {
2023-04-23 00:19:49 +02:00
return new L3Input ( undefined , 'gatewayRouterIP6' + idsuffix , 'router_ip6' , { type : 'text' , maxlength : 39 , placeholder : 'Router IPv6 Address' } ) ;
} ) ,
2023-04-26 00:59:29 +02:00
new L3Input ( undefined , 'gatewayConfigVersion' , 'config_version' , { type : 'hidden' , value : 2 , disabled : '' } ) ,
2023-04-22 10:33:33 +02:00
) ) ;
2023-04-24 12:06:31 +02:00
l3cfg . addSection ( new L3Section ( 'dns' , undefined ,
2023-04-25 13:07:05 +02:00
new L3Select ( 'Preset' , 'dnsAnycastSelect' , 'server' , { name : 'anycast' } ,
2023-04-25 02:01:32 +02:00
[ '' , [
[ 'Anycast DNS' , 'fd43:5602:29bd:ffff:1:1:1:1' ] ,
[ 'Anycast DNS64' , 'fd43:5602:29bd:ffff:1:1:1:64' ] ,
[ '---' , undefined ] ,
] ] ,
2023-04-25 13:07:05 +02:00
) ,
2023-04-24 11:05:15 +02:00
new L3MultiInput ( 'Custom DNS Server' , function ( idsuffix ) {
2023-04-22 17:53:55 +02:00
return new L3Input ( undefined , 'dnsOther' + idsuffix , 'server' , { type : 'text' , maxlength : 39 , placeholder : 'Custom DNS Server' } ) ;
2023-04-22 13:53:32 +02:00
} ) ,
2023-04-22 10:33:33 +02:00
) ) ;
2023-04-24 12:06:31 +02:00
l3cfg . addSection ( new L3Section ( 'wan' , undefined ,
2023-04-22 10:33:33 +02:00
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, ...' } ) ,
) ) ;
2023-04-24 12:06:31 +02:00
l3cfg . addSection ( new L3Section ( 'client' , undefined ,
2023-04-23 00:19:49 +02:00
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, ...' } ) ,
2023-04-24 11:05:15 +02:00
new L3MultiInput ( 'Client IPv6 Subnet' , function ( idsuffix ) {
2023-04-23 00:19:49 +02:00
return new L3Input ( undefined , 'clientIP6Addr' + idsuffix , 'ip6addr' , { type : 'text' , maxlength : 39 , placeholder : 'IPv6 CIDR, 2a0b:f4c0:XX:YYYY::/64, fd43:5602:29bd:XXXX::/64,...' } ) ;
} ) ,
2023-04-24 11:05:15 +02:00
new L3MultiInput ( 'Client IPv4 Subnet' , function ( idsuffix ) {
2023-04-23 00:19:49 +02:00
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 ( 'DHCP Start Address' , 'clientDHCPStart' , 'dhcp_start' , { type : 'text' , maxlength : 15 , placeholder : 'IPv4 Address, 10.XX.YY.10' } ) ,
2023-04-24 16:44:04 +02:00
new L3Input ( 'DHCP Number of Addresses' , 'clientDHCPLimit' , 'dhcp_limit' , { type : 'number' , min : 1 , max : 65535 } ) ,
2023-04-23 00:19:49 +02:00
new L3Input ( 'Wifi ESSID' , 'clientESSID' , 'essid' , { type : 'text' } ) ,
2023-04-25 13:07:05 +02:00
new L3Select ( 'Wifi 2.4 GHz Channel' , 'client2GHZ' , 'chan2ghz' , { name : 'chan2ghz' } ,
2023-04-25 02:01:32 +02:00
[ '' , [ [ '---' , undefined ] ] ] ,
[ 'Non-Overlapping Channels (OFDM)' , Channels2GHzOFDM ] ,
[ 'Non-Overlapping Channels (DSSS)' , Channels2GHzDSSS ] ,
[ 'All Channels' , Channels2GHz ] ,
2023-04-25 13:07:05 +02:00
) ,
new L3Select ( 'Wifi 5 GHz Channel' , 'client5GHZ' , 'chan5ghz' , { name : 'chan5ghz' } ,
2023-04-25 02:01:32 +02:00
[ '' , [ [ '---' , undefined ] ] ] ,
[ 'U-NII-1 Channels (Indoor)' , UNII1Channels ] ,
[ 'U-NII-2 Channels (Indoor + DFS)' , UNII2Channels ] ,
[ 'U-NII-2E Channels (Indoor + Outdoor + DFS)' , UNII2EChannels ] ,
2023-04-25 13:07:05 +02:00
) ,
2023-04-23 00:19:49 +02:00
) ) ;
2023-04-24 11:05:15 +02:00
l3cfg . addSection ( new L3MultiSection ( 'VLAN' , function ( idsuffix ) {
2023-04-24 12:23:22 +02:00
return new L3Section ( 'vlan' , makeInput ( 'vlanSectionName' + idsuffix , { type : 'number' , min : 1 , max : 4094 , required : '' , placeholder : '1..4094' } ) ,
2023-04-24 12:06:31 +02:00
new L3Input ( 'Comment' , 'vlanComment' + idsuffix , 'comment' , { type : 'text' } , [ 'client' , 'wan' ] ) ,
new L3Input ( 'Ports' , 'vlanPorts' + idsuffix , 'ports' , { type : 'text' , placeholder : 'eth0:*, eth1.4:u, ...' } ) ,
2023-04-22 10:33:33 +02:00
) ;
} ) ) ;
2023-04-24 11:05:15 +02:00
l3cfg . addSection ( new L3MultiSection ( 'Direct Babel Peering' , function ( idsuffix ) {
2023-04-24 12:06:31 +02:00
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, ...' } ) ,
2023-04-25 13:07:05 +02:00
new L3Select ( 'Babel Interface Type' , 'babelpeerType' + idsuffix , 'type' , { name : 'type' } ,
2023-04-25 02:01:32 +02:00
[ '' , [
2023-04-26 00:59:44 +02:00
[ 'Default' , undefined ] ,
2023-04-25 02:01:32 +02:00
[ 'Wired' , 'wired' ] ,
[ 'Wireless' , 'wireless' ] ,
] ] ,
2023-04-25 13:07:05 +02:00
) ,
2023-04-24 12:06:31 +02:00
new L3Input ( 'rxcost' , 'babelpeerRXCost' + idsuffix , 'rxcost' , { type : 'number' , min : 96 , max : 65535 , placeholder : 'LAN: 96, Tunnel: 4096, ...' } ) ,
2023-04-22 10:33:33 +02:00
) ;
} ) ) ;
2023-04-24 11:05:15 +02:00
l3cfg . addSection ( new L3MultiSection ( 'WireGuard Peering' , function ( idsuffix ) {
2023-04-24 12:06:31 +02:00
return new L3Section ( 'wireguardpeer' , makeInput ( 'wireguardpeerSectionName' + idsuffix , { type : 'text' } ) ,
2023-04-22 10:33:33 +02:00
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::' ] ) ,
2023-04-23 00:19:49 +02:00
new L3Input ( 'Endpoint Port' , 'wireguardpeerEPPort' + idsuffix , 'endpoint_port' , { type : 'number' , required : '' , min : 1 , max : 65535 } ) ,
2023-04-22 10:33:33 +02:00
new L3Input ( 'Persistent Keepalive' , 'wireguardpeerPersistentKeepalive' , 'persistent_keepalive' , { type : 'number' , min : 0 , max : 65535 , placeholder : '1 - 65535 Seconds...' } ) ,
2023-04-22 13:53:32 +02:00
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' } ) ,
2023-04-24 12:06:31 +02:00
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' } ) ,
2023-04-22 10:33:33 +02:00
) ;
} ) ) ;
2023-04-21 18:36:06 +02:00
2023-04-24 11:05:15 +02:00
form . addEventListener ( 'input' , ( ) => l3cfg . handleUpdate ( ) ) ;
2023-04-22 10:33:33 +02:00
form . replaceChildren ( ... l3cfg . node ( ) )
2023-04-22 10:36:39 +02:00
renderConfig ( l3cfg . sections . flatMap ( section => section . render ( ) ) . filter ( section => ! ! section ) ) ;
2023-04-21 18:36:06 +02:00
}
function renderConfig ( sections ) {
let l3configoutput = document . getElementById ( 'l3configoutput' ) ;
let l3configoutputpre = document . createElement ( 'pre' ) ;
let code = document . createElement ( 'code' ) ;
l3configoutputpre . appendChild ( code ) ;
code . innerHTML += sections . join ( '\n\n' ) ;
l3configoutput . replaceChildren ( l3configoutputpre ) ;
}
initForm ( ) ;