frontend improvements
This commit is contained in:
@@ -1,5 +1,26 @@
|
||||
/** Global generic init */
|
||||
$.ready(function () {
|
||||
// Checkbox UI (checkbox CSS and hidden input with int value)
|
||||
$('.Row.checkbox').forEach(function(x) {
|
||||
var inp = x.querySelector('input');
|
||||
var box = x.querySelector('.box');
|
||||
|
||||
$(box).toggleClass('checked', inp.value);
|
||||
|
||||
$(x).on('click', function() {
|
||||
inp.value = 1 - inp.value;
|
||||
$(box).toggleClass('checked', inp.value)
|
||||
});
|
||||
});
|
||||
|
||||
// Expanding boxes on mobile
|
||||
$('.Box.mobcol').forEach(function(x) {
|
||||
var h = x.querySelector('h2');
|
||||
$(h).on('click', function() {
|
||||
$(x).toggleClass('expanded');
|
||||
});
|
||||
});
|
||||
|
||||
// loader dots...
|
||||
setInterval(function () {
|
||||
$('.anim-dots').each(function (x) {
|
||||
@@ -12,12 +33,13 @@ $.ready(function () {
|
||||
|
||||
// flipping number boxes with the mouse wheel
|
||||
$('input[type=number]').on('mousewheel', function(e) {
|
||||
var val = +$(this).val();
|
||||
var $this = $(this);
|
||||
var val = +$this.val();
|
||||
if (isNaN(val)) val = 1;
|
||||
|
||||
var step = +($(this).attr('step') || 1);
|
||||
var min = +$(this).attr('min');
|
||||
var max = +$(this).attr('max');
|
||||
var step = +($this.attr('step') || 1);
|
||||
var min = +$this.attr('min');
|
||||
var max = +$this.attr('max');
|
||||
if(e.wheelDelta > 0) {
|
||||
val += step;
|
||||
} else {
|
||||
@@ -26,14 +48,14 @@ $.ready(function () {
|
||||
|
||||
if (typeof min != 'undefined') val = Math.max(val, +min);
|
||||
if (typeof max != 'undefined') val = Math.min(val, +max);
|
||||
$(this).val(val);
|
||||
$this.val(val);
|
||||
|
||||
if ("createEvent" in document) {
|
||||
var evt = document.createEvent("HTMLEvents");
|
||||
evt.initEvent("change", false, true);
|
||||
$(this)[0].dispatchEvent(evt);
|
||||
$this[0].dispatchEvent(evt);
|
||||
} else {
|
||||
$(this)[0].fireEvent("onchange");
|
||||
$this[0].fireEvent("onchange");
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
@@ -43,8 +65,5 @@ $.ready(function () {
|
||||
});
|
||||
|
||||
$._loader = function(vis) {
|
||||
if(vis)
|
||||
$('#loader').addClass('show');
|
||||
else
|
||||
$('#loader').removeClass('show');
|
||||
$('#loader').toggleClass('show', vis);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
(function (nt) {
|
||||
var sel = '#notif';
|
||||
|
||||
var hideTmeo1; // timeout to start hiding (transition)
|
||||
var hideTmeo2; // timeout to add the hidden class
|
||||
|
||||
nt.show = function (message, timeout) {
|
||||
$(sel).html(message);
|
||||
Modal.show(sel);
|
||||
|
||||
clearTimeout(hideTmeo1);
|
||||
clearTimeout(hideTmeo2);
|
||||
|
||||
if (undef(timeout)) timeout = 2500;
|
||||
|
||||
hideTmeo1 = setTimeout(nt.hide, timeout);
|
||||
};
|
||||
|
||||
nt.hide = function () {
|
||||
var $m = $(sel);
|
||||
$m.removeClass('visible');
|
||||
hideTmeo2 = setTimeout(function () {
|
||||
$m.addClass('hidden');
|
||||
}, 250); // transition time
|
||||
};
|
||||
|
||||
nt.init = function() {
|
||||
$(sel).on('click', function() {
|
||||
nt.hide(this);
|
||||
});
|
||||
};
|
||||
})(window.Notify = {});
|
||||
@@ -135,7 +135,7 @@
|
||||
H = obj.h;
|
||||
|
||||
/* Build screen & show */
|
||||
var e, cell, scr = qq('#screen');
|
||||
var e, cell, scr = qs('#screen');
|
||||
|
||||
// Empty the screen node
|
||||
while (scr.firstChild) scr.removeChild(scr.firstChild);
|
||||
@@ -281,7 +281,7 @@
|
||||
}
|
||||
});
|
||||
|
||||
qa('#buttons button').forEach(function(s) {
|
||||
qsa('#buttons button').forEach(function(s) {
|
||||
s.addEventListener('click', function() {
|
||||
sendBtnMsg(+this.dataset['n']);
|
||||
});
|
||||
|
||||
+19
-16
@@ -2,20 +2,16 @@
|
||||
function mk(e) {return document.createElement(e)}
|
||||
|
||||
/** Find one by query */
|
||||
function qq(s) {return document.querySelector(s)}
|
||||
function qs(s) {return document.querySelector(s)}
|
||||
|
||||
/** Find all by query */
|
||||
function qa(s) {return document.querySelectorAll(s)}
|
||||
function qsa(s) {return document.querySelectorAll(s)}
|
||||
|
||||
/** Convert any to bool safely */
|
||||
function bool(x) {
|
||||
return (x === 1 || x === '1' || x === true || x === 'true');
|
||||
}
|
||||
|
||||
function intval(x) {
|
||||
return parseInt(x);
|
||||
}
|
||||
|
||||
/** Extend an objects with options */
|
||||
function extend(defaults, options) {
|
||||
var target = {};
|
||||
@@ -36,23 +32,23 @@ function rgxe(str) {
|
||||
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
|
||||
}
|
||||
|
||||
/** Format number to N decimal places, output as string */
|
||||
function numfmt(x, places) {
|
||||
var pow = Math.pow(10, places);
|
||||
return Math.round(x*pow) / pow;
|
||||
}
|
||||
|
||||
function estimateLoadTime(fs, n) {
|
||||
return (1000/fs)*n+1500;
|
||||
}
|
||||
|
||||
/** Get millisecond timestamp */
|
||||
function msNow() {
|
||||
return +(new Date);
|
||||
}
|
||||
|
||||
/** Get ms elapsed since msNow() */
|
||||
function msElapsed(start) {
|
||||
return msNow() - start;
|
||||
}
|
||||
|
||||
/** Shim for log base 10 */
|
||||
Math.log10 = Math.log10 || function(x) {
|
||||
return Math.log(x) / Math.LN10;
|
||||
};
|
||||
@@ -93,15 +89,22 @@ String.prototype.format = function () {
|
||||
return out;
|
||||
};
|
||||
|
||||
/** HTML escape */
|
||||
function e(str) {
|
||||
return String(str)
|
||||
.replace(/&/g, '&')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>');
|
||||
return $.htmlEscape(str);
|
||||
}
|
||||
|
||||
/** Check for undefined */
|
||||
function undef(x) {
|
||||
return typeof x == 'undefined';
|
||||
}
|
||||
|
||||
/** Safe json parse */
|
||||
function jsp() {
|
||||
try {
|
||||
return JSON.parse(e);
|
||||
} catch(e) {
|
||||
console.error(e);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
+3
-53
@@ -11,9 +11,9 @@
|
||||
return;
|
||||
}
|
||||
|
||||
resp = JSON.parse(resp);
|
||||
resp = jsp(resp);
|
||||
|
||||
var done = !bool(resp.result.inProgress) && (resp.result.APs.length > 0);
|
||||
var done = resp && !bool(resp.result.inProgress) && (resp.result.APs.length > 0);
|
||||
rescan(done ? 15000 : 1000);
|
||||
if (!done) return; // no redraw yet
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
resp.result.APs.sort(function (a, b) {
|
||||
return b.rssi - a.rssi;
|
||||
}).forEach(function (ap) {
|
||||
ap.enc = intval(ap.enc);
|
||||
ap.enc = parseInt(ap.enc);
|
||||
|
||||
if (ap.enc > 4) return; // hide unsupported auths
|
||||
|
||||
@@ -124,55 +124,5 @@
|
||||
][obj.mode-1]);
|
||||
};
|
||||
|
||||
window.wifiConn = function () {
|
||||
var xhr = new XMLHttpRequest();
|
||||
var abortTmeo;
|
||||
|
||||
function getStatus() {
|
||||
xhr.open("GET", 'http://'+_root+"/wifi/connstatus");
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState == 4 && xhr.status >= 200 && xhr.status < 300) {
|
||||
clearTimeout(abortTmeo);
|
||||
var data = JSON.parse(xhr.responseText);
|
||||
var done = false;
|
||||
var msg = '...';
|
||||
|
||||
if (data.status == "idle") {
|
||||
msg = "Preparing to connect";
|
||||
}
|
||||
else if (data.status == "success") {
|
||||
msg = "Connected! Received IP " + data.ip + ".";
|
||||
done = true;
|
||||
}
|
||||
else if (data.status == "working") {
|
||||
msg = "Connecting to selected AP";
|
||||
}
|
||||
else if (data.status == "fail") {
|
||||
msg = "Connection failed, check your password and try again.";
|
||||
done = true;
|
||||
}
|
||||
|
||||
$("#status").html(msg);
|
||||
|
||||
if (done) {
|
||||
$('#backbtn').removeClass('hidden');
|
||||
$('.anim-dots').addClass('hidden');
|
||||
} else {
|
||||
window.setTimeout(getStatus, 1000);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
abortTmeo = setTimeout(function () {
|
||||
xhr.abort();
|
||||
$("#status").html("Telemetry lost, try reconnecting to the AP.");
|
||||
$('#backbtn').removeClass('hidden');
|
||||
$('.anim-dots').addClass('hidden');
|
||||
}, 4000);
|
||||
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
getStatus();
|
||||
};
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user