squeezelite-esp32/components/wifi-manager/code.js

// First, checks if it isn't implemented yet.
if (!String.prototype.format) {
  String.prototype.format = function() {
    var args = arguments;
    return this.replace(/{(\d+)}/g, function(match, number) { 
      return typeof args[number] != 'undefined'
        ? args[number]
        : match
      ;
    });
  };
}

var releaseURL = 'https://api.github.com/repos/sle118/squeezelite-esp32/releases';
var recovery = false;
var enableAPTimer = true;
var enableStatusTimer = true;
var commandHeader = 'squeezelite -b 500:2000 -d all=info ';
var pname, ver, otapct;

var apList = null;
var selectedSSID = "";
var refreshAPInterval = null; 
var checkStatusInterval = null;

var StatusIntervalActive = false;
var RefreshAPIIntervalActive = false;

var output = '';

function stopCheckStatusInterval(){
	if(checkStatusInterval != null){
		clearTimeout(checkStatusInterval);
		checkStatusInterval = null;
	}
	StatusIntervalActive = false;
}

function stopRefreshAPInterval(){
	if(refreshAPInterval != null){
		 clearTimeout(refreshAPInterval);
		refreshAPInterval = null;
	}
	RefreshAPIIntervalActive = false;
}

function startCheckStatusInterval(){
	StatusIntervalActive = true;
	checkStatusInterval = setTimeout(checkStatus, 950);
}

function startRefreshAPInterval(){
	RefreshAPIIntervalActive = true;
	refreshAPInterval = setTimeout(refreshAP, 2800);
}

function RepeatCheckStatusInterval(){
	if(StatusIntervalActive)
		startCheckStatusInterval();
}

function RepeatRefreshAPInterval(){
	if(RefreshAPIIntervalActive)
		startRefreshAPInterval();
}

