l3config.js/l3config.js

"use strict";

function makeFieldset(legend) {
	let fieldset = document.createElement('fieldset');
	let fieldsetlegend = document.createElement('legend');
	fieldsetlegend.innerHTML = legend;
	fieldset.appendChild(fieldsetlegend);
	return fieldset;
}

class L3Section {
	constructor(legend, ...inputs) {
		this.legend = legend;
		this.inputs = inputs;
	}
	node() {
		let fs = makeFieldset(this.legend);
		let sep = undefined;
		for (const input of this.inputs) {
			let div = document.createElement('div');
			div.append(...input.node());
			fs.append(div);
		}
		return fs;
	}
	values() {
		this.inputs.map((input) => {input.id = input.value;})
	}
	render() {
		const options = this.inputs
			.map(input => input.option())
			.filter(option => !!option);

		if (options.length == 0) {
			return undefined
		}

		console.log("options:", options)

		var compiledopts = {};
		for (const option of options) {
			if (!compiledopts[option.optionName]) {
				compiledopts[option.optionName] = [];
			}
			compiledopts[option.optionName].push(option.value)
		}
		console.log("compiledopts:", compiledopts)

		let optstrs = [];
		for (const opt in compiledopts) {
			const values = compiledopts[opt];
			console.log("values:", values);
			if (values.length == 1) {
				optstrs.push(`option ${opt} '${values[0]}'`);
			} else {
				for (const value of values) {
				optstrs.push(`list ${opt} '${value}'`);
				}
			}
		}
		return `config ${this.legend}\n\t` + optstrs.join('\n\t')
	}
}

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() {
		let newLabel = document.createElement('label');
		newLabel.setAttribute('for', this.id);
		newLabel.innerHTML = this.label;

		this.input = document.createElement('input');
		this.input.setAttribute('id', this.id);
		for (const attr in this.attrs) {
			this.input.setAttribute(attr, this.attrs[attr]);
		}


		let ret = (this.input.type === 'radio') ? [this.input, newLabel] : [newLabel, this.input];

		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);
			}

			ret.push(datalist);
		}

		return ret;

	}
	id() {
		return this.id;
	}
	value() {
		return this.input.value;
	}
	option() {
		switch (this.input.type) {
			case 'radio':
				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,
		};

		console.log("option:", ret, this.optionName, this.input.value);
		return ret;
	}
	render() {
		switch (this.input.type) {
			case 'radio':
				if (!this.input.checked || this.input.value == 'undefined') return undefined;
				break;
			default:
				if (!this.input.value) return undefined;
				break;
		}

		return `option ${this.optionName} '${this.input.value}'`
	}
}

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, ...'}),
			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, ...'}),
		),

	];

	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));
}

function renderConfigOption(name, value) {
	return value ? `\toption ${name} '${value}'\n` : ""
}
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();