From f2bfa170fce98dbe1095cad67b87a8fb4a9b0346 Mon Sep 17 00:00:00 2001
From: Johannes Kimmel <fff@bareminimum.eu>
Date: Mon, 24 Apr 2023 00:06:38 +0200
Subject: [PATCH] add L3Select for <select> elements

---
 l3config.js | 68 +++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 64 insertions(+), 4 deletions(-)

diff --git a/l3config.js b/l3config.js
index da08a88..be29b84 100644
--- a/l3config.js
+++ b/l3config.js
@@ -96,6 +96,9 @@ class L3MultiSection {
 		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');
 		del.setAttribute('type', 'button');
@@ -178,6 +181,53 @@ class L3Input {
 	}
 }
 
+class L3Select {
+	constructor(label, id, optionName, attrs, optionList) {
+		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) {
+			let newLabel = document.createElement('label');
+			newLabel.setAttribute('for', this.id);
+			newLabel.innerHTML = this.label;
+			div.appendChild(newLabel);
+		}
+
+		this.input = document.createElement('select');
+		this.input.setAttribute('id', this.id);
+		for (const attr in this.attrs) {
+			this.input.setAttribute(attr, this.attrs[attr]);
+		}
+		div.appendChild(this.input);
+
+		for (const [label, value] of this.optionList) {
+			let option = document.createElement('option');
+			option.setAttribute('value', value);
+			option.appendChild(makeText(label));
+			this.input.appendChild(option);
+		}
+
+		return div;
+
+	}
+	option() {
+		if (this.input.value == 'undefined') { return undefined; }
+
+		const ret = {
+			optionName: this.optionName,
+			value: this.input.value,
+		};
+
+		return ret;
+	}
+}
+
 class L3MultiInput {
 	constructor(label, handleUpdate, template) {
 		this.label = label;
@@ -243,6 +293,9 @@ class L3Config {
 			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;
 	}
@@ -262,11 +315,14 @@ function initForm() {
 		new L3MultiInput('Router IPv6 Address', () => l3cfg.handleUpdate(), function(idsuffix) {
 			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: ''}),
 	));
 	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 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'],
+			['---', undefined],
+		]),
 		new L3MultiInput('Custom DNS Server', () => l3cfg.handleUpdate(), function(idsuffix) {
 			return new L3Input(undefined,'dnsOther'+idsuffix, 'server', {type: 'text', maxlength: 39, placeholder: 'Custom DNS Server'});
 		}),
@@ -301,7 +357,11 @@ function initForm() {
 		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 L3Select('Babel Interface Type','babelpeerType', 'type', {name: 'type'}, [
+				['---', undefined],
+				['Wired', 'wired'],
+				['Wireless', 'wireless'],
+			]),
 			new L3Input('rxcost','babelpeerRXCost', 'rxcost', {type: 'number', min: 96, max: 65535, placeholder: 'LAN: 96, Tunnel: 4096, ...'}),
 		);
 	}));