Working queue and info json

templates/index.html

@@ -30,7 +30,47 @@
       </form>
     </div>
 
+    </br>
+
+    <div class="container">
+      <h2>Current</h2>
+      <p id="status-message">Waiting</p>
+    </div>
+
+    </br>
+
+    <div class="container">
+      <h2>Queue</h2>
+      <table class="table" id="queue-table">
+        <thead>
+          <tr>
+            <th scope="col">#</th>
+            <th scope="col">URL</th>
+          </tr>
+        </thead>
+        <tbody id="queue-table-body"></tbody>
+      </table>
+    </div>
+
+    </br>
+
+    <div class="container">
+      <h2>Finished</h2>
+      <table class="table" id="finish-table">
+        <thead>
+          <tr>
+            <th scope="col">Artist</th>
+            <th scope="col">Title</th>
+            <th scope="col">Status</th>
+          </tr>
+        </thead>
+        <tbody id="finish-table-body"></tbody>
+      </table>
+    </div>
+
     <script>
+      const ripFormInput = document.getElementById("urlInput");
+
       document
         .getElementById("rip-form")
         .addEventListener("submit", async function (e) {
@@ -44,8 +84,38 @@
           });
 
           const data = await response.json();
+          ripFormInput.value = "";
         });
+
+      const queueTableBody = document.getElementById("queue-table-body");
+      const finishTableBody = document.getElementById("finish-table-body");
+      const statusMessage = document.getElementById("status-message");
+
+      async function status() {
+
+        const response = await fetch("/status", { method: "GET" });
+        const statusJson = await response.json();
+
+        const currentInfo = statusJson.currentReleaseInfo;
+        statusMessage.innerText = `${currentInfo.title} by ${currentInfo.artist} | ${currentInfo.status}`;
+
+        queueTableBody.innerHTML = "";
+
+        var i = 1;
+        for (const url of statusJson.queue) {
+          queueTableBody.innerHTML += `<tr><td>${i}</td><td>${url}</td></tr>`;
+          i ++;
+        }
+
+        finishTableBody.innerHTML = "";
+        for (const q of statusJson.finishedQueue) {
+          finishTableBody.innerHTML += `<tr><td>${q.artist}</td><td>${q.title}</td><td>${q.status}</td></tr>`;
+        }
+      }
+
+      setInterval(status, 100);
     </script>
+
     <script
       src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
       integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"