mirror of
https://github.com/sle118/squeezelite-esp32.git
synced 2025-12-08 04:27:12 +03:00
CSS tuning
This commit is contained in:
Christian Herzog
@@ -1,14 +1,14 @@
|
|||||||
// First, checks if it isn't implemented yet.
|
// First, checks if it isn't implemented yet.
|
||||||
if (!String.prototype.format) {
|
if (!String.prototype.format) {
|
||||||
String.prototype.format = function() {
|
String.prototype.format = function() {
|
||||||
var args = arguments;
|
var args = arguments;
|
||||||
return this.replace(/{(\d+)}/g, function(match, number) {
|
return this.replace(/{(\d+)}/g, function(match, number) {
|
||||||
return typeof args[number] != 'undefined'
|
return typeof args[number] != 'undefined'
|
||||||
? args[number]
|
? args[number]
|
||||||
: match
|
: match
|
||||||
;
|
;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
var releaseURL = 'https://api.github.com/repos/sle118/squeezelite-esp32/releases';
|
var releaseURL = 'https://api.github.com/repos/sle118/squeezelite-esp32/releases';
|
||||||
@@ -30,149 +30,149 @@ var RefreshAPIIntervalActive = false;
|
|||||||
var output = '';
|
var output = '';
|
||||||
|
|
||||||
function stopCheckStatusInterval(){
|
function stopCheckStatusInterval(){
|
||||||
if(checkStatusInterval != null){
|
if(checkStatusInterval != null){
|
||||||
clearTimeout(checkStatusInterval);
|
clearTimeout(checkStatusInterval);
|
||||||
checkStatusInterval = null;
|
checkStatusInterval = null;
|
||||||
}
|
}
|
||||||
StatusIntervalActive = false;
|
StatusIntervalActive = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
function stopRefreshAPInterval(){
|
function stopRefreshAPInterval(){
|
||||||
if(refreshAPInterval != null){
|
if(refreshAPInterval != null){
|
||||||
clearTimeout(refreshAPInterval);
|
clearTimeout(refreshAPInterval);
|
||||||
refreshAPInterval = null;
|
refreshAPInterval = null;
|
||||||
}
|
}
|
||||||
RefreshAPIIntervalActive = false;
|
RefreshAPIIntervalActive = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
function startCheckStatusInterval(){
|
function startCheckStatusInterval(){
|
||||||
StatusIntervalActive = true;
|
StatusIntervalActive = true;
|
||||||
checkStatusInterval = setTimeout(checkStatus, 3000);
|
checkStatusInterval = setTimeout(checkStatus, 3000);
|
||||||
}
|
}
|
||||||
|
|
||||||
function startRefreshAPInterval(){
|
function startRefreshAPInterval(){
|
||||||
RefreshAPIIntervalActive = true;
|
RefreshAPIIntervalActive = true;
|
||||||
refreshAPInterval = setTimeout(refreshAP, 2800);
|
refreshAPInterval = setTimeout(refreshAP, 2800);
|
||||||
}
|
}
|
||||||
|
|
||||||
function RepeatCheckStatusInterval(){
|
function RepeatCheckStatusInterval(){
|
||||||
if(StatusIntervalActive)
|
if(StatusIntervalActive)
|
||||||
startCheckStatusInterval();
|
startCheckStatusInterval();
|
||||||
}
|
}
|
||||||
|
|
||||||
function RepeatRefreshAPInterval(){
|
function RepeatRefreshAPInterval(){
|
||||||
if(RefreshAPIIntervalActive)
|
if(RefreshAPIIntervalActive)
|
||||||
startRefreshAPInterval();
|
startRefreshAPInterval();
|
||||||
}
|
}
|
||||||
|
|
||||||
$(document).ready(function(){
|
$(document).ready(function(){
|
||||||
$("#wifi-status").on("click", ".ape", function() {
|
$("#wifi-status").on("click", ".ape", function() {
|
||||||
$( "#wifi" ).slideUp( "fast", function() {});
|
$( "#wifi" ).slideUp( "fast", function() {});
|
||||||
$( "#connect-details" ).slideDown( "fast", function() {});
|
$( "#connect-details" ).slideDown( "fast", function() {});
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#manual_add").on("click", ".ape", function() {
|
$("#manual_add").on("click", ".ape", function() {
|
||||||
selectedSSID = $(this).text();
|
selectedSSID = $(this).text();
|
||||||
$( "#ssid-pwd" ).text(selectedSSID);
|
$( "#ssid-pwd" ).text(selectedSSID);
|
||||||
$( "#wifi" ).slideUp( "fast", function() {});
|
$( "#wifi" ).slideUp( "fast", function() {});
|
||||||
$( "#connect_manual" ).slideDown( "fast", function() {});
|
$( "#connect_manual" ).slideDown( "fast", function() {});
|
||||||
$( "#connect" ).slideUp( "fast", function() {});
|
$( "#connect" ).slideUp( "fast", function() {});
|
||||||
|
|
||||||
//update wait screen
|
//update wait screen
|
||||||
$( "#loading" ).show();
|
$( "#loading" ).show();
|
||||||
$( "#connect-success" ).hide();
|
$( "#connect-success" ).hide();
|
||||||
$( "#connect-fail" ).hide();
|
$( "#connect-fail" ).hide();
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#wifi-list").on("click", ".ape", function() {
|
$("#wifi-list").on("click", ".ape", function() {
|
||||||
selectedSSID = $(this).text();
|
selectedSSID = $(this).text();
|
||||||
$( "#ssid-pwd" ).text(selectedSSID);
|
$( "#ssid-pwd" ).text(selectedSSID);
|
||||||
$( "#wifi" ).slideUp( "fast", function() {});
|
$( "#wifi" ).slideUp( "fast", function() {});
|
||||||
$( "#connect_manual" ).slideUp( "fast", function() {});
|
$( "#connect_manual" ).slideUp( "fast", function() {});
|
||||||
$( "#connect" ).slideDown( "fast", function() {});
|
$( "#connect" ).slideDown( "fast", function() {});
|
||||||
|
|
||||||
//update wait screen
|
//update wait screen
|
||||||
$( "#loading" ).show();
|
$( "#loading" ).show();
|
||||||
$( "#connect-success" ).hide();
|
$( "#connect-success" ).hide();
|
||||||
$( "#connect-fail" ).hide();
|
$( "#connect-fail" ).hide();
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#cancel").on("click", function() {
|
$("#cancel").on("click", function() {
|
||||||
selectedSSID = "";
|
selectedSSID = "";
|
||||||
$( "#connect" ).slideUp( "fast", function() {});
|
$( "#connect" ).slideUp( "fast", function() {});
|
||||||
$( "#connect_manual" ).slideUp( "fast", function() {});
|
$( "#connect_manual" ).slideUp( "fast", function() {});
|
||||||
$( "#wifi" ).slideDown( "fast", function() {});
|
$( "#wifi" ).slideDown( "fast", function() {});
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#manual_cancel").on("click", function() {
|
$("#manual_cancel").on("click", function() {
|
||||||
selectedSSID = "";
|
selectedSSID = "";
|
||||||
$( "#connect" ).slideUp( "fast", function() {});
|
$( "#connect" ).slideUp( "fast", function() {});
|
||||||
$( "#connect_manual" ).slideUp( "fast", function() {});
|
$( "#connect_manual" ).slideUp( "fast", function() {});
|
||||||
$( "#wifi" ).slideDown( "fast", function() {});
|
$( "#wifi" ).slideDown( "fast", function() {});
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#join").on("click", function() {
|
$("#join").on("click", function() {
|
||||||
performConnect();
|
performConnect();
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#manual_join").on("click", function() {
|
$("#manual_join").on("click", function() {
|
||||||
performConnect($(this).data('connect'));
|
performConnect($(this).data('connect'));
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#ok-details").on("click", function() {
|
$("#ok-details").on("click", function() {
|
||||||
$( "#connect-details" ).slideUp( "fast", function() {});
|
$( "#connect-details" ).slideUp( "fast", function() {});
|
||||||
$( "#wifi" ).slideDown( "fast", function() {});
|
$( "#wifi" ).slideDown( "fast", function() {});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#ok-credits").on("click", function() {
|
$("#ok-credits").on("click", function() {
|
||||||
$( "#credits" ).slideUp( "fast", function() {});
|
$( "#credits" ).slideUp( "fast", function() {});
|
||||||
$( "#app" ).slideDown( "fast", function() {});
|
$( "#app" ).slideDown( "fast", function() {});
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#acredits").on("click", function(event) {
|
$("#acredits").on("click", function(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
$( "#app" ).slideUp( "fast", function() {});
|
$( "#app" ).slideUp( "fast", function() {});
|
||||||
$( "#credits" ).slideDown( "fast", function() {});
|
$( "#credits" ).slideDown( "fast", function() {});
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#ok-connect").on("click", function() {
|
$("#ok-connect").on("click", function() {
|
||||||
$( "#connect-wait" ).slideUp( "fast", function() {});
|
$( "#connect-wait" ).slideUp( "fast", function() {});
|
||||||
$( "#wifi" ).slideDown( "fast", function() {});
|
$( "#wifi" ).slideDown( "fast", function() {});
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#disconnect").on("click", function() {
|
$("#disconnect").on("click", function() {
|
||||||
$( "#connect-details-wrap" ).addClass('blur');
|
$( "#connect-details-wrap" ).addClass('blur');
|
||||||
$( "#diag-disconnect" ).slideDown( "fast", function() {});
|
$( "#diag-disconnect" ).slideDown( "fast", function() {});
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#no-disconnect").on("click", function() {
|
$("#no-disconnect").on("click", function() {
|
||||||
$( "#diag-disconnect" ).slideUp( "fast", function() {});
|
$( "#diag-disconnect" ).slideUp( "fast", function() {});
|
||||||
$( "#connect-details-wrap" ).removeClass('blur');
|
$( "#connect-details-wrap" ).removeClass('blur');
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#yes-disconnect").on("click", function() {
|
$("#yes-disconnect").on("click", function() {
|
||||||
stopCheckStatusInterval();
|
stopCheckStatusInterval();
|
||||||
selectedSSID = "";
|
selectedSSID = "";
|
||||||
|
|
||||||
$( "#diag-disconnect" ).slideUp( "fast", function() {});
|
$( "#diag-disconnect" ).slideUp( "fast", function() {});
|
||||||
$( "#connect-details-wrap" ).removeClass('blur');
|
$( "#connect-details-wrap" ).removeClass('blur');
|
||||||
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: '/connect.json',
|
url: '/connect.json',
|
||||||
dataType: 'json',
|
dataType: 'json',
|
||||||
method: 'DELETE',
|
method: 'DELETE',
|
||||||
cache: false,
|
cache: false,
|
||||||
data: { 'timestamp': Date.now()}
|
data: { 'timestamp': Date.now()}
|
||||||
});
|
});
|
||||||
|
|
||||||
startCheckStatusInterval();
|
startCheckStatusInterval();
|
||||||
|
|
||||||
$( "#connect-details" ).slideUp( "fast", function() {});
|
$( "#connect-details" ).slideUp( "fast", function() {});
|
||||||
$( "#wifi" ).slideDown( "fast", function() {})
|
$( "#wifi" ).slideDown( "fast", function() {})
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#autoexec-cb").on("click", function() {
|
$("#autoexec-cb").on("click", function() {
|
||||||
autoexec = (this.checked)?1:0;
|
autoexec = (this.checked)?1:0;
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: '/config.json',
|
url: '/config.json',
|
||||||
@@ -193,7 +193,7 @@ $(document).ready(function(){
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#save-autoexec1").on("click", function() {
|
$("#save-autoexec1").on("click", function() {
|
||||||
autoexec1 = $("#autoexec1").val();
|
autoexec1 = $("#autoexec1").val();
|
||||||
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
@@ -207,7 +207,7 @@ $(document).ready(function(){
|
|||||||
console.log('sent config JSON with headers:', autoexec1);
|
console.log('sent config JSON with headers:', autoexec1);
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#save-gpio").on("click", function() {
|
$("#save-gpio").on("click", function() {
|
||||||
var headers = {};
|
var headers = {};
|
||||||
$("input.gpio").each(function() {
|
$("input.gpio").each(function() {
|
||||||
var id = $(this)[0].id;
|
var id = $(this)[0].id;
|
||||||
@@ -227,7 +227,7 @@ $(document).ready(function(){
|
|||||||
console.log('sent config JSON with headers:', JSON.stringify(headers));
|
console.log('sent config JSON with headers:', JSON.stringify(headers));
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#flash").on("click", function() {
|
$("#flash").on("click", function() {
|
||||||
var url = $("#fwurl").val();
|
var url = $("#fwurl").val();
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: '/config.json',
|
url: '/config.json',
|
||||||
@@ -239,7 +239,7 @@ $(document).ready(function(){
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#generate-command").on("click", function() {
|
$("#generate-command").on("click", function() {
|
||||||
var commandLine = commandHeader + '-n ' + $("#player").val();
|
var commandLine = commandHeader + '-n ' + $("#player").val();
|
||||||
|
|
||||||
if (output == 'bt') {
|
if (output == 'bt') {
|
||||||
@@ -253,7 +253,7 @@ $(document).ready(function(){
|
|||||||
commandLine += ' ' + $("#optional").val();
|
commandLine += ' ' + $("#optional").val();
|
||||||
}
|
}
|
||||||
$("#autoexec1").val(commandLine);
|
$("#autoexec1").val(commandLine);
|
||||||
});
|
});
|
||||||
|
|
||||||
$('[name=audio]').on("click", function(){
|
$('[name=audio]').on("click", function(){
|
||||||
if (this.id == 'bt') {
|
if (this.id == 'bt') {
|
||||||
@@ -266,7 +266,7 @@ $(document).ready(function(){
|
|||||||
$("#btsinkdiv").hide(200);
|
$("#btsinkdiv").hide(200);
|
||||||
output = 'i2s';
|
output = 'i2s';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#fwcheck').on("click", function(){
|
$('#fwcheck').on("click", function(){
|
||||||
$("#releaseTable").html("");
|
$("#releaseTable").html("");
|
||||||
@@ -280,262 +280,262 @@ $(document).ready(function(){
|
|||||||
});
|
});
|
||||||
var [ver, idf, cfg, branch] = release.name.split('#');
|
var [ver, idf, cfg, branch] = release.name.split('#');
|
||||||
var body = release.body.replace(/\\n/ig, "<br />").replace(/\'/ig, "\"");
|
var body = release.body.replace(/\\n/ig, "<br />").replace(/\'/ig, "\"");
|
||||||
var [date, time] = release.created_at.split('T');
|
var [date, time] = release.created_at.split('T');
|
||||||
if (ver.match(/esp-idf/)) return; //TODO delete
|
if (ver.match(/esp-idf/)) return; //TODO delete
|
||||||
$("#releaseTable").append(
|
$("#releaseTable").append(
|
||||||
"<tr>"+
|
"<tr>"+
|
||||||
"<td data-toggle='tooltip' title='"+body+"'>"+ver+"</td>"+
|
"<td data-toggle='tooltip' title='"+body+"'>"+ver+"</td>"+
|
||||||
"<td>"+idf+"</td>"+
|
"<td>"+idf+"</td>"+
|
||||||
"<td>"+date+"</td>"+
|
"<td>"+date+"</td>"+
|
||||||
"<td>"+cfg+"</td>"+
|
"<td>"+cfg+"</td>"+
|
||||||
"<td>"+branch+"</td>"+
|
"<td>"+branch+"</td>"+
|
||||||
"<td><input id='generate-command' type='button' class='btn btn-success' value='Select' data-url='"+url+"' onclick='setURL(this);' /></td>"+
|
"<td><input id='generate-command' type='button' class='btn btn-success' value='Select' data-url='"+url+"' onclick='setURL(this);' /></td>"+
|
||||||
"</tr>"
|
"</tr>"
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
.fail(function() {
|
.fail(function() {
|
||||||
alert("failed to fetch release history!");
|
alert("failed to fetch release history!");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
//first time the page loads: attempt to get the connection status and start the wifi scan
|
||||||
|
refreshAP();
|
||||||
|
getConfig();
|
||||||
|
|
||||||
|
//start timers
|
||||||
|
startCheckStatusInterval();
|
||||||
|
startRefreshAPInterval();
|
||||||
|
|
||||||
|
$('[data-toggle="tooltip"]').tooltip({
|
||||||
|
html: true,
|
||||||
|
placement : 'right',
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
|
||||||
//first time the page loads: attempt to get the connection status and start the wifi scan
|
|
||||||
refreshAP();
|
|
||||||
getConfig();
|
|
||||||
|
|
||||||
//start timers
|
|
||||||
startCheckStatusInterval();
|
|
||||||
startRefreshAPInterval();
|
|
||||||
|
|
||||||
$('[data-toggle="tooltip"]').tooltip({
|
|
||||||
html: true,
|
|
||||||
placement : 'right',
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
function setURL(button) {
|
function setURL(button) {
|
||||||
var url = button.dataset.url;
|
var url = button.dataset.url;
|
||||||
$("#fwurl").val(url);
|
$("#fwurl").val(url);
|
||||||
|
|
||||||
$('[data-url^="http"]').addClass("btn-success").removeClass("btn-danger");
|
$('[data-url^="http"]').addClass("btn-success").removeClass("btn-danger");
|
||||||
$('[data-url="'+url+'"]').addClass("btn-danger").removeClass("btn-success");
|
$('[data-url="'+url+'"]').addClass("btn-danger").removeClass("btn-success");
|
||||||
}
|
}
|
||||||
|
|
||||||
function performConnect(conntype){
|
function performConnect(conntype){
|
||||||
//stop the status refresh. This prevents a race condition where a status
|
//stop the status refresh. This prevents a race condition where a status
|
||||||
//request would be refreshed with wrong ip info from a previous connection
|
//request would be refreshed with wrong ip info from a previous connection
|
||||||
//and the request would automatically shows as succesful.
|
//and the request would automatically shows as succesful.
|
||||||
stopCheckStatusInterval();
|
stopCheckStatusInterval();
|
||||||
|
|
||||||
//stop refreshing wifi list
|
//stop refreshing wifi list
|
||||||
stopRefreshAPInterval();
|
stopRefreshAPInterval();
|
||||||
|
|
||||||
var pwd;
|
var pwd;
|
||||||
if (conntype == 'manual') {
|
if (conntype == 'manual') {
|
||||||
//Grab the manual SSID and PWD
|
//Grab the manual SSID and PWD
|
||||||
selectedSSID=$('#manual_ssid').val();
|
selectedSSID=$('#manual_ssid').val();
|
||||||
pwd = $("#manual_pwd").val();
|
pwd = $("#manual_pwd").val();
|
||||||
}else{
|
}else{
|
||||||
pwd = $("#pwd").val();
|
pwd = $("#pwd").val();
|
||||||
}
|
}
|
||||||
//reset connection
|
//reset connection
|
||||||
$( "#loading" ).show();
|
$( "#loading" ).show();
|
||||||
$( "#connect-success" ).hide();
|
$( "#connect-success" ).hide();
|
||||||
$( "#connect-fail" ).hide();
|
$( "#connect-fail" ).hide();
|
||||||
|
|
||||||
$( "#ok-connect" ).prop("disabled",true);
|
$( "#ok-connect" ).prop("disabled",true);
|
||||||
$( "#ssid-wait" ).text(selectedSSID);
|
$( "#ssid-wait" ).text(selectedSSID);
|
||||||
$( "#connect" ).slideUp( "fast", function() {});
|
$( "#connect" ).slideUp( "fast", function() {});
|
||||||
$( "#connect_manual" ).slideUp( "fast", function() {});
|
$( "#connect_manual" ).slideUp( "fast", function() {});
|
||||||
$( "#connect-wait" ).slideDown( "fast", function() {});
|
$( "#connect-wait" ).slideDown( "fast", function() {});
|
||||||
|
|
||||||
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: '/connect.json',
|
url: '/connect.json',
|
||||||
dataType: 'json',
|
dataType: 'json',
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
cache: false,
|
cache: false,
|
||||||
headers: { 'X-Custom-ssid': selectedSSID, 'X-Custom-pwd': pwd },
|
headers: { 'X-Custom-ssid': selectedSSID, 'X-Custom-pwd': pwd },
|
||||||
data: { 'timestamp': Date.now()}
|
data: { 'timestamp': Date.now()}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
//now we can re-set the intervals regardless of result
|
//now we can re-set the intervals regardless of result
|
||||||
startCheckStatusInterval();
|
startCheckStatusInterval();
|
||||||
startRefreshAPInterval();
|
startRefreshAPInterval();
|
||||||
}
|
}
|
||||||
|
|
||||||
function rssiToIcon(rssi){
|
function rssiToIcon(rssi){
|
||||||
if(rssi >= -60){
|
if(rssi >= -60){
|
||||||
return 'w0';
|
return 'w0';
|
||||||
}
|
}
|
||||||
else if(rssi >= -67){
|
else if(rssi >= -67){
|
||||||
return 'w1';
|
return 'w1';
|
||||||
}
|
}
|
||||||
else if(rssi >= -75){
|
else if(rssi >= -75){
|
||||||
return 'w2';
|
return 'w2';
|
||||||
}
|
}
|
||||||
else{
|
else{
|
||||||
return 'w3';
|
return 'w3';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function refreshAP(){
|
function refreshAP(){
|
||||||
if (!enableAPTimer) return;
|
if (!enableAPTimer) return;
|
||||||
$.getJSON( "/ap.json", function( data ) {
|
$.getJSON( "/ap.json", function( data ) {
|
||||||
if(data.length > 0){
|
if(data.length > 0){
|
||||||
//sort by signal strength
|
//sort by signal strength
|
||||||
data.sort(function (a, b) {
|
data.sort(function (a, b) {
|
||||||
var x = a["rssi"]; var y = b["rssi"];
|
var x = a["rssi"]; var y = b["rssi"];
|
||||||
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
|
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
|
||||||
});
|
});
|
||||||
apList = data;
|
apList = data;
|
||||||
refreshAPHTML(apList);
|
refreshAPHTML(apList);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function refreshAPHTML(data){
|
function refreshAPHTML(data){
|
||||||
var h = "";
|
var h = "";
|
||||||
data.forEach(function(e, idx, array) {
|
data.forEach(function(e, idx, array) {
|
||||||
h += '<div class="ape{0}"><div class="{1}"><div class="{2}">{3}</div></div></div>'.format(idx === array.length - 1?'':' brdb', rssiToIcon(e.rssi), e.auth==0?'':'pw',e.ssid);
|
h += '<div class="ape{0}"><div class="{1}"><div class="{2}">{3}</div></div></div>'.format(idx === array.length - 1?'':' brdb', rssiToIcon(e.rssi), e.auth==0?'':'pw',e.ssid);
|
||||||
h += "\n";
|
h += "\n";
|
||||||
});
|
});
|
||||||
|
|
||||||
$( "#wifi-list" ).html(h)
|
$( "#wifi-list" ).html(h)
|
||||||
}
|
}
|
||||||
|
|
||||||
function checkStatus(){
|
function checkStatus(){
|
||||||
RepeatCheckStatusInterval();
|
RepeatCheckStatusInterval();
|
||||||
if (!enableStatusTimer) return;
|
if (!enableStatusTimer) return;
|
||||||
if (blockAjax) return;
|
if (blockAjax) return;
|
||||||
blockAjax = true;
|
blockAjax = true;
|
||||||
$.getJSON( "/status.json", function( data ) {
|
$.getJSON( "/status.json", function( data ) {
|
||||||
if(data.hasOwnProperty('ssid') && data['ssid'] != ""){
|
if(data.hasOwnProperty('ssid') && data['ssid'] != ""){
|
||||||
if(data["ssid"] === selectedSSID){
|
if(data["ssid"] === selectedSSID){
|
||||||
//that's a connection attempt
|
//that's a connection attempt
|
||||||
if(data["urc"] === 0){
|
if(data["urc"] === 0){
|
||||||
//got connection
|
//got connection
|
||||||
$("#connected-to span").text(data["ssid"]);
|
$("#connected-to span").text(data["ssid"]);
|
||||||
$("#connect-details h1").text(data["ssid"]);
|
$("#connect-details h1").text(data["ssid"]);
|
||||||
$("#ip").text(data["ip"]);
|
$("#ip").text(data["ip"]);
|
||||||
$("#netmask").text(data["netmask"]);
|
$("#netmask").text(data["netmask"]);
|
||||||
$("#gw").text(data["gw"]);
|
$("#gw").text(data["gw"]);
|
||||||
$("#wifi-status").slideDown( "fast", function() {});
|
$("#wifi-status").slideDown( "fast", function() {});
|
||||||
$("span#foot-wifi").html(", SSID: "+data["ssid"]+", IP: "+data["ip"]);
|
$("span#foot-wifi").html(", SSID: <strong>"+data["ssid"]+"</strong>, IP: <strong>"+data["ip"]+"</strong>");
|
||||||
|
|
||||||
//unlock the wait screen if needed
|
//unlock the wait screen if needed
|
||||||
$( "#ok-connect" ).prop("disabled",false);
|
$( "#ok-connect" ).prop("disabled",false);
|
||||||
|
|
||||||
//update wait screen
|
//update wait screen
|
||||||
$( "#loading" ).hide();
|
$( "#loading" ).hide();
|
||||||
$( "#connect-success" ).append("<p>Your IP address now is: " + text(data["ip"]) + "</p>");
|
$( "#connect-success" ).append("<p>Your IP address now is: " + text(data["ip"]) + "</p>");
|
||||||
$( "#connect-success" ).show();
|
$( "#connect-success" ).show();
|
||||||
$( "#connect-fail" ).hide();
|
$( "#connect-fail" ).hide();
|
||||||
|
|
||||||
|
enableAPTimer = false;
|
||||||
|
if (!recovery) enableStatusTimer = false;
|
||||||
|
}
|
||||||
|
else if(data["urc"] === 1){
|
||||||
|
//failed attempt
|
||||||
|
$("#connected-to span").text('');
|
||||||
|
$("#connect-details h1").text('');
|
||||||
|
$("#ip").text('0.0.0.0');
|
||||||
|
$("#netmask").text('0.0.0.0');
|
||||||
|
$("#gw").text('0.0.0.0');
|
||||||
|
$("span#foot-wifi").html("");
|
||||||
|
|
||||||
|
//don't show any connection
|
||||||
|
$("#wifi-status").slideUp( "fast", function() {});
|
||||||
|
|
||||||
|
//unlock the wait screen
|
||||||
|
$( "#ok-connect" ).prop("disabled",false);
|
||||||
|
|
||||||
|
//update wait screen
|
||||||
|
$( "#loading" ).hide();
|
||||||
|
$( "#connect-fail" ).show();
|
||||||
|
$( "#connect-success" ).hide();
|
||||||
|
|
||||||
|
enableAPTimer = true;
|
||||||
|
enableStatusTimer = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if(data.hasOwnProperty('urc') && data['urc'] === 0){
|
||||||
|
//ESP32 is already connected to a wifi without having the user do anything
|
||||||
|
if( !($("#wifi-status").is(":visible")) ){
|
||||||
|
$("#connected-to span").text(data["ssid"]);
|
||||||
|
$("#connect-details h1").text(data["ssid"]);
|
||||||
|
$("#ip").text(data["ip"]);
|
||||||
|
$("#netmask").text(data["netmask"]);
|
||||||
|
$("#gw").text(data["gw"]);
|
||||||
|
$("#wifi-status").slideDown( "fast", function() {});
|
||||||
|
$("span#foot-wifi").html(", SSID: <strong>"+data["ssid"]+"</strong>, IP: <strong>"+data["ip"]+"</strong>");
|
||||||
|
}
|
||||||
enableAPTimer = false;
|
enableAPTimer = false;
|
||||||
if (!recovery) enableStatusTimer = false;
|
if (!recovery) enableStatusTimer = false;
|
||||||
}
|
|
||||||
else if(data["urc"] === 1){
|
|
||||||
//failed attempt
|
|
||||||
$("#connected-to span").text('');
|
|
||||||
$("#connect-details h1").text('');
|
|
||||||
$("#ip").text('0.0.0.0');
|
|
||||||
$("#netmask").text('0.0.0.0');
|
|
||||||
$("#gw").text('0.0.0.0');
|
|
||||||
$("span#foot-wifi").html("");
|
|
||||||
|
|
||||||
//don't show any connection
|
|
||||||
$("#wifi-status").slideUp( "fast", function() {});
|
|
||||||
|
|
||||||
//unlock the wait screen
|
|
||||||
$( "#ok-connect" ).prop("disabled",false);
|
|
||||||
|
|
||||||
//update wait screen
|
|
||||||
$( "#loading" ).hide();
|
|
||||||
$( "#connect-fail" ).show();
|
|
||||||
$( "#connect-success" ).hide();
|
|
||||||
|
|
||||||
enableAPTimer = true;
|
|
||||||
enableStatusTimer = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if(data.hasOwnProperty('urc') && data['urc'] === 0){
|
|
||||||
//ESP32 is already connected to a wifi without having the user do anything
|
|
||||||
if( !($("#wifi-status").is(":visible")) ){
|
|
||||||
$("#connected-to span").text(data["ssid"]);
|
|
||||||
$("#connect-details h1").text(data["ssid"]);
|
|
||||||
$("#ip").text(data["ip"]);
|
|
||||||
$("#netmask").text(data["netmask"]);
|
|
||||||
$("#gw").text(data["gw"]);
|
|
||||||
$("#wifi-status").slideDown( "fast", function() {});
|
|
||||||
$("span#foot-wifi").html(", SSID: "+data["ssid"]+", IP: "+data["ip"]);
|
|
||||||
}
|
|
||||||
enableAPTimer = false;
|
|
||||||
if (!recovery) enableStatusTimer = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if(data.hasOwnProperty('urc') && data['urc'] === 2){
|
|
||||||
//that's a manual disconnect
|
|
||||||
if($("#wifi-status").is(":visible")){
|
|
||||||
$("#wifi-status").slideUp( "fast", function() {});
|
|
||||||
$("span#foot-wifi").html("");
|
|
||||||
}
|
|
||||||
enableAPTimer = true;
|
|
||||||
enableStatusTimer = true;
|
|
||||||
}
|
|
||||||
if(data.hasOwnProperty('project_name') && data['project_name'] != ''){
|
|
||||||
pname = data['project_name'];
|
|
||||||
}
|
|
||||||
if(data.hasOwnProperty('version') && data['version'] != ''){
|
|
||||||
ver = data['version'];
|
|
||||||
$("span#foot-fw").html("fw: "+ver+", mode: "+pname);
|
|
||||||
}
|
|
||||||
if(data.hasOwnProperty('ota_pct') && data['ota_pct'] != 0){
|
|
||||||
otapct = data['ota_pct'];
|
|
||||||
$('.progress-bar').css('width', otapct+'%').attr('aria-valuenow', otapct);
|
|
||||||
$('.progress-bar').html(otapct+'%');
|
|
||||||
}
|
|
||||||
blockAjax = false;
|
|
||||||
})
|
|
||||||
.fail(function() {
|
|
||||||
//don't do anything, the server might be down while esp32 recalibrates radio
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function getConfig() {
|
|
||||||
$.getJSON("/config.json", function(data) {
|
|
||||||
if (data.hasOwnProperty('autoexec')) {
|
|
||||||
if (data["autoexec"] === 1) {
|
|
||||||
console.log('turn on autoexec');
|
|
||||||
$("#autoexec-cb")[0].checked=true;
|
|
||||||
} else {
|
|
||||||
console.log('turn off autoexec');
|
|
||||||
$("#autoexec-cb")[0].checked=false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (data.hasOwnProperty('recovery')) {
|
|
||||||
if (data["recovery"] === 1) {
|
|
||||||
recovery = true;
|
|
||||||
$("#otadiv").show();
|
|
||||||
enableStatusTimer = true;
|
|
||||||
} else {
|
|
||||||
recovery = false;
|
|
||||||
$("#otadiv").hide();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (data.hasOwnProperty('list')) {
|
|
||||||
data.list.forEach(function(line) {
|
|
||||||
let key = Object.keys(line)[0];
|
|
||||||
let val = Object.values(line)[0];
|
|
||||||
console.log(key, val);
|
|
||||||
if (key == 'autoexec1') {
|
|
||||||
$("#autoexec1").val(val);
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
else if(data.hasOwnProperty('urc') && data['urc'] === 2){
|
||||||
|
//that's a manual disconnect
|
||||||
|
if($("#wifi-status").is(":visible")){
|
||||||
|
$("#wifi-status").slideUp( "fast", function() {});
|
||||||
|
$("span#foot-wifi").html("");
|
||||||
|
}
|
||||||
|
enableAPTimer = true;
|
||||||
|
enableStatusTimer = true;
|
||||||
|
}
|
||||||
|
if(data.hasOwnProperty('project_name') && data['project_name'] != ''){
|
||||||
|
pname = data['project_name'];
|
||||||
|
}
|
||||||
|
if(data.hasOwnProperty('version') && data['version'] != ''){
|
||||||
|
ver = data['version'];
|
||||||
|
$("span#foot-fw").html("fw: <strong>"+ver+"</strong>, mode: <strong>"+pname+"</strong>");
|
||||||
|
}
|
||||||
|
if(data.hasOwnProperty('ota_pct') && data['ota_pct'] != 0){
|
||||||
|
otapct = data['ota_pct'];
|
||||||
|
$('.progress-bar').css('width', otapct+'%').attr('aria-valuenow', otapct);
|
||||||
|
$('.progress-bar').html(otapct+'%');
|
||||||
|
}
|
||||||
|
blockAjax = false;
|
||||||
|
})
|
||||||
|
.fail(function() {
|
||||||
|
//don't do anything, the server might be down while esp32 recalibrates radio
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
})
|
|
||||||
.fail(function() {
|
function getConfig() {
|
||||||
console.log("failed to fetch config!");
|
$.getJSON("/config.json", function(data) {
|
||||||
});
|
if (data.hasOwnProperty('autoexec')) {
|
||||||
}
|
if (data["autoexec"] === 1) {
|
||||||
|
console.log('turn on autoexec');
|
||||||
|
$("#autoexec-cb")[0].checked=true;
|
||||||
|
} else {
|
||||||
|
console.log('turn off autoexec');
|
||||||
|
$("#autoexec-cb")[0].checked=false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (data.hasOwnProperty('recovery')) {
|
||||||
|
if (data["recovery"] === 1) {
|
||||||
|
recovery = true;
|
||||||
|
$("#otadiv").show();
|
||||||
|
enableStatusTimer = true;
|
||||||
|
} else {
|
||||||
|
recovery = false;
|
||||||
|
$("#otadiv").hide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (data.hasOwnProperty('list')) {
|
||||||
|
data.list.forEach(function(line) {
|
||||||
|
let key = Object.keys(line)[0];
|
||||||
|
let val = Object.values(line)[0];
|
||||||
|
console.log(key, val);
|
||||||
|
if (key == 'autoexec1') {
|
||||||
|
$("#autoexec1").val(val);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.fail(function() {
|
||||||
|
console.log("failed to fetch config!");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|||||||
@@ -2,6 +2,8 @@ body {
|
|||||||
border: 0;
|
border: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom:50px;
|
margin-bottom:50px;
|
||||||
|
padding-left: 12px;
|
||||||
|
padding-right: 12px;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
color: darkblue;
|
color: darkblue;
|
||||||
@@ -25,7 +27,6 @@ button:focus {
|
|||||||
filter: blur(2px);
|
filter: blur(2px);
|
||||||
}
|
}
|
||||||
.ape {
|
.ape {
|
||||||
margin-left: 20px;
|
|
||||||
padding: 10px 0px 10px 10px;
|
padding: 10px 0px 10px 10px;
|
||||||
background-color: #444;
|
background-color: #444;
|
||||||
}
|
}
|
||||||
@@ -79,21 +80,18 @@ h3 {
|
|||||||
#manual_ssid {
|
#manual_ssid {
|
||||||
border: none;
|
border: none;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
margin-left: 35px;
|
|
||||||
padding: 10px 0px 10px 10px;
|
padding: 10px 0px 10px 10px;
|
||||||
display: block
|
display: block
|
||||||
}
|
}
|
||||||
#manual_pwd {
|
#manual_pwd {
|
||||||
border: none;
|
border: none;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
margin-left: 35px;
|
|
||||||
padding: 10px 0px 10px 10px;
|
padding: 10px 0px 10px 10px;
|
||||||
display: block
|
display: block
|
||||||
}
|
}
|
||||||
#pwd {
|
#pwd {
|
||||||
border: none;
|
border: none;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
margin-left: 35px;
|
|
||||||
padding: 10px 0px 10px 10px;
|
padding: 10px 0px 10px 10px;
|
||||||
display: block
|
display: block
|
||||||
}
|
}
|
||||||
@@ -108,7 +106,6 @@ h3 {
|
|||||||
}
|
}
|
||||||
#yes-disconnect {
|
#yes-disconnect {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-left: 20px;
|
|
||||||
}
|
}
|
||||||
#no-disconnect {
|
#no-disconnect {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@@ -220,9 +217,12 @@ input.gpio {
|
|||||||
height: 1.8em;
|
height: 1.8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.custom-switch {
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
.custom-switch, .custom-radio {
|
.custom-switch, .custom-radio {
|
||||||
padding-left: 2.25rem;
|
padding-left: 2.25rem;
|
||||||
margin-left: 12px;
|
|
||||||
padding-bottom: 1rem;
|
padding-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -273,7 +273,6 @@ textarea#autoexec1, textarea#fwurl {
|
|||||||
}
|
}
|
||||||
|
|
||||||
input, textarea {
|
input, textarea {
|
||||||
margin-left: 10px;
|
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
border-top: none;
|
border-top: none;
|
||||||
@@ -281,10 +280,6 @@ input, textarea {
|
|||||||
box-shadow: inset 0 1px 2px rgba(0,0,0,.39), 0 -1px 1px #FFF, 0 1px 0 #FFF;
|
box-shadow: inset 0 1px 2px rgba(0,0,0,.39), 0 -1px 1px #FFF, 0 1px 0 #FFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#otadiv {
|
#otadiv {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@@ -299,7 +294,6 @@ input, textarea {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#progress {
|
#progress {
|
||||||
margin-left: 13px;
|
|
||||||
width: 60%;
|
width: 60%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user