423 lines
12 KiB
JavaScript
423 lines
12 KiB
JavaScript
$(document).ready(function() {
|
|
$('body').prepend(generateNavBar());
|
|
var am = 0;
|
|
var mip = 0;
|
|
mip = 1;
|
|
var href = $(location).attr('pathname');
|
|
if (href.indexOf('personality') != -1) am = 1;
|
|
if (href.indexOf('logs') != -1) am = 2;
|
|
if (href.indexOf('sensors') != -1) am = 3;
|
|
if (href.indexOf('discovery') != -1) am = (3 + mip);
|
|
$('#navbar ul li').eq(am).addClass('active');
|
|
|
|
//handle settings
|
|
$(document).on('click','#scfg',function() {
|
|
mhdr_status('');
|
|
$('#m-t').html('Site settings');
|
|
var h = '<h3>Password settings</h3>';
|
|
h += c_txt('opswd','Old password','Please put old password (four digits)','','password');
|
|
h += c_txt('npswd','New password','Please put new password (four digits)','','password');
|
|
h += c_txt('npsch','New password check','New passwords check failed','','password');
|
|
$('#m-b').html(h);
|
|
$('.sb').unbind();
|
|
$('#cfg-modal').modal();
|
|
$('.sb').bind('click',function() {
|
|
loader(1);
|
|
var par = ['opswd','npswd','npsch'];
|
|
do_ajax('/set_cfg',pv(par),function (json) {
|
|
if (json) {
|
|
if (json['status'] == 0) {
|
|
mhdr_status('suc');
|
|
close_modal();
|
|
location = '/';
|
|
}
|
|
show_errors(json['status'],par);
|
|
loader(0);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
//periodicly get status
|
|
var bsy = false;
|
|
var ebli = 0;
|
|
var eblio = 255;
|
|
var idntb = $('#idnt img');
|
|
function sta() {
|
|
do_ajax('/serr',{},function (json) {
|
|
// console.log(json);
|
|
dmxsnf = '';
|
|
if (json ) {
|
|
if (json['err'] == 1) ebli = 0x80;
|
|
else ebli = 0;
|
|
if (json['dmxsnf'] == 1) dmxsnf = ' [sniffing DMX]';
|
|
if (json['idnt'] == 1) idntb.addClass('a');
|
|
else idntb.removeClass('a');
|
|
if (json['dls'] && json['dls'] == 1) {
|
|
$('.snz').show();
|
|
}
|
|
} else if (json == undefined) {
|
|
ebli = 0x40;
|
|
} else ebli = 0;
|
|
bsy = false;
|
|
});
|
|
}
|
|
setInterval(function() {
|
|
if (!bsy) {
|
|
bsy = true;
|
|
sta();
|
|
}
|
|
},3000);
|
|
sta();
|
|
setInterval(function() {
|
|
if (ebli == eblio) return;
|
|
var opre = pre;
|
|
if (ebli & 0x80) {
|
|
ebli ^= 0x01;
|
|
if (ebli & 0x01) pre = '(!) ';
|
|
$('#pth').removeClass('stou');
|
|
$('#pth').addClass('serr');
|
|
} else if (ebli & 0x40) {
|
|
ebli ^= 0x01;
|
|
if (ebli & 0x01) pre = '(?) ';
|
|
$('#pth').removeClass('serr');
|
|
$('#pth').addClass('stou');
|
|
} else {
|
|
ebli = 0;
|
|
$('#pth').removeClass('serr stou');
|
|
pre = '';
|
|
}
|
|
//$('#pt_v').html(pre + $('#pth').data('title') + dmxsnf);
|
|
if (opre != pre) ptit('');
|
|
eblio = ebli;
|
|
},1000);
|
|
$('#idnt').click(function() {
|
|
idntb.toggleClass('a');
|
|
do_ajax('/rdmi',{s:idntb.hasClass('a') ? 1:0},function(json) {});
|
|
});
|
|
});
|
|
|
|
|
|
function get_cookie(n,d,ti=false) {
|
|
var r = d;
|
|
var c = document.cookie.split(';');
|
|
c.forEach(function(v,i) {
|
|
v = v.split('=');
|
|
if (v[0].trim() == n) {
|
|
if (ti) {
|
|
const par = parseInt(v[1].trim());
|
|
if (!isNaN(par)) {
|
|
r = par;
|
|
}
|
|
} else r = v[1].trim();
|
|
}
|
|
});
|
|
return r;
|
|
}
|
|
|
|
function mhdr_status(c) {
|
|
|
|
if (c.length == 0) $('#cfg-modal .modal-header').removeClass('suc err');
|
|
else $('#cfg-modal .modal-header').addClass(c);
|
|
}
|
|
|
|
function loader(a) {
|
|
|
|
if (a) $('#cfg-modal .modal-header img').addClass('loader');
|
|
else $('#cfg-modal .modal-header img').removeClass('loader');
|
|
}
|
|
|
|
function do_ajax(p_url,p_data,f,i = -1,a = true) {
|
|
|
|
$.ajax({
|
|
url: p_url,
|
|
type: 'POST',
|
|
data: p_data,
|
|
dataType: 'json',
|
|
async: a,
|
|
success: function (json) {
|
|
f(json,i);
|
|
},
|
|
error: function () {
|
|
// console.log('do_ajax error');
|
|
f();
|
|
},
|
|
timeout:2000
|
|
});
|
|
}
|
|
|
|
function copy_form_values(dir) {
|
|
|
|
$('#m-b input:text, #m-b input[type=range]').each(function() {
|
|
var id = $(this).attr('id');
|
|
if (dir == 0) $('#' + id + '_v').html($('#' + id).val());
|
|
else $('#' + id).val($('#' + id + '_v').html());
|
|
});
|
|
$('#m-b select').each(function() {
|
|
var id = $(this).attr('id');
|
|
text = $('#' + id + '_v').html();
|
|
if (dir == 1) {
|
|
$(this).find('option').filter(function () { return $(this).html() == text; }).attr('selected', 'selected');
|
|
} else {
|
|
$('#' + id + '_v').html($(this).find('option:selected').html());
|
|
}
|
|
});
|
|
$('#m-b input:radio').each(function() {
|
|
var id = $(this).attr('name');
|
|
text = $('#' + id + '_v').html();
|
|
label = $(this).parent().find('label').html();
|
|
if (dir == 1) {
|
|
if (label == text) $(this).attr('checked','checked');
|
|
} else {
|
|
if ($(this).is(':checked')) $('#' + id + '_v').html(label);
|
|
}
|
|
|
|
});
|
|
if (dir == 1) {
|
|
$('#m-b div.form-group').each(function() {
|
|
var len = $(this).find('div.invalid-feedback').length;
|
|
if (len == 0) {
|
|
$(this).append('<div class="invalid-feedback">Wrong value!</div>');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function fill_values(d,ids) {
|
|
|
|
for (i = 0; i < ids.length; i++) {
|
|
$('#' + ids[i] + '_v').html(d[ids[i]]);
|
|
}
|
|
}
|
|
|
|
function show_errors(s,ids) {
|
|
|
|
if (s) mhdr_status('err');
|
|
for (i = 0; i < ids.length; i++) {
|
|
if (s & (1 << i)) $('#' + ids[i]).addClass('is-invalid').removeClass('is-valid');
|
|
else $('#' + ids[i]).removeClass('is-invalid').addClass('is-valid');
|
|
}
|
|
}
|
|
|
|
function close_modal() {
|
|
|
|
setTimeout(function() {
|
|
$('#m-b').empty();
|
|
$('#cfg-modal').modal('hide');
|
|
},500);
|
|
}
|
|
|
|
function pv(p) {
|
|
|
|
var s = '';
|
|
|
|
for (var i in p) {
|
|
var o = p[i];
|
|
if (i == 0) s += o + '=';
|
|
else s += '&' + o + '=';
|
|
if ($('#' + o).val() != undefined) s += $('#' + o).val();
|
|
else if ($('input[name=' + o + ']:checked').val() != undefined) s += $('input[name=' + o + ']:checked').val();
|
|
}
|
|
|
|
return s;
|
|
}
|
|
|
|
function c_txt(n,t,e,c = '',it = 'text') {
|
|
|
|
var html = '<div class="form-group' + c + '">';
|
|
html += '<label for="' + n + '" class="col-form-label">' + t + '</label>';
|
|
html += '<input type="'+ it +'" class="form-control" id="' + n + '">';
|
|
html += e.length > 0 ? '<div class="invalid-feedback">' + e + '</div>' : '';
|
|
html += '</div>';
|
|
|
|
return html;
|
|
}
|
|
|
|
function c_btn(t,v,c) {
|
|
|
|
return '<button class="btn btn-primary btn-block' + c + '" value="' + v + '">' + t + '</button>';
|
|
}
|
|
|
|
function c_opt(n,t,o,pl,vp,lp,e) {
|
|
|
|
var html = '<div class="form-group">';
|
|
html += '<label for="' + n + '" class="col-form-label">' + t + '</label>';
|
|
html += '<select class="form-control" id="' + n + '">';
|
|
var l = o.length;
|
|
var li = l;
|
|
if (l == 1) li = o[0];
|
|
for (i = 0; i < li; i++) {
|
|
if (l == 1) html += '<option value="' + (i + vp) + '">'+ pl + (i + lp) + '</option>';
|
|
else html += '<option value="' + (i + vp) + '">'+ o[i] + '</option>';
|
|
}
|
|
html += '</select>';
|
|
html += e.length > 0 ? '<div class="invalid-feedback">' + e + '</div>' : '';
|
|
html += '</div>';
|
|
|
|
return html;
|
|
}
|
|
|
|
function c_rad(n,t,r,e,c) {
|
|
|
|
var html = '<div class="form-group' + c + '">';
|
|
html += '<legend class="col-form-label">' + t + '</legend>';
|
|
for (i = 0; i < r.length; i++) {
|
|
html += '<div class="form-check form-check-inline">';
|
|
html += '<input class="form-check-input" type="radio" name="' + n + '" value="' + i + '" id="' + n + (i + 1) + '">';
|
|
html += '<label class="form-check-label" for="' + n + (i + 1) + '">' + r[i] + '</label>';
|
|
html += '</div>';
|
|
}
|
|
html += e.length > 0 ? '<div class="invalid-feedback">' + e + '</div>' : '';
|
|
html += '</div>';
|
|
|
|
return html;
|
|
}
|
|
|
|
function box(t,id,p,su = '',vid = '',bc = '') {
|
|
|
|
var s = '';
|
|
|
|
s += '<div class="col-md-6 col-xl-4 box-c' + bc + '">';
|
|
if (id >= 0) s += '<h2>' + t + '<a class="cfg" onclick="open_modal(' + id + ');"><img src="../files/settings.svg"></a></h2>';
|
|
else s += '<h2>' + t + '</h2>';
|
|
s += '<div class="box">';
|
|
for (var j in p) {
|
|
if (p[j][0].length > 0) s += '<h3>' + p[j][0] + '</h3>';
|
|
s += '<ul class="group">';
|
|
for (var i in p[j][1]) {
|
|
l = p[j][1][i].split(";");
|
|
if (l.length == 4) s += l[0];
|
|
else s += '<li>' + l[0] + '</li>';
|
|
}
|
|
s += '</ul>';
|
|
s += '<ul class="group vals" id="' + vid + '">';
|
|
for (var i in p[j][1]) {
|
|
l = p[j][1][i].split(";");
|
|
if (l.length == 4) {
|
|
var t = l[3].replace(/&DG/gi,'°');
|
|
s += t;
|
|
} else if (l.length == 3) s += l[2];
|
|
else if (l.length == 2) s += '<li><div id="' + l[1] + '_v">-</div></li>';
|
|
else s += '<li>-</li>';
|
|
}
|
|
s += '</ul>';
|
|
}
|
|
s += su;
|
|
s += '</div>';
|
|
s += '</div>';
|
|
|
|
return s;
|
|
}
|
|
|
|
function generateNavBar() {
|
|
var o = '<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-dark">';
|
|
|
|
o += '<div class="container">';
|
|
o += '<a class="navbar-brand" href="./index.html"><img src="../files/robe_logo_white.svg"></a>';
|
|
o += '<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">';
|
|
o += '<span class="navbar-toggler-icon"></span>';
|
|
o += '</button>';
|
|
o += '<div class="collapse navbar-collapse" id="navbar">';
|
|
o += '<ul class="navbar-nav mr-auto">';
|
|
o += '<li class="nav-item">';
|
|
o += '<a class="nav-link" href="./index.html">Status</a>';
|
|
o += '</li>';
|
|
o += '<li class="nav-item">';
|
|
o += '<a class="nav-link" href="./personality.html">Personality</a>';
|
|
o += '</li>';
|
|
o += '<li class="nav-item">';
|
|
o += '<a class="nav-link" href="./logs.html">Logs</a>';
|
|
|
|
o += '</li>';
|
|
o += '<li class="nav-item snz">';
|
|
o += '<a class="nav-link" href="./sensors.html">RAINS logs</a>';
|
|
o += '</li>';
|
|
|
|
o += '<li class="nav-item">';
|
|
o += '<a class="nav-link" href="./discovery.html">Discovery</a>';
|
|
o += '</li>';
|
|
o += '<li class="nav-item">';
|
|
o += '<a class="nav-link" href="#" id="scfg">Settings</a>';
|
|
o += '</li>';
|
|
o += '<li class="nav-item">';
|
|
o += '<a class="nav-link" href="#" id="idnt"><img class="rdmi" src="../files/identify.svg"></a>';
|
|
o += '</li>';
|
|
o += '</ul>';
|
|
|
|
o += '</div>';
|
|
o += '</div>';
|
|
o += '</nav>';
|
|
|
|
o += '<div class="fixed-top text-center device-label" id="pth"></div>';
|
|
|
|
o += '<div class="container-fluid in">';
|
|
o += '<h1></h1>';
|
|
o += '<div class="row" id="boxes"></div>';
|
|
o += '</div>';
|
|
|
|
o += '<div id="cfg-modal" class="modal fade" tabindex="-1" role="dialog">';
|
|
o += '<div class="modal-dialog" role="document">';
|
|
o += '<div class="modal-content">';
|
|
o += '<div class="modal-header">';
|
|
o += '<img src="../files/settings.svg">';
|
|
o += '<h5 class="modal-title" id="m-t"></h5>';
|
|
o += '<button type="button" class="close" data-dismiss="modal" aria-label="Close">';
|
|
o += '<span aria-hidden="true">×</span>';
|
|
o += '</button>';
|
|
o += '</div>';
|
|
o += '<div class="modal-body" id="m-b">';
|
|
o += '</div>';
|
|
o += '<div class="modal-footer" id="m-f">';
|
|
o += '<button type="button" class="btn btn-primary sb">Save</button>';
|
|
o += '</div>';
|
|
o += '</div>';
|
|
o += '</div>';
|
|
o += '</div>';
|
|
|
|
return o;
|
|
}
|
|
|
|
|
|
var pre = '';
|
|
var dmxsnf = '';
|
|
|
|
function ptit(t) {
|
|
// console.log('setting title to ' + t);
|
|
|
|
if (t == $('#pth').data('title')) return;
|
|
|
|
// console.log('set');
|
|
|
|
if (t.length) $('#pth').data('title',t);
|
|
$('#pth').html($('#pth').data('title') + dmxsnf);
|
|
$('#pt_v').html(pre + $('#pth').html());
|
|
|
|
// console.log($('#pth').html());
|
|
}
|
|
|
|
function c_dt(n,t,e,c,it) {
|
|
|
|
var html = '<div class="form-group' + c + '">';
|
|
html += '<label for="' + n + '" class="col-form-label">' + t + '</label>';
|
|
html += '</div><div class="form-group' + c + '">';
|
|
html += '<input type="' + it + '" class="form-control" id="' + n + '" step="1">';
|
|
html += e.length > 0 ? '<div class="invalid-feedback">' + e + '</div>' : '';
|
|
html += '</div>';
|
|
|
|
return html;
|
|
}
|
|
|
|
function c_fsens(i,t,u) {
|
|
|
|
var html = '';
|
|
html += '<div class="form-row">';
|
|
html += '<div class="form-group col-auto"><label class="col-form-label" id="tl' + i + '" for="fts' + i + '">' + t + '</label></div>';
|
|
html += '<div class="form-group col-auto"><select class="form-control" id="fts' + i + '">';
|
|
html += '<option value="0">-</option><option value="1">=</option><option value="2"><</option><option value="3">></option>';
|
|
html += '<option value="4"><=</option><option value="5">>=</option>';
|
|
html += '</select></div>';
|
|
html += '<div class="form-group col-auto"><input type="text" class="form-control" size="5" id="ftv' + i + '"></div>';
|
|
html += '<div class="form-group col-auto"><label class="col-form-label" for="ftv' + i + '">' + u + '</label></div>';
|
|
html += '</div>';
|
|
|
|
return html;
|
|
} |