Install and uninstall plugins with style

- Don't block the whole page when installing a plugin
- allow people to search and install other plugins meanwhile

Why? http://i.imgur.com/XoX6uYS.jpg

src/node/hooks/express/adminplugins.js

@@ -85,14 +85,14 @@ exports.socketio = function (hook_name, args, cb) {
     socket.on("install", function (plugin_name) {
       installer.install(plugin_name, function (er) {
         if(er) console.warn(er)
-        socket.emit("finished:install", {error: er? er.message : null});
+        socket.emit("finished:install", {plugin: plugin_name, error: er? er.message : null});
       });
     });
 
     socket.on("uninstall", function (plugin_name) {
       installer.uninstall(plugin_name, function (er) {
         if(er) console.warn(er)
-        socket.emit("finished:uninstall", {error: er? er.message : null});
+        socket.emit("finished:uninstall", {plugin: plugin_name, error: er? er.message : null});
       });
     });
   });

src/static/css/admin.css

@@ -36,7 +36,6 @@ div.menu li:last-child {
 div.innerwrapper {
   padding: 15px;
   margin-left: 265px;
-  position:relative; /* Allows us to position the loading indicator relative to this div */
 }
 
 #wrapper {
@@ -137,23 +136,30 @@ td, th {
   display: none;
 }
 
+#installed-plugins td>div {
+  position: relative;/* Allows us to position the loading indicator relative to this row */
+  display: inline-block; /*make this fill the whole cell*/
+}
+
 .progress {
   position: absolute;
   top: 0; left: 0; bottom:0; right:0;
   padding: auto;
-  padding-top: 20%;
   
-  background: rgba(255,255,255,0.85);
+  background: rgba(255,255,255,0.95);
   display: none;
-  /*border-radius: 7px;
+}
-  border: 1px solid #ddd;*/
+
+#search-progress.progress {
+  padding-top: 20%;
+  background: rgba(255,255,255,0.7);
 }
 
 .progress * {
   display: block;
   margin: 0 auto;
   text-align: center;
-  color: #999;
+  color: #666;
 }
 
 .settings {

src/static/js/admin/plugins.js

@@ -31,6 +31,20 @@ $(document).ready(function () {
   search.sortDir = /*DESC?*/true;
   search.end = true;// have we received all results already?
 
+  var installed = {
+    progress: {
+      show: function(plugin, msg) {
+        $('#installed-plugins .'+plugin+' .progress').show()
+        $('#installed-plugins .'+plugin+' .progress .message').text(msg)
+      },
+      hide: function(plugin) {
+        $('#installed-plugins .'+plugin+' .progress').hide()
+        $('#installed-plugins .'+plugin+' .progress .message').text('')
+      }
+    },
+    list: []
+  }
+
   function displayPluginList(plugins, container, template) {
     plugins.forEach(function(plugin) {
       var row = template.clone();
@@ -43,7 +57,7 @@ $(document).ready(function () {
         }
       }
       row.find(".version").html( plugin.version );
-      
+      row.addClass(plugin.name)
       container.append(row);
     })
     updateHandlers();
@@ -60,18 +74,6 @@ $(document).ready(function () {
     })
   }
 
-  var progress = {
-    show: function(msg) {
-      $('#progress').show()
-      $('#progress .message').text(msg)
-      $(window).scrollTop(0)
-    },
-    hide: function() {
-      $('#progress').hide()
-      $('#progress .message').text('')
-    }
-  }
-
   function updateHandlers() {
     // Search
     $("#search-query").unbind('keyup').keyup(function () {
@@ -82,17 +84,20 @@ $(document).ready(function () {
     $(".do-install, .do-update").unbind('click').click(function (e) {
       var $row = $(e.target).closest("tr")
         , plugin = $row.find(".name").text();
+      $row.remove().appendTo('#installed-plugins')
       socket.emit("install", plugin);
-      progress.show('Installing plugin '+plugin+'...')
+      installed.progress.show(plugin, 'Installing')
     });
 
     // uninstall
     $(".do-uninstall").unbind('click').click(function (e) {
       var $row = $(e.target).closest("tr")
-        , plugin = $row.find(".name").text();
+        , pluginName = $row.find(".name").text();
-      $row.remove()
+      socket.emit("uninstall", pluginName);
-      socket.emit("uninstall", plugin);
+      installed.progress.show(pluginName, 'Uninstalling')
-      progress.show('Uninstalling plugin '+plugin+'...')
+      installed.list = installed.list.filter(function(plugin) {
+        return plugin.name != pluginName
+      })
     });
 
     // Infinite scroll
@@ -143,18 +148,19 @@ $(document).ready(function () {
   });
 
   socket.on('results:installed', function (data) {
-    sortPluginList(data.installed, 'name', /*ASC?*/true);
+    installed.list = data.installed
+    sortPluginList(installed.list, 'name', /*ASC?*/true);
 
-    data.installed = data.installed.filter(function(plugin) {
+    // filter out epl
+    installed.list = installed.list.filter(function(plugin) {
       return plugin.name != 'ep_etherpad-lite'
     })
-    $("#installed-plugins *").remove();
-    displayPluginList(data.installed, $("#installed-plugins"), $("#installed-plugin-template"));
-    progress.hide()
 
-    setTimeout(function() {
+    // remove all installed plugins (leave all plugins that are still being installed)
-      socket.emit('checkUpdates');
+    installed.list.forEach(function(plugin) {
-    }, 5000)
+      $('#installed-plugins .'+plugin.name).remove()
+    })
+    displayPluginList(installed.list, $("#installed-plugins"), $("#installed-plugin-template"));
   });
   
   socket.on('results:updatable', function(data) {
@@ -171,7 +177,11 @@ $(document).ready(function () {
   })
 
   socket.on('finished:install', function(data) {
-    if(data.error) alert('An error occured while installing the plugin. \n'+data.error)
+    if(data.error) {
+      alert('An error occured while installing '+data.plugin+' \n'+data.error)
+      $('#installed-plugins .'+data.plugin).remove()
+    }
+
     socket.emit("getInstalled");
 
     // update search results
@@ -181,7 +191,11 @@ $(document).ready(function () {
   })
 
   socket.on('finished:uninstall', function(data) {
-    if(data.error) alert('An error occured while uninstalling the plugin. \n'+data.error)
+    if(data.error) alert('An error occured while uninstalling the '+data.plugin+' \n'+data.error)
+
+    // remove plugin from installed list
+    $('#installed-plugins .'+data.plugin).remove()
+    
     socket.emit("getInstalled");
 
     // update search results
@@ -194,4 +208,9 @@ $(document).ready(function () {
   updateHandlers();
   socket.emit("getInstalled");
   search('');
+
+  // check for updates every 15mins
+  setInterval(function() {
+    socket.emit('checkUpdates');
+  }, 1000*60*15)
 });

src/templates/admin/plugins.html

@@ -47,7 +47,10 @@
               <td class="description" data-label="Description"></td>
               <td class="version" data-label="Version"></td>
               <td class="actions">
+                <div>
                   <input type="button" value="Uninstall" class="do-uninstall">
+                  <div class="progress"><p><img src="../static/img/loading.gif"/></p><p><span class="message"></span></p></div>
+                </div>
               </td>
             </tr>
           </tbody>
@@ -78,7 +81,10 @@
                 <td class="description" data-label="Description"></td>
                 <td class="version" data-label="Version"></td>
                 <td class="actions">
+                  <div>
                     <input type="button" value="Install" class="do-install">
+                    <div class="progress"><p><img src="../static/img/loading.gif"/></p><p><span class="message"></span></p></div>
+                  </div>
                </td>
               </tr>
             </tbody>
@@ -91,7 +97,6 @@
             </tbody>
           </table>
         </div>
-        <div id="progress" class="progress"><p><img src="../static/img/loading.gif"/></p><p><span class="message"></span></p></div>
 
       </div>
     </div>