mirror of
https://github.com/chibicitiberiu/ytsm.git
synced 2024-02-24 05:43:31 +00:00
@ -9,6 +9,8 @@
|
||||
{% block scripts %}
|
||||
<script src="{% static 'YtManagerApp/import/jstree/dist/jstree.min.js' %}"></script>
|
||||
<script>
|
||||
let LAST_NOTIFICATION_ID = {{ current_notification_id }};
|
||||
|
||||
{% include 'YtManagerApp/js/index.js' %}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
@ -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">
|
||||
<a href="{% url 'video' video.id %}">
|
||||
<img class="card-img-top" src="{{ video.icon_best }}" alt="Thumbnail">
|
||||
|
@ -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)
|
||||
|
@ -175,6 +175,70 @@ function videos_Submit(e)
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
///
|
||||
/// 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()
|
||||
{
|
||||
$.get("{% url 'ajax_get_notifications' 12345 %}".replace("12345", LAST_NOTIFICATION_ID))
|
||||
.done(function(data) {
|
||||
for (let entry of data)
|
||||
{
|
||||
LAST_NOTIFICATION_ID = entry.id;
|
||||
let dt = new Date(entry.time);
|
||||
|
||||
// Status update
|
||||
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();
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
///
|
||||
/// Initialization
|
||||
///
|
||||
@ -214,4 +278,7 @@ $(document).ready(function ()
|
||||
filters_form.find('select[name=results_per_page]').on('change', videos_ResetPageAndReloadWithTimer);
|
||||
|
||||
videos_Reload();
|
||||
|
||||
// Notification manager
|
||||
setInterval(get_and_process_notifications, NOTIFICATION_INTERVAL);
|
||||
});
|
||||
|
@ -65,11 +65,15 @@
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
||||
<footer id="main_footer" class="footer bg-light">
|
||||
<span 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>
|
||||
|
Reference in New Issue
Block a user