Dymas/ani-cli-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Split queue into dedicated page

Browse Source
This commit is contained in:
Dymas
2026-05-22 23:17:00 +02:00
parent 9d4baea057
commit fe094a7112
11 changed files with 522 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+5
View File
@@ -1,5 +1,10 @@
# Changelog
## 0.35.0 - 2026-05-22
- Split the download queue out of the Search page into a dedicated `/queue` page so searching and queue management are separate workflows.
- Added a Queue navigation tab and moved queue polling, logs, paging, retry, cancel, and finished-job cleanup controls onto the new page.
## 0.34.0 - 2026-05-21
- Added a Discord webhook notification event for completed downloads so successful queue jobs can report the resolved anime title, saved files, and cached thumbnail.
README.md
+26 -5
View File
@@ -2,7 +2,7 @@
Small local web UI for a system-wide `ani-cli` install.
Current version: `0.34.0`
Current version: `0.35.0`
## Project Layout
@@ -18,6 +18,7 @@ ani-cli-web/
http_handler.py HTTP routing and access control.
web_templates.py Shared page aggregation.
search_page.py Search page template.
queue_page.py Queue page template.
config_page.py Config page template.
watchlist_page.py Watchlist page template.
docker-entrypoint.sh Container startup wrapper.
@@ -143,9 +144,27 @@ Use it to:
Highlights:
- Live queue view with automatic polling.
- Queue log shows newest lines first.
- Search polling avoids overlapping requests and stale responses.
- Search stays focused on finding shows, loading episodes, and queueing new downloads.
- Added-to-queue notices now point to the dedicated Queue page for progress tracking.
- Search request guards still avoid stale responses overwriting newer results.
### Queue Page
Path: `/queue`
Use it to:
1. Monitor active, pending, failed, and finished download jobs.
2. Inspect recent per-job logs with newest lines first.
3. Retry failed jobs.
4. Remove finished jobs.
5. Cancel running or pending jobs.
Highlights:
- Automatic queue polling every 2.5 seconds.
- Dedicated queue pagination and cleanup controls.
- Search and queue workflows are now separated into distinct pages.
### Config Page
@@ -256,7 +275,9 @@ The app stores the token in an HTTP-only cookie and redirects to the clean URL.
## Download Queue
The queue is stored in SQLite and shown 10 jobs at a time.
Path: `/queue`
The queue is stored in SQLite, shown 10 jobs at a time, and managed from its dedicated page.
Available actions:
VERSION
+1 -1
View File
@@ -1 +1 @@
0.34.0
0.35.0
app.py
+2 -1
View File
@@ -67,7 +67,7 @@ from title_matching import (
title_match_variants,
)
from watchlist_identity import resolve_job_watchlist_identity as resolve_job_watchlist_identity_impl
from web_templates import CONFIG_HTML, INDEX_HTML, PAGE_LINKS, WATCHLIST_HTML, render_page_links, render_sidebar_brand
from web_templates import CONFIG_HTML, INDEX_HTML, PAGE_LINKS, QUEUE_HTML, WATCHLIST_HTML, render_page_links, render_sidebar_brand
RUNTIME_LOCK = threading.RLock()
@@ -1975,6 +1975,7 @@ Handler = build_handler_class(
get_watchlist_refresh_status=get_watchlist_refresh_status,
http_error=HttpError,
index_html=INDEX_HTML,
queue_html=QUEUE_HTML,
remove_from_watchlist=remove_from_watchlist,
runtime_state=runtime_state,
save_runtime_config=save_runtime_config,
app_support.py
+1 -1
View File
@@ -19,7 +19,7 @@ from uuid import uuid4
PROJECT_ROOT = Path(__file__).resolve().parent
ANI_CLI = os.environ.get("ANI_CLI_BIN") or shutil.which("ani-cli") or "ani-cli"
APP_NAME = "ani-cli-web"
VERSION = "0.34.0"
VERSION = "0.35.0"
ALLANIME_BASE = "allanime.day"
ALLANIME_API = f"https://api.{ALLANIME_BASE}"
ALLANIME_REFERER = "https://allmanga.to"
http_handler.py
+3
View File
@@ -42,6 +42,7 @@ class HandlerContext:
get_watchlist_refresh_status: object
http_error: object
index_html: str
queue_html: str
remove_from_watchlist: object
runtime_state: object
save_runtime_config: object
@@ -211,6 +212,8 @@ class Handler(BaseHTTPRequestHandler):
self.ensure_client_access()
if parsed.path == "/":
self.html(Handler._context(self).index_html)
elif parsed.path == "/queue":
self.html(Handler._context(self).queue_html)
elif parsed.path == "/config":
self.html(Handler._context(self).config_html)
elif parsed.path == "/watchlist":
queue_page.py
+465
View File
@@ -0,0 +1,465 @@
#!/usr/bin/env python3
"""Queue page template for ani-cli-web."""
from template_helpers import BROWSER_API_HELPER, BROWSER_POLL_HELPER, render_page_links, render_sidebar_brand
QUEUE_HTML = r"""<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ani-cli web queue</title>
<style>
:root {
color-scheme: dark;
--bg: #090611;
--bg-2: #140d21;
--panel: rgba(25, 18, 41, 0.82);
--panel-strong: rgba(18, 13, 31, 0.92);
--panel-2: rgba(157, 123, 255, 0.12);
--line: rgba(255, 255, 255, 0.08);
--line-strong: rgba(157, 123, 255, 0.26);
--text: #f6f2ff;
--muted: #b8b0cf;
--accent: #9d7bff;
--accent-strong: #7b5cff;
--accent-soft: rgba(157, 123, 255, 0.14);
--good: #95e4ba;
--warn: #f0c67a;
--bad: #ff90a4;
--focus: #b296ff;
--shadow: 0 24px 60px rgba(5, 2, 15, 0.42);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
min-height: 100vh;
background:
radial-gradient(circle at top left, rgba(157, 123, 255, 0.18), transparent 28%),
radial-gradient(circle at top right, rgba(117, 201, 255, 0.12), transparent 24%),
linear-gradient(180deg, #120c1d 0%, #0b0813 56%, #07050d 100%);
color: var(--text);
font: 15px/1.5 "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 24%);
opacity: 0.5;
}
button {
font: inherit;
border: 1px solid var(--line);
background: var(--panel-2);
color: var(--text);
min-height: 40px;
border-radius: 14px;
padding: 0 14px;
cursor: pointer;
transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
button:hover {
border-color: var(--line-strong);
background: rgba(157, 123, 255, 0.18);
transform: translateY(-1px);
}
button.primary {
background: linear-gradient(135deg, var(--accent), var(--accent-strong));
border-color: transparent;
color: #fcfaff;
font-weight: 700;
box-shadow: 0 16px 32px rgba(123, 92, 255, 0.26);
}
button.ghost {
background: transparent;
}
button.danger {
border-color: rgba(255, 144, 164, 0.3);
background: rgba(255, 144, 164, 0.12);
color: #ffd7df;
}
button.danger:hover {
border-color: rgba(255, 144, 164, 0.48);
background: rgba(255, 144, 164, 0.18);
}
.app {
display: grid;
grid-template-columns: minmax(320px, 380px) 1fr;
min-height: 100vh;
}
aside, main {
padding: 22px;
}
aside {
border-right: 1px solid var(--line);
background: linear-gradient(180deg, rgba(25, 18, 41, 0.94), rgba(14, 10, 24, 0.9));
display: grid;
align-content: start;
gap: 20px;
backdrop-filter: blur(18px) saturate(170%);
}
main {
display: grid;
grid-template-rows: auto auto 1fr;
gap: 20px;
min-width: 0;
}
h1, h2, h3, p { margin: 0; }
h1 {
font-size: 29px;
line-height: 1.05;
letter-spacing: -0.04em;
}
h2 {
font-size: 17px;
letter-spacing: -0.02em;
}
.topline, .row, .toolbar {
display: flex;
gap: 10px;
align-items: center;
}
.topline, .toolbar { justify-content: space-between; }
.brand-wrap {
display: grid;
gap: 6px;
}
.brand-word {
color: var(--accent);
}
.shell-note {
color: var(--muted);
font-size: 13px;
max-width: 28ch;
}
.row > * { flex: 1; }
.page-links {
display: flex;
gap: 8px;
flex-wrap: wrap;
padding: 6px;
border: 1px solid var(--line);
border-radius: 18px;
background: rgba(255, 255, 255, 0.03);
}
.page-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
border: 0;
border-radius: 12px;
padding: 0 14px;
color: var(--muted);
background: transparent;
font-weight: 700;
text-decoration: none;
transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.page-link.active {
background: var(--accent-soft);
color: var(--text);
box-shadow: inset 0 0 0 1px rgba(157, 123, 255, 0.22);
}
.page-link:hover {
color: var(--text);
background: rgba(255, 255, 255, 0.05);
}
.queue, .highlights {
display: grid;
gap: 10px;
min-width: 0;
}
.panel, .job {
border: 1px solid var(--line);
border-radius: 22px;
background: linear-gradient(180deg, rgba(29, 22, 47, 0.88), rgba(17, 13, 29, 0.94));
box-shadow: var(--shadow);
backdrop-filter: blur(18px);
}
.panel {
padding: 18px;
display: grid;
gap: 14px;
}
.muted {
color: var(--muted);
font-size: 13px;
}
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
padding: 6px 10px;
color: var(--muted);
background: rgba(255, 255, 255, 0.04);
font-size: 12px;
white-space: nowrap;
}
.job {
padding: 18px;
display: grid;
gap: 14px;
transition: border-color 0.16s ease, transform 0.16s ease;
}
.job:hover {
border-color: var(--line-strong);
transform: translateY(-1px);
}
.job-head {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: start;
min-width: 0;
}
.job-title {
font-weight: 800;
overflow-wrap: anywhere;
}
.status {
border-radius: 999px;
padding: 6px 10px;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
background: rgba(255, 255, 255, 0.06);
color: var(--muted);
}
.status.running {
color: #fcfaff;
background: linear-gradient(135deg, var(--accent), var(--accent-strong));
}
.status.done { color: #082312; background: var(--good); }
.status.failed { color: #2d0910; background: var(--bad); }
.status.canceled { color: #2d1c00; background: var(--warn); }
pre {
margin: 0;
max-height: 220px;
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
padding: 12px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.05);
background: rgba(7, 5, 12, 0.86);
color: #d6d0e7;
font-size: 12px;
}
.empty {
border: 1px dashed rgba(157, 123, 255, 0.22);
border-radius: 22px;
color: var(--muted);
padding: 24px;
text-align: center;
background: rgba(157, 123, 255, 0.06);
}
.notice {
min-height: 20px;
color: #ddd0ff;
font-size: 13px;
}
@media (max-width: 900px) {
.app { grid-template-columns: 1fr; }
aside { border-right: 0; border-bottom: 1px solid var(--line); }
.toolbar, .row { align-items: stretch; flex-direction: column; }
.job-head { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<div class="app">
<aside>
""" + render_sidebar_brand(
"Dedicated queue board for active, pending, and finished downloads.",
"Queue",
badge_id="serverBadge",
) + render_page_links("queue") + r"""
<section class="panel">
<h2>Queue controls</h2>
<p class="muted">Monitor active downloads, inspect recent output, and clean up finished jobs without leaving the queue view.</p>
<div class="row">
<button class="ghost" id="retryFailedBtn" type="button">Retry failed</button>
<button class="ghost" id="removeFinishedBtn" type="button">Remove finished</button>
</div>
</section>
<section class="panel highlights">
<div>
<h2>What you can do here</h2>
<p class="muted">Search stays focused on finding shows and adding new jobs. Queue now handles status, logs, retries, and cleanup as a separate workflow.</p>
</div>
<span class="badge">Auto refresh every 2.5s</span>
</section>
</aside>
<main>
<section class="toolbar">
<div>
<h2>Download queue</h2>
<p class="muted">Newest log lines are shown first for each job.</p>
</div>
<div class="notice" id="notice"></div>
</section>
<section class="queue" id="queue"></section>
<section class="toolbar" id="queuePager"></section>
</main>
</div>
<script>
const state = {
queuePage: 1,
queuePages: 1,
queueTotal: 0,
queueRequestId: 0,
queueTimer: null
};
const $ = (id) => document.getElementById(id);
""" + BROWSER_API_HELPER + BROWSER_POLL_HELPER + r"""
function setNotice(text) {
const notice = $("notice");
if (notice) notice.textContent = text || "";
}
function actionButton(text, handler, extra = "") {
const btn = document.createElement("button");
btn.type = "button";
btn.textContent = text;
btn.className = extra;
btn.addEventListener("click", handler);
return btn;
}
function renderQueue(data) {
const jobs = data.jobs || [];
state.queuePage = data.page || 1;
state.queuePages = data.pages || 1;
state.queueTotal = data.total || 0;
const el = $("queue");
el.innerHTML = "";
if (!jobs.length) {
el.innerHTML = '<div class="empty">Queue is empty.</div>';
renderQueuePager();
return;
}
for (const job of jobs) {
const item = document.createElement("article");
item.className = "job";
const log = [...(job.log || [])].slice(-28).reverse().join("\n");
item.innerHTML = `
<div class="job-head">
<div>
<div class="job-title"></div>
<p class="muted"></p>
</div>
<span class="status"></span>
</div>
<pre></pre>
<div class="toolbar">
<span class="muted"></span>
<div class="row" style="flex:0 0 auto"></div>
</div>
`;
item.querySelector(".job-title").textContent = job.title;
const libraryName = job.anime_name || job.title;
const season = String(job.season || "1").padStart(2, "0");
const seasonFolder = `Season ${season}`;
const target = job.target_dir || `${job.download_dir}/${libraryName}/${seasonFolder}`;
item.querySelector(".job-head .muted").textContent =
`${libraryName} · S${season} · ${job.mode} · ${job.quality} · episodes ${job.episodes} · ${target}`;
const status = item.querySelector(".status");
status.textContent = job.status;
status.classList.add(job.status);
item.querySelector("pre").textContent = log || "Waiting...";
item.querySelector(".toolbar .muted").textContent = job.exit_code === null ? "" : `exit ${job.exit_code}`;
const actions = item.querySelector(".row");
if (job.status === "running") {
actions.append(actionButton("Cancel", () => queueAction(job.id, "cancel"), "danger"));
} else if (job.status === "pending") {
actions.append(actionButton("Cancel", () => queueAction(job.id, "cancel"), "danger"));
} else {
actions.append(actionButton("Retry", () => queueAction(job.id, "retry")));
actions.append(actionButton("Remove", () => queueAction(job.id, "remove")));
}
el.appendChild(item);
}
renderQueuePager();
}
function renderQueuePager() {
const el = $("queuePager");
const start = state.queueTotal ? ((state.queuePage - 1) * 10) + 1 : 0;
const end = Math.min(state.queuePage * 10, state.queueTotal);
el.innerHTML = `
<span class="muted"></span>
<div class="row" style="flex:0 0 auto"></div>
`;
el.querySelector(".muted").textContent =
`${start}-${end} of ${state.queueTotal} · page ${state.queuePage} of ${state.queuePages}`;
const controls = el.querySelector(".row");
const prev = actionButton("Previous", () => {
if (state.queuePage > 1) loadQueue(state.queuePage - 1);
});
const next = actionButton("Next", () => {
if (state.queuePage < state.queuePages) loadQueue(state.queuePage + 1);
});
prev.disabled = state.queuePage <= 1;
next.disabled = state.queuePage >= state.queuePages;
controls.append(prev, next);
}
async function queueAction(id, action) {
try {
await api(`/api/queue/${id}/${action}`, { method: "POST", body: "{}" });
await loadQueue(state.queuePage);
} catch (error) {
setNotice(error.message);
}
}
async function queueBulkAction(path, message) {
try {
const data = await api(path, { method: "POST", body: "{}" });
setNotice(`${message}: ${data.count || 0}`);
await loadQueue(state.queuePage);
} catch (error) {
setNotice(error.message);
}
}
async function loadQueue(page = state.queuePage || 1) {
const requestId = ++state.queueRequestId;
const data = await api(`/api/queue?page=${page}&per_page=10`);
if (requestId !== state.queueRequestId) return data;
if (data.page > data.pages && data.pages > 0) return loadQueue(data.pages);
renderQueue(data);
return data;
}
$("removeFinishedBtn").addEventListener("click", () => queueBulkAction("/api/queue/clear-finished", "Removed finished jobs"));
$("retryFailedBtn").addEventListener("click", () => queueBulkAction("/api/queue/retry-failed", "Retried failed jobs"));
(async function init() {
try {
await loadQueue();
state.queueTimer = startSerialPoll(() => loadQueue(), 2500);
} catch (error) {
setNotice(error.message);
}
})();
</script>
</body>
</html>
"""
search_page.py
+5 -194
View File
@@ -2,7 +2,7 @@
"""Search page template for ani-cli-web."""
from template_helpers import BROWSER_API_HELPER, BROWSER_POLL_HELPER, render_page_links, render_sidebar_brand
from template_helpers import BROWSER_API_HELPER, render_page_links, render_sidebar_brand
INDEX_HTML = r"""<!doctype html>
@@ -232,12 +232,12 @@ INDEX_HTML = r"""<!doctype html>
color: var(--text);
font-weight: 700;
}
.results, .queue {
.results {
display: grid;
gap: 10px;
min-width: 0;
}
.result, .job, .settings, .episodes-panel, .deps {
.result, .settings, .episodes-panel, .deps {
border: 1px solid var(--line);
border-radius: 22px;
background: linear-gradient(180deg, rgba(29, 22, 47, 0.88), rgba(17, 13, 29, 0.94));
@@ -291,57 +291,6 @@ INDEX_HTML = r"""<!doctype html>
}
.badge.ok { color: var(--good); border-color: rgba(149, 228, 186, 0.24); }
.badge.bad { color: #ffd0da; border-color: rgba(255, 144, 164, 0.22); }
.job {
padding: 18px;
display: grid;
gap: 14px;
transition: border-color 0.16s ease, transform 0.16s ease;
}
.job:hover {
border-color: var(--line-strong);
transform: translateY(-1px);
}
.job-head {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: start;
min-width: 0;
}
.job-title {
font-weight: 800;
overflow-wrap: anywhere;
}
.status {
border-radius: 999px;
padding: 6px 10px;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
background: rgba(255, 255, 255, 0.06);
color: var(--muted);
}
.status.running {
color: #fcfaff;
background: linear-gradient(135deg, var(--accent), var(--accent-strong));
}
.status.done { color: #082312; background: var(--good); }
.status.failed { color: #2d0910; background: var(--bad); }
.status.canceled { color: #2d1c00; background: var(--warn); }
pre {
margin: 0;
max-height: 180px;
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
padding: 12px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.05);
background: rgba(7, 5, 12, 0.86);
color: #d6d0e7;
font-size: 12px;
}
.empty {
border: 1px dashed rgba(157, 123, 255, 0.22);
border-radius: 22px;
@@ -364,7 +313,6 @@ INDEX_HTML = r"""<!doctype html>
.app { grid-template-columns: 1fr; }
aside { border-right: 0; border-bottom: 1px solid var(--line); }
.controls, .row, .toolbar { align-items: stretch; flex-direction: column; }
.job-head { grid-template-columns: 1fr; }
}
</style>
</head>
@@ -446,18 +394,6 @@ INDEX_HTML = r"""<!doctype html>
</div>
</div>
</section>
<section>
<div class="toolbar">
<h2>Download queue</h2>
<div class="row" style="flex:0 0 auto">
<button class="ghost" id="retryFailedBtn" type="button">Retry failed</button>
<button class="ghost" id="removeFinishedBtn" type="button">Remove finished</button>
</div>
</div>
<div class="queue" id="queue"></div>
<div class="toolbar" id="queuePager"></div>
</section>
</main>
</div>
@@ -466,17 +402,12 @@ INDEX_HTML = r"""<!doctype html>
config: { mode: "sub", quality: "best", download_dir: "" },
selected: null,
episodes: [],
queuePage: 1,
queuePages: 1,
queueTotal: 0,
queueTimer: null,
queueRequestId: 0,
searchRequestId: 0,
episodeRequestId: 0
};
const $ = (id) => document.getElementById(id);
""" + BROWSER_API_HELPER + BROWSER_POLL_HELPER + r"""
""" + BROWSER_API_HELPER + r"""
function setNotice(text) {
const notice = $("notice");
@@ -610,128 +541,12 @@ INDEX_HTML = r"""<!doctype html>
};
try {
await api("/api/queue", { method: "POST", body: JSON.stringify(payload) });
setNotice("Added to queue.");
await loadQueue();
setNotice("Added to queue. Open Queue to monitor progress.");
} catch (error) {
setNotice(error.message);
}
}
function renderQueue(data) {
const jobs = data.jobs || [];
state.queuePage = data.page || 1;
state.queuePages = data.pages || 1;
state.queueTotal = data.total || 0;
const el = $("queue");
el.innerHTML = "";
if (!jobs.length) {
el.innerHTML = '<div class="empty">Queue is empty.</div>';
renderQueuePager();
return;
}
for (const job of jobs) {
const item = document.createElement("article");
item.className = "job";
const log = [...(job.log || [])].slice(-28).reverse().join("\n");
item.innerHTML = `
<div class="job-head">
<div>
<div class="job-title"></div>
<p class="muted"></p>
</div>
<span class="status"></span>
</div>
<pre></pre>
<div class="toolbar">
<span class="muted"></span>
<div class="row" style="flex:0 0 auto"></div>
</div>
`;
item.querySelector(".job-title").textContent = job.title;
const libraryName = job.anime_name || job.title;
const season = String(job.season || "1").padStart(2, "0");
const seasonFolder = `Season ${season}`;
const target = job.target_dir || `${job.download_dir}/${libraryName}/${seasonFolder}`;
item.querySelector(".job-head .muted").textContent =
`${libraryName} · S${season} · ${job.mode} · ${job.quality} · episodes ${job.episodes} · ${target}`;
const status = item.querySelector(".status");
status.textContent = job.status;
status.classList.add(job.status);
item.querySelector("pre").textContent = log || "Waiting...";
item.querySelector(".toolbar .muted").textContent = job.exit_code === null ? "" : `exit ${job.exit_code}`;
const actions = item.querySelector(".row");
if (job.status === "running") {
actions.append(actionButton("Cancel", () => queueAction(job.id, "cancel"), "danger"));
} else if (job.status === "pending") {
actions.append(actionButton("Cancel", () => queueAction(job.id, "cancel"), "danger"));
} else {
actions.append(actionButton("Retry", () => queueAction(job.id, "retry")));
actions.append(actionButton("Remove", () => queueAction(job.id, "remove")));
}
el.appendChild(item);
}
renderQueuePager();
}
function renderQueuePager() {
const el = $("queuePager");
const start = state.queueTotal ? ((state.queuePage - 1) * 10) + 1 : 0;
const end = Math.min(state.queuePage * 10, state.queueTotal);
el.innerHTML = `
<span class="muted"></span>
<div class="row" style="flex:0 0 auto"></div>
`;
el.querySelector(".muted").textContent =
`${start}-${end} of ${state.queueTotal} · page ${state.queuePage} of ${state.queuePages}`;
const controls = el.querySelector(".row");
const prev = actionButton("Previous", () => {
if (state.queuePage > 1) loadQueue(state.queuePage - 1);
});
const next = actionButton("Next", () => {
if (state.queuePage < state.queuePages) loadQueue(state.queuePage + 1);
});
prev.disabled = state.queuePage <= 1;
next.disabled = state.queuePage >= state.queuePages;
controls.append(prev, next);
}
function actionButton(text, handler, extra = "") {
const btn = document.createElement("button");
btn.type = "button";
btn.textContent = text;
btn.className = extra;
btn.addEventListener("click", handler);
return btn;
}
async function queueAction(id, action) {
try {
await api(`/api/queue/${id}/${action}`, { method: "POST", body: "{}" });
await loadQueue(state.queuePage);
} catch (error) {
setNotice(error.message);
}
}
async function queueBulkAction(path, message) {
try {
const data = await api(path, { method: "POST", body: "{}" });
setNotice(`${message}: ${data.count || 0}`);
await loadQueue(state.queuePage);
} catch (error) {
setNotice(error.message);
}
}
async function loadQueue(page = state.queuePage || 1) {
const requestId = ++state.queueRequestId;
const data = await api(`/api/queue?page=${page}&per_page=10`);
if (requestId !== state.queueRequestId) return data;
if (data.page > data.pages && data.pages > 0) return loadQueue(data.pages);
renderQueue(data);
return data;
}
async function loadConfig() {
state.config = await api("/api/config");
$("jobFolder").value = state.config.download_dir;
@@ -746,8 +561,6 @@ INDEX_HTML = r"""<!doctype html>
$("search-mode").addEventListener("change", (event) => setMode(event.target.value));
$("trackBtn").addEventListener("click", addSelectedToWatchlist);
$("addBtn").addEventListener("click", addSelected);
$("removeFinishedBtn").addEventListener("click", () => queueBulkAction("/api/queue/clear-finished", "Removed finished jobs"));
$("retryFailedBtn").addEventListener("click", () => queueBulkAction("/api/queue/retry-failed", "Retried failed jobs"));
$("search-quality").addEventListener("change", () => { state.config.quality = $("search-quality").value; });
$("firstEpBtn").addEventListener("click", () => { $("episodesInput").value = state.episodes[0] || ""; });
$("latestEpBtn").addEventListener("click", () => {
@@ -765,9 +578,7 @@ INDEX_HTML = r"""<!doctype html>
const query = (params.get("query") || "").trim();
if (query) $("search-query").value = query;
await loadConfig();
await loadQueue();
if (query) await search();
state.queueTimer = startSerialPoll(() => loadQueue(), 2500);
} catch (error) {
setNotice(error.message);
}
template_helpers.py
+1
View File
@@ -4,6 +4,7 @@
PAGE_LINKS = (
("search", "Search", "/"),
("queue", "Queue", "/queue"),
("config", "Config", "/config"),
("watchlist", "Watchlist", "/watchlist"),
)
test_app.py
+11 -9
View File
@@ -1610,6 +1610,7 @@ class TemplateHelperTests(unittest.TestCase):
def test_page_links_marks_active_page(self):
markup = APP.render_page_links("config")
self.assertIn('class="page-link active" href="/config"', markup)
self.assertIn('class="page-link" href="/queue"', markup)
self.assertIn('class="page-link" href="/watchlist"', markup)
def test_sidebar_brand_can_attach_optional_badge_id(self):
@@ -1617,25 +1618,26 @@ class TemplateHelperTests(unittest.TestCase):
self.assertIn('id="serverBadge"', markup)
self.assertIn("Shared note", markup)
def test_search_page_queue_loader_guards_against_stale_responses(self):
self.assertIn("queueRequestId", APP.INDEX_HTML)
self.assertIn("if (requestId !== state.queueRequestId) return data;", APP.INDEX_HTML)
def test_queue_page_queue_loader_guards_against_stale_responses(self):
self.assertIn("queueRequestId", APP.QUEUE_HTML)
self.assertIn("if (requestId !== state.queueRequestId) return data;", APP.QUEUE_HTML)
def test_search_page_renders_queue_logs_newest_first(self):
self.assertIn('[...(job.log || [])].slice(-28).reverse().join("\\n")', APP.INDEX_HTML)
def test_queue_page_renders_queue_logs_newest_first(self):
self.assertIn('[...(job.log || [])].slice(-28).reverse().join("\\n")', APP.QUEUE_HTML)
def test_pages_share_browser_api_helper(self):
self.assertIn("async function api(path, options = {})", APP.INDEX_HTML)
self.assertIn("async function api(path, options = {})", APP.QUEUE_HTML)
self.assertIn("async function api(path, options = {})", APP.CONFIG_HTML)
self.assertIn("async function api(path, options = {})", APP.WATCHLIST_HTML)
def test_pages_share_serial_polling_helper(self):
self.assertIn("function startSerialPoll(callback, intervalMs)", APP.INDEX_HTML)
self.assertIn("function startSerialPoll(callback, intervalMs)", APP.QUEUE_HTML)
self.assertIn("function startSerialPoll(callback, intervalMs)", APP.WATCHLIST_HTML)
self.assertIn("startSerialPoll(() => loadQueue(), 2500)", APP.INDEX_HTML)
self.assertIn("startSerialPoll(() => loadQueue(), 2500)", APP.QUEUE_HTML)
self.assertIn("startSerialPoll(async () => {", APP.WATCHLIST_HTML)
self.assertIn("window.clearTimeout(timer);", APP.INDEX_HTML)
self.assertIn('window.addEventListener("pagehide", stop, { once: true });', APP.INDEX_HTML)
self.assertIn("window.clearTimeout(timer);", APP.QUEUE_HTML)
self.assertIn('window.addEventListener("pagehide", stop, { once: true });', APP.QUEUE_HTML)
self.assertIn('window.addEventListener("beforeunload", stop, { once: true });', APP.WATCHLIST_HTML)
def test_watchlist_page_polls_when_queued_items_exist(self):
web_templates.py
+2
View File
@@ -3,6 +3,7 @@
"""Aggregated template exports for ani-cli-web."""
from config_page import CONFIG_HTML
from queue_page import QUEUE_HTML
from search_page import INDEX_HTML
from template_helpers import PAGE_LINKS, render_page_links, render_sidebar_brand
from watchlist_page import WATCHLIST_HTML
@@ -11,6 +12,7 @@ __all__ = [
"CONFIG_HTML",
"INDEX_HTML",
"PAGE_LINKS",
"QUEUE_HTML",
"WATCHLIST_HTML",
"render_page_links",
"render_sidebar_brand",