From fac9f2d6e8da2ae0ad7ac7482993bdc5d149a0a4 Mon Sep 17 00:00:00 2001
From: softworkz <softworkz@hotmail.com>
Date: Fri, 19 Aug 2016 03:00:04 +0200
Subject: [PATCH] Auto-Organize: Async operation and instant feedback UI
 (reworked)

This commit includes changes to enable and stabilize asyncronous
operation in the auto-organize area. Here are the key points:

- The auto-organize correction dialog is now closed (almost) instantly.
This means that the user does not have to wait until the file copy/move
operation is completed in order to continue. (even with local HDs the
copy/move process can take several minutes or even much longer with
network destination).
- This commit also implements locking of files to be organized in order
to prevent parallel processing of the same item. In effect, there can be
2 or more manual organization operations active even while the normal
auto-organization task is running without causing any problems
- The items that are currently being processed are indicated as such in
the log with an orange color and a spinner graphic
- The client display is refreshed through websocket messages
- A side effect of this is that other clients showing the auto-organize
log at the same time are always up-to-date as well
---
 dashboard-ui/autoorganizelog.html       |   1 +
 dashboard-ui/css/images/throbber.gif    | Bin 0 -> 1720 bytes
 dashboard-ui/scripts/autoorganizelog.js | 143 +++++++++++++++---------
 3 files changed, 89 insertions(+), 55 deletions(-)
 create mode 100644 dashboard-ui/css/images/throbber.gif

diff --git a/dashboard-ui/autoorganizelog.html b/dashboard-ui/autoorganizelog.html
index ce2b094e67..a851d909bd 100644
--- a/dashboard-ui/autoorganizelog.html
+++ b/dashboard-ui/autoorganizelog.html
@@ -17,6 +17,7 @@
             <table data-role="table" data-mode="reflow" class="tblOrganizationResults stripedTable ui-responsive table-stroke">
                 <thead>
                     <tr>
+                        <th data-priority="1"></th>
                         <th data-priority="2">${HeaderDate}</th>
                         <th data-priority="1">${HeaderSource}</th>
                         <th data-priority="3">${HeaderDestination}</th>
