src/web/html/api.js

/* SVG ICONS - https://icons.getbootstrap.com */

var iconWifi1 = [
    "M11.046 10.454c.226-.226.185-.605-.1-.75A6.473 6.473 0 0 0 8 9c-1.06 0-2.062.254-2.946.704-.285.145-.326.524-.1.75l.015.015c.16.16.407.19.611.09A5.478 5.478 0 0 1 8 10c.868 0 1.69.201 2.42.56.203.1.45.07.611-.091l.015-.015zM9.06 12.44c.196-.196.198-.52-.04-.66A1.99 1.99 0 0 0 8 11.5a1.99 1.99 0 0 0-1.02.28c-.238.14-.236.464-.04.66l.706.706a.5.5 0 0 0 .707 0l.708-.707z"
];

var iconWifi2 = [
    "M13.229 8.271c.216-.216.194-.578-.063-.745A9.456 9.456 0 0 0 8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065A8.46 8.46 0 0 1 8 7a8.46 8.46 0 0 1 4.577 1.336c.205.132.48.108.652-.065zm-2.183 2.183c.226-.226.185-.605-.1-.75A6.473 6.473 0 0 0 8 9c-1.06 0-2.062.254-2.946.704-.285.145-.326.524-.1.75l.015.015c.16.16.408.19.611.09A5.478 5.478 0 0 1 8 10c.868 0 1.69.201 2.42.56.203.1.45.07.611-.091l.015-.015zM9.06 12.44c.196-.196.198-.52-.04-.66A1.99 1.99 0 0 0 8 11.5a1.99 1.99 0 0 0-1.02.28c-.238.14-.236.464-.04.66l.706.706a.5.5 0 0 0 .708 0l.707-.707z"
];

var iconWifi3 = [
    "M15.384 6.115a.485.485 0 0 0-.047-.736A12.444 12.444 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.518.518 0 0 0 .668.05A11.448 11.448 0 0 1 8 4c2.507 0 4.827.802 6.716 2.164.205.148.49.13.668-.049z",
    "M13.229 8.271a.482.482 0 0 0-.063-.745A9.455 9.455 0 0 0 8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065A8.46 8.46 0 0 1 8 7a8.46 8.46 0 0 1 4.576 1.336c.206.132.48.108.653-.065zm-2.183 2.183c.226-.226.185-.605-.1-.75A6.473 6.473 0 0 0 8 9c-1.06 0-2.062.254-2.946.704-.285.145-.326.524-.1.75l.015.015c.16.16.407.19.611.09A5.478 5.478 0 0 1 8 10c.868 0 1.69.201 2.42.56.203.1.45.07.61-.091l.016-.015zM9.06 12.44c.196-.196.198-.52-.04-.66A1.99 1.99 0 0 0 8 11.5a1.99 1.99 0 0 0-1.02.28c-.238.14-.236.464-.04.66l.706.706a.5.5 0 0 0 .707 0l.707-.707z"
];

var iconWarn = [
    "M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z",
    "M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"
];

var iconInfo = [
    "M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z",
    "m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"
];

var iconSuccess = [
    "M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z",
    "M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"
];

var iconSuccessFull = [
    "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"
];

var iconGear = [
    "M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"
];

var iconDel = [
    "M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z",
    "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
];

 /**
 * GENERIC FUNCTIONS
 */
function ml(tagName, ...args) {
    var el = document.createElement(tagName);
    if(args[0]) {
        for(var name in args[0]) {
            if(name.indexOf("on") === 0) {
                el.addEventListener(name.substr(2).toLowerCase(), args[0][name], false)
            } else {
                el.setAttribute(name, args[0][name]);
            }
        }
    }
    if (!args[1]) {
        return el;
    }
    return nester(el, args[1])
}

function mlNs(tagName, ...args) {
    var el = document.createElementNS("http://www.w3.org/2000/svg", tagName);
    if(args[0]) {
        for(var name in args[0]) {
            if(name.indexOf("on") === 0) {
                el.addEventListener(name.substr(2).toLowerCase(), args[0][name], false)
            } else {
                el.setAttribute(name, args[0][name]);
            }
        }
    }
    if (!args[1]) {
        return el;
    }
    return nester(el, args[1])
}

