101 lines
3.0 KiB
JavaScript
101 lines
3.0 KiB
JavaScript
const form = document.querySelector("#job-form");
|
|
const jobsEl = document.querySelector("#jobs");
|
|
const logEl = document.querySelector("#log");
|
|
const activeCountEl = document.querySelector("#active-count");
|
|
const lastStateEl = document.querySelector("#last-state");
|
|
const outputsEl = document.querySelector("#outputs");
|
|
let selectedJobId = null;
|
|
|
|
async function fetchJson(url, options) {
|
|
const response = await fetch(url, options);
|
|
const data = await response.json();
|
|
if (!response.ok) {
|
|
throw new Error(data.error || "Request failed");
|
|
}
|
|
return data;
|
|
}
|
|
|
|
function renderJobs(jobs) {
|
|
jobsEl.innerHTML = "";
|
|
const running = jobs.filter((job) => ["queued", "running"].includes(job.status));
|
|
activeCountEl.textContent = `${running.length} running`;
|
|
lastStateEl.textContent = jobs[0] ? `${jobs[0].id} ${jobs[0].status}` : "Ready";
|
|
|
|
if (!selectedJobId && jobs[0]) {
|
|
selectedJobId = jobs[0].id;
|
|
}
|
|
|
|
jobs.forEach((job) => {
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.className = `job-pill${job.id === selectedJobId ? " active" : ""}`;
|
|
button.textContent = `${job.id} - ${job.status}`;
|
|
button.addEventListener("click", () => {
|
|
selectedJobId = job.id;
|
|
logEl.textContent = job.log || "Waiting for log output...";
|
|
renderJobs(jobs);
|
|
});
|
|
jobsEl.appendChild(button);
|
|
});
|
|
|
|
const selected = jobs.find((job) => job.id === selectedJobId);
|
|
if (selected) {
|
|
logEl.textContent = selected.log || "Waiting for log output...";
|
|
} else if (!jobs.length) {
|
|
logEl.textContent = "No jobs yet.";
|
|
}
|
|
}
|
|
|
|
async function loadJobs() {
|
|
const jobs = await fetchJson("/api/jobs");
|
|
renderJobs(jobs);
|
|
}
|
|
|
|
async function loadOutputs() {
|
|
const outputs = await fetchJson("/api/outputs");
|
|
outputsEl.innerHTML = "";
|
|
if (!outputs.length) {
|
|
const empty = document.createElement("p");
|
|
empty.className = "empty";
|
|
empty.textContent = "Finished videos will appear here.";
|
|
outputsEl.appendChild(empty);
|
|
return;
|
|
}
|
|
|
|
outputs.forEach((output) => {
|
|
const link = document.createElement("a");
|
|
link.className = "output-card";
|
|
link.href = `/outputs/${encodeURIComponent(output.name)}`;
|
|
link.innerHTML = `<strong>${output.name}</strong><span>${output.size_mb} MB</span>`;
|
|
outputsEl.appendChild(link);
|
|
});
|
|
}
|
|
|
|
form.addEventListener("submit", async (event) => {
|
|
event.preventDefault();
|
|
const submit = form.querySelector("button[type='submit']");
|
|
submit.disabled = true;
|
|
try {
|
|
const job = await fetchJson("/api/jobs", {
|
|
method: "POST",
|
|
body: new FormData(form),
|
|
});
|
|
selectedJobId = job.id;
|
|
form.reset();
|
|
form.elements.lang.value = "es";
|
|
form.elements.mix_mode.value = "instrumental-only";
|
|
await loadJobs();
|
|
} catch (error) {
|
|
logEl.textContent = error.message;
|
|
} finally {
|
|
submit.disabled = false;
|
|
}
|
|
});
|
|
|
|
document.querySelector("#refresh").addEventListener("click", loadJobs);
|
|
document.querySelector("#reload-outputs").addEventListener("click", loadOutputs);
|
|
|
|
loadJobs();
|
|
setInterval(loadJobs, 2500);
|
|
setInterval(loadOutputs, 10000);
|