chibicitiberiu/ytsm
1
0
Fork 0
mirror of https://github.com/chibicitiberiu/ytsm.git synced 2024-02-24 05:43:31 +00:00
Code Issues Releases Wiki Activity

Added a dropdown panel where the currently running jobs can be viewed.

Browse Source
This commit is contained in:
Tiberiu Chibici
2019-08-18 17:08:36 +03:00
parent 9bf114c25d
commit 1deab8847b
5 changed files with 90 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
app/YtManagerApp/templates/YtManagerApp/js/index.js
View File

@ -181,24 +181,28 @@ function videos_Submit(e)
const JOB_QUERY_INTERVAL = 1500;
function get_and_process_notifications()
function get_and_process_running_jobs()
{
$.get("{% url 'ajax_get_running_jobs' %}")
.done(function(data) {
let progress = $('#status-progress');
let jobPanel = $('#job_panel');
let jobTitle = jobPanel.find('#job_panel_title');
let jobTitleNoJobs = jobPanel.find('#job_panel_no_jobs_title');
let jobTemplate = jobPanel.find('#job_panel_item_template');
if (data.length > 0) {
let statusTxt = "";
// Update status bar
if (data.length > 1) {
statusTxt = `Running ${data.length} jobs...`;
$('#status-message').text(`Running ${data.length} jobs...`);
}
else {
statusTxt = `${data[0].description} | ${data[0].message}`;
$('#status-message').text(`${data[0].description} | ${data[0].message}`);
}
// Update global progress bar
let combinedProgress = 0;
for (let entry of data) {
combinedProgress += entry.progress;
@ -210,11 +214,41 @@ function get_and_process_notifications()
let bar = progress.find('.progress-bar');
bar.width(percent + '%');
bar.text(`${percent.toFixed(0)}%`);
$('#status-message').text(statusTxt);
// Update entries in job list
jobTitle.removeClass('collapse');
jobTitleNoJobs.addClass('collapse');
data.sort(function (a, b) { return a.id - b.id });
jobPanel.find('.job_entry').remove();
for (let entry of data) {
let jobEntry = jobTemplate.clone();
jobEntry.attr('id', `job_${entry.id}`);
jobEntry.addClass('job_entry');
jobEntry.removeClass('collapse');
jobEntry.find('#job_panel_item_title').text(entry.description);
jobEntry.find('#job_panel_item_subtitle').text(entry.message);
let entryPercent = 100 * entry.progress;
let jobEntryProgress = jobEntry.find('#job_panel_item_progress');
jobEntryProgress.width(entryPercent + '%');
jobEntryProgress.text(`${entryPercent.toFixed(0)}%`);
jobEntry.appendTo(jobPanel);
}
$('#btn_toggle_job_panel').dropdown('update');
}
else {
progress.addClass('invisible');
$('#status-message').text("");
jobTitle.addClass('collapse');
jobTitleNoJobs.removeClass('collapse');
jobPanel.find('.job_entry').remove();
$('#btn_toggle_job_panel').dropdown('update');
}
});
}
@ -259,6 +293,7 @@ $(document).ready(function ()
videos_Reload();
// Notification manager
setInterval(get_and_process_notifications, JOB_QUERY_INTERVAL);
// Notifications
get_and_process_running_jobs();
setInterval(get_and_process_running_jobs, JOB_QUERY_INTERVAL);
});

31
app/YtManagerApp/templates/YtManagerApp/master_default.html
View File

@ -74,6 +74,37 @@
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="btn-group">
<button id="btn_toggle_job_panel"
class="btn btn-sm btn-light dropdown-toggle"
title="Show/hide details"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span class="typcn typcn-th-list" aria-hidden="true"></span>
</button>
<div id="job_panel" class="dropdown-menu dropdown-jobs" aria-labelledby="btn_toggle_job_panel">
<h6 id="job_panel_title" class="dropdown-header collapse">Running jobs</h6>
<h6 id="job_panel_no_jobs_title" class="dropdown-header">No jobs are currently running</h6>
<div id="job_panel_item_template" class="dropdown-item collapse">
<div class="row">
<div class="col-8">
<p id="job_panel_item_title">Title</p>
<p><small id="job_panel_item_subtitle" class="text-muted">Subtitle</small></p>
</div>
<div class="col-4">
<div class="progress">
<div id="job_panel_item_progress"
class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<script src="{% static 'YtManagerApp/import/jquery/jquery-3.3.1.min.js' %}"></script>