From c5c73ddff3f1489aacff3efcee85dfe00b873363 Mon Sep 17 00:00:00 2001 From: Alex Ling Date: Fri, 1 Jan 2021 09:19:16 +0000 Subject: [PATCH] Rewrite `download-manager.js` --- public/js/download-manager.js | 225 +++++++++++++--------------- src/views/download-manager.html.ecr | 2 +- 2 files changed, 104 insertions(+), 123 deletions(-) diff --git a/public/js/download-manager.js b/public/js/download-manager.js index 6136232..3a41763 100644 --- a/public/js/download-manager.js +++ b/public/js/download-manager.js @@ -1,124 +1,105 @@ -/** - * Get the current queue and update the view - * - * @function load - */ -const load = () => { - try { - setProp('loading', true); - } catch {} - $.ajax({ - type: 'GET', - url: base_url + 'api/admin/mangadex/queue', - dataType: 'json' - }) - .done(data => { - if (!data.success && data.error) { - alert('danger', `Failed to fetch download queue. Error: ${data.error}`); - return; +const component = () => { + return { + jobs: [], + paused: undefined, + loading: false, + toggling: false, + + init() { + 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', + dataType: 'json' + }) + .done(data => { + if (!data.success && data.error) { + alert('danger', `Failed to fetch download queue. Error: ${data.error}`); + return; + } + this.jobs = data.jobs; + this.paused = data.paused; + }) + .fail((jqXHR, status) => { + alert('danger', `Failed to fetch download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`); + }) + .always(() => { + this.loading = false; + }); + }, + jobAction(action, id) { + let url = `${base_url}api/admin/mangadex/queue/${action}`; + if (id !== undefined) + url += '?' + $.param({ + id: id + }); + console.log(url); + $.ajax({ + type: 'POST', + url: url, + dataType: 'json' + }) + .done(data => { + if (!data.success && data.error) { + alert('danger', `Failed to ${action} job from download queue. Error: ${data.error}`); + return; + } + this.load(); + }) + .fail((jqXHR, status) => { + alert('danger', `Failed to ${action} job from download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`); + }); + }, + toggle() { + this.toggling = true; + const action = this.paused ? 'resume' : 'pause'; + const url = `${base_url}api/admin/mangadex/queue/${action}`; + $.ajax({ + type: 'POST', + url: url, + dataType: 'json' + }) + .fail((jqXHR, status) => { + alert('danger', `Failed to ${action} download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`); + }) + .always(() => { + this.load(); + this.toggling = false; + }); + }, + statusClass(status) { + let cls = 'label '; + switch (status) { + case 'Pending': + cls += 'label-pending'; + break; + case 'Completed': + cls += 'label-success'; + break; + case 'Error': + cls += 'label-danger'; + break; + case 'MissingPages': + cls += 'label-warning'; + break; } - setProp('jobs', data.jobs); - setProp('paused', data.paused); - }) - .fail((jqXHR, status) => { - alert('danger', `Failed to fetch download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`); - }) - .always(() => { - setProp('loading', false); - }); -}; - -/** - * 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({ - id: id - }); - console.log(url); - $.ajax({ - type: 'POST', - url: url, - dataType: 'json' - }) - .done(data => { - if (!data.success && data.error) { - alert('danger', `Failed to ${action} job from download queue. Error: ${data.error}`); - return; - } - load(); - }) - .fail((jqXHR, status) => { - alert('danger', `Failed to ${action} job from download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`); - }); -}; - -/** - * Pause/resume the download - * - * @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', - url: url, - dataType: 'json' - }) - .fail((jqXHR, status) => { - alert('danger', `Failed to ${action} download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`); - }) - .always(() => { - load(); - setProp('toggling', false); - }); -}; - -/** - * 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': - cls += 'label-pending'; - break; - case 'Completed': - cls += 'label-success'; - break; - case 'Error': - cls += 'label-danger'; - break; - case 'MissingPages': - cls += 'label-warning'; - 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); + return cls; + } }; - ws.onerror = err => { - alert('danger', `Socket connection failed. Error: ${err}`); - }; - ws.onclose = err => { - alert('danger', 'Socket connection failed'); - }; -}); +}; diff --git a/src/views/download-manager.html.ecr b/src/views/download-manager.html.ecr index db919c1..1e53be0 100644 --- a/src/views/download-manager.html.ecr +++ b/src/views/download-manager.html.ecr @@ -1,4 +1,4 @@ -
+