mirror of
https://github.com/hkalexling/Mango.git
synced 2025-08-02 10:55:30 -04:00
Rewrite the download manager page
This commit is contained in:
Alex Ling
parent
455315a362
commit
280490fb36
@ -1,28 +1,64 @@
|
||||
$(() => {
|
||||
$('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');
|
||||
/**
|
||||
* Set an alpine.js property
|
||||
*
|
||||
* @function setProp
|
||||
* @param {string} key - Key of the data property
|
||||
* @param {*} prop - The data property
|
||||
*/
|
||||
const setProp = (key, prop) => {
|
||||
$('#root').get(0).__x.$data[key] = prop;
|
||||
};
|
||||
const remove = (id) => {
|
||||
var url = base_url + 'api/admin/mangadex/queue/delete';
|
||||
|
||||
/**
|
||||
* Get an alpine.js property
|
||||
*
|
||||
* @function getProp
|
||||
* @param {string} key - Key of the data property
|
||||
* @return {*} The data property
|
||||
*/
|
||||
const getProp = (key) => {
|
||||
return $('#root').get(0).__x.$data[key];
|
||||
};
|
||||
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
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
|
||||
@ -35,42 +71,24 @@ const remove = (id) => {
|
||||
})
|
||||
.done(data => {
|
||||
if (!data.success && data.error) {
|
||||
alert('danger', `Failed to remove job from download queue. Error: ${data.error}`);
|
||||
alert('danger', `Failed to ${action} 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 = base_url + 'api/admin/mangadex/queue/retry';
|
||||
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 restart download job. Error: ${data.error}`);
|
||||
return;
|
||||
}
|
||||
load();
|
||||
})
|
||||
.fail((jqXHR, status) => {
|
||||
alert('danger', `Failed to restart download job. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
|
||||
alert('danger', `Failed to ${action} job from download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Pause/resume the download
|
||||
*
|
||||
* @function toggle
|
||||
*/
|
||||
const toggle = () => {
|
||||
$('#pause-resume-btn').attr('disabled', '');
|
||||
const paused = $('#pause-resume-btn').text() === 'Resume download';
|
||||
const action = paused ? 'resume' : 'pause';
|
||||
setProp('toggling', true);
|
||||
const action = getProp('paused') ? 'resume' : 'pause';
|
||||
const url = `${base_url}api/admin/mangadex/queue/${action}`;
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
@ -82,64 +100,47 @@ const toggle = () => {
|
||||
})
|
||||
.always(() => {
|
||||
load();
|
||||
$('#pause-resume-btn').removeAttr('disabled');
|
||||
setProp('toggling', false);
|
||||
});
|
||||
};
|
||||
const load = () => {
|
||||
if (loading) return;
|
||||
loading = true;
|
||||
console.log('fetching');
|
||||
$.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;
|
||||
}
|
||||
console.log(data);
|
||||
const btnText = data.paused ? "Resume download" : "Pause download";
|
||||
$('#pause-resume-btn').text(btnText);
|
||||
$('#pause-resume-btn').removeAttr('hidden');
|
||||
const rows = data.jobs.map(obj => {
|
||||
var cls = 'label ';
|
||||
if (obj.status === 'Pending')
|
||||
cls += 'label-pending';
|
||||
if (obj.status === 'Completed')
|
||||
cls += 'label-success';
|
||||
if (obj.status === 'Error')
|
||||
cls += 'label-danger';
|
||||
if (obj.status === 'MissingPages')
|
||||
cls += 'label-warning';
|
||||
|
||||
const info = obj.status_message.length > 0 ? '<span uk-icon="info"></span>' : '';
|
||||
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>${obj.plugin_id ? obj.title : `<a href="${baseURL}/chapter/${obj.id}">${obj.title}</a>`}</td>
|
||||
<td>${obj.plugin_id ? obj.manga_title : `<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} ${dropdown}</td>
|
||||
<td>${obj.plugin_id || ""}</td>
|
||||
<td>
|
||||
<a onclick="remove('${obj.id}')" uk-icon="trash"></a>
|
||||
${retryBtn}
|
||||
</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}`);
|
||||
})
|
||||
.always(() => {
|
||||
loading = 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);
|
||||
};
|
||||
ws.onerror = err => {
|
||||
alert('danger', `Socket connection failed. Error: ${err}`);
|
||||
};
|
||||
ws.onclose = err => {
|
||||
alert('danger', 'Socket connection failed');
|
||||
};
|
||||
});
|
||||
|
||||
@ -212,6 +212,18 @@ class APIRouter < Router
|
||||
end
|
||||
end
|
||||
|
||||
ws "/api/admin/mangadex/queue" do |socket, env|
|
||||
interval_raw = env.params.query["interval"]?
|
||||
interval = (interval_raw.to_i? if interval_raw) || 5
|
||||
loop do
|
||||
socket.send({
|
||||
"jobs" => @context.queue.get_all,
|
||||
"paused" => @context.queue.paused?,
|
||||
}.to_json)
|
||||
sleep interval.seconds
|
||||
end
|
||||
end
|
||||
|
||||
get "/api/admin/mangadex/queue" do |env|
|
||||
begin
|
||||
jobs = @context.queue.get_all
|
||||
|
||||
@ -1,32 +1,68 @@
|
||||
<div class="uk-margin">
|
||||
<div id="actions" class="uk-margin">
|
||||
<button class="uk-button uk-button-default" onclick="remove()">Delete Completed Tasks</button>
|
||||
<button class="uk-button uk-button-default" onclick="refresh()">Retry Failed Tasks</button>
|
||||
<button class="uk-button uk-button-default" onclick="load()">Refresh Queue</button>
|
||||
<button class="uk-button uk-button-default" onclick="toggle()" id="pause-resume-btn" hidden></button>
|
||||
</div>
|
||||
<div id="config" class="uk-margin">
|
||||
<label><input id="auto-refresh" class="uk-checkbox" type="checkbox" checked> Auto Refresh</label>
|
||||
<div id="root" x-data="{jobs: [], paused: undefined, loading: false, toggling: false}" x-init="load()">
|
||||
<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>
|
||||
<button class="uk-button uk-button-default" @click="load()" :disabled="loading ? '' : false">Refresh Queue</button>
|
||||
<button class="uk-button uk-button-default" x-show="paused !== undefined" x-text="paused ? 'Resume Download' : 'Pause Download'" @click="toggle()" :disabled="toggling ? '' : false"></button>
|
||||
</div>
|
||||
<table class="uk-table uk-table-striped uk-overflow-auto">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Chapter</th>
|
||||
<th>Manga</th>
|
||||
<th>Progress</th>
|
||||
<th>Time</th>
|
||||
<th>Status</th>
|
||||
<th>Plugin</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template x-for="job in jobs" :key="job">
|
||||
<tr :id="`chapter-${job.id}`">
|
||||
|
||||
<template x-if="job.plugin_id">
|
||||
<td x-text="job.title"></td>
|
||||
</template>
|
||||
<template x-if="!job.plugin_id">
|
||||
<td><a :href="`${'<%= mangadex_base_url %>'.replace(/\/$/, '')}/chapter/${job.id}`" x-text="job.title"></td>
|
||||
</template>
|
||||
|
||||
<template x-if="job.plugin_id">
|
||||
<td x-text="job.manga_title"></td>
|
||||
</template>
|
||||
<template x-if="!job.plugin_id">
|
||||
<td><a :href="`${'<%= mangadex_base_url %>'.replace(/\/$/, '')}/manga/${job.manga_id}`" x-text="job.manga_title"></td>
|
||||
</template>
|
||||
|
||||
<td x-text="`${job.success_count}/${job.pages}`"></td>
|
||||
<td x-text="`${moment(job.time).fromNow()}`"></td>
|
||||
|
||||
<td>
|
||||
<span :class="statusClass(job.status)" x-text="job.status"></span>
|
||||
<template x-if="job.status_message.length > 0">
|
||||
<div class="uk-inline">
|
||||
<span uk-icon="info"></span>
|
||||
<div uk-dropdown x-text="job.status_message"></div>
|
||||
</div>
|
||||
</template>
|
||||
</td>
|
||||
|
||||
<td x-text="`${job.plugin_id || ''}`"></td>
|
||||
|
||||
<td>
|
||||
<a :onclick="`jobAction('delete', '${job.id}')`" uk-icon="trash"></a>
|
||||
<template x-if="job.status_message.length > 0">
|
||||
<a :onclick="`jobAction('retry', '${job.id}')`" uk-icon="refresh"></a>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<table class="uk-table uk-table-striped uk-overflow-auto">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Chapter</th>
|
||||
<th>Manga</th>
|
||||
<th>Progress</th>
|
||||
<th>Time</th>
|
||||
<th>Status</th>
|
||||
<th>Plugin</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<% content_for "script" do %>
|
||||
<script>
|
||||
var baseURL = "<%= mangadex_base_url %>".replace(/\/$/, "");
|
||||
</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
|
||||
<script src="<%= base_url %>js/alert.js"></script>
|
||||
<script src="<%= base_url %>js/download-manager.js"></script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user