Track mod download progress

lib/mods.js

@@ -2,6 +2,7 @@ var async = require('async');
 var events = require('events');
 var filesize = require('filesize');
 var fs = require('fs');
+var _ = require('lodash');
 var path = require('path');
 var playwithsix = require('playwithsix');
 
@@ -26,9 +27,44 @@ Mods.prototype = new events.EventEmitter();
 
 Mods.prototype.download = function (mod, cb) {
   var self = this;
+  var currentDownloadMod = null;
+  var currentDownloadProgress = 0;
+
   playwithsix.downloadMod(this.config.path, mod, {lite: this.liteMods}, function(err, mods) {
+    if (currentDownloadMod) {
+      delete currentDownloadMod.progress;
+    }
     self.updateMods();
     cb(err, mods);
+  }).on('progress', function (progress) {
+    var modName = progress.mod;
+
+    if (!currentDownloadMod || currentDownloadMod.name != modName) {
+      if (currentDownloadMod) {
+        delete currentDownloadMod.progress;
+      }
+
+      var mod = _.find(self.mods, {name: modName});
+
+      if (mod) {
+        currentDownloadMod = mod;
+      } else {
+        currentDownloadMod = {
+          name: modName,
+          outdated: false,
+          playWithSix: true,
+        };
+        self.mods = self.mods.push(currentDownloadMod);
+      }
+    }
+
+    // Progress in whole percent
+    var newProgress = parseInt(progress.completed / progress.size * 100, 10);
+
+    if (newProgress != currentDownloadMod.progress) {
+      currentDownloadMod.progress = newProgress;
+      self.emit('mods', self.mods);
+    }
   });
 };
 

package.json

@@ -14,6 +14,7 @@
     "express-resource": "~1.0.0",
     "filesize": "^3.1.0",
     "gamedig": "^0.2.11",
+    "lodash": "^3.6.0",
     "playwithsix": "0.0.10",
     "slug": "~0.4.0",
     "socket.io": "^1.0.4",

public/js/app/models/mod.js

@@ -10,6 +10,7 @@ define(function (require) {
     defaults: {
       name: ''
     },
+    idAttribute: 'name',
     urlRoot: '/api/mods/',
   });
 

public/js/app/views/mods/form.js

@@ -27,6 +27,15 @@ define(function (require) {
       this.collection = new Mods();
       this.bind('ok', this.submit);
       this.bind('shown', this.shown);
+
+      var self = this;
+      this.listenTo(this.mods, "change reset add remove", function () {
+        self.collection.trigger('reset');
+      });
+    },
+
+    itemViewOptions: function(options) {
+      options.set('mods', this.mods);
     },
 
     beforeSubmit: function(e) {

public/js/app/views/mods/search/list_item.js

@@ -19,6 +19,16 @@ define(function (require) {
       "click .install": "install"
     },
 
+    templateHelpers: {
+      progress: function() {
+        if (this.mods.get(this.name)) {
+          return this.mods.get(this.name).get('progress');
+        }
+
+        return null;
+      }
+    },
+
     install: function (event) {
       var self = this;
       event.preventDefault();

public/js/tpl/mods/list_item.html

@@ -6,7 +6,13 @@
   <% } %>
 </td>
 <td>
-  <% if (outdated) { %>
+  <% if (typeof progress !== 'undefined') { %>
+    <div class="progress" style="margin-bottom: 0;">
+      <div class="progress-bar" role="progressbar" aria-valuenow="<%-progress%>" aria-valuemin="0" aria-valuemax="100" style="width: <%-progress%>%; min-width: 2em;">
+        <%-progress%>%
+      </div>
+    </div>
+  <% } else if (outdated) { %>
     <a class="btn btn-primary btn-xs update ladda-button pull-right" data-style="expand-left">
       <span class="glyphicon glyphicon-save"></span>
       Update

public/js/tpl/mods/search/list_item.html

@@ -7,10 +7,18 @@
 </td>
 <td>
   <p>
-    <a class="btn btn-primary btn-xs install ladda-button pull-right" data-style="expand-left">
-      <span class="glyphicon glyphicon-save"></span>
-      Install
-    </a>
+    <% if (progress()) { %>
+      <div class="progress" style="margin-bottom: 0;">
+        <div class="progress-bar" role="progressbar" aria-valuenow="<%-progress()%>" aria-valuemin="0" aria-valuemax="100" style="width: <%-progress()%>%; min-width: 2em;">
+          <%-progress()%>%
+        </div>
+      </div>
+    <% } else { %>
+      <a class="btn btn-primary btn-xs install ladda-button pull-right" data-style="expand-left">
+        <span class="glyphicon glyphicon-save"></span>
+        Install
+      </a>
+    <% } %>
     <div class="clearfix"></div>
   </p>
   <p>