jingle: add crude progress bar

1 files changed, 59 insertions, 29 deletions

diff --git a/www/js/jingles.js b/www/js/jingles.js
index 810a03d..39b7471 100644
--- a/www/js/jingles.js
+++ b/www/js/jingles.js
@@ -185,7 +185,7 @@ JingleGroup.prototype.render = function() {
   $('table tbody tr', this.$el).remove();
 
   $('.uploadButton', this.$el).on('click', function() {
-    importer.showUploadModal(self.mainCart);
+    importer.showUploadModal(self);
   });
 
   if (this.mainCart) {
@@ -198,6 +198,42 @@ JingleGroup.prototype.render = function() {
       $('table > tbody', self.$el).append(cut.render());
     });
   }
+  $('table > tbody', self.$el).append(this.renderProgressbar());
+};
+
+JingleGroup.prototype.renderProgressbar = function() {
+  var progress_bar = '<div class="progress"><div class="bar" style="width: 0%;"></div></div>';
+  var cancel_button = '<button class="btn btn-danger btn-mini">' +
+    '<i class="icon-remove icon-white"></i> Abbrechen</button>';
+
+  return $('<tr>').addClass('progressBar').hide()
+    .append($('<td>').text(''))
+    .append($('<td>').addClass('file-name').text('-'))
+    .append($('<td>').addClass('file-bytes').text('??.? von ??.? MB'))
+    .append($('<td colspan=3>').append(progress_bar))
+    .append($('<td>').css('text-align', 'center').append(cancel_button));
+};
+
+JingleGroup.prototype.uploading = function() {
+  console.log('uploading!');
+  $('table > tbody .progressBar', this.$el).show();
+};
+
+JingleGroup.prototype.uploadProgress = function(file) {
+  console.log('uploadProgress!');
+
+  var stats = $('table > tbody .progressBar', this.$el);
+
+  if(file.upload.progress < 99) {
+    var bytes_str = Number((file.upload.bytesSent/1024)/1024).toFixed(1) + " von " +
+      Number((file.upload.total/1024)/1024).toFixed(1) + " MB";
+    stats.find('.file-bytes').text(bytes_str);
+    stats.find('.progress .bar').css("width", file.upload.progress + "%");
+  } else {
+    stats.find('.file-bytes').text('importiere...');
+    stats.find('.progress .bar').css('width', '100%');
+    stats.find('.progress').addClass('progress-striped').addClass('active');
+  }
 };
 
 var JingleCart = function(number, title, groupName) {
@@ -325,13 +361,14 @@ JingleCut.prototype.render = function() {
 
 
 
-
-
 var Importer = function() {
   this.$el = $('#uploadModal');
+  this.currentGroup = null;
 };
 
-Importer.prototype.showUploadModal = function(cart) {
+Importer.prototype.showUploadModal = function(group) {
+  this.currentGroup = group;
+
   var uploadModal = $('#uploadModal');
   $('div.modal-header h3', uploadModal).text("Datei auswählen...");
   var form = $('<form>');
@@ -349,7 +386,7 @@ Importer.prototype.showUploadModal = function(cart) {
     autoProcessQueue: false,
     init: function() {
       this.on("addedfile", function(file) {
-        self.importFileAdded(this, file, cart);
+        self.importFileAdded(this, file);
       });
       this.on("error", function(file, msg) {
         self.importFileSelectError(this, file, msg);
@@ -360,7 +397,7 @@ Importer.prototype.showUploadModal = function(cart) {
   $('#uploadModal').modal({keyboard: true});
 };
 
-Importer.prototype.importFileAdded = function(dropzone, file, cart) {
+Importer.prototype.importFileAdded = function(dropzone, file) {
   $(dropzone.getAcceptedFiles()).each(function(idx, elem) { dropzone.removeFile(elem); });
 
   var uploadModal = $('#uploadModal');
@@ -368,7 +405,7 @@ Importer.prototype.importFileAdded = function(dropzone, file, cart) {
   $('div.modal-header h3', uploadModal).text(file.name);
   var self = this;
   $('#uploadModal-confirm', uploadModal).unbind('click').click(function() {
-    self.importCartConfirm(cart, dropzone);
+    self.importCartConfirm(dropzone);
   }).removeAttr('disabled');
 };
 
@@ -380,8 +417,13 @@ Importer.prototype.importFileSelectError = function(dropzone, file, msg) {
   dropzone.removeFile(file);
 };
 
-Importer.prototype.importCartConfirm = function(cart, dz) {
+Importer.prototype.importCartConfirm = function(dz) {
   $('#uploadModal').modal('hide');
+
+  this.currentGroup.uploading();
+
+
+
   //var cart_row = $('#show-cart-' + cart);
   //cart_row.find('.btn').attr('disabled','disabled');
   //var importing_row = jingles_newImportingEntry(cart);
@@ -392,39 +434,26 @@ Importer.prototype.importCartConfirm = function(cart, dz) {
   var files = dz.getAcceptedFiles();
   //importing_row.find('.file-name').text(files[0].name);
   //jingles_importUpdateProgress(files[0], importing_row);
-  //dz.on("uploadprogress", function(file) { jingles_importUpdateProgress(file, importing_row); });
   var self = this;
+  dz.on("uploadprogress", function(file) { self.currentGroup.uploadProgress(file); });
   dz.on("success", function(file) {
-    self.importFileUploadSuccess(cart, dz, file);
+    self.importFileUploadSuccess(dz, file);
   });
   dz.on("error", function(file, msg, xhr) {
-    self.importFileUploadError(cart, this, file, msg, xhr);
+    self.importFileUploadError(this, file, msg, xhr);
   });
-  this.importAddCut(cart, dz, files[0])
-};
-
-Importer.prototype.importUpdateProgress = function(file, stats) {
-  if(file.upload.progress < 99) {
-    var bytes_str = Number((file.upload.bytesSent/1024)/1024).toFixed(1) + " von " +
-      Number((file.upload.total/1024)/1024).toFixed(1) + " MB";
-    stats.find('.file-bytes').text(bytes_str);
-    stats.find('.progress .bar').css("width", file.upload.progress + "%");
-  } else {
-    stats.find('.file-bytes').text('importiere...');
-    stats.find('.progress .bar').css('width', '100%');
-    stats.find('.progress').addClass('progress-striped').addClass('active');
-  }
+  this.importAddCut(dz, files[0])
 };
 
-Importer.prototype.importFileUploadSuccess = function(cart, dz, file) {
+Importer.prototype.importFileUploadSuccess = function(dz, file) {
   //var command = { LOGIN_NAME: auth_username, PASSWORD: auth_token, DESCRIPTION: file. };
 
   //jingles_updateGroupCartInfo(cart);
   dz.disable();
-  $(cart).trigger('add');
+  $(this.currentGroup.mainCart).trigger('add');
 };
 
-Importer.prototype.importFileUploadError = function(cart, dz, file, msg, xhr) {
+Importer.prototype.importFileUploadError = function(dz, file, msg, xhr) {
   //var error_row = jingles_newImportErrorEntry(cart, msg);
   //error_row.find('button').unbind('click').click(function() {
   //jingles_deleteCart(cart);
@@ -434,8 +463,9 @@ Importer.prototype.importFileUploadError = function(cart, dz, file, msg, xhr) {
   dz.disable();
 };
 
-Importer.prototype.importAddCut = function(cart, dz, file) {
+Importer.prototype.importAddCut = function(dz, file) {
   // todo: set additional parameters like DESCRIPTION here, when patch has been applied.
+  var cart = this.currentGroup.mainCart;
   rivendell.addCut(cart.number, function(cutXml) {
     var cutNumber = $(cutXml).find('cutNumber').text();
     dz.on('sending', function(file, xhr, formData) {