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 progress notifications.

Browse Source
This commit is contained in:
Tiberiu Chibici
2019-01-02 20:10:37 +02:00
parent 15f52a1d23
commit 3dd0f564b7
9 changed files with 97 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/YtManagerApp/templates/YtManagerApp/index_videos.html
View File

@ -4,7 +4,7 @@
<div class="video-gallery container-fluid">
<div class="row">
{% for video in videos %}
<div class="card-wrapper col-12 col-sm-6 col-lg-4 col-xl-3 d-flex align-items-stretch">
<div class="card-wrapper d-flex align-items-stretch" style="width: 18rem;">
<div class="card mx-auto">
<img class="card-img-top" src="{{ video.icon_best }}" alt="Thumbnail">
<div class="card-body">

8
app/YtManagerApp/templates/YtManagerApp/js/common.js
View File

@ -1,3 +1,11 @@
function zeroFill(number, width) {
width -= number.toString().length;
if ( width > 0 ) {
return new Array( width + (/\./.test( number ) ? 2 : 1) ).join( '0' ) + number;
}
return number + ""; // always return a string
}
class AjaxModal
{
constructor(url)

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

@ -179,6 +179,32 @@ function videos_Submit(e)
/// Notifications
///
const NOTIFICATION_INTERVAL = 1000;
const STATUS_UPDATE = 'st-up';
const STATUS_OPERATION_PROGRESS = 'st-op-prog';
const STATUS_OPERATION_END = 'st-op-end';
const OPERATION_LIST = {};
function notifications_update_progress_bar() {
var count = 0;
var percent = 0;
for(op in OPERATION_LIST) {
count++;
percent += OPERATION_LIST[op];
}
let progress = $('#status-progress');
if (count > 0) {
progress.removeClass('invisible');
let bar = progress.find('.progress-bar');
bar.width(percent * 100 + '%');
bar.text(count + ' operations in progress');
}
else {
progress.addClass('invisible');
}
}
function get_and_process_notifications()
{
@ -190,9 +216,23 @@ function get_and_process_notifications()
let dt = new Date(entry.time);
// Status update
if (entry.msg === 'st-up') {
if (entry.msg === STATUS_UPDATE) {
let txt = `<span class="status-timestamp">${dt.getHours()}:${zeroFill(dt.getMinutes(), 2)}</span>${entry.status}`;
$('#status-message').html(txt);
}
else if (entry.msg === STATUS_OPERATION_PROGRESS) {
let txt = `<span class="status-timestamp">${dt.getHours()}:${zeroFill(dt.getMinutes(), 2)}</span>${entry.status}`;
$('#status-message').html(txt);
OPERATION_LIST[entry.operation] = entry.progress;
notifications_update_progress_bar();
}
else if (entry.msg === STATUS_OPERATION_END) {
let txt = `<span class="status-timestamp">${dt.getHours()}:${dt.getMinutes()}</span>${entry.status}`;
$('#status-message').html(txt);
delete OPERATION_LIST[entry.operation];
notifications_update_progress_bar();
}
}

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

@ -65,11 +65,15 @@
{% endblock %}
</div>
<footer id="main_footer" class="footer bg-light">
<span id="status-message" class="ml-auto text-muted">Last synchronized: just now</span>
<footer id="main_footer" class="footer bg-light row">
<button id="btn_sync_now" class="btn btn-sm btn-light" title="Synchronize now!">
<span class="typcn typcn-arrow-sync" aria-hidden="true"></span>
</button>
<span id="status-message" class="text-muted"></span>
<div id="status-progress" class="progress my-2 ml-auto invisible" style="width: 15rem">
<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>
</footer>
<script src="{% static 'YtManagerApp/import/jquery/jquery-3.3.1.min.js' %}"></script>