Finish the download manager page

public/js/download-manager.js

@@ -1,7 +1,72 @@
 $(() => {
-	load();
+	$('input.uk-checkbox').each((i, e) => {
+		$(e).change(() => {
+			loadConfig();
 		});
+	});
+	loadConfig();
+	load();
+
+	const intervalMS = 5000;
+	setTimeout(() => {
+		setInterval(() => {
+			if (globalConfig.autoRefresh !== true) return;
+			load();
+		}, intervalMS);
+	}, intervalMS);
+});
+var globalConfig = {};
+var loading = false;
+
+const loadConfig = () => {
+	globalConfig.autoRefresh = $('#auto-refresh').prop('checked');
+};
+const remove = (id) => {
+	var url = '/api/admin/mangadex/queue/delete/';
+	if (id !== undefined) {
+		url += id;
+	}
+	$.ajax({
+		type: 'POST',
+		url: url,
+		dataType: 'json'
+	})
+	.done(data => {
+		if (!data.success && data.error) {
+			alert('danger', `Failed to remove job from download queue. Error: ${data.error}`);
+			return;
+		}
+		load();
+	})
+	.fail((jqXHR, status) => {
+		alert('danger', `Failed to remove job from download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+	});
+};
+const refresh = (id) => {
+	var url = '/api/admin/mangadex/queue/retry/';
+	if (id !== undefined) {
+		url += id;
+	}
+	$.ajax({
+		type: 'POST',
+		url: url,
+		dataType: 'json'
+	})
+	.done(data => {
+		if (!data.success && data.error) {
+			alert('danger', `Failed to restart download job. Error: ${data.error}`);
+			return;
+		}
+		load();
+	})
+	.fail((jqXHR, status) => {
+		alert('danger', `Failed to restart download job. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+	});
+};
 const load = () => {
+	if (loading) return;
+	loading = true;
+	console.log('fetching');
 	$.ajax({
 		type: 'GET',
 		url: '/api/admin/mangadex/queue',
@@ -18,16 +83,19 @@ const load = () => {
 			if (obj.status === 'MissingPages')
 				cls += 'uk-label-warning';
 
-			const statusSpan = `<span class="${cls}">${obj.status}</span>`;
+			const info = obj.status_message.length > 0 ? '<span uk-icon="info"></span>' : '';
-			return `<tr>
+			const statusSpan = `<span class="${cls}">${obj.status} ${info}</span>`;
+			const dropdown = obj.status_message.length > 0 ? `<div uk-dropdown>${obj.status_message}</div>` : '';
+			const retryBtn = obj.status_message.length > 0 ? `<a onclick="refresh('${obj.id}')" uk-icon="refresh"></a>` : '';
+			return `<tr id="chapter-${obj.id}">
 				<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>${statusSpan} ${dropdown}</td>
 				<td>
-					<a href="#" uk-icon="trash"></a>
+					<a onclick="remove('${obj.id}')" uk-icon="trash"></a>
-					<a href="#" uk-icon="info"></a>
+					${retryBtn}
 				</td>
 				</tr>`;
 		});
@@ -38,5 +106,8 @@ const load = () => {
 	})
 	.fail((jqXHR, status) => {
 		alert('danger', `Failed to fetch download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+	})
+	.always(() => {
+		loading = false;
 	});
 };

src/mangadex/downloader.cr

@@ -140,12 +140,37 @@ module MangaDex
 			self.count - start_count
 		end
 
-		def delete(job : Job)
+		def reset(id : String)
 			DB.open "sqlite3://#{@path}" do |db|
-				db.exec "delete from queue where id = (?)", job.id
+				db.exec "update queue set status = 0, status_message = '', " \
+					"pages = 0, success_count = 0, fail_count = 0 " \
+					"where id = (?)", id
 			end
 		end
 
+		def reset (job : Job)
+			self.reset job.id
+		end
+
+		# Reset all failed tasks (missing pages and error)
+		def reset
+			DB.open "sqlite3://#{@path}" do |db|
+				db.exec "update queue set status = 0, status_message = '', " \
+					"pages = 0, success_count = 0, fail_count = 0 " \
+					"where status = 2 or status = 4"
+			end
+		end
+
+		def delete(id : String)
+			DB.open "sqlite3://#{@path}" do |db|
+				db.exec "delete from queue where id = (?)", id
+			end
+		end
+
+		def delete(job : Job)
+			self.delete job.id
+		end
+
 		def get(job : Job)
 			DB.open "sqlite3://#{@path}" do |db|
 				db.query_one "select * from queue where id = (?)", id do |res|

src/routes/api.cr

@@ -131,5 +131,56 @@ class APIRouter < Router
 			jobs = @context.queue.get_all
 			send_json env, jobs.to_json
 		end
+
+		post "/api/admin/mangadex/queue/delete/:id" do |env|
+			begin
+				id = env.params.url["id"]
+				@context.queue.delete id
+				send_json env, {"success" => true}.to_json
+			rescue e
+				send_json env, {
+					"success" => false,
+					"error" => e.message
+				}.to_json
+			end
+		end
+
+		# Delete all completed tasks from the queue
+		post "/api/admin/mangadex/queue/delete" do |env|
+			begin
+				@context.queue.delete_status MangaDex::JobStatus::Completed
+				send_json env, {"success" => true}.to_json
+			rescue e
+				send_json env, {
+					"success" => false,
+					"error" => e.message
+				}.to_json
+			end
+		end
+
+		post "/api/admin/mangadex/queue/retry/:id" do |env|
+			begin
+				id = env.params.url["id"]
+				@context.queue.reset id
+				send_json env, {"success" => true}.to_json
+			rescue e
+				send_json env, {
+					"success" => false,
+					"error" => e.message
+				}.to_json
+			end
+		end
+
+		post "/api/admin/mangadex/queue/retry" do |env|
+			begin
+				@context.queue.reset
+				send_json env, {"success" => true}.to_json
+			rescue e
+				send_json env, {
+					"success" => false,
+					"error" => e.message
+				}.to_json
+			end
+		end
 	end
 end

src/views/download-manager.ecr

@@ -1,12 +1,11 @@
 <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" onclick="remove()">Delete Completed Tasks</button>
-		<button class="uk-button uk-button-default">Retry Failed Tasks</button>
+		<button class="uk-button uk-button-default" onclick="refresh()">Retry Failed Tasks</button>
-		<button class="uk-button uk-button-default">Refresh Queue</button>
+		<button class="uk-button uk-button-default" onclick="load()">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 id="auto-refresh" class="uk-checkbox" type="checkbox" checked> Auto Refresh</label>
-		<label><input class="uk-checkbox" type="checkbox" checked> Auto Refresh</label>
 	</div>
 </div>
 <table class="uk-table uk-table-striped uk-overflow-auto">