optimizations and improvements to the web UI

This commit is contained in:
Paul
2019-10-01 22:26:34 +02:00
parent 562d9a0e90
commit 8b25b2e72f
6 changed files with 38 additions and 105 deletions

View File

@@ -29,6 +29,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Removed ### Removed
- Removed `heating_circuit` config setting - Removed `heating_circuit` config setting
- Removed showing the JSON config files when Saving from the Web
## [1.9.0] 2019-09-01 ## [1.9.0] 2019-09-01

View File

@@ -8,14 +8,11 @@ var custom_config = {
"listen_mode": false, "listen_mode": false,
"shower_timer": false, "shower_timer": false,
"shower_alert": false, "shower_alert": false,
"publish_time": 120 "publish_time": 120,
"tx_mode": 1
} }
}; };
function custom_commit() {
websock.send(JSON.stringify(custom_config));
}
function listcustom() { function listcustom() {
document.getElementById("led_gpio").value = custom_config.settings.led_gpio; document.getElementById("led_gpio").value = custom_config.settings.led_gpio;
@@ -72,7 +69,7 @@ function savecustom() {
custom_config.settings.publish_time = parseInt(document.getElementById("publish_time").value); custom_config.settings.publish_time = parseInt(document.getElementById("publish_time").value);
custom_config.settings.tx_mode = parseInt(document.getElementById("tx_mode").value); custom_config.settings.tx_mode = parseInt(document.getElementById("tx_mode").value);
custom_uncommited(); custom_saveconfig();
} }
function listCustomStats() { function listCustomStats() {
@@ -84,6 +81,8 @@ function listCustomStats() {
document.getElementById("devicesshow").style.display = "none"; document.getElementById("devicesshow").style.display = "none";
document.getElementById("thermostat_show").style.display = "none"; document.getElementById("thermostat_show").style.display = "none";
document.getElementById("boiler_show").style.display = "none"; document.getElementById("boiler_show").style.display = "none";
document.getElementById("sm_show").style.display = "none";
document.getElementById("hp_show").style.display = "none";
return; return;
} }

View File

@@ -21,7 +21,7 @@
<i class="glyphicon glyphicon-arrow-left"></i> <i class="glyphicon glyphicon-arrow-left"></i>
</div> </div>
<div class="sidebar-header"> <div class="sidebar-header">
<h1 id="customname2" class="text-center"></h1> <h1 id="customname2" class="text-center" onclick="home();"></h1>
<h6 id="mainver" class="text-center"></h6> <h6 id="mainver" class="text-center"></h6>
</div> </div>
<ul class="list-unstyled components"> <ul class="list-unstyled components">
@@ -70,7 +70,7 @@
</ul> </ul>
<ul class="list-unstyled CTAs"> <ul class="list-unstyled CTAs">
<li> <li>
<a id="helpurl" target="_blank" class="download">Help</a> <a id="helpurl" target="_blank" class="article">Help</a>
</li> </li>
<li> <li>
<a href="#" class="article" onclick="logout();">Logout</a> <a href="#" class="article" onclick="logout();">Logout</a>
@@ -102,46 +102,6 @@
<div id="ajaxcontent"> <div id="ajaxcontent">
</div> </div>
<div id="revcommit" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Please review your system changes</h4>
</div>
<div class="modal-body">
<pre id="jsonholder"></pre>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" onclick="commit();" class="btn btn-success" data-dismiss="modal">Save
& Restart</button>
</div>
</div>
</div>
</div>
<div id="custom_revcommit" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Please review your custom changes</h4>
</div>
<div class="modal-body">
<pre id="jsonholder2"></pre>
Note: some settings my require a <b>Restart System</b> first to take effect.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" onclick="custom_commit();" class="btn btn-success"
data-dismiss="modal">Save
</button>
</div>
</div>
</div>
</div>
<div id="destroy" class="modal fade" role="dialog"> <div id="destroy" class="modal fade" role="dialog">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">

View File

@@ -22,26 +22,6 @@
style="display:none;"> style="display:none;">
</div> </div>
<br> <br>
<div id="restoremodal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Please wait while data is restoring...</h4>
</div>
<div class="modal-body">
<div id="pbar" class="progress">
<div id="dynamic" class="progress-bar progress-bar-primary progress-bar-striped active">
Restoring...</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="restoreclose" style="display:none;" class="btn btn-default"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
<br> <br>
@@ -57,7 +37,7 @@
<div class="col-md-8 col-md-offset-2"> <div class="col-md-8 col-md-offset-2">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title">Please wait a few seconds while the system restarts...</h3> <h3 class="panel-title">Please wait for about 10 seconds while the system restarts...</h3>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div class="progress"> <div class="progress">
@@ -125,7 +105,7 @@
<div id="eventcontent"> <div id="eventcontent">
<div class="text-center" id="loading-img"> <div class="text-center" id="loading-img">
<h5>Please wait while processing the log data...<span id="loadpages"></span></h5> <h5>Loading Logs. Please wait...<span id="loadpages"></span></h5>
<br> <br>
</div> </div>
<div> <div>

View File

@@ -95,25 +95,30 @@ function listntp() {
deviceTime(); deviceTime();
} }
function revcommit() { function home() {
document.getElementById("jsonholder").innerText = JSON.stringify(config, null, 2); window.location = '/';
$("#revcommit").modal("show");
} }
function uncommited() { function restart_alert() {
$("#commit").fadeOut(200, function () { $("#commit").fadeOut(200, function () {
$(this).css("background", "gold").fadeIn(1000); $(this).css("background", "gold").fadeIn(1000);
}); });
document.getElementById("commit").innerHTML = "<h6>Settings have changed. Click here to review and save.</h6>"; document.getElementById("commit").innerHTML = "<h6>Settings have changed. It's recommended to reboot the system. Click here to restart.</h6>";
$("#commit").click(function () { $("#commit").click(function () {
revcommit(); $("#reboot").modal("show");
return false; return false;
}); });
} }
function custom_uncommited() { function saveconfig() {
document.getElementById("jsonholder2").innerText = JSON.stringify(custom_config.settings, null, 2); websock.send(JSON.stringify(config));
$("#custom_revcommit").modal("show"); restart_alert();
}
function custom_saveconfig() {
websock.send(JSON.stringify(custom_config));
restart_alert();
} }
function saventp() { function saventp() {
@@ -125,14 +130,13 @@ function saventp() {
config.ntp.enabled = true; config.ntp.enabled = true;
} }
uncommited(); saveconfig();
} }
function forcentp() { function forcentp() {
websock.send("{\"command\":\"forcentp\"}"); websock.send("{\"command\":\"forcentp\"}");
} }
function savegeneral() { function savegeneral() {
var a = document.getElementById("adminpwd").value; var a = document.getElementById("adminpwd").value;
if (a === null || a === "") { if (a === null || a === "") {
@@ -147,7 +151,7 @@ function savegeneral() {
config.general.serial = true; config.general.serial = true;
} }
uncommited(); saveconfig();
} }
function savemqtt() { function savemqtt() {
@@ -167,7 +171,7 @@ function savemqtt() {
config.mqtt.user = document.getElementById("mqttuser").value; config.mqtt.user = document.getElementById("mqttuser").value;
config.mqtt.password = document.getElementById("mqttpwd").value; config.mqtt.password = document.getElementById("mqttpwd").value;
uncommited(); saveconfig();
} }
function savenetwork() { function savenetwork() {
@@ -186,7 +190,7 @@ function savenetwork() {
config.network.wmode = wmode; config.network.wmode = wmode;
config.network.password = document.getElementById("wifipass").value; config.network.password = document.getElementById("wifipass").value;
uncommited(); saveconfig();
} }
var formData = new FormData(); var formData = new FormData();
@@ -199,8 +203,8 @@ function inProgress(callback) {
var i = 0; var i = 0;
var prg = setInterval(function () { var prg = setInterval(function () {
$(".progress-bar").css("width", i + "%").attr("aria-valuenow", i).html(i + "%"); $(".progress-bar").css("width", i + "%").attr("aria-valuenow", i).html(i + "%");
i++; i = i + 5;
if (i === 101) { if (i === 105) {
clearInterval(prg); clearInterval(prg);
var a = document.createElement("a"); var a = document.createElement("a");
a.href = "http://" + config.general.hostname + ".local"; a.href = "http://" + config.general.hostname + ".local";
@@ -221,9 +225,6 @@ function inProgress(callback) {
contentType: false contentType: false
}); });
break; break;
case "commit":
websock.send(JSON.stringify(config));
break;
case "destroy": case "destroy":
websock.send("{\"command\":\"destroy\"}"); websock.send("{\"command\":\"destroy\"}");
break; break;
@@ -238,10 +239,6 @@ function inProgress(callback) {
}).hide().fadeIn(); }).hide().fadeIn();
} }
function commit() {
inProgress("commit");
}
function handleSTA() { function handleSTA() {
document.getElementById("scanb").style.display = "block"; document.getElementById("scanb").style.display = "block";
document.getElementById("hidessid").style.display = "block"; document.getElementById("hidessid").style.display = "block";
@@ -498,10 +495,10 @@ function restoreSet() {
return; return;
} }
if (json.command === "configfile") { if (json.command === "configfile") {
var x = confirm("File seems to be valid, do you wish to continue?"); var x = confirm("System Config file seems to be valid, do you wish to continue?");
if (x) { if (x) {
config = json; config = json;
uncommited(); saveconfig();
} }
} }
}; };
@@ -526,10 +523,10 @@ function restoreCustomSet() {
return; return;
} }
if (json.command === "custom_configfile") { if (json.command === "custom_configfile") {
var x = confirm("File seems to be valid, do you wish to continue?"); var x = confirm("Custom Config file seems to be valid, do you wish to continue?");
if (x) { if (x) {
custom_config = json; custom_config = json;
custom_uncommited(); custom_saveconfig();
} }
} }
}; };
@@ -677,10 +674,6 @@ function initMQTTLogTable() {
}); });
} }
function restartESP() {
inProgress("restart");
}
var nextIsNotJson = false; var nextIsNotJson = false;
function socketMessageListener(evt) { function socketMessageListener(evt) {

View File

@@ -51,7 +51,7 @@ var eventlog = {
"command": "eventlist", "command": "eventlist",
"page": 1, "page": 1,
"haspages": 1, "haspages": 1,
"list":[ "list": [
"{\"type\":\"WARN\",\"src\":\"system\",\"desc\":\"test data\",\"data\":\"Record #1\",\"time\": 1563371160}", "{\"type\":\"WARN\",\"src\":\"system\",\"desc\":\"test data\",\"data\":\"Record #1\",\"time\": 1563371160}",
"{\"type\":\"WARN\",\"src\":\"system\",\"desc\":\"test data\",\"data\":\"Record #2\",\"time\":0}", "{\"type\":\"WARN\",\"src\":\"system\",\"desc\":\"test data\",\"data\":\"Record #2\",\"time\":0}",
"{\"type\":\"INFO\",\"src\":\"system\",\"desc\":\"System booted\",\"data\":\"\",\"time\":1568660479}", "{\"type\":\"INFO\",\"src\":\"system\",\"desc\":\"System booted\",\"data\":\"\",\"time\":1568660479}",
@@ -147,7 +147,7 @@ function sendStatus() {
function sendCustomStatus() { function sendCustomStatus() {
var stats = { var stats = {
"command": "custom_status", "command": "custom_status",
"version": "1.9.0", "version": "1.9.1",
"customname": "EMS-ESP", "customname": "EMS-ESP",
"appurl": "https://github.com/proddy/EMS-ESP", "appurl": "https://github.com/proddy/EMS-ESP",
"updateurl": "https://api.github.com/repos/proddy/EMS-ESP/releases/latest", "updateurl": "https://api.github.com/repos/proddy/EMS-ESP/releases/latest",
@@ -214,7 +214,7 @@ wss.on('connection', function connection(ws) {
console.log("[INFO] Got Command: " + obj.command); console.log("[INFO] Got Command: " + obj.command);
switch (obj.command) { switch (obj.command) {
case "configfile": case "configfile":
console.log("[INFO] New system settings file received"); console.log("[INFO] New system config received");
configfile = obj; configfile = obj;
break; break;
case "custom_configfile": case "custom_configfile":
@@ -269,7 +269,7 @@ wss.on('connection', function connection(ws) {
console.log("[INFO] getting ntp time"); console.log("[INFO] getting ntp time");
break; break;
default: default:
console.log("[WARN] Unknown command "); console.log("[WARN] Unknown command");
break; break;
} }
}); });