1
0
mirror of https://github.com/s00500/ESPUI.git synced 2024-06-30 21:34:13 +00:00
ESPUI/data/js/controls.js

77 lines
3.7 KiB
JavaScript

/*
var keys = {};
connection.onopen = function () {
wsString += " $(\"#connection_status\").toggleClass(\"color-green\");";
wsString += " $(\"#connection_status\").text(\"Connected\");";
wsString += String(" connection.send(")+"\"{'mode': 'check_tb_status'}\");";
for(int i=0; i<tb_index; i++){
wsString += String(" $(document).on('click',")+"'#tb"+i+"', function() {";
wsString += String(" if($('#tb")+i+"').hasClass(\"button\")){ console.log(\"Button Clicked!\"); connection.send("+"\"{'mode': 'tb_click', 'index': '"+i+"', 'status': 'on'}\""+"); }";
wsString += String(" else if($('#tb")+i+"').hasClass(\"button-primary\")){ connection.send("+"\"{'mode': 'tb_click', 'index': '"+i+"', 'status': 'off'}\""+"); } });";
}
wsString += " };";
wsString += " connection.onerror = function (error) { $('#connection_status').toggleClass(\"color-red\"); $(\"#connection_status\").text(\"Error / No Connection\"); };";
wsString += " connection.onmessage = function (e) {";
wsString += " console.log(e.data); ";
wsString += " var obj = jQuery.parseJSON(e.data);";
wsString += " if(obj.mode === 'create_label'){ $('#row').append(\"<div class='two columns card'><h5>\"+obj.l_title+\"</h5><hr /><h3><span class='label'>\"+obj.l_value+\"</span></h3></div>\");}";
wsString += " else if(obj.mode === 't_button_startup'){ var tb_index = obj.index; for(i=0; i<tb_index; i++){ var tb_index2 = \"tb\"+i; var tb_status = obj[tb_index2]; var tb_index3 = \"#\"+tb_index2; console.log(tb_status); if(tb_status === \"1\"){$(tb_index3).toggleClass('button-primary'); $(tb_index3).text('Turn Off');} else if(tb_status === \"0\"){$(tb_index3).toggleClass('button'); $(tb_index3).text('Turn On');} } }";
wsString += " else if(obj.mode === 't_button_click'){ var tb_index = \"tb\"+obj.index; var tb_status = obj[tb_index]; var tb_index3 = \"#\"+tb_index; console.log(tb_status); if(tb_status == \"1\"){ console.log(\"Status Tuned ON\"); $(tb_index3).text('Turn Off'); $(tb_index3).removeClass( \"button\" ).addClass( \"button-primary\" );} else if(tb_status == \"0\"){console.log(\"Status Tuned OFF\"); $(tb_index3).text('Turn On'); $(tb_index3).removeClass( \"button-primary\" ).addClass( \"button\" ); } } };";
*/
// TASKS:
// Control statuses and color TAG
// Request and add JSONFile for dom assembly
// Send WS Commands
// Roadmap
// Build changeable Labels
// Build a serial Console?
var websock;
function start() {
websock = new WebSocket('ws://' + window.location.hostname + '/ws');
websock.onopen = function(evt) {
console.log('websock open');
$("#conStatus").toggleClass("color-green");
$("#conStatus").text("Connected");
};
websock.onclose = function(evt) {
console.log('websock close');
$("#conStatus").toggleClass("color-red");
$("#conStatus").text("Error / No Connection");
};
websock.onerror = function(evt) {
console.log(evt);
$("#conStatus").toggleClass("color-red");
$("#conStatus").text("Error / No Connection");
};
websock.onmessage = function(evt) {
console.log(evt);
var data = JSON.parse(evt.data);
console.log(data);
var e = document.body;
if (data.type === 'domButton') {
//initial rendering of the Buttons
$('#row').append("<div class='two columns card'><h5>"+data.label+"</h5><hr/><button id="+"tb"+data.index+"></button></div>");
}
if (data.type === 'domLabel') {
//initial rendering of the Labels
$('#row').append("<div class='two columns card'><h5>"+data.l_title+"</h5><hr /><h3><span class='label'>"+data.label+"</span></h3></div>");
}
else if (data.type === 'value') {
// Display some kind of value
}
else {
console.log('unknown event');
}
};
}
function buttonclick(e) {
// TODO: Make this more generic
websock.send(e.id);
}