fix upload progress dom update

2 files changed, 38 insertions, 9 deletions

diff --git a/www/js/jingles.js b/www/js/jingles.js
index dc27c6e..7c82a39 100644
--- a/www/js/jingles.js
+++ b/www/js/jingles.js
@@ -134,8 +134,8 @@ Rdxport.JingleGroupView.prototype.uploadProgress = function(upload) {
   if (upload.title) {
     $('.file-name', $cut).text(upload.title);
   }
-  if (upload.cutNumber) {
-    $('.cut-number', $cut).text(upload.cutNumber);
+  if (upload.cartNumber && upload.cutNumber) {
+    $('.cut-number', $cut).text(Rdxport.JingleCutView.createName(upload.cartNumber, upload.cutNumber));
   }
 
   updateProgressBar($cut, upload);
@@ -175,8 +175,8 @@ Rdxport.JingleGroupView.uploadError = function(upload) {
     upload.close();
   });
 
-  var $cart = $('tr[data-upload-id="' + upload.uploadId + '"]').first();
-  $cart.replaceWith($errorRow);
+  var $cut = $('tr[data-upload-id="' + upload.uploadId + '"]').first();
+  $cut.replaceWith($errorRow);
 };
 
 Rdxport.JingleCartView = function(model, groupView, active) {
@@ -198,8 +198,14 @@ Rdxport.JingleCartView = function(model, groupView, active) {
     });
     var uploads = importer.getUploadsByCartNumber(this.model.number);
     $(uploads).each(function(index, upload) {
-      var $el = Rdxport.JingleCutView.renderUploading(upload, self.model.number);
-      $('table > tbody', self.groupView.$el).append($el);
+      var $el = Rdxport.JingleCutView.renderUploading(upload);
+      var $cut = $('#' + Rdxport.JingleCutView.createId(upload.cartNumber, upload.cutNumber));
+
+      if (upload.cartNumber && upload.cutNumber && $cut.length > 0) {
+        $cut.replaceWith($el);
+      } else {
+        $('table > tbody', self.groupView.$el).append($el);
+      }
       if (upload.error) {
         Rdxport.JingleGroupView.uploadError(upload);
       }
@@ -215,6 +221,17 @@ Rdxport.JingleCutView = function(model) {
   this.render();
 };
 
+Rdxport.JingleCutView.createId = function(cartNumber, cutNumber) {
+  cutNumber = ('000' + cutNumber + '').slice(-3);
+  return 'jingle-' + cartNumber + '-' + cutNumber;
+};
+
+Rdxport.JingleCutView.createName = function(cartNumber, cutNumber) {
+  var cartNumber = ('000000' + cartNumber + '').slice(-6);
+  var cutNumber = ('000' + cutNumber + '').slice(-3);
+  return cartNumber + '_' + cutNumber;
+};
+
 Rdxport.JingleCutView.prototype.render = function() {
   var status = $('<span class="label"></span>');
   var moveButton = $('<button class="btn btn-info btn-xs"><span class="glyphicon glyphicon-transfer"></span>&nbsp;&nbsp;Verschieben</button>');
@@ -276,6 +293,10 @@ Rdxport.JingleCutView.renderUploading = function(upload) {
     upload.cancel();
   });
 
+  if (upload.cartNumber && upload.cutNumber) {
+    $el.attr('id', Rdxport.JingleCutView.createId(upload.cartNumber, upload.cutNumber))
+  }
+
   updateProgressBar($el, upload);
   return $el;
 };
diff --git a/www/js/musicpools.js b/www/js/musicpools.js
index ad1a532..7fdb3c6 100644
--- a/www/js/musicpools.js
+++ b/www/js/musicpools.js
@@ -177,8 +177,13 @@ Rdxport.MusicpoolView.prototype.render = function() {
   });
   var uploads = importer.getUploadsByGroupName(this.model.name);
   $(uploads).each(function(index, upload) {
-    var $el = Rdxport.MusicpoolCartView.renderUploading(upload, self.model.number);
-    $('table > tbody', self.$el).append($el);
+    var $el = Rdxport.MusicpoolCartView.renderUploading(upload);
+    var $cart = $('#musicpool-' + upload.cartNumber, self.$el);
+    if (upload.cartNumber && $cart.length > 0) {
+      $cart.replaceWith($el);
+    } else {
+      $('table > tbody', self.$el).append($el);
+    }
     if (upload.error) {
       self.uploadError(upload);
     }
@@ -300,10 +305,13 @@ Rdxport.MusicpoolCartView.renderUploading = function(upload) {
 
   var $el = $('<tr>')
     .html($progressBar.html())
-    .attr('id', 'musicpool-upload-' + upload.uploadId)
     .addClass('uploading')
     .attr('data-upload-id', upload.uploadId);
 
+  if (upload.cartNumber) {
+    $el.attr('id', 'musicpool-' + upload.cartNumber);
+  }
+
   $('button', $el).on('click', function() {
     upload.cancel();
   });