krateng/maloja

// duplicate this info for now, don't know if there is a better way than sending messages
var pages = {
    "plex":"Plex",
    "ytmusic":"YouTube Music",
    "spotify":"Spotify",
    "bandcamp":"Bandcamp",
    "soundcloud":"Soundcloud",
    "navidrome":"Navidrome"
}

var config_defaults = {
    serverurl:"http://localhost:42010",
    apikey:"BlackPinkInYourArea"
}

for (var key in pages) {
    config_defaults["service_active_" + key] = true;
}


document.addEventListener("DOMContentLoaded",function() {

    var sitelist = document.getElementById("sitelist");


    for (var identifier in pages) {
        sitelist.append(document.createElement('br'));
        var checkbox = document.createElement('input');
        checkbox.type = "checkbox";
        checkbox.id = "service_active_" + identifier;
        var label = document.createElement('label');
        label.for = checkbox.id;
        label.textContent = pages[identifier];
        sitelist.appendChild(checkbox);
        sitelist.appendChild(label);

        checkbox.addEventListener("change",toggleSite);

    }



    document.getElementById("serverurl").addEventListener("change",checkServer);
    document.getElementById("apikey").addEventListener("change",checkServer);

    document.getElementById("serverurl").addEventListener("focusout",checkServer);
    document.getElementById("apikey").addEventListener("focusout",checkServer);

    document.getElementById("serverurl").addEventListener("input",saveServer);
    document.getElementById("apikey").addEventListener("input",saveServer);


    chrome.runtime.onMessage.addListener(onInternalMessage);

    chrome.storage.local.get(config_defaults,function(result){
        console.log(result);
        for (var key in result) {

            // booleans
            if (result[key] == true || result[key] == false) {
                document.getElementById(key).checked = result[key];
            }

            // text
            else{
                document.getElementById(key).value = result[key];
            }

        }
        checkServer();
    })

    chrome.runtime.sendMessage({"type":"query"})



});

function toggleSite(evt) {
    var element = evt.target;
    chrome.storage.local.set({ [element.id]: element.checked });
}


function onInternalMessage(request,sender) {
    if (request.type == "response") {
        players = request.content
        html = "";
        for (var i=0;i<players.length;i++) {
            if (players[i][1]) {
                html += "<li>" + players[i][0] + ": " + players[i][1] + " - " + players[i][2]
            }
            else {
                html += "<li>" + players[i][0] + ": Playing nothing"
            }
        }
        document.getElementById("playinglist").innerHTML = html;
    }
}



function saveServer() {
    for (var key of ["serverurl","apikey"]) {
        var value = document.getElementById(key).value;
        chrome.storage.local.set({ [key]: value });
    }
}

function checkServer() {
    url = document.getElementById("serverurl").value + "/api/test?key=" + document.getElementById("apikey").value

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = createCheckmarks;
    try {
        xhttp.open("GET",url,true);
        xhttp.send();
    }
    catch (e) {
        //document.getElementById("checkmark_url").innerHTML = "❌"
        //document.getElementById("checkmark_key").innerHTML = "❌"
        document.getElementById("serverurl").style.backgroundColor = "red"
        document.getElementById("apikey").style.backgroundColor = "red"
    }

}

function createCheckmarks() {
    if (this.readyState == 4) {
        if ((this.status >= 200) && (this.status < 300)) {
            //document.getElementById("checkmark_url").innerHTML = "✔️"
            //document.getElementById("checkmark_key").innerHTML = "✔️"
            document.getElementById("serverurl").style.backgroundColor = "lawngreen"
            document.getElementById("apikey").style.backgroundColor = "lawngreen"
        }
        else if (this.status == 403) {
            //document.getElementById("checkmark_url").innerHTML = "✔️"
            //document.getElementById("checkmark_key").innerHTML = "❌"
            document.getElementById("serverurl").style.backgroundColor = "lawngreen"
            document.getElementById("apikey").style.backgroundColor = "red"
        }
        else {
            //document.getElementById("checkmark_url").innerHTML = "❌"
            //document.getElementById("checkmark_key").innerHTML = "❌"
            document.getElementById("serverurl").style.backgroundColor = "red"
            document.getElementById("apikey").style.backgroundColor = "red"
        }
    }
}