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

app/YtManagerApp/static/YtManagerApp/css/style.css

@@ -129,4 +129,10 @@
 .status-timestamp {
   margin-right: 0.25rem; }
 
+.dropdown-jobs {
+  min-width: 25rem; }
+  .dropdown-jobs .dropdown-item p {
+    margin: 0;
+    line-height: normal; }
+
 /*# sourceMappingURL=style.css.map */

app/YtManagerApp/static/YtManagerApp/css/style.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "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",
+"mappings": "AAEA,UAAW;EACP,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,CAAC;;AAGjB,YAAa;EACT,QAAQ,EAAE,KAAK;EACf,IAAI,EAAE,CAAC;EACP,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,CAAC;EACT,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,IAAI;EACjB,OAAO,EAAE,MAAM;EACf,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,MAAM;EACrB,SAAS,EAAE,IAAI;;AAqBnB,uBAAuB;AACvB,kBAAmB;EAlBf,OAAO,EAAE,YAAY;EACrB,KAAK,EAAE,IAAa;EACpB,MAAM,EAAE,IAAa;EAErB,wBAAQ;IACJ,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,KAAK;IACd,KAAK,EAAE,IAAa;IACpB,MAAM,EAAE,IAAa;IACrB,MAAM,EAAE,GAAG;IACX,aAAa,EAAE,GAAG;IAClB,MAAM,EAAE,iBAAkC;IAC1C,YAAY,EAAE,uCAAmD;IACjE,SAAS,EAAE,sCAAsC;;AASzD,wBAAyB;EAtBrB,OAAO,EAAE,YAAY;EACrB,KAAK,EAAE,IAAa;EACpB,MAAM,EAAE,IAAa;EAErB,8BAAQ;IACJ,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,KAAK;IACd,KAAK,EAAE,IAAa;IACpB,MAAM,EAAE,IAAa;IACrB,MAAM,EAAE,GAAG;IACX,aAAa,EAAE,GAAG;IAClB,MAAM,EAAE,mBAAkC;IAC1C,YAAY,EAAE,uCAAmD;IACjE,SAAS,EAAE,sCAAsC;;AAazD,4BAOC;EANG,EAAG;IACC,SAAS,EAAE,YAAY;EAE3B,IAAK;IACD,SAAS,EAAE,cAAc;AAIjC,gCAAiC;EAC7B,QAAQ,EAAE,KAAK;EACf,GAAG,EAAE,GAAG;EACR,IAAI,EAAE,GAAG;EACT,UAAU,EAAE,KAAK;EACjB,WAAW,EAAE,KAAK;;AAGtB,cAAe;EACX,QAAQ,EAAE,KAAK;EAAE,oCAAoC;EACrD,OAAO,EAAE,IAAI;EAAE,uBAAuB;EACtC,KAAK,EAAE,IAAI;EAAE,uCAAuC;EACpD,MAAM,EAAE,IAAI;EAAE,wCAAwC;EACtD,GAAG,EAAE,CAAC;EACN,IAAI,EAAE,CAAC;EACP,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,CAAC;EACT,gBAAgB,EAAE,kBAAe;EAAE,mCAAmC;EACtE,OAAO,EAAE,CAAC;EAAE,qFAAqF;EACjG,MAAM,EAAE,OAAO;EAAE,4BAA4B;;AAI7C,4BAAc;EACV,OAAO,EAAE,MAAM;EACf,aAAa,EAAE,KAAK;AAGpB,+BAAW;EACP,OAAO,EAAE,MAAM;AAEnB,+BAAW;EACP,SAAS,EAAE,IAAI;EACf,aAAa,EAAE,KAAK;AAExB,gCAAY;EACR,SAAS,EAAE,IAAI;EACf,aAAa,EAAE,KAAK;EAEpB,uCAAO;IACH,SAAS,EAAE,GAAG;AAGtB,iCAAa;EACT,OAAO,EAAE,YAAY;AAGzB,+BAAW;EACP,YAAY,EAAE,QAAQ;EACtB,qCAAQ;IACJ,eAAe,EAAE,IAAI;AAO7B,8BAAU;EACN,KAAK,EAAE,KAAK;AAKpB,8BAAgB;EACZ,KAAK,EAxHE,OAAO;AA0HlB,6BAAe;EACX,KAAK,EAAE,OAAO;;AAItB,WAAY;EACR,SAAS,EAAE,KAAK;EAChB,MAAM,EAAE,MAAM;;AAId,2BAAe;EACX,OAAO,EAAE,IAAI;;AAIrB,kBAAmB;EACf,MAAM,EAAE,QAAQ;EAChB,OAAO,EAAE,QAAQ;EAEjB,qBAAG;IACC,MAAM,EAAE,CAAC;;AAIjB,YAAa;EACT,OAAO,EAAE,YAAY;EACrB,aAAa,EAAE,MAAM;;AAGzB,YAAa;EACT,MAAM,EAAE,OAAO;EACf,iBAAK;IACD,OAAO,EAAE,cAAc;IACvB,SAAS,EAAE,IAAI;;AAIvB,iBAAkB;EACd,YAAY,EAAE,OAAO;;AAGzB,cAAe;EACX,SAAS,EAAE,KAAK;EAEhB,+BAAiB;IACb,MAAM,EAAE,CAAC;IACT,WAAW,EAAE,MAAM",
 "sources": ["style.scss"],
 "names": [],
 "file": "style.css"

app/YtManagerApp/static/YtManagerApp/css/style.scss

@@ -160,4 +160,13 @@ $accent-color: #007bff;
 
 .status-timestamp {
     margin-right: 0.25rem;
+}
+
+.dropdown-jobs {
+    min-width: 25rem;
+
+    .dropdown-item p {
+        margin: 0;
+        line-height: normal;
+    }
 }

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

@@ -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
+    // Notifications
-    setInterval(get_and_process_notifications, JOB_QUERY_INTERVAL);
+    get_and_process_running_jobs();
+    setInterval(get_and_process_running_jobs, JOB_QUERY_INTERVAL);
 });

app/YtManagerApp/templates/YtManagerApp/master_default.html

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