Refresh queue regularly

static/main.ts

@@ -1,6 +0,0 @@
-function main() {
-    alert("Hello world!");
-}
-
-const BUTTON = document.getElementById("button");
-BUTTON?.addEventListener("click", main);

static/queue/main.ts

@@ -0,0 +1,16 @@
+const COUNT = document.getElementById("count")!;
+const QUEUE = document.getElementById("queue")!;
+const REFRESH_SECONDS = 10;
+
+function update() {
+    fetch("table")
+        .then(response => response.text())
+        .then(text => {
+            QUEUE.innerHTML = text;
+            let count = QUEUE.querySelectorAll("tbody tr").length;
+            COUNT.textContent = String(count);
+            document.title = document.title.replace(/^queue \(\d+\)/, `queue (${count})`);
+        });
+}
+
+setInterval(update, REFRESH_SECONDS * 1000);

templates/queue.html

@@ -2,7 +2,11 @@
 
 {% block title %}queue ({{ table.tasks.len() }}){% endblock %}
 
-{% block body %}
+{% block head %}
-<h2>Queue ({{ table.tasks.len() }})</h2>
+<script type="module" src="main.js"></script>
-{{ table|safe }}
+{% endblock %}
+
+{% block body %}
+<h2>Queue (<span id="count">{{ table.tasks.len() }}</span>)</h2>
+<div id="queue">{{ table|safe }}</div>
 {% endblock %}