max80_fw/esp32/www/max80.js

// Read a key=value text file and return it as a Promise of a Map
function fetchconfig(url) {
    var xdr = new XMLHttpRequest();

    return fetch(url, {cache: "no-store"})
	.then(res => {
	    if (!res.ok) {
		throw new Error("HTTP error "+response.status);
	    } else {
		return res.text();
	    }
	})
	.then(text => {
	    var map = new Map();
	    for (const c of text.split(/[\r\n]+/)) {
		const eqs = c.indexOf("=");
		if (eqs > 0) {
		    map.set(c.slice(0, eqs), c.slice(eqs+1));
		}
	    }
	    return map;
	});
}

// Initialize a form from a map
function initform(root, map) {
    var form = root.elements;
    
    for (const [key,val] of map) {
	var field = form[key];
	if (field != undefined && field.tagName == "INPUT") {
	    if (field.type == "checkbox") {
		field.checked = val && val != "0" && val != "off";
	    } else {
		field.value = val;
	    }
	}
    }
}

// Load form initialization data
function loadform(form, url) {
    fetchconfig(url)
	.then(map => { initform(document.querySelector(form), map) })
	.catch(() => {});
}

// Insert status data from a map
function initstatus(map)
{
    for (const [key,val] of map) {
	var e = document.getElementById(key);
	if (e) {
	    e.innerText = val;
	}
    }
}

// Load status data
function loaddata(url)
{
    fetchconfig(url)
	.then(map => { initdata(map) })
	.catch(() => {});
}

// POST file upload with progress and response text
function uploadfile(event) {
    event.preventDefault();
    var form = event.currentTarget;
    var elem = form.elements;
    var files = elem["file"].files;
    if (files.length != 1) {
	/* Show error */
	return;
    }
    var file = files[0];
    var xhr = new XMLHttpRequest();

    var progress = form.querySelector("progress");
    if (progress != undefined) {
	progress.value = 0;
	xhr.upload.addEventListener("progress", (event) => {
	    if (event.lengthComputable) {
		progress.max   = event.total;
		progress.value = event.loaded;
	    }
	});
    }
    
    var result = form.querySelector("pre.result");
    if (result != undefined) {
	result.className = "result hide";
    }
    xhr.addEventListener("loadend", (event) => {
	const ok = xhr.status >= 200 && xhr.status <= 299;
	if (progress != undefined) {
	    progress.value = ok ? progress.max : 0;
	}
	if (result != undefined) {
	    result.className = "result " + (ok ? "ok" : "err");
	    result.innerText = xhr.responseText;
	}
    });
    
    xhr.open("POST", form.action);
    xhr.responseType = 'text';
    xhr.send(file);
}

// Flip the status of an INPUT element between text and password
function showpwd(id,me) {
    var pwd = document.getElementById(id);
    const was_visible = pwd.getAttribute('type') == 'text';
    const new_type = was_visible ? 'password' : 'text';
    const new_icon = was_visible ? 'show' : 'hide';

    pwd.setAttribute('type', new_type);
    me.innerHTML = new_icon;
}

// Hack to include an HTML files. Sadly, does not support
// including files with <script> tags.
function inc(url) {
    var me = document.currentScript;
    fetch(url)
	.then((response) => response.text())
	.then((text) => { me.outerHTML = text; });
}