feat(web_interface): js refactor

This commit is contained in:
Jan Rochalski
2019-11-12 13:59:23 +01:00
parent fda01a6486
commit 942f62bc53
5 changed files with 247 additions and 234 deletions

View File

@@ -1,51 +1,61 @@
var settingsJson = {};
let settingsJson = {};
function load(){
getFile("settings.json",function(res){
const load = () => {
getFile("settings.json", res => {
settingsJson = JSON.parse(res);
draw();
});
}
function draw(){
var html = "";
const draw = () => {
let html = "";
for (var key in settingsJson) {
key = esc(key);
if (settingsJson.hasOwnProperty(key)) {
html += "<div class='row'>"
+ "<div class='col-6'>"
+ "<label class='settingName "+(typeof settingsJson[key] == "boolean" ? "labelFix":"")+"' for='"+key+"'>"+key+":</label>"
+ "</div>"
+ "<div class='col-6'>";
if(typeof settingsJson[key] == "boolean"){
html += "<label class='checkBoxContainer'><input type='checkbox' name='"+key+"' "+(settingsJson[key] ? "checked" : "")+" onchange='save(\""+key+"\",!settingsJson[\""+key+"\"])'><span class='checkmark'></span></label>";
}else if(typeof settingsJson[key] == "number"){
html += "<input type='number' name='"+key+"' value="+settingsJson[key]+" onchange='save(\""+key+"\",parseInt(this.value))'>";
}else if(typeof settingsJson[key] == "string"){
html += "<input type='text' name='"+key+"' value="+settingsJson[key]+" "+(key=="version"?"readonly":"")+" onchange='save(\""+key+"\",this.value)'>";
}
html += "</div>"
+ "</div>"
+ "<div class='row'>"
+ "<div class='col-12'>"
+ "<p>"+lang("setting_"+key)+"</p>"
+ "<hr>"
+ "</div>"
+ "</div>";
html += `
<div class="row">
<div class="col-6">
<label class="settingName ${(typeof settingsJson[key] == "boolean" ? "labelFix" : "")}" for="${key}">
${key}:
</label>
</div>
<div class='col-6'>
${() => {
switch(typeof settingsJson[key]) {
case "boolean":
return `
<label class="checkBoxContainer">
<input type="checkbox" name="${key}" ${(settingsJson[key] ? "checked" : "")} onchange="save(${key}, ${!settingsJson[key]})" />;
<span class="checkmark"></span>
</label>
`;
case "number":
return `<input type="number" name="${key}" value="${settingsJson[key]}" onchange="save(${key}, ${parseInt(this.value)})">`;
case "string":
return `<input type="text" name="${key}" value="${settingsJson[key]}" ${key === "version" ? "readonly" : ""} onchange="save(${key}, ${this.value})">`
}
}}
</div>
</div>
<div class='row'>
<div class='col-12'>
<p>${lang("setting_"+key)}</p>
<hr>
</div>
</div>
`;
}
}
getE("settingsList").innerHTML = html;
}
function save(key, value){
if(key){
const save = (key, value) => {
if (key) {
settingsJson[key] = value;
getFile("run?cmd=set "+key+" \""+value+"\"");
}else{
getFile("run?cmd=save settings",function(res){
load();
});
getFile(`run?cmd=set ${key} "${value}"`);
} else {
getFile("run?cmd=save settings", load);
}
}