Fixed external storage status indicator in admin page

- Fixes #5241
- Fixed indicator to appear, its selector was wrong
- Added spinner while saving an entry's settings
- Removed ajax "async: false" that blocked the browser while saving

diff --git a/apps/files_external/css/settings.css b/apps/files_external/css/settings.css
index f2f40247b28c02b9875dda7a26c29e8722f0d7a4..74b140284682397b22b0d64744035ae3f64e6be2 100644 (file)
--- a/apps/files_external/css/settings.css
+++ b/apps/files_external/css/settings.css
@@ -4,7 +4,9 @@ td.status > span {
        width: 16px;
        vertical-align: text-bottom;
 }
-
+span.loading{
+       background-size: 16px 16px;
+}
 span.success {
        background: #37ce02;
        border-radius: 8px;
@@ -12,9 +14,6 @@ span.success {
 span.error {
        background: #ce3702;
 }
-span.waiting {
-       background: none;
-}
 
 td.mountPoint, td.backend { width:10em; }
 td.remove>img { visibility:hidden; padding-top:0.8em; }

diff --git a/apps/files_external/js/settings.js b/apps/files_external/js/settings.js
index 3e605c59a9304491635a5b24094e3af9e6774b39..3e92bc87e8579f6f25aa61296e078cbdb4c17c63 100644 (file)
--- a/apps/files_external/js/settings.js
+++ b/apps/files_external/js/settings.js
@@ -1,10 +1,23 @@
+(function(){
+
+function updateStatus(statusEl, result){
+       statusEl.removeClass('success error loading');
+       if (result && result.status == 'success' && result.data.message) {
+               statusEl.addClass('success');
+               return true;
+       } else {
+               statusEl.addClass('error');
+               return false;
+       }
+}
+
 OC.MountConfig={
        saveStorage:function(tr) {
                var mountPoint = $(tr).find('.mountPoint input').val();
                if (mountPoint == '') {
                        return false;
                }
-               var statusSpan = $(tr).find('.status span');
+               var statusSpan = $(tr).closest('tr').find('.status span');
                var backendClass = $(tr).find('.backend').data('class');
                var configuration = $(tr).find('.configuration input');
                var addMountPoint = true;
@@ -58,6 +71,7 @@ OC.MountConfig={
                                                }
                                                users.push(applicable);
                                        }
+                                       statusSpan.addClass('loading').removeClass('error success');
                                        $.ajax({type: 'POST',
                                                url: OC.filePath('files_external', 'ajax', 'addMountPoint.php'),
                                                data: {
@@ -68,15 +82,11 @@ OC.MountConfig={
                                                        applicable: applicable,
                                                        isPersonal: isPersonal
                                                },
-                                               async: false,
                                                success: function(result) {
-                                                       statusSpan.removeClass();
-                                                       if (result && result.status == 'success' && result.data.message) {
-                                                               status = true;
-                                                               statusSpan.addClass('success');
-                                                       } else {
-                                                               statusSpan.addClass('error');
-                                                       }
+                                                       status = updateStatus(statusSpan, result);
+                                               },
+                                               error: function(result){
+                                                       status = updateStatus(statusSpan, result);
                                                }
                                        });
                                });
@@ -93,8 +103,7 @@ OC.MountConfig={
                                                        mountType: mountType,
                                                        applicable: applicable,
                                                        isPersonal: isPersonal
-                                               },
-                                               async: false
+                                               }
                                        });
                                });
                                var mountType = 'user';
@@ -108,14 +117,14 @@ OC.MountConfig={
                                                        mountType: mountType,
                                                        applicable: applicable,
                                                        isPersonal: isPersonal
-                                               },
-                                               async: false
+                                               }
                                        });
                                });
                        } else {
                                var isPersonal = true;
                                var mountType = 'user';
                                var applicable = OC.currentUser;
+                               statusSpan.addClass('loading').removeClass('error success');
                                $.ajax({type: 'POST',
                                        url: OC.filePath('files_external', 'ajax', 'addMountPoint.php'),
                                        data: {
@@ -126,15 +135,11 @@ OC.MountConfig={
                                                applicable: applicable,
                                                isPersonal: isPersonal
                                        },
-                                       async: false,
                                        success: function(result) {
-                                               statusSpan.removeClass();
-                                               if (result && result.status == 'success' && result.data.message) {
-                                                       status = true;
-                                                       statusSpan.addClass('success');
-                                               } else {
-                                                       statusSpan.addClass('error');
-                                               }
+                                               status = updateStatus(statusSpan, result);
+                                       },
+                                       error: function(result){
+                                               status = updateStatus(statusSpan, result);
                                        }
                                });
                        }
@@ -157,7 +162,7 @@ $(document).ready(function() {
                        $(tr).find('.mountPoint input').val(suggestMountPoint(selected));
                }
                $(tr).addClass(backendClass);
-               $(tr).find('.status').append('<span class="waiting"></span>');
+               $(tr).find('.status').append('<span></span>');
                $(tr).find('.backend').data('class', backendClass);
                var configurations = $(this).data('configurations');
                var td = $(tr).find('td.configuration');
@@ -293,3 +298,5 @@ $(document).ready(function() {
        });
 
 });
+
+})();