91 lines
2.8 KiB
HTML
91 lines
2.8 KiB
HTML
{% extends "base.html" %} {% block title %}Queue Manager{% endblock %} {% block
|
|
body_class %}layout-wide{% endblock %} {% block content %} {% from "macros.html"
|
|
import qrcode_queue %}
|
|
|
|
<div class="container">
|
|
<div
|
|
style="
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
"
|
|
>
|
|
<h1>Queue Manager</h1>
|
|
<div class="actions">
|
|
<button onclick="dedupQueue()" class="btn btn-sm">Dedup</button>
|
|
<button onclick="sortQueue(false)" class="btn btn-sm">
|
|
Sort A-Z
|
|
</button>
|
|
<button onclick="sortQueue(true)" class="btn btn-sm">
|
|
Sort Z-A
|
|
</button>
|
|
<button onclick="clearQueue()" class="btn btn-sm btn-danger">
|
|
Clear All
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<input
|
|
type="text"
|
|
id="search-input"
|
|
class="form-control"
|
|
placeholder="Search links..."
|
|
style="margin-bottom: 20px"
|
|
onkeyup="filterQueue()"
|
|
/>
|
|
|
|
<div id="queue-container">
|
|
{% if queue_items %}
|
|
<p id="count-display">Total: {{ queue_items|length }}</p>
|
|
{{ qrcode_queue(queue_items) }} {% else %}
|
|
<p>Queue is empty.</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
async function dedupQueue() {
|
|
if (!confirm("Remove duplicates?")) return;
|
|
await fetch("/api/queue/dedup", { method: "POST" });
|
|
window.location.reload();
|
|
}
|
|
|
|
async function sortQueue(reverse) {
|
|
await fetch(`/api/queue/sort?reverse=${reverse}`, { method: "POST" });
|
|
window.location.reload();
|
|
}
|
|
|
|
async function clearQueue() {
|
|
if (!confirm("Clear entire queue?")) return;
|
|
await fetch("/api/queue/clear", { method: "POST" });
|
|
window.location.reload();
|
|
}
|
|
|
|
function filterQueue() {
|
|
/** @type {HTMLInputElement} */
|
|
const input = document.getElementById("search-input");
|
|
const filter = input.value.toLowerCase();
|
|
/** @type {NodeListOf<HTMLLIElement>} */
|
|
const listItems = document.querySelectorAll(".queue-grid li");
|
|
let visibleCount = 0;
|
|
|
|
listItems.forEach((li) => {
|
|
/** @type {HTMLAnchorElement} */
|
|
const link = li.querySelector("a");
|
|
const text = link.textContent || link.innerText;
|
|
if (text.toLowerCase().indexOf(filter) > -1) {
|
|
li.style.display = "";
|
|
visibleCount++;
|
|
} else {
|
|
li.style.display = "none";
|
|
}
|
|
});
|
|
/** @type {HTMLParagraphElement} */
|
|
const countDisplay = document.getElementById("count-display");
|
|
countDisplay.textContent = `Showing: ${visibleCount} / ${listItems.length}`;
|
|
}
|
|
</script>
|
|
{% endblock %}
|