Added a basic notification system. Long processes will call the notification API, and the notification events are registered. For now, notifications are pushed to the client by polling (client polls every second for new events). A basic status message is now displayed when the sync process starts and ends.

app/YtManagerApp/templates/YtManagerApp/index.html

@@ -9,6 +9,8 @@
 {% block scripts %}
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
     <script>
+        let LAST_NOTIFICATION_ID = {{ current_notification_id }};
+
         {% include 'YtManagerApp/js/index.js' %}
     </script>
 {% endblock %}

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

@@ -157,6 +157,30 @@ function videos_Submit(e)
         e.preventDefault();
 }
 
+///
+/// Notifications
+///
+const NOTIFICATION_INTERVAL = 1000;
+
+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 === 'st-up') {
+                    let txt = `<span class="status-timestamp">${dt.getHours()}:${dt.getMinutes()}</span>${entry.status}`;
+                    $('#status-message').html(txt);
+                }
+
+            }
+        });
+}
+
 ///
 /// Initialization
 ///
@@ -186,4 +210,7 @@ $(document).ready(function ()
     filters_form.find('select[name=show_watched]').on('change', videos_ReloadWithTimer);
     filters_form.find('select[name=show_downloaded]').on('change', videos_ReloadWithTimer);
     videos_Reload();
+
+    // Notification manager
+    setInterval(get_and_process_notifications, NOTIFICATION_INTERVAL);
 });

app/YtManagerApp/templates/YtManagerApp/master_default.html

@@ -67,7 +67,7 @@
         </div>
 
         <footer id="main_footer" class="footer bg-light">
-            <span class="ml-auto text-muted">Last synchronized: just now</span>
+            <span id="status-message" class="ml-auto text-muted">Last synchronized: just now</span>
             <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>