Dropper/src/dropper/static/js/ui-logic.js

const setUploadListTitles = (files = null) => {
    if (files == null) {
        return ;
    }

    let list = document.getElementById('uploadListTitles');
    clearChildNodes(list);
    for (var i = 0; i < files.length; i++) {
        let liTag = document.createElement('LI');
        let name  = document.createTextNode(files[i].name);

        liTag.className = "list-group-item disabled progress-bar";
        let bs64  = btoa(unescape(encodeURIComponent(files[i].name))).split("==")[0];
        liTag.setAttribute("id", bs64);
        liTag.append(name);
        list.append(liTag);
    }
}


const uploadFiles = (files = null) => {
    const size = files.length;

    if (files == null || size < 1) {
        displayMessage("Nothing to upload...", "warning", "page-alert-zone-2");
        return ;
    }

    // Multi-upload...
    if (size > 1) {
        for (var i = 0; i < size; i++) {
            file = files[i];
            name = file.name;
            data = createFormDataFiles([file]);
            doAjaxUpload('upload', data, name, "upload-file");
        }
    } else { // Single upload...
        data = createFormDataFiles(files);
        name = files[0].name;
        doAjaxUpload('upload', data, name, "upload-file");
    }
}

const uploadTextEntry = (note = null) => {
    if (note == null || note == "") {
        displayMessage("Nothing to upload...", "warning", "page-alert-zone-2");
        return ;
    }

    doAjax('add-note', createFormData(note), "upload-text");
}

const editAction = async (newName, hash) => {
    const params = new URLSearchParams('newName=' + newName + '&hash=' + hash)
    doAjax('edit-file', params, 'edit', hash, newName);
}

const deleteAction = async (hash) => {
    const params = new URLSearchParams('hash=' + hash)
    doAjax('delete-file', params, 'delete', hash);
}

const deleteTextAction = (elm, id) => {
    if (id == '' || id == undefined) {
        displayMessage("No text to delete...", "warning");
        return;
    }

    const classRef = elm.getAttribute('textClass');
    const refElm   = document.getElementsByClassName(classRef)[0];
    refElm.parentElement.removeChild(refElm);

    const params = new URLSearchParams('noteIndex=' + id)
    doAjax('delete-text', params, 'delete-text');
}

const deleteAllTextAction = () => {
    const params = new URLSearchParams('hash=empty')
    doAjax('delete-all-text', params, 'delete-text');
}

const createFormData = (entry) => {
    let form = new FormData();
    // Encoded special characters then encode to b64
    encodedStr = window.btoa(encodeURIComponent(entry))
    form.append("entryText", encodedStr);
    return form;
}

const createFormDataFiles = (files) => {
    let form = new FormData();

    for (var i = 0; i < files.length; i++) {
        form.append(files[i].name, files[i]);
    }
    return form;
}


// Progressbar handler
const updateProgressBar = (progressbar = null, text = "Nothing uploading...",
                                            percent = 0, type = "error") => {
    if (progressbar == null) {
        return ;
    }


    if (type == "info") {
        progressbar.setAttribute("aria-valuenow", percent);
        progressbar.style.width = percent + "%";
        // progressbar.innerText   = text;
        progressbar.classList.remove('bg-success');
        progressbar.classList.add('progress-bar-animated');
        progressbar.classList.add('bg-info');
        return ;
    }

    if (type == "success") {
        progressbar.setAttribute("aria-valuenow", 100);
        progressbar.style.width = "100%";
        // progressbar.innerText   = text;
        progressbar.classList.remove('progress-bar-animated');
        progressbar.classList.remove('bg-info');
        progressbar.classList.add('bg-success');
        return ;
    }

    progressbar.style.width = "100%";
    progressbar.innerText   = "An Error Occured";
    progressbar.classList.remove('progress-bar-animated');
    progressbar.classList.remove('bg-info');
    progressbar.classList.remove('bg-success');
    progressbar.classList.add('bg-danger');
}

// Message handler
const displayMessage = (message, type, msgWindow = "page-alert-zone", timeout) => {
    let alertField  = document.getElementById(msgWindow);
    let divElm      = document.createElement("DIV");
    let btnElm      = document.createElement("BUTTON");
    let spnElm      = document.createElement("SPAN");
    let textElm     = document.createTextNode(message);

    divElm.setAttribute("class", "alert alert-" + type);
    divElm.setAttribute("role", "alert");
    divElm.appendChild(textElm);
    btnElm.type     = "button";
    textElm         = document.createTextNode("X");
    btnElm.setAttribute("class", "close");
    btnElm.setAttribute("data-dismiss", "alert");
    btnElm.setAttribute("aria-label", "close");
    spnElm.setAttribute("aria-hidden", "true");
    spnElm.appendChild(textElm);
    btnElm.appendChild(spnElm);
    divElm.appendChild(btnElm);
    alertField.appendChild(divElm);

    if (timeout > 0) {
        setTimeout(function () {
            clearChildNodes(alertField);
        }, timeout * 1000);
    }
}

const clearChildNodes = (parent) => {
    while (parent.firstChild) {
        parent.removeChild(parent.firstChild);
    }
}