function play() {
    console.log("Play...");
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "play", true);
    xhttp.send();
}

function loadAvailableFiles() {
    console.log("Available files...");
    fetch("/available-files")
        .then(response => response.json())
        .then(data => {
            console.log("data", data);
            let dom = "";
            data.files.forEach(element => {
                if (element === data.selectedFile) {
                    dom += `<button class="w3-button w3-green" onclick="selectFile('${element}')">${element}</button>`;
                }
                else {
                    dom += `<button class="w3-button w3-blue" onclick="selectFile('${element}')">${element}</button>`;
                }
            });
            document.getElementById("available-files").innerHTML = dom;
        });
}

function selectFile(name) {
    console.log("Select file");
    const body = new FormData();
    body.set("fileName", name);
    fetch("/select-file", {method: "POST", body: body})
        .then(res => loadAvailableFiles());
}

(() => {
    loadAvailableFiles();
})();