Rewrite download-manager.js

public/js/download-manager.js

@@ -1,12 +1,28 @@
-/**
+const component = () => {
- * Get the current queue and update the view
+	return {
- *
+		jobs: [],
- * @function load
+		paused: undefined,
- */
+		loading: false,
-const load = () => {
+		toggling: false,
-	try {
+
-		setProp('loading', true);
+		init() {
-	} catch {}
+			const ws = new WebSocket(`ws://${location.host}/api/admin/mangadex/queue`);
+			ws.onmessage = event => {
+				const data = JSON.parse(event.data);
+				this.jobs = data.jobs;
+				this.paused = data.paused;
+			};
+			ws.onerror = err => {
+				alert('danger', `Socket connection failed. Error: ${err}`);
+			};
+			ws.onclose = err => {
+				alert('danger', 'Socket connection failed');
+			};
+
+			this.load();
+		},
+		load() {
+			this.loading = true;
 			$.ajax({
 					type: 'GET',
 					url: base_url + 'api/admin/mangadex/queue',
@@ -17,25 +33,17 @@ const load = () => {
 						alert('danger', `Failed to fetch download queue. Error: ${data.error}`);
 						return;
 					}
-			setProp('jobs', data.jobs);
+					this.jobs = data.jobs;
-			setProp('paused', data.paused);
+					this.paused = data.paused;
 				})
 				.fail((jqXHR, status) => {
 					alert('danger', `Failed to fetch download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
 				})
 				.always(() => {
-			setProp('loading', false);
+					this.loading = false;
 				});
-};
+		},
-
+		jobAction(action, id) {
-/**
- * Perform an action on either a specific job or the entire queue
- *
- * @function jobAction
- * @param {string} action - The action to perform. Should be either 'delete' or 'retry'
- * @param {string?} id - (Optional) A job ID. When omitted, apply the action to the queue
- */
-const jobAction = (action, id) => {
 			let url = `${base_url}api/admin/mangadex/queue/${action}`;
 			if (id !== undefined)
 				url += '?' + $.param({
@@ -52,21 +60,15 @@ const jobAction = (action, id) => {
 						alert('danger', `Failed to ${action} job from download queue. Error: ${data.error}`);
 						return;
 					}
-			load();
+					this.load();
 				})
 				.fail((jqXHR, status) => {
 					alert('danger', `Failed to ${action} job from download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
 				});
-};
+		},
-
+		toggle() {
-/**
+			this.toggling = true;
- * Pause/resume the download
+			const action = this.paused ? 'resume' : 'pause';
- *
- * @function toggle
- */
-const toggle = () => {
-	setProp('toggling', true);
-	const action = getProp('paused') ? 'resume' : 'pause';
 			const url = `${base_url}api/admin/mangadex/queue/${action}`;
 			$.ajax({
 					type: 'POST',
@@ -77,19 +79,11 @@ const toggle = () => {
 					alert('danger', `Failed to ${action} download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
 				})
 				.always(() => {
-			load();
+					this.load();
-			setProp('toggling', false);
+					this.toggling = false;
 				});
-};
+		},
-
+		statusClass(status) {
-/**
- * Get the uk-label class name for a given job status
- *
- * @function statusClass
- * @param {string} status - The job status
- * @return {string} The class name string
- */
-const statusClass = status => {
 			let cls = 'label ';
 			switch (status) {
 				case 'Pending':
@@ -106,19 +100,6 @@ const statusClass = status => {
 					break;
 			}
 			return cls;
+		}
 	};
-
-$(() => {
-	const ws = new WebSocket(`ws://${location.host}/api/admin/mangadex/queue`);
-	ws.onmessage = event => {
-		const data = JSON.parse(event.data);
-		setProp('jobs', data.jobs);
-		setProp('paused', data.paused);
 };
-	ws.onerror = err => {
-		alert('danger', `Socket connection failed. Error: ${err}`);
-	};
-	ws.onclose = err => {
-		alert('danger', 'Socket connection failed');
-	};
-});

src/views/download-manager.html.ecr

@@ -1,4 +1,4 @@
-<div id="root" x-data="{jobs: [], paused: undefined, loading: false, toggling: false}" x-init="load()">
+<div x-data="component()" x-init="init()">
   <div class="uk-margin">
     <button class="uk-button uk-button-default" @click="jobAction('delete')">Delete Completed Tasks</button>
     <button class="uk-button uk-button-default" @click="jobAction('retry')">Retry Failed Tasks</button>