musicpools: add progressbar

4 files changed, 88 insertions, 41 deletions

diff --git a/www/index.html b/www/index.html
index 754eed7..d199f9b 100644
--- a/www/index.html
+++ b/www/index.html
@@ -336,7 +336,7 @@
       </div>
 
       <table>
-        <tr class="progressBar progressBarTemplate">
+        <tr class="progressBar progressBarTemplate jingles">
           <td class="file-bytes">
             beginne...
           </td>
@@ -349,6 +349,26 @@
         </tr>
       </table>
 
+      <table>
+        <tr class="progressBar progressBarTemplate musicpools">
+          <td class="cart-number">
+            ...
+          </td>
+          <td class="file-name">
+            ...
+          </td>
+          <td class="file-bytes">
+            beginne...
+          </td>
+          <td colspan="3">
+            <div class="progress"><div class="bar" style="width: 0%;"></div></div>
+          </td>
+          <td>
+            <button class="btn btn-danger btn-mini"><i class="icon-remove icon-white"></i> Abbrechen</button>
+          </td>
+        </tr>
+      </table>
+
     </div>
 
   </div>
diff --git a/www/js/importer.js b/www/js/importer.js
index 25924fb..e06e46c 100644
--- a/www/js/importer.js
+++ b/www/js/importer.js
@@ -34,7 +34,7 @@ Rivendell.Importer.prototype.resetModal = function() {
   $('#uploadModal-confirm', this.$el).attr('disabled','disabled').off('click');
 };
 
