|
|
|
@ -110,6 +110,9 @@ var j = function( |
|
|
|
catch(e){} // ignore when it fails.
|
|
|
|
catch(e){} // ignore when it fails.
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// dom element iterator: domForEach($(".some-class"), function(el) { ... });
|
|
|
|
|
|
|
|
function domForEach(els, fun) { return Array.prototype.forEach.call(els, fun); } |
|
|
|
|
|
|
|
|
|
|
|
// createElement short-hand
|
|
|
|
// createElement short-hand
|
|
|
|
|
|
|
|
|
|
|
|
e = function(a) { return document.createElement(a); } |
|
|
|
e = function(a) { return document.createElement(a); } |
|
|
|
@ -226,7 +229,11 @@ onLoad(function() { |
|
|
|
<div class="pure-menu">\ |
|
|
|
<div class="pure-menu">\ |
|
|
|
<a class="pure-menu-heading" href="https://github.com/jeelabs/esp-link">\ |
|
|
|
<a class="pure-menu-heading" href="https://github.com/jeelabs/esp-link">\ |
|
|
|
<img src="/favicon.ico" height="32"> esp-link</a>\ |
|
|
|
<img src="/favicon.ico" height="32"> esp-link</a>\ |
|
|
|
<div class="pure-menu-heading" id="sysname" style="padding: 0px 0.6em"></div>\ |
|
|
|
<div class="pure-menu-heading click-to-edit system-name" style="padding: 0px 0.6em">\ |
|
|
|
|
|
|
|
<span class="edit-off"></span>\ |
|
|
|
|
|
|
|
<input class="edit-on" maxlength=12 hidden>\ |
|
|
|
|
|
|
|
<div class="edit-on popup" hidden>Short name for this esp-link, 12 chars max</div>\ |
|
|
|
|
|
|
|
</div>\ |
|
|
|
<ul id="menu-list" class="pure-menu-list"></ul>\ |
|
|
|
<ul id="menu-list" class="pure-menu-list"></ul>\ |
|
|
|
</div>\ |
|
|
|
</div>\ |
|
|
|
</div>\ |
|
|
|
</div>\ |
|
|
|
@ -257,11 +264,11 @@ onLoad(function() { |
|
|
|
} |
|
|
|
} |
|
|
|
$("#menu-list").innerHTML = html; |
|
|
|
$("#menu-list").innerHTML = html; |
|
|
|
|
|
|
|
|
|
|
|
v = $("#version"); |
|
|
|
var v = $("#version"); |
|
|
|
if (v != null) { v.innerHTML = data.version; } |
|
|
|
if (v != null) { v.innerHTML = data.version; } |
|
|
|
|
|
|
|
|
|
|
|
n = $("#sysname"); |
|
|
|
setEditToClick("system-name", data.name); |
|
|
|
if (n != null) { n.innerHTML = data.name; } |
|
|
|
makeAjaxInput("system", "name"); |
|
|
|
}, function() { setTimeout(getMenu, 1000); }); |
|
|
|
}, function() { setTimeout(getMenu, 1000); }); |
|
|
|
}; |
|
|
|
}; |
|
|
|
getMenu(); |
|
|
|
getMenu(); |
|
|
|
@ -291,13 +298,22 @@ function getWifiInfo() { |
|
|
|
|
|
|
|
|
|
|
|
//===== System info
|
|
|
|
//===== System info
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function setEditToClick(klass, value) { |
|
|
|
|
|
|
|
domForEach($("."+klass), function(div) { |
|
|
|
|
|
|
|
if (div.children.length > 0) { |
|
|
|
|
|
|
|
domForEach(div.children, function(el) { |
|
|
|
|
|
|
|
if (el.nodeName === "INPUT") el.value = value; |
|
|
|
|
|
|
|
else if (el.nodeName !== "DIV") el.innerHTML = value; |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
div.innerHTML = value; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function showSystemInfo(data) { |
|
|
|
function showSystemInfo(data) { |
|
|
|
Object.keys(data).forEach(function(v) { |
|
|
|
Object.keys(data).forEach(function(v) { |
|
|
|
el = $("#system-" + v); |
|
|
|
setEditToClick("system-" + v, data[v]); |
|
|
|
if (el != null) { |
|
|
|
|
|
|
|
if (el.nodeName === "INPUT") el.value = data[v]; |
|
|
|
|
|
|
|
else el.innerHTML = data[v]; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
}); |
|
|
|
$("#system-spinner").setAttribute("hidden", ""); |
|
|
|
$("#system-spinner").setAttribute("hidden", ""); |
|
|
|
$("#system-table").removeAttribute("hidden"); |
|
|
|
$("#system-table").removeAttribute("hidden"); |
|
|
|
@ -309,27 +325,37 @@ function getSystemInfo() { |
|
|
|
function(s, st) { window.setTimeout(getSystemInfo, 1000); }); |
|
|
|
function(s, st) { window.setTimeout(getSystemInfo, 1000); }); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function enableInput(el) { |
|
|
|
function makeAjaxInput(klass, field) { |
|
|
|
el.disabled = false; |
|
|
|
domForEach($("."+klass+"-"+field), function(div) { |
|
|
|
el.select(); |
|
|
|
var eon = $(".edit-on", div); |
|
|
|
|
|
|
|
var eoff = $(".edit-off", div)[0]; |
|
|
|
|
|
|
|
var url = "/"+klass+"/update?"+field; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var enableEditToClick = function() { |
|
|
|
|
|
|
|
eoff.setAttribute('hidden',''); |
|
|
|
|
|
|
|
domForEach(eon, function(el){ el.removeAttribute('hidden'); }); |
|
|
|
|
|
|
|
eon[0].select(); |
|
|
|
return false; |
|
|
|
return false; |
|
|
|
} |
|
|
|
} |
|
|
|
function submitInput(klass, id, v) { |
|
|
|
|
|
|
|
console.log("Submit POST /"+klass+"/update?"+id+"="+v); |
|
|
|
var submitEditToClick = function(v) { |
|
|
|
$("#"+klass+"-"+id).disabled = true; |
|
|
|
console.log("Submit POST "+url+"="+v); |
|
|
|
ajaxSpin("POST", "/"+klass+"/update?"+id+"="+v, function() { |
|
|
|
ajaxSpin("POST", url+"="+v, function() { |
|
|
|
showNotification(id + " changed to " + v); |
|
|
|
domForEach(eon, function(el){ el.setAttribute('hidden',''); }); |
|
|
|
|
|
|
|
eoff.removeAttribute('hidden'); |
|
|
|
|
|
|
|
setEditToClick(klass+"-"+field, v) |
|
|
|
|
|
|
|
showNotification(field + " changed to " + v); |
|
|
|
}, function() { |
|
|
|
}, function() { |
|
|
|
showWarning(id + " change failed"); |
|
|
|
showWarning(field + " change failed"); |
|
|
|
}); |
|
|
|
}); |
|
|
|
return false; |
|
|
|
return false; |
|
|
|
} |
|
|
|
} |
|
|
|
function makeAjaxInput(klass, field) { |
|
|
|
|
|
|
|
var el = $("#"+klass+"-"+field); |
|
|
|
bnd(eoff, "click", function(){return enableEditToClick();}); |
|
|
|
bnd(el.parentElement, "click", function(){return enableInput(el);}); |
|
|
|
bnd(eon[0], "blur", function(){return submitEditToClick(eon[0].value);}); |
|
|
|
bnd(el, "blur", function(){return submitInput(klass,field,el.value);}); |
|
|
|
bnd(eon[0], "keyup", function(ev){ |
|
|
|
bnd(el, "keyup", function(ev){ |
|
|
|
if ((ev||window.event).keyCode==13) return submitEditToClick(eon[0].value); |
|
|
|
if ((ev||window.event).keyCode==13) return submitInput(klass,field,el.value); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
Thorsten von Eicken
9 years ago