diff --git a/dashboard-ui/css/images/throbber.gif b/dashboard-ui/css/images/throbber.gif
new file mode 100644
index 0000000000000000000000000000000000000000..1b5b2fde42f8ea14e6981339196a9d62b681d79e
GIT binary patch
literal 1720
zcmZ|OYfMvT7zgm4p2O+ea@rnBg#)OxTPX)YQxLES+gfgxVz~&+f}$;m6s%Hi3W%nq
zP@z^qrV}=TNF%FL8K5q@MN>cp#S0pVI*qHSli{|&j8i`-D~lhy5AU}p`Tz2N-e*-(
zqBu&8Q*g>F3T19?Zf0i2Y&JU_j>N>onwlC4g`!j{1p>jzlP51;yvXHpJ32ZL1c{7{
z)MzyPIro%=%#1i`T0+<|5ezw}`5%1a$_msK1)F#~iYhcbb+NiiTcX~ytZ3Wj5(@tv
zLT5OqLY&VTiBl*@DK5jOqAQC<<G>V}_H8&J8*d!6F|8^P+>r!@8gG==_FR|TOFO5N
ztmi!uPli+Ln$x?H-gK%V=cf&)%tK3Ubl`;)j){YK#AZm_($yDbHN+iIVb4-MA(|Tn
z%Y=0Su-m75IE?%N1|!SEl|tuKXsXZNj2Z=vp;+=jlJSZD2EODW0H`s<BGnEWXznAI
zRihe|b_nZwTPrk3hRW~AIL)!p_U?GtGW>M#)b0zgDU0)5!G<?Df;@1J<B}}$iz_rX
z%&1amW8ARS!n!TmVl%lfFgegAqRfdPJ)MZh0O24h14(h^`bjnUkS0px2vG>rr5zO1
zNgN^!L7)EBFUC+Zhm%Mr7yC91@!CieHdPd#!o7Jn^!!TMrU0vgH)|h-!|2wozJKmj
z`G&1Z^{+00Fi|SEx@=o?UTI)xo@>T@7i7MZAqTYCMc0JP{oZJEdWye2L~bM45otrq
zk@}$q6%b*2<$<rGgK+flGwX~NJ-1OZC=+b&8OgiN%OxC&;OQ;|WiSgRw=ksb#&<za
zK1};>_YGZVC^6PBqU&pG6rtOM!WN;+E;i3EB*=+K0j60WC&J{7x}V=Ak(w<1X>er-
zV`_bHI~Y%5hQkS?_Lf?1C-Yh<h7tEWuJ%96W&EPplGML=g?##fc|vxO|L1G5ZD_RM
z(Tj4^#p&uVw|Ul8n}qd7PnXeE&S=}3vp0R#fY{ju!$P-)K)_p5HZg;}>;suT<W)-8
z;kx`iyiHuHMJN&z3xBv}KTXF8|KII}R1u3-r}}w9OMpw0QuXdgm}Y&{liY*C{OPgX
zUZ?_f_wm`a2&GYCveuUXl#!dgl>(z!ZdS6NOH8>FGetNtnE-ngIxI9OKM9M!nq|ao
z@ByV)WU%+EiuxlBZ=#rs_ZnY%+O^bXr2P8_g2l~7Z822<SgQ<oLQ+s#(QNr~78f;+
zhb@i4QQP2wt12&)isqN3uGGU-%TiY}QE%po+(23_*R|unGo5$n(&V^cSh$OL`&qzR
zCSM%GI8-@V8IZ68tZ44Z&~bCRp9y&&;D}J)Em6co_+5TFbGrKL@Pc0BLLPSEs}U6r
z0O&F3U@#64D^tG})xz%X5DQ)EM@RX_MIa(Q09x<kS~1^-=3K?}&XIHSW9b_m?G{qq
z^NwyTC_U5K7F&F1@^XyjKDL~W6rJ%<@idQHty1+jeI#yXT22cHY;Z!~hi6im#(b4T
z#9`NY%-Tc)RHOZgOn*3*qXkecL}MB}=}iz|36X4hVMd|v|88a8G4{^p`?}Idl`BOX
zuBoz5ykT1C<(d}o<FU?zUN8E|&tvt{yyH5e6A|ni%((5<o22iTb2=}K4G-E7+%(eO
z$6ZJ@#~p3e(J>1w?Uyx%!zc@?f!tWxz6{`xAWPUyeq1Vbvuj7m$3Dh(PTY04bw^_A
zwRr|LuoC34N#A1;<G*GRP5b`%TSEBr>?zXdaId|wW$kzq2e~Uqdrq=@A0^DlGO4UM
zzC<kYY0fsJAB70}P`(4Su69S93@ke%8)DNw&*2qf6+W)d<>O9@&t7@ohLX-t)ftJ|
z)q;&?w?;l@^4Pc`;x3vPJ8(itFdKg3;$nap8V7O~;L775>pjUjnIyS=0%4f;&$i;^
q^<`2=x-x(uk2YUU2h;2jemsk<aD(WL8L(lGH>O_4rHker(f<M+QXWPC

literal 0
HcmV?d00001

diff --git a/dashboard-ui/scripts/autoorganizelog.js b/dashboard-ui/scripts/autoorganizelog.js
index 9e826fb082..ecaad558dc 100644
--- a/dashboard-ui/scripts/autoorganizelog.js
+++ b/dashboard-ui/scripts/autoorganizelog.js
@@ -1,4 +1,4 @@
-define(['jQuery', 'scripts/taskbutton', 'datetime', 'paper-icon-button-light'], function ($, taskButton, datetime) {
+define(['jQuery', 'serverNotifications', 'events', 'scripts/taskbutton', 'datetime', 'paper-icon-button-light'], function ($, serverNotifications, events, taskButton, datetime) {
 
     var query = {
 
@@ -41,7 +41,7 @@
 
                     Dashboard.hideLoadingMsg();
 
-                    reloadItems(page);
+                    reloadItems(page, true);
 
                 }, Dashboard.processErrorResponse);
             });
@@ -58,7 +58,7 @@
         require(['components/fileorganizer/fileorganizer'], function (fileorganizer) {
 
             fileorganizer.show(item).then(function () {
-                reloadItems(page);
+                reloadItems(page, false);
             });
         });
     }
@@ -99,16 +99,18 @@
 
                     Dashboard.hideLoadingMsg();
 
-                    reloadItems(page);
+                    reloadItems(page, true);
 
                 }, Dashboard.processErrorResponse);
             });
         });
     }
 
-    function reloadItems(page) {
+    function reloadItems(page, showSpinner) {
 
-        Dashboard.showLoadingMsg();
+        if (showSpinner) {
+            Dashboard.showLoadingMsg();
+        }
 
         ApiClient.getFileOrganizationResults(query).then(function (result) {
 
@@ -156,47 +158,9 @@
 
             var html = '';
 
-            html += '<tr>';
+            html += '<tr id="row' + item.Id + '">';
 
-            html += '<td>';
-
-            var date = datetime.parseISO8601Date(item.Date, true);
-            html += date.toLocaleDateString();
-
-            html += '</td>';
-
-            html += '<td>';
-            var status = item.Status;
-
-            if (status == 'SkippedExisting') {
-                html += '<a data-resultid="' + item.Id + '" style="color:blue;" href="#" class="btnShowStatusMessage">';
-                html += item.OriginalFileName;
-                html += '</a>';
-            }
-            else if (status == 'Failure') {
-                html += '<a data-resultid="' + item.Id + '" style="color:red;" href="#" class="btnShowStatusMessage">';
-                html += item.OriginalFileName;
-                html += '</a>';
-            } else {
-                html += '<div style="color:green;">';
-                html += item.OriginalFileName;
-                html += '</div>';
-            }
-            html += '</td>';
-
-            html += '<td>';
-            html += item.TargetPath || '';
-            html += '</td>';
-
-            html += '<td class="organizerButtonCell">';
-
-            if (item.Status != 'Success') {
-
-                html += '<button type="button" is="paper-icon-button-light" data-resultid="' + item.Id + '" class="btnProcessResult organizerButton autoSize" title="' + Globalize.translate('ButtonOrganizeFile') + '"><i class="md-icon">folder</i></button>';
-                html += '<button type="button" is="paper-icon-button-light" data-resultid="' + item.Id + '" class="btnDeleteResult organizerButton autoSize" title="' + Globalize.translate('ButtonDeleteFile') + '"><i class="md-icon">delete</i></button>';
-            }
-
-            html += '</td>';
+            html += renderItemRow(item);
 
             html += '</tr>';
 
@@ -247,13 +211,13 @@
         $('.btnNextPage', page).on('click', function () {
 
             query.StartIndex += query.Limit;
-            reloadItems(page);
+            reloadItems(page, true);
         });
 
         $('.btnPreviousPage', page).on('click', function () {
 
             query.StartIndex -= query.Limit;
-            reloadItems(page);
+            reloadItems(page, true);
         });
 
         if (result.TotalRecordCount) {
@@ -263,13 +227,82 @@
         }
     }
 
-    function onWebSocketMessage(e, msg) {
+    function renderItemRow(item) {
+
+        var html = '';
+
+        html += '<td>';
+        var hide = item.IsInProgress ? '' : ' hide';
+        html += '<img src="css/images/throbber.gif" alt="" class="syncSpinner' + hide + '" style="vertical-align: middle;" />';
+        html += '</td>';
+
+        html += '<td>';
+        var date = datetime.parseISO8601Date(item.Date, true);
+        html += date.toLocaleDateString();
+        html += '</td>';
+
+        html += '<td>';
+        var status = item.Status;
+
+        if (item.IsInProgress) {
+            html += '<span style="color:darkorange;">';
+            html += item.OriginalFileName;
+            html += '</span>';
+        }
+        else if (status == 'SkippedExisting') {
+            html += '<a data-resultid="' + item.Id + '" style="color:blue;" href="#" class="btnShowStatusMessage">';
+            html += item.OriginalFileName;
+            html += '</a>';
+        }
+        else if (status == 'Failure') {
+            html += '<a data-resultid="' + item.Id + '" style="color:red;" href="#" class="btnShowStatusMessage">';
+            html += item.OriginalFileName;
+            html += '</a>';
+        } else {
+            html += '<span style="color:green;">';
+            html += item.OriginalFileName;
+            html += '</span>';
+        }
+        html += '</td>';
+
+        html += '<td>';
+        html += item.TargetPath || '';
+        html += '</td>';
+
+        html += '<td class="organizerButtonCell">';
+
+        if (item.Status != 'Success') {
+
+            html += '<button type="button" is="paper-icon-button-light" data-resultid="' + item.Id + '" class="btnProcessResult organizerButton autoSize" title="' + Globalize.translate('ButtonOrganizeFile') + '"><i class="md-icon">folder</i></button>';
+            html += '<button type="button" is="paper-icon-button-light" data-resultid="' + item.Id + '" class="btnDeleteResult organizerButton autoSize" title="' + Globalize.translate('ButtonDeleteFile') + '"><i class="md-icon">delete</i></button>';
+        }
+
+        html += '</td>';
+
+        return html;
+    }
+
+    function onServerEvent(e, apiClient, data) {
 
         var page = $.mobile.activePage;
 
-        if ((msg.MessageType == 'ScheduledTaskEnded' && msg.Data.Key == 'AutoOrganize') || msg.MessageType == 'AutoOrganizeUpdate') {
+        if (data) {
 
-            reloadItems(page);
+            updateItemStatus(page, data);
+        } else {
+
+            reloadItems(page, false);
+        }
+    }
+
+    function updateItemStatus(page, item) {
+
+        var rowId = '#row' + item.Id;
+        var row = page.querySelector(rowId);
+
+        if (row) {
+
+            row.innerHTML = renderItemRow(item);
         }
     }
 
@@ -296,7 +329,7 @@
         $('.btnClearLog', page).on('click', function () {
 
             ApiClient.clearOrganizationLog().then(function () {
-                reloadItems(page);
+                reloadItems(page, true);
             }, Dashboard.processErrorResponse);
         });
 
@@ -306,7 +339,7 @@
 
         var page = this;
 
-        reloadItems(page);
+        reloadItems(page, true);
 
         // on here
         taskButton({
@@ -317,7 +350,7 @@
             button: page.querySelector('.btnOrganize')
         });
 
-        Events.on(ApiClient, 'websocketmessage', onWebSocketMessage);
+        events.on(serverNotifications, 'AutoOrganizeUpdate', onServerEvent);
 
     }).on('pagebeforehide', '#libraryFileOrganizerLogPage', function () {
 
@@ -331,7 +364,7 @@
             button: page.querySelector('.btnOrganize')
         });
 
-        Events.off(ApiClient, 'websocketmessage', onWebSocketMessage);
+        events.off(serverNotifications, 'AutoOrganizeUpdate', onServerEvent);
     });
 
 });
\ No newline at end of file