Add the /admin/downloads page for monitoring download queue

public/js/download-manager.js

@@ -0,0 +1,42 @@
+$(() => {
+	load();
+});
+const load = () => {
+	$.ajax({
+		type: 'GET',
+		url: '/api/admin/mangadex/queue',
+		dataType: 'json'
+	})
+	.done(data => {
+		console.log(data);
+		const rows = data.map(obj => {
+			var cls = 'uk-label ';
+			if (obj.status === 'Completed')
+				cls += 'uk-label-success';
+			if (obj.status === 'Error')
+				cls += 'uk-label-danger';
+			if (obj.status === 'MissingPages')
+				cls += 'uk-label-warning';
+
+			const statusSpan = `<span class="${cls}">${obj.status}</span>`;
+			return `<tr>
+				<td><a href="${baseURL}/chapter/${obj.id}">${obj.title}</a></td>
+				<td><a href="${baseURL}/manga/${obj.manga_id}">${obj.manga_title}</a></td>
+				<td>${obj.success_count}/${obj.pages}</td>
+				<td>${moment(obj.time).fromNow()}</td>
+				<td>${statusSpan}</td>
+				<td>
+					<a href="#" uk-icon="trash"></a>
+					<a href="#" uk-icon="info"></a>
+				</td>
+				</tr>`;
+		});
+
+		const tbody = `<tbody>${rows.join('')}</tbody>`;
+		$('tbody').remove();
+		$('table').append(tbody);
+	})
+	.fail((jqXHR, status) => {
+		alert('danger', `Failed to fetch download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+	});
+};

src/routes/admin.cr

@@ -99,5 +99,10 @@ class AdminRouter < Router
 					env.redirect redirect_url.to_s
 			end
 		end
+
+		get "/admin/downloads" do |env|
+			base_url = @context.config.mangadex["base_url"];
+			layout "download-manager"
+		end
 	end
 end

src/views/download-manager.ecr

@@ -0,0 +1,32 @@
+<div class="uk-margin">
+	<div id="actions" class="uk-margin">
+		<button class="uk-button uk-button-default">Delete Completed Tasks</button>
+		<button class="uk-button uk-button-default">Retry Failed Tasks</button>
+		<button class="uk-button uk-button-default">Refresh Queue</button>
+	</div>
+	<div id="config" class="uk-margin">
+		<label class="uk-margin-right"><input class="uk-checkbox" type="checkbox"> Auto Delete Completed Tasks</label>
+		<label><input class="uk-checkbox" type="checkbox" checked> Auto Refresh</label>
+	</div>
+</div>
+<table class="uk-table uk-table-striped uk-overflow-auto">
+    <thead>
+        <tr>
+			<th>Chapter</th>
+			<th>Manga</th>
+			<th>Progress</th>
+			<th>Time Submitted</th>
+			<th>Status</th>
+			<th>Actions</th>
+        </tr>
+    </thead>
+</table>
+
+<% content_for "script" do %>
+<script>
+	var baseURL = "<%= base_url %>".replace(/\/$/, "");
+</script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
+<script src="/js/alert.js"></script>
+<script src="/js/download-manager.js"></script>
+<% end %>