Improved js UI & backend (webSockets, async, etc...) ;

Changed users/passwords.
This commit is contained in:
d-popov
2020-04-25 01:45:48 +03:00
parent 7854b67905
commit 2d8f6ed8ce
4 changed files with 288 additions and 250 deletions

View File

@@ -1,6 +1,8 @@
<h2>AC Control for <%= model.user.username %></h2>
<form action="/n/accontrol" class="form-inline" method="POST">
<div class="form-group">
<h4 id="current">Retrieving current conditions...</h4>
<!-- class="form-inline" -->
<form id="accontrol" action="/n/accontrol" method="POST">
<div class="form-group ">
<input type='checkbox' name='power' <%= model.data.power|true ? "checked" : "" %> data-toggle='toggle'
data-style='android' data-on='ON' data-off='Off' />
</div>
@@ -9,15 +11,76 @@
data-off='Cool' data-onstyle='warning' data-offstyle='info' />
</div>
<div class="form-group">
<input type='number' name='temp' value='<%= model.data.temp|23%>' min='16' max='32' step='0.5' />
<input type='number' name='temp' value='<%= model.data.temp|22 %>' min='16' max='32' step='0.5' />
</div>
<div class="form-group">
<!-- <input type='checkbox' name='econo'<%= model.data.econo ? "checked" : "" %> data-toggle='toggle' data-style='android' data-on='Eco' data-off='Normal' data-onstyle='info' data-offstyle='warning'/> -->
<input type='submit' class='button' value='SET!'>
<input type='checkbox' name='econo'<%= model.data.econo ? "checked" : "" %> data-toggle='toggle' data-style='android' data-on='Eco' data-off='Normal' data-onstyle='info' data-offstyle='warning'/>
</div>
<div class="form-group">
<label></label>
<input type='checkbox' name='swing'<%= model.data.swing ? "checked" : "" %> data-toggle='toggle' data-style='android' data-on='Swing' data-off='No Swing' data-onstyle='info' data-offstyle='warning'/>
</div>
<div class="form-group">
<input id='set' type='submit' class='button' value='SET!'>
</div>
</form>
INFO:
<%= model.info %>
<%# post.forEach(function(posts){ %>
<!-- <li><%#= posts[i].title %> - <%#= posts[i].name %> </li> -->
<%# }) %>
<div class="form-group">
<h3 id="ws"></h3>
</div>
<%- contentFor('head') %>
<script>
const url = 'wss://iot.d-popov.com/n/ws'
const connection = new WebSocket(url)
connection.onopen = (d) => {
console.log(`WebSocket error: ${d}`)
}
connection.onerror = error => {
console.log(`WebSocket error: ${error}`)
//console.log(inspect(error));
}
connection.onmessage = e => {
console.log(`ws data `);
console.log(e.data);
$('#ws').html(e.data);
}
</script>
<%- contentFor('scripts') %>
<script>
window.onload = function () {
$.getJSON("/n/dht?e=now", function(data){
if(data && data.dht){
$('#current').text( "A23 Currently is " + data.dht.temp + "°C, " + data.dht.hum +"% RH" );
}else {
//chart.title.set("text", "A23 conditions");
}
});
}
$(function(){
console.log("ready");
$("#set").click(function(e){
e.preventDefault();
$.post(
$("#accontrol").prop("action"),
$("#accontrol").serialize(),
function(data, result, response) {
// ... do something with response from server
console.log('sent');
},
//'json' // I expect a JSON response
);
});
});
</script>