function nester(el, n) {
    if (typeof n === "string") {
        el.innerHTML = n;
    } else if (n instanceof Array) {
        for(var i = 0; i < n.length; i++) {
            if (typeof n[i] === "string") {
                var t = document.createTextNode(n[i]);
                el.appendChild(t);
            } else if (n[i] instanceof Node){
                el.appendChild(n[i]);
            }
        }
    } else if (n instanceof Node){
        el.appendChild(n)
    }
    return el;
}

function topnav() {
    toggle("topnav", "mobile");
}

function parseNav(obj) {
    for(i = 0; i < 14; i++) {
        if(i == 2)
            continue;
        var l = document.getElementById("nav"+i);
        if(null == l)
            continue
        if(12 == i) {
            if(obj.cst_lnk.length > 0) {
                l.href = obj.cst_lnk
                l.innerHTML = obj.cst_lnk_txt
                l.classList.remove("hide");
            }
            continue;
        }
        if(window.location.pathname == "/" + l.href.substring(0, l.href.indexOf("?")).split('/').pop()) {
            if((i != 8 )&& (i != 9))
                l.classList.add("active");
        }

        if(obj["menu_protEn"]) {
            if(obj["menu_prot"]) {
                if(0 == i)
                    l.classList.remove("hide");
                else if(i > 2) {
                    if(((obj["menu_mask"] >> (i-2)) & 0x01) == 0x00)
                        l.classList.remove("hide");
                }
            } else if(0 != i)
                l.classList.remove("hide");
        } else if(i > 1)
            l.classList.remove("hide");
    }
}

function parseVersion(obj) {
    document.getElementById("version").appendChild(
        link("https://github.com/lumapu/ahoy/commits/" + obj["build"], "Git SHA: " + obj["build"] + " :: " + obj["version"], "_blank")
    );
}

function parseESP(obj) {
    document.getElementById("esp_type").replaceChildren(
        document.createTextNode("Board: " + obj.esp_type)
    );
}

function parseRssi(obj) {
    var icon = iconWifi3;
    if(obj["wifi_rssi"] <= -80)
        icon = iconWifi1;
    else if(obj["wifi_rssi"] <= -70)
        icon = iconWifi2;
    document.getElementById("wifiicon").replaceChildren(svg(icon, 32, 32, "icon-fg2", obj.wifi_rssi));
}

function parseTitle(obj) {
    document.title = obj.host + " - " + document.title
}

function toIsoDateStr(d) {
    return new Date(d.getTime() + (d.getTimezoneOffset() * -60000)).toISOString().substring(0, 19).replace('T', ', ');
}

function toIsoTimeStr(d) { // UTC!
    return new Date(d.getTime()).toISOString().substring(11, 19).replace('T', ', ');
}

function setHide(id, hide) {
    var elm = document.getElementById(id);
    if(null == elm)
        return;
    if(hide) {
        if(!elm.classList.contains("hide"))
            elm.classList.add("hide");
    } else
        elm.classList.remove('hide');
}

function toggle(id, cl="hide") {
    var e = document.getElementById(id);
    if(!e.classList.contains(cl))
        e.classList.add(cl);
    else
        e.classList.remove(cl);
}

function getAjax(url, ptr, method="GET", json=null) {
    var xhr = new XMLHttpRequest();
    if(xhr != null) {
       xhr.open(method, url, true);
       xhr.onreadystatechange = p;
       if("POST" == method)
            xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
       xhr.send(json);
    }
    function p() {
        if(xhr.readyState == 4) {
            if(null != xhr.responseText) {
                if(null != ptr)
                    ptr(JSON.parse(xhr.responseText));
            }
        }
    }
}

const getJSON = async url => {
    const re = await fetch(url);
    if(!re.ok)
        throw new Error(re.statusText);
    const data = re.json();
    return data;
}

/**
 * CREATE DOM FUNCTIONS
 */

function tr(val1, val2) {
    if(typeof val2 == "number")
        val2 = String(val2);
    return ml("tr", {}, [
        ml("th", {style: "width: 50%"}, val1),
        ml("td", {}, val2)
    ]);
}

function tr2(cols) {
    var t = [];
    for(val of cols) {
        if(typeof val == "number")
            val = String(val);
        if(t.length == 0)
            t.push(ml("th", {}, val));
        else
            t.push(ml("td", {}, val));
    }
    return ml("tr", {}, t);
}

function badge(success, text, second="error") {
    return ml("span", {class: "badge badge-" + ((success) ? "success" : second)}, text);
}

function progress(val) {
    return ml("div", {class: "progress"}, ml("div", {class: "progress-bar", style: "width: " + val + "%"}, null))
}

function tabChange(id) {
    var els = document.getElementsByClassName("nav-link");
    [].forEach.call(els, function(e) {
        if(e.id != id)
            e.classList.remove('active');
        else
            e.classList.add('active');
    });

    els = document.getElementsByClassName("tab-content");
    [].forEach.call(els, function(e) {
        if(e.id == ("div"+id.substring(3)))
            e.classList.remove('hide');
        else
            e.classList.add('hide');
    });
}

function tabs(items) {
    var li = [];
    var cl = " active";
    for(it of items) {
        li.push(ml("li", {class: "nav-item"},ml("a", {id: "tab"+it, class: "nav-link" + cl, href: "#", onclick: function(){tabChange(this.id)}}, it)))
        cl = "";
    }
    return ml("ul", {class: "nav nav-tabs mb-4"}, li);
}

function des(val) {
    e = document.createElement('p');
    e.classList.add("subdes");
    e.innerHTML = val;
    return e;
}

function lbl(htmlfor, val, cl=null, id=null) {
    e = document.createElement('label');
    e.htmlFor = htmlfor;
    e.innerHTML = val;
    if(null != cl) e.classList.add(...cl);
    if(null != id) e.id = id;
    return e;
}

function inp(name, val, max=32, cl=["text"], id=null, type=null, pattern=null, title=null, checked=null) {
    e = document.createElement('input');
    e.classList.add(...cl);
    e.name = name;
    if(null != val) e.value = val;
    if(null != max) e.maxLength = max;
    if(null != id) e.id = id;
    if(null != type) e.type = type;
    if(null != pattern) e.pattern = pattern;
    if(null != title) e.title = title;
    if(null != checked) e.checked = checked;
    return e;
}

function sel(name, options, selId) {
    var o = [];
    for(it of options) {
        o.push(opt(it[0], it[1], (it[0] == selId)));
    }
    return ml("select", {name: name}, o);
}

function selDelAllOpt(sel) {
    var i, l = sel.options.length - 1;
    for(i = l; i >= 0; i--) {
        sel.remove(i);
    }
}

function opt(val, html, sel=false) {
    var o = ml("option", {value: val}, html);
    if(sel)
        o.selected = true;
    return o;
}

function div(cl, h=null) {
    e = document.createElement('div');
    e.classList.add(...cl);
    if(null != h) e.innerHTML = h;
    return e;
}

function span(val, cl=null, id=null) {
    e = document.createElement('span');
    e.innerHTML = val;
    if(null != cl) e.classList.add(...cl);
    if(null != id) e.id = id;
    return e;
}

function br() {
    return document.createElement('br');
}

function link(dst, text, target=null) {
    var a = document.createElement('a');
    var t = document.createTextNode(text);
    a.href = dst;
    if(null != target)
        a.target = target;
    a.appendChild(t);
    return a;
}

function svg(data=null, w=24, h=24, cl=null, tooltip=null) {
    var s = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    s.setAttribute('width', w);
    s.setAttribute('height', h);
    s.setAttribute('viewBox', '0 0 16 16');
    if(null != cl) s.setAttribute('class', cl);
    if(null != data) {
        for(const e of data) {
            const i = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            i.setAttribute('d', e);
            s.appendChild(i);
        }
    }
    if(null != tooltip) {
        const t = document.createElement("title");
        t.appendChild(document.createTextNode(tooltip));
        s.appendChild(t);
    }
    return s;
}

function modal(title, body) {
    if(null == document.getElementById("modal")) {
        document.getElementById("wrapper").append(
            ml("div", {id: "modal-wrapper", onclick: modalClose}),
            ml("div", {id: "modal", class: "modal"},
                ml("div", {class: "modal-content"}, [
                        ml("div", {class: "modal-header"}, [
                            ml("h5", {}, title),
                            ml("button", {class: "close", type: "button", onclick: modalClose}, "&times;")
                        ]),
                        ml("div", {class: "modal-body"}, body)
                    ]
                )
            )
        );
    }
}

function modalClose() {
    var e = document.getElementById("modal");
    if(null != e) {
        e.remove();
        document.getElementById("modal-wrapper").remove();
    }
}