manage

templates/manage.html

@@ -0,0 +1,88 @@
+{% 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() {
+        const input = document.getElementById("search-input");
+        const filter = input.value.toLowerCase();
+        const listItems = document.querySelectorAll(".queue-grid li");
+        let visibleCount = 0;
+
+        listItems.forEach((li) => {
+            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";
+            }
+        });
+
+        document.getElementById(
+            "count-display"
+        ).textContent = `Showing: ${visibleCount} / ${listItems.length}`;
+    }
+</script>
+{% endblock %}