-Rivendell.Importer.prototype.openModal = function(group, createCart, useMetadata) {
+Rivendell.Importer.prototype.openModal = function(group, groupView, createCart, useMetadata) {
   this.resetModal();
 
   if (createCart === undefined) {
@@ -59,7 +59,7 @@ Rivendell.Importer.prototype.openModal = function(group, createCart, useMetadata
     autoProcessQueue: false,
     init: function() {
       this.on('addedfile', function(file) {
-        self.importFileAdded(this, file, group, createCart, useMetadata);
+        self.importFileAdded(this, file, group, groupView, createCart, useMetadata);
       });
       this.on('error', function(file, msg) {
         self.importFileSelectError(this, file, msg);
@@ -71,7 +71,7 @@ Rivendell.Importer.prototype.openModal = function(group, createCart, useMetadata
   this.$el.modal({keyboard: true});
 };
 
-Rivendell.Importer.prototype.importFileAdded = function(dropzone, file, group, createCart, useMetadata) {
+Rivendell.Importer.prototype.importFileAdded = function(dropzone, file, group, groupView, createCart, useMetadata) {
   // wtf? remove accepted files?
   /*$(dropzone.getAcceptedFiles()).each(function(index, elem) {
     dropzone.removeFile(elem);
@@ -82,7 +82,7 @@ Rivendell.Importer.prototype.importFileAdded = function(dropzone, file, group, c
 
   var self = this;
   $('#uploadModal-confirm', this.$el).off('click').on('click', function() {
-    self.importCartConfirm(dropzone, group, createCart, useMetadata);
+    self.importCartConfirm(dropzone, group, groupView, createCart, useMetadata);
   }).removeAttr('disabled');
 };
 
@@ -91,7 +91,7 @@ Rivendell.Importer.prototype.importFileSelectError = function(dropzone, file, ms
   dropzone.removeFile(file);
 };
 
-Rivendell.Importer.prototype.importCartConfirm = function(dropzone, group, createCart, useMetadata) {
+Rivendell.Importer.prototype.importCartConfirm = function(dropzone, group, groupView, createCart, useMetadata) {
   this.$el.modal('hide');
 
   //var progressBar = group.addUpload();
@@ -109,7 +109,7 @@ Rivendell.Importer.prototype.importCartConfirm = function(dropzone, group, creat
   //jingles_importUpdateProgress(files[0], importing_row);
   var self = this;
   dropzone.on('uploadprogress', function(file) {
-    self.uploadProgress(file);
+    groupView.uploadProgress(file);
   });
   dropzone.on('success', function(file) {
     self.importFileUploadSuccess(dropzone, file, group);
@@ -132,29 +132,6 @@ Rivendell.Importer.prototype.importCartConfirm = function(dropzone, group, creat
   }
 };
 
-Rivendell.Importer.prototype.uploadProgress = function(file) {
-  if (!file.cartNumber || !file.cutNumber) {
-    return;
-  }
-  var $cut = $('#jingle-' + file.cartNumber + '-' + file.cutNumber).first();
-  if (!$cut.hasClass('uploading')) {
-    var $progressBar = $('.progressBarTemplate').clone().removeClass('progressBarTemplate');
-    $cut.html($progressBar.html());
-    $cut.addClass('uploading');
-  }
-
-  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";
-    $cut.find('.file-bytes').text(bytes_str);
-    $cut.find('.progress .bar').css("width", file.upload.progress + "%");
-  } else {
-    $cut.find('.file-bytes').text('importiere...');
-    $cut.find('.progress .bar').css('width', '100%');
-    $cut.find('.progress').addClass('progress-striped').addClass('active');
-  }
-};
-
 Rivendell.Importer.prototype.importFileUploadSuccess = function(dropzone, file, group) {
   //var command = { LOGIN_NAME: auth_username, PASSWORD: auth_token, DESCRIPTION: file. };
 
diff --git a/www/js/jingles.js b/www/js/jingles.js
index 960dd25..11f23a5 100644
--- a/www/js/jingles.js
+++ b/www/js/jingles.js
@@ -112,7 +112,7 @@ Rivendell.JingleGroupView.prototype.render = function() {
   $('table tbody tr', this.$el).remove();
 
   $('.uploadButton', this.$el).on('click', function() {
-    importer.openModal(self.model, false, false);
+    importer.openModal(self.model, self, false, false);
   });
 };
 
@@ -120,6 +120,31 @@ Rivendell.JingleGroupView.prototype.destroy = function() {
   $('table > tbody', this.$el).html('');
 };
 
+Rivendell.JingleGroupView.prototype.uploadProgress = function(file) {
+  if (!file.cartNumber || !file.cutNumber) {
+    return;
+  }
+  var $cut = $('#jingle-' + file.cartNumber + '-' + file.cutNumber).first();
+  if (!$cut.hasClass('uploading')) {
+    var $progressBar = $('.progressBarTemplate.jingles').clone().removeClass('progressBarTemplate');
+    $progressBar.find('.file-name').text(file.name);
+    $progressBar.find('.cart-number').text(file.cartNumber);
+    $cut.html($progressBar.html());
+    $cut.addClass('uploading');
+  }
+
+  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";
+    $cut.find('.file-bytes').text(bytes_str);
+    $cut.find('.progress .bar').css("width", file.upload.progress + "%");
+  } else {
+    $cut.find('.file-bytes').text('importiere...');
+    $cut.find('.progress .bar').css('width', '100%');
+    $cut.find('.progress').addClass('progress-striped').addClass('active');
+  }
+};
+
 Rivendell.JingleCartView = function(model, groupView, active) {
   this.model = model;
   this.groupView = groupView;
diff --git a/www/js/musicpools.js b/www/js/musicpools.js
index 27de48e..bf906d0 100644
--- a/www/js/musicpools.js
+++ b/www/js/musicpools.js
@@ -151,12 +151,36 @@ Rivendell.MusicpoolView.prototype.render = function() {
     $('table > tbody', self.$el).append(cartView.$el);
   });
 
-  // todo
   $('.uploadButton', this.$el).on('click', function() {
-    importer.openModal(self.model, true, true);
+    importer.openModal(self.model, self, true, true);
   });
 };
 
+Rivendell.MusicpoolView.prototype.uploadProgress = function(file) {
+  if (!file.cartNumber || !file.cutNumber) {
+    return;
+  }
+  var $cart = $('#musicpool-' + file.cartNumber).first();
+  if (!$cart.hasClass('uploading')) {
+    var $progressBar = $('.progressBarTemplate.musicpools').clone().removeClass('progressBarTemplate');
+    $progressBar.find('.file-name').text(file.name);
+    $progressBar.find('.cart-number').text(file.cartNumber);
+    $cart.html($progressBar.html());
+    $cart.addClass('uploading');
+  }
+
+  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";
+    $cart.find('.file-bytes').text(bytes_str);
+    $cart.find('.progress .bar').css("width", file.upload.progress + "%");
+  } else {
+    $cart.find('.file-bytes').text('importiere...');
+    $cart.find('.progress .bar').css('width', '100%');
+    $cart.find('.progress').addClass('progress-striped').addClass('active');
+  }
+};
+
 Rivendell.MusicpoolCartView = function(model) {
   this.model = model;
 
@@ -177,7 +201,7 @@ Rivendell.MusicpoolCartView.prototype.render = function() {
   if (this.model.cuts.length > 0) {
     var cut = this.model.cuts[0];
 
-    //title = this.model.cuts[0].description;
+    title = this.model.cuts[0].description;
 
     length = msToTimeString(Number(cut.length));
     imported = format_datetime(new Date(cut.originDatetime));
@@ -194,13 +218,14 @@ Rivendell.MusicpoolCartView.prototype.render = function() {
 
 
   this.$el = $('<tr>')
-      .append($('<td>').text(number))
-      .append($('<td>').text(title))
-      .append($('<td>').text(length))
-      .append($('<td>').text(imported))
-      .append($('<td>').text(playcnt))
-      .append($('<td>').text(lastplayed))
-      .append($('<td>').append(deleteButton));
+    .attr('id', 'musicpool-' + this.model.number)
+    .append($('<td>').text(number))
+    .append($('<td>').text(title))
+    .append($('<td>').text(length))
+    .append($('<td>').text(imported))
+    .append($('<td>').text(playcnt))
+    .append($('<td>').text(lastplayed))
+    .append($('<td>').append(deleteButton));
 };
 
 Rivendell.MusicpoolCartView.prototype.delete = function() {