WarpBox/static/js/box.js

const boxPanel = document.querySelector(".box-panel[data-box-id]");
const boxStatus = document.querySelector(".box-statusbar span:first-child");

document.querySelectorAll('.box-file[aria-disabled="true"]').forEach((item) => {
    item.addEventListener("click", (event) => {
        if (item.getAttribute("aria-disabled") === "true") {
            event.preventDefault();
        }
    });
});

function updateBoxFile(file) {
    const item = document.querySelector(`.box-file[data-file-id="${file.id}"]`);
    if (!item) {
        return;
    }

    const meta = item.querySelector(".box-file-meta");
    const isComplete = file.status === "complete";
    const isFailed = file.status === "failed";

    item.classList.toggle("is-complete", isComplete);
    item.classList.toggle("is-failed", isFailed);
    item.classList.toggle("is-loading", !isComplete && !isFailed);
    item.dataset.status = file.status;
    item.title = file.title;

    if (isComplete) {
        item.href = file.download_path;
        item.setAttribute("download", "");
        item.removeAttribute("aria-disabled");
    } else {
        item.href = "#";
        item.removeAttribute("download");
        item.setAttribute("aria-disabled", "true");
    }

    if (meta) {
        meta.textContent = `${file.status_label} · ${file.size_label}`;
    }
}

async function refreshBoxStatus() {
    if (!boxPanel) {
        return false;
    }

    const boxID = boxPanel.dataset.boxId;
    const response = await fetch(`/box/${boxID}/status`);
    if (!response.ok) {
        return false;
    }

    const result = await response.json();
    result.files.forEach(updateBoxFile);

    if (boxStatus) {
        const completeCount = result.files.filter((file) => file.status === "complete").length;
        boxStatus.textContent = `${completeCount}/${result.files.length} ready`;
    }

    return result.files.some((file) => file.status === "pending" || file.status === "uploading");
}

if (boxPanel) {
    const timer = setInterval(async () => {
        const hasLoadingFiles = await refreshBoxStatus();
        if (!hasLoadingFiles) {
            clearInterval(timer);
        }
    }, 1500);
}