Merge pull request #63 from chibicitiberiu/status-on-ui

Status on ui

app/YtManagerApp/templates/YtManagerApp/index.html

@@ -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 %}

app/YtManagerApp/templates/YtManagerApp/index_videos.html

@@ -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">

app/YtManagerApp/templates/YtManagerApp/js/common.js

@@ -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)

app/YtManagerApp/templates/YtManagerApp/js/index.js

@@ -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);
 });

app/YtManagerApp/templates/YtManagerApp/master_default.html

@@ -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>