$(document).ready(function(){
	$("#wifi-status").on("click", ".ape", function() {
		$( "#wifi" ).slideUp( "fast", function() {});
		$( "#connect-details" ).slideDown( "fast", function() {});
	});

	$("#manual_add").on("click", ".ape", function() {
		selectedSSID = $(this).text();
		$( "#ssid-pwd" ).text(selectedSSID);
		$( "#wifi" ).slideUp( "fast", function() {});
		$( "#connect_manual" ).slideDown( "fast", function() {});
		$( "#connect" ).slideUp( "fast", function() {});

		//update wait screen
		$( "#loading" ).show();
		$( "#connect-success" ).hide();
		$( "#connect-fail" ).hide();
	});

	$("#wifi-list").on("click", ".ape", function() {
		selectedSSID = $(this).text();
		$( "#ssid-pwd" ).text(selectedSSID);
		$( "#wifi" ).slideUp( "fast", function() {});
		$( "#connect_manual" ).slideUp( "fast", function() {});
		$( "#connect" ).slideDown( "fast", function() {});
		
		//update wait screen
		$( "#loading" ).show();
		$( "#connect-success" ).hide();
		$( "#connect-fail" ).hide();		
	});
	
	$("#cancel").on("click", function() {
		selectedSSID = "";
		$( "#connect" ).slideUp( "fast", function() {});
		$( "#connect_manual" ).slideUp( "fast", function() {});
		$( "#wifi" ).slideDown( "fast", function() {});
	});

	$("#manual_cancel").on("click", function() {
		selectedSSID = "";
		$( "#connect" ).slideUp( "fast", function() {});
		$( "#connect_manual" ).slideUp( "fast", function() {});
		$( "#wifi" ).slideDown( "fast", function() {});
	});
	
	$("#join").on("click", function() {
		performConnect();
	});

	$("#manual_join").on("click", function() {
		performConnect($(this).data('connect'));
	});
	
	$("#ok-details").on("click", function() {
		$( "#connect-details" ).slideUp( "fast", function() {});
		$( "#wifi" ).slideDown( "fast", function() {});
		
	});
	
	$("#ok-credits").on("click", function() {
		$( "#credits" ).slideUp( "fast", function() {});
		$( "#app" ).slideDown( "fast", function() {});
	});
	
	$("#acredits").on("click", function(event) {
		event.preventDefault();
		$( "#app" ).slideUp( "fast", function() {});
		$( "#credits" ).slideDown( "fast", function() {});
	});
	
	$("#ok-connect").on("click", function() {
		$( "#connect-wait" ).slideUp( "fast", function() {});
		$( "#wifi" ).slideDown( "fast", function() {});
	});
	
	$("#disconnect").on("click", function() {
		$( "#connect-details-wrap" ).addClass('blur');
		$( "#diag-disconnect" ).slideDown( "fast", function() {});
	});
	
	$("#no-disconnect").on("click", function() {
		$( "#diag-disconnect" ).slideUp( "fast", function() {});
		$( "#connect-details-wrap" ).removeClass('blur');
	});
	
	$("#yes-disconnect").on("click", function() {
		stopCheckStatusInterval();
		selectedSSID = "";
		
		$( "#diag-disconnect" ).slideUp( "fast", function() {});
		$( "#connect-details-wrap" ).removeClass('blur');
		
		$.ajax({
			url: '/connect.json',
			dataType: 'json',
			method: 'DELETE',
			cache: false,
			data: { 'timestamp': Date.now()}
		});

		startCheckStatusInterval();
		
		$( "#connect-details" ).slideUp( "fast", function() {});
		$( "#wifi" ).slideDown( "fast", function() {})
	});
	
	$("#autoexec-cb").on("click", function() {
        autoexec = (this.checked)?1:0;
        $.ajax({
            url: '/config.json',
            dataType: 'json',
            method: 'POST',
            cache: false,
            headers: { "X-Custom-autoexec": autoexec },
            data: { 'timestamp': Date.now() }
        });
        console.log('sent config JSON with headers:', autoexec);
        console.log('now triggering reboot');
        $.ajax({
            url: '/reboot.json',
            dataType: 'json',
            method: 'POST',
            cache: false,
            data: { 'timestamp': Date.now()}
        });
    });

	$("#save-autoexec1").on("click", function() {
        autoexec1 = $("#autoexec1").val();
        
        $.ajax({
            url: '/config.json',
            dataType: 'json',
            method: 'POST',
            cache: false,
            headers: { "X-Custom-autoexec1": autoexec1 },
            data: { 'timestamp': Date.now() }
        });
        console.log('sent config JSON with headers:', autoexec1);
    });

	$("#flash").on("click", function() {
        var url = $("#fwurl").val();
        $.ajax({
            url: '/config.json',
            dataType: 'json',
            method: 'POST',
            cache: false,
            headers: { "X-Custom-fwurl": url },
            data: { 'timestamp': Date.now() }
        });
    });

	$("#generate-command").on("click", function() {
        var commandLine = commandHeader + '-n ' + $("#player").val();

        if (output == 'bt') {
            commandLine += ' -o "BT -n \'' + $("#btsink").val() + '\'" -R -Z 192000';
        } else if (output == 'spdif') {
            commandLine += ' -o SPDIF -R -Z 192000';
        } else {
            commandLine += ' -o I2S';
        }
        if ($("#optional").val() != '') {
            commandLine += ' ' + $("#optional").val();
        }
        $("#autoexec1").val(commandLine);
	});	

    $('[name=audio]').on("click", function(){
        if (this.id == 'bt') {
            $("#btsinkdiv").show(200);
            output = 'bt';
        } else if (this.id == 'spdif') {
            $("#btsinkdiv").hide(200);
            output = 'spdif';
        } else {
            $("#btsinkdiv").hide(200);
            output = 'i2s';
        }
   	});

    $('#fwcheck').on("click", function(){
        $("#releaseTable").html("");
        $.getJSON(releaseURL, function(data) {
            data.forEach(function(release) {
                var url = '';
                release.assets.forEach(function(asset) {
                    if (asset.name.match(/\.bin$/)) {
                        url = asset.browser_download_url;
                    }
                });
                var [ver, idf, cfg, branch] = release.name.split('#');
                var body = release.body.replace(/\\n/ig, "<br />").replace(/\'/ig, "\"");
                $("#releaseTable").append(
                    "<tr>"+
                      "<td data-toggle='tooltip' title='"+body+"'>"+ver+"</td>"+
                      "<td>"+idf+"</td>"+
                      "<td>"+cfg+"</td>"+
                      "<td>"+branch+"</td>"+
                      "<td><input id='generate-command' type='button' class='btn btn-success' value='Select' data-url='"+url+"' onclick='setURL(this);' /></td>"+
                    "</tr>"
                );
            });
        })
        .fail(function() {
            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',
    });
});

function setURL(button) {
    var url = button.dataset.url;
    $("#fwurl").val(url);

    $('[data-url^="http"]').addClass("btn-success").removeClass("btn-danger");
    $('[data-url="'+url+'"]').addClass("btn-danger").removeClass("btn-success");
}

function performConnect(conntype){
	//stop the status refresh. This prevents a race condition where a status 
	//request would be refreshed with wrong ip info from a previous connection
	//and the request would automatically shows as succesful.
	stopCheckStatusInterval();
	
	//stop refreshing wifi list
	stopRefreshAPInterval();

	var pwd;
	if (conntype == 'manual') {
		//Grab the manual SSID and PWD
		selectedSSID=$('#manual_ssid').val();
		pwd = $("#manual_pwd").val();
	}else{
		pwd = $("#pwd").val();
	}
	//reset connection 
	$( "#loading" ).show();
	$( "#connect-success" ).hide();
	$( "#connect-fail" ).hide();
	
	$( "#ok-connect" ).prop("disabled",true);
	$( "#ssid-wait" ).text(selectedSSID);
	$( "#connect" ).slideUp( "fast", function() {});
	$( "#connect_manual" ).slideUp( "fast", function() {});
	$( "#connect-wait" ).slideDown( "fast", function() {});
	
	
	$.ajax({
		url: '/connect.json',
		dataType: 'json',
		method: 'POST',
		cache: false,
		headers: { 'X-Custom-ssid': selectedSSID, 'X-Custom-pwd': pwd },
		data: { 'timestamp': Date.now()}
	});


	//now we can re-set the intervals regardless of result
	startCheckStatusInterval();
	startRefreshAPInterval();
}

function rssiToIcon(rssi){
	if(rssi >= -60){
		return 'w0';
	}
	else if(rssi >= -67){
		return 'w1';
	}
	else if(rssi >= -75){
		return 'w2';
	}
	else{
		return 'w3';
	}
}

function refreshAP(){
    if (!enableAPTimer) return;
	$.getJSON( "/ap.json", function( data ) {
		if(data.length > 0){
			//sort by signal strength
			data.sort(function (a, b) {
				var x = a["rssi"]; var y = b["rssi"];
				return ((x < y) ? 1 : ((x > y) ? -1 : 0));
			});
			apList = data;
			refreshAPHTML(apList);
		}
	});
}

function refreshAPHTML(data){
	var h = "";
	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 += "\n";
	});
	
	$( "#wifi-list" ).html(h)
}

function checkStatus(){
	RepeatCheckStatusInterval();
    if (!enableStatusTimer) return;
	$.getJSON( "/status.json", function( data ) {
		if(data.hasOwnProperty('ssid') && data['ssid'] != ""){
			if(data["ssid"] === selectedSSID){
				//that's a connection attempt
				if(data["urc"] === 0){
					//got connection
					$("#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() {});
					
					//unlock the wait screen if needed
					$( "#ok-connect" ).prop("disabled",false);
					
					//update wait screen
					$( "#loading" ).hide();
					$( "#connect-success" ).append("<p>Your IP address now is: " + text(data["ip"]) + "</p>");
					$( "#connect-success" ).show();
					$( "#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');
					
					//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() {});
				}
                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() {});
			}
            enableAPTimer = true;
            enableStatusTimer = true;
        }
		if(data.hasOwnProperty('project_name') && data['project_name'] != ''){
            pname = data['project_name'];
            $("#mode").html(pname+" mode running "+ver);
        }
		if(data.hasOwnProperty('version') && data['version'] != ''){
            ver = data['version'];
        }
		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+'%');
        }
	})
	.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);
                }
            });
        }
	})
	.fail(function() {
		console.log("failed to fetch config!");
	});
}