mirror of https://github.com/lumapu/ahoy.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
405 lines
14 KiB
405 lines
14 KiB
/* 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}, "×")
|
|
]),
|
|
ml("div", {class: "modal-body"}, body)
|
|
]
|
|
)
|
|
)
|
|
);
|
|
}
|
|
}
|
|
|
|
function modalClose() {
|
|
var e = document.getElementById("modal");
|
|
if(null != e) {
|
|
e.remove();
|
|
document.getElementById("modal-wrapper").remove();
|
|
}
|
|
}
|
|
|