refactor importer: cancel import, shows import, etc.

6 files changed, 275 insertions, 427 deletions

diff --git a/www/index.html b/www/index.html
index d6599f8..48c9139 100644
--- a/www/index.html
+++ b/www/index.html
@@ -94,7 +94,7 @@
             <div class="modal-body">
             </div>
             <div class="modal-footer">
-              <button class="btn btn-default" data-dismiss="modal">Abbrechen</button>
+              <button class="btn btn-default" id="uploadModal-cancel" data-dismiss="modal">Abbrechen</button>
               <button class="btn btn-primary" id="uploadModal-confirm" disabled="disabled">Importieren</button>
             </div>
           </div>
@@ -354,8 +354,29 @@
       </div>
 
       <table>
+
+        <table>
+          <tr class="progressBar progressBarTemplate shows">
+            <td class="cart-number">
+              ...
+            </td>
+            <td class="file-name">
+              ...
+            </td>
+            <td class="file-bytes">
+              beginne...
+            </td>
+            <td colspan="3">
+              <div class="progress"><div class="progress-bar" style="width: 0%;"></div></div>
+            </td>
+            <td class="text-center">
+              <button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;Abbrechen</button>
+            </td>
+          </tr>
+        </table>
+
         <tr class="progressBar progressBarTemplate jingles">
-	  <td><span class="label label-default"><span class="glyphicon glyphicon-transfer"></span></span></td>
+	        <td><span class="label label-default"><span class="glyphicon glyphicon-transfer"></span></span></td>
           <td class="file-bytes">
             beginne...
           </td>
diff --git a/www/js/apps.js b/www/js/apps.js
index 02ed76f..1fa44d1 100644
--- a/www/js/apps.js
+++ b/www/js/apps.js
@@ -31,6 +31,11 @@ var importer = null;
 function apps_select(app) {
   $('.container').removeClass('fullWidth');
 
+  shows_cleanup();
+  jingles_cleanup();
+  musicpools_cleanup();
+  musicgrid_cleanup();
+
   switch(app) {
     case "musicgrid":
       $('#app-shows').hide();
diff --git a/www/js/importer.js b/www/js/importer.js
index ab702e5..fbf4955 100644
--- a/www/js/importer.js
+++ b/www/js/importer.js
@@ -32,24 +32,18 @@ Rivendell.Importer = function() {
 
 Rivendell.Importer.prototype.resetModal = function() {
   $('div.modal-header h4', this.$el).text("Datei auswählen...");
-  $('.modal-body', this.$el).css("background-image", "url('/img/dz-backdrop.png')");
+  $('.modal-body', this.$el).empty().css("background-image", "url('/img/dz-backdrop.png')");
   $('#uploadModal-confirm', this.$el).attr('disabled','disabled').off('click');
 };
 
-Rivendell.Importer.prototype.openModal = function(group, groupView, createCart, useMetadata) {
-  this.resetModal();
-
-  if (createCart === undefined) {
-    createCart = false;
-  }
+Rivendell.Importer.prototype.openModal = function(group, groupView, createCart, newCartNumber, useMetadata) {
+  createCart = typeof createCart === 'undefined' ? false : createCart;
+  useMetadata = typeof useMetadata === 'undefined' ? false : useMetadata;
 
-  if (useMetadata === undefined) {
-    useMetadata = false;
-  }
+  this.resetModal();
+  $('.modal-body', this.$el).append($('<form>'));
 
-  var $form = $('<form>');
-  var self = this;
-  var dropzone = $form.dropzone({
+  var dropzone = new Dropzone('#uploadModal form', {
     url: '/rd-bin/rdxport.cgi',
     parallelUploads: 1,
     maxFilesize: 2048,
@@ -58,98 +52,133 @@ Rivendell.Importer.prototype.openModal = function(group, groupView, createCart,
     clickable: true,
     createImageThumbnails: false,
     acceptedFiles: '.flac,.wav,.ogg,.mp3',
-    autoProcessQueue: false,
-    init: function() {
-      this.on('addedfile', function(file) {
-        self.importFileAdded(this, file, group, groupView, createCart, useMetadata);
-      });
-    }
+    autoProcessQueue: false
   });
 
-  this.uploads.push(dropzone);
+  var self = this;
+  dropzone.on('addedfile', function(file) {
+    $('div.modal-header h4', self.$el).text(file.name);
+    $('div.modal-body', self.$el).css("background-image", "url('/img/audio_file.png')");
+
+    $('#uploadModal-confirm', self.$el).off('click').on('click', function() {
+      var upload = new Rivendell.Upload(group, groupView, createCart, newCartNumber, useMetadata, dropzone);
+      self.uploads.push(upload);
 
-  $('.modal-body', this.$el).empty().append($form);
+      self.$el.modal('hide');
+    })
+        .removeAttr('disabled');
+  });
   this.$el.modal({keyboard: true});
 };
 
-Rivendell.Importer.prototype.importFileAdded = function(dropzone, file, group, groupView, createCart, useMetadata) {
-  // wtf? remove accepted files?
-  /*$(dropzone.getAcceptedFiles()).each(function(index, elem) {
-    dropzone.removeFile(elem);
-  });*/
-
-  $('div.modal-body', this.$el).css("background-image", "url('/img/audio_file.png')");
-  $('div.modal-header h4', this.$el).text(file.name);
+Rivendell.Importer.prototype.cancelAllUploads = function() {
+  var self = this;
+  $.each(this.uploads, function(index, upload){
+    upload.cancel();
+  });
+};
 
+Rivendell.Importer.prototype.removeUpload = function(upload) {
   var self = this;
-  $('#uploadModal-confirm', this.$el).off('click').on('click', function() {
-    self.importCartConfirm(dropzone, group, groupView, createCart, useMetadata);
-  }).removeAttr('disabled');
+  $.each(this.uploads, function(index, currentUpload){
+    if(currentUpload === upload) {
+      self.uploads.splice(index, 1);
+    }
+  });
 };
 
-Rivendell.Importer.prototype.importCartConfirm = function(dropzone, group, groupView, createCart, useMetadata) {
-  this.$el.modal('hide');
+Rivendell.Upload = function(group, groupView, createCart, newCartNumber, useMetadata, dropzone) {
+  this.group = group;
+  this.groupView = groupView;
+  this.createCart = createCart;
+  this.newCartNumber = newCartNumber;
+  this.useMetadata = useMetadata;
+  this.dropzone = dropzone;
+
+  this.cart = null;
+  this.cut = null;
+
+  this.import();
+};
+
+Rivendell.Upload.prototype.cancel = function() {
+  this.dropzone.removeAllFiles();
+  this.dropzone.disable();
+
+  var self = this;
+  if (this.createCart && this.cart !== null) {
+    rdxport.removeCart(this.cart.number, function() {
+      self.group.fetchCarts();
+    });
+    this.cart = null;
+  } else if (this.cart !== null && this.cut !== null) {
+    rdxport.removeCut(this.cart.number, this.cut.number, function() {
+      self.group.fetchCarts();
+    });
+    this.cut = null;
+  }
 
-  //var cart_row = $('#show-cart-' + cart);
-  //cart_row.find('.btn').attr('disabled','disabled');
-  //var importing_row = jingles_newImportingEntry(cart);
-  //importing_row.find('button').unbind('click').click(function() { jingles_importCartCancel(cart, dropzone); });
-  //cart_row.replaceWith(importing_row);
+  importer.removeUpload(this);
+};
 
-  var files = dropzone.getAcceptedFiles();
-  //importing_row.find('.file-name').text(files[0].name);
-  //jingles_importUpdateProgress(files[0], importing_row);
+Rivendell.Upload.prototype.import = function() {
   var self = this;
-  dropzone.on('uploadprogress', function(file) {
-    groupView.uploadProgress(file);
+
+  this.dropzone.off('uploadprogress').on('uploadprogress', function(file) {
+    self.groupView.uploadProgress(self, file);
   });
-  dropzone.on('success', function(file) {
-    self.importFileUploadSuccess(dropzone, file, group);
+  this.dropzone.off('success').on('success', function(file) {
+    self.importFileUploadSuccess();
   });
-  dropzone.off('error').on('error', function(file, msg, xhr) {
-    self.importFileUploadError(this, file, msg, xhr);
+  this.dropzone.off('error').on('error', function(file, msg, xhr) {
+    self.importFileUploadError(file, msg, xhr);
   });
-  /*$(files).each(function(index, file) {
-   self.importAddCut(dropzone, group, file);
-   });*/
-
-  if (createCart) {
-    rdxport.addCart(group.groupName, 'audio', null, function(cartXML) {
-      var cart = new Rivendell.Cart(cartXML, group);
-      self.importAddCut(dropzone, group, files[0], createCart, cart, useMetadata);
+  // debug
+  //self.importFileUploadError({cartNumber: 100000}, '<?xml version="1.0" encoding="UTF-8"?><woot><ResponseCode>123</ResponseCode><ErrorString>Fake error</ErrorString></woot>', null);
+
+  this.addCart(function(file) {
+    self.addCut(file);
+  });
+};
+
+Rivendell.Upload.prototype.addCart = function(success) {
+  var files = this.dropzone.getAcceptedFiles();
+
+  var self = this;
+  if (this.createCart) {
+    rdxport.addCart(this.group.groupName, 'audio', this.newCartNumber, function(cartXML) {
+      self.cart = new Rivendell.Cart(cartXML, self.group);
+      success(files[0]);
+    }).fail(function() {
+      //self.importFileUploadError(files[0], 'Failed to add Cart.');
     });
   } else {
-    var cart = group.mainCart;
-    self.importAddCut(dropzone, group, files[0], createCart, cart, useMetadata);
+    this.cart = this.group.carts[0];
+    success(files[0]);
   }
 };
 
-Rivendell.Importer.prototype.importFileUploadSuccess = function(dropzone, file, group) {
-  dropzone.disable();
-  this.uploads = $.grep(this.uploads, function(element) {
-    return element !== dropzone;
-  });
-  group.fetchCarts();
+Rivendell.Upload.prototype.importFileUploadSuccess = function() {
+  this.dropzone.removeAllFiles();
+  this.dropzone.disable();
+
+  this.group.fetchCarts();
+
+  importer.removeUpload(this);
 };
 
-Rivendell.Importer.prototype.importFileUploadError = function(dropzone, file, msg, xhr) {
-  //var error_row = jingles_newImportErrorEntry(cart, msg);
-  //error_row.find('button').unbind('click').click(function() {
-  //jingles_deleteCart(cart);
-  //});
-  //$('#show-cart-' + cart).replaceWith(error_row);
-  //error_row.find('.file-name').text(file.name);
-  dropzone.removeFile(file);
-  dropzone.disable();
-  this.uploads = $.grep(this.uploads, function(element) {
-    return element !== dropzone;
-  });
+Rivendell.Upload.prototype.importFileUploadError = function(file, msg, xhr) {
+  this.groupView.uploadError(self, file, msg);
+  this.cancel();
 };
 
-Rivendell.Importer.prototype.importAddCut = function(dropzone, group, file, createCart, cart, useMetadata) {
-  rdxport.addAndEditCut(cart.number, {DESCRIPTION: file.name}, function(cutXml) {
-    group.fetchCarts();
-    dropzone.on('sending', function(file, xhr, formData) {
+Rivendell.Upload.prototype.addCut = function(file) {
+  var self = this;
+
+  rdxport.addAndEditCut(this.cart.number, {DESCRIPTION: file.name}, function(cutXml) {
+    self.cut = new Rivendell.Cut(cutXml, self.cart);
+
+    self.dropzone.on('sending', function(file, xhr, formData) {
       var cutNumber = $('cutNumber', cutXml).text();
       var cutNumberLeading = cutNumber;
       switch (cutNumber.toString().length) {
@@ -158,28 +187,22 @@ Rivendell.Importer.prototype.importAddCut = function(dropzone, group, file, crea
         case 2: cutNumberLeading = '0' + cutNumber; break;
         case 3: default: cutNumberLeading = cutNumber; break;
       }
-      file.cartNumber = cart.number;
+      file.cartNumber = self.cart.number;
       file.cutNumber = cutNumberLeading;
 
       formData.append('COMMAND', 2);
       formData.append('LOGIN_NAME', auth_username);
       formData.append('PASSWORD', auth_token);
-      formData.append('CART_NUMBER', cart.number);
+      formData.append('CART_NUMBER', self.cart.number);
       formData.append('CUT_NUMBER', cutNumber);
       formData.append('CHANNELS', 2);
-      formData.append('NORMALIZATION_LEVEL', cart.normlevel);
-      formData.append('AUTOTRIM_LEVEL', cart.trimlevel);
-      if (useMetadata) {
-        formData.append('USE_METADATA', 1);
-      } else {
-        formData.append('USE_METADATA', 0);
-      }
+      formData.append('NORMALIZATION_LEVEL', self.cart.normlevel);
+      formData.append('AUTOTRIM_LEVEL', self.cart.trimlevel);
+      formData.append('USE_METADATA', (self.useMetadata ? 1 : 0));
     });
-    dropzone.processQueue();
-  }).fail(function(xhr, status, err) {
-    self.importFileUploadError(dropzone, file, err, xhr);
-    if (createCart) {
-      rdxport.removeCart(cart.number);
-    }
+
+    self.dropzone.processQueue();
+    self.group.fetchCarts();
+
   });
 };
diff --git a/www/js/jingles.js b/www/js/jingles.js
index 64847dd..72ae3ae 100644
--- a/www/js/jingles.js
+++ b/www/js/jingles.js
@@ -32,6 +32,7 @@ function jingles_init() {
 }
 
 function jingles_cleanup() {
+  importer.cancelAllUploads();
   if (jingleGroupListView) {
     jingleGroupListView.destroy();
     jingleGroupListView = null;
@@ -108,7 +109,7 @@ Rivendell.JingleGroupView.prototype.render = function() {
   $('table tbody tr', this.$el).remove();
 
   $('.uploadButton', this.$el).on('click', function() {
-    importer.openModal(self.model, self, false, false);
+    importer.openModal(self.model, self, false, null, false);
   });
 };
 
@@ -116,7 +117,7 @@ Rivendell.JingleGroupView.prototype.destroy = function() {
   $('table > tbody', this.$el).html('');
 };
 
-Rivendell.JingleGroupView.prototype.uploadProgress = function(file) {
+Rivendell.JingleGroupView.prototype.uploadProgress = function(upload, file) {
   if (!file.cartNumber || !file.cutNumber) {
     return;
   }
@@ -126,6 +127,11 @@ Rivendell.JingleGroupView.prototype.uploadProgress = function(file) {
     $progressBar.find('.file-name').text(file.name);
     $progressBar.find('.cart-number').text(file.cartNumber);
     $cut.html($progressBar.html());
+
+    $('button', $cut).on('click', function() {
+      upload.cancel();
+    });
+
     $cut.addClass('uploading');
   }
 
@@ -141,6 +147,10 @@ Rivendell.JingleGroupView.prototype.uploadProgress = function(file) {
   }
 };
 
+Rivendell.JingleGroupView.prototype.uploadError = function(upload, file, msg) {
+  // todo
+};
+
 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 fdf8a74..a5cd323 100644
--- a/www/js/musicpools.js
+++ b/www/js/musicpools.js
@@ -32,8 +32,8 @@ function musicpools_init() {
 }
 
 function musicpools_cleanup() {
+  importer.cancelAllUploads();
   musicpoolsView = null;
-  rdxport = null;
 }
 
 Rivendell.MusicpoolsView = function(model) {
@@ -148,20 +148,25 @@ Rivendell.MusicpoolView.prototype.render = function() {
   });
 
   $('.uploadButton', this.$el).on('click', function() {
-    importer.openModal(self.model, self, true, true);
+    importer.openModal(self.model, self, true, null, true);
   });
 };
 
-Rivendell.MusicpoolView.prototype.uploadProgress = function(file) {
+Rivendell.MusicpoolView.prototype.uploadProgress = function(upload, 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);
+    $('.file-name', $progressBar).text(file.name);
+    $('.cart-number', $progressBar).text(file.cartNumber);
     $cart.html($progressBar.html());
+
+    $('button', $cart).on('click', function() {
+      upload.cancel();
+    });
+
     $cart.addClass('uploading');
   }
 
@@ -177,6 +182,10 @@ Rivendell.MusicpoolView.prototype.uploadProgress = function(file) {
   }
 };
 
+Rivendell.MusicpoolView.prototype.uploadError = function(upload, file, msg) {
+  // todo
+};
+
 Rivendell.MusicpoolCartView = function(model) {
   this.model = model;
 
diff --git a/www/js/shows.js b/www/js/shows.js
index cc226cd..e4417ad 100644
--- a/www/js/shows.js
+++ b/www/js/shows.js
@@ -46,6 +46,8 @@ function shows_init() {
 
 function shows_cleanup() {
   $('#show-carts tbody').find('tr').remove();
+  importer.cancelAllUploads();
+
   /*sessionStorage.removeItem("shows_currentid");
   shows_currentid = null;
   shows_list = [];
@@ -115,10 +117,10 @@ Rivendell.ShowListView.prototype.updateSelector = function() {
 
   $showSelector.on('change', function() {
     self.setCurrentShowId($('option:selected', $showSelector).attr('value'));
-    self.getCurrentShowView().model.fetchCartsAndLogs();
+    self.getCurrentShowView().model.fetchCarts();
   });
 
-  this.getCurrentShowView().model.fetchCartsAndLogs();
+  this.getCurrentShowView().model.fetchCarts();
 };
 
 Rivendell.Show = function(groupName, description, lowcart, highcart, normlevel, trimlevel,
@@ -148,7 +150,7 @@ Rivendell.Show = function(groupName, description, lowcart, highcart, normlevel,
 Rivendell.Show.prototype = Object.create(Rivendell.Group.prototype);
 Rivendell.Show.prototype.constructor = Rivendell.Show;
 
-Rivendell.Show.prototype.fetchCartsAndLogs = function() {
+Rivendell.Show.prototype.fetchCarts = function() {
   var self = this;
 
   var lcd = rdxport.listLog(this.log, function(logsXml, status, req) {
@@ -166,6 +168,7 @@ Rivendell.Show.prototype.fetchCartsAndLogs = function() {
 
   var gcd = rdxport.listCarts(this.groupName, 1, function(cartsXml, status, req) {
     self.carts = [];
+    self.cartsByNumber = {};
 
     var dbs = $('cartList', cartsXml).children();
     dbs.each(function(index, cartXml) {
@@ -209,27 +212,86 @@ Rivendell.ShowView.prototype.render = function() {
   var $tableBody = $('#app-shows table tbody');
   $('tr', $tableBody).remove();
 
-  var self = this;
   this.cartViews = [];
+  var self = this;
   $(this.model.logs).each(function(index, log) {
     var cart = self.model.getCartByNumber(log.cartNumber);
     if (cart) {
-      var cartView = new Rivendell.ShowCartView(cart);
+      var cartView = new Rivendell.ShowCartView(cart, self);
       self.cartViews.push(cartView);
       cartView.render();
 
       $('#app-shows table > tbody').append(cartView.$el);
     } else {
-      var cart = new Rivendell.Cart(log.cartNumber, '-', '-', null);
-      var cartView = new Rivendell.ShowCartView(cart);
-      cartView.renderEmpty();
-      $('#app-shows table > tbody').append(cartView.$el);
+      $('#app-shows table > tbody').append(Rivendell.ShowCartView.renderEmpty(self.model, self, log.cartNumber));
     }
   });
 };
 
-Rivendell.ShowCartView = function(model) {
+Rivendell.ShowView.prototype.uploadProgress = function(upload, file) {
+  if (!file.cartNumber || !file.cutNumber) {
+    return;
+  }
+  var $cart = $('#show-cart-' + file.cartNumber).first();
+  if (!$cart.hasClass('uploading')) {
+    var $progressBar = $('.progressBarTemplate.shows').clone().removeClass('progressBarTemplate');
+    $('.file-name', $progressBar).text(file.name);
+    $('.cart-number', $progressBar).text(file.cartNumber);
+    $cart.html($progressBar.html());
+
+    var self = this;
+    $('button', $cart).on('click', function() {
+      upload.cancel();
+    });
+
+    $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 .progress-bar').css("width", file.upload.progress + "%");
+  } else {
+    $cart.find('.file-bytes').text('importiere...');
+    $cart.find('.progress .progress-bar').css('width', '100%');
+    $cart.find('.progress .progress-bar').addClass('progress-bar-striped').addClass('active');
+  }
+};
+
+Rivendell.ShowView.prototype.uploadError = function(upload, file, msg) {
+  if (!file.cartNumber) {
+    return;
+  }
+  var dismiss_button = '<button class="btn btn-info btn-xs">' +
+      '<span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;Ok</button>';
+
+  var xmlDoc = $.parseXML(msg);
+  var msg = $(xmlDoc);
+  var resp_code = msg.find('ResponseCode').text();
+  var err_string = msg.find('ErrorString').text();
+  var reason = $('<span>').addClass('label').addClass('label-danger').text(resp_code).after($('<b>').html('&nbsp;' + err_string));
+
+  var $errorRow = $('<tr>')
+      .attr("id", "show-cart-" + file.cartNumber)
+      .append($('<td>').text(file.cartNumber))
+      .append($('<td>').addClass('file-name').text('-'))
+      .append($('<td>').append($('<b>').text('Import Fehler')))
+      .append($('<td colspan=3>').append(reason))
+      .append($('<td>').css('text-align', 'center').append(dismiss_button));
+
+  var self = this;
+  $('button', $errorRow).on('click', function() {
+    var $emptyRow = Rivendell.ShowCartView.renderEmpty(self.model, self, file.cartNumber);
+    $('#show-cart-' + file.cartNumber).replaceWith($emptyRow);
+  });
+
+  $('#show-cart-' + file.cartNumber).replaceWith($errorRow);
+};
+
+Rivendell.ShowCartView = function(model, groupView) {
   this.model = model;
+  this.groupView = groupView;
 
   this.$spinner = null;
   this.$el = $('<tr>');
@@ -246,30 +308,43 @@ Rivendell.ShowCartView.prototype.render = function() {
   this.$spinner = $('#hiddenTemplates .spinnerTemplate').clone().removeClass('spinnerTemplate');
 
   var cut = this.model.cuts[0];
+  var length = '-';
+  var originDatetime = '-';
+  var playCounter = '-';
+  var lastPlayDatetime = '-';
+  if (cut) {
+    length = msToTimeString(Number(cut.length));
+    originDatetime = format_datetime(new Date(cut.originDatetime));
+    playCounter = cut.playCounter;
+    lastPlayDatetime = format_datetime(new Date(cut.lastPlayDatetime));
+  }
   this.$el = this.$el.empty()
     .attr('id', 'show-cart-' + this.model.number)
     .append($('<td>').text(this.model.number))
     .append($('<td>').text(this.model.title))
-    .append($('<td>').text(msToTimeString(Number(cut.length))))
-    .append($('<td>').text(format_datetime(new Date(cut.originDatetime))))
-    .append($('<td>').text(cut.playCounter))
-    .append($('<td>').text(format_datetime(new Date(cut.lastPlayDatetime))))
+    .append($('<td>').text(length))
+    .append($('<td>').text(originDatetime))
+    .append($('<td>').text(playCounter))
+    .append($('<td>').text(lastPlayDatetime))
     .append($('<td>').css('text-align', 'center').append($deleteButton));
 };
 
-Rivendell.ShowCartView.prototype.renderEmpty = function() {
-  var buttons = '<button class="btn btn-primary btn-xs">' +
-    '<span class="glyphicon glyphicon-upload"></span>&nbsp;&nbsp;Importieren</button>';
+Rivendell.ShowCartView.renderEmpty = function(group, groupView, cartNumber) {
+  var $uploadButton = $('<button class="uploadButton btn btn-primary btn-xs"><span class="glyphicon glyphicon-upload"></span>&nbsp;&nbsp;Importieren</button>');
 
-  this.$el = this.$el.empty()
-    .attr('id', 'show-cart-' + this.model.number)
-    .append($('<td>').text(this.model.number))
-    .append($('<td>').text('-'))
-    .append($('<td>').text('-'))
-    .append($('<td>').text('-'))
-    .append($('<td>').text('-'))
-    .append($('<td>').text('-'))
-    .append($('<td>').css('text-align', 'center').append(buttons));
+  $uploadButton.on('click', function() {
+    importer.openModal(group, groupView, cartNumber, true, true);
+  });
+
+  return $('<tr>')
+          .attr('id', 'show-cart-' + cartNumber)
+          .append($('<td>').text(cartNumber))
+          .append($('<td>').text('-'))
+          .append($('<td>').text('-'))
+          .append($('<td>').text('-'))
+          .append($('<td>').text('-'))
+          .append($('<td>').text('-'))
+          .append($('<td>').css('text-align', 'center').append($uploadButton));
 };
 
 Rivendell.ShowCartView.prototype.delete = function() {
@@ -278,303 +353,8 @@ Rivendell.ShowCartView.prototype.delete = function() {
   var self = this;
   rdxport.removeCart(this.model.number, function() {
     self.model.group.removeCart(self.model);
-    self.renderEmpty();
+    var $empty = Rivendell.ShowCartView.renderEmpty(self.model.group, self.groupView, self.model.number);
+    self.$el.replaceWith($empty);
   });
 };
 
-
-
-
-function shows_deleteCart(cart) {
-  rdxport.removeCart(cart, function() {
-    shows_updateGroupCartInfo(cart);
-  });
-}
-
-function shows_importAddCut(cart, dz, file) {
-  rdxport.addCut(cart, function() {
-    dz.processQueue();
-  }).fail(function(xhr, status, err) {
-    shows_importFileUploadError(cart, dz, file, err, xhr);
-  });
-}
-
-function shows_importAddCart(cart, dz, file) {
-  rdxport.addCart(shows_current.group.name, 'audio', cart, function() {
-    shows_importAddCut(cart, dz, file);
-  }).fail(function(xhr, status, err) {
-    shows_importFileUploadError(cart, dz, file, err, xhr);
-  });
-}
-
-function shows_importCartCancel(cart, dz) {
-  shows_deleteCart(cart);
-  dz.off("error");
-  dz.disable();
-}
-
-function shows_importFileUploadError(cart, dz, file, msg, xhr) {
-  var error_row = shows_newImportErrorEntry(cart, msg);
-  error_row.find('button').unbind('click').click(function() { shows_deleteCart(cart); });
-  $('#show-cart-' + cart).replaceWith(error_row);
-  error_row.find('.file-name').text(file.name);
-  dz.disable();
-}
-
-function shows_importFileUploadSuccess(cart, dz, file) {
-  shows_updateGroupCartInfo(cart);
-  dz.disable();
-}
-
-function shows_importUpdateProgress(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 .progress-bar').css("width", file.upload.progress + "%");
-  } else {
-    stats.find('.file-bytes').text('importiere...');
-    stats.find('.progress .progress-bar').css('width', '100%');
-    stats.find('.progress .progress-bar').addClass('progress-bar-striped').addClass('active');
-  }
-}
-
-function shows_importCartConfirm(cart, dz) {
-  $('#uploadModal').modal('hide');
-  var cart_row = $('#show-cart-' + cart);
-  cart_row.find('.btn').attr('disabled','disabled');
-  var importing_row = shows_newImportingEntry(cart);
-  importing_row.find('button').unbind('click').click(function() { shows_importCartCancel(cart, dz); });
-  cart_row.replaceWith(importing_row);
-
-  dz.off("error");
-  var files = dz.getAcceptedFiles();
-  importing_row.find('.file-name').text(files[0].name);
-  shows_importUpdateProgress(files[0], importing_row);
-  dz.on("uploadprogress", function(file) { shows_importUpdateProgress(file, importing_row); });
-  dz.on("success", function(file) { shows_importFileUploadSuccess(cart, dz, file); });
-  dz.on("error", function(file, msg, xhr) { shows_importFileUploadError(cart, this, file, msg, xhr); });
-  shows_importAddCart(cart, dz, files[0]);
-}
-
-function shows_createImportForm(cart) {
-  return $('<form>').attr("action", "/rd-bin/rdxport.cgi").attr("method", "post").attr("enctype", "multipart/form-data")
-             .append($('<input>').attr("type", "hidden").attr("name", "COMMAND").attr("value", 2))
-             .append($('<input>').attr("type", "hidden").attr("name", "LOGIN_NAME").attr("value", auth_username))
-             .append($('<input>').attr("type", "hidden").attr("name", "PASSWORD").attr("value", auth_token))
-             .append($('<input>').attr("type", "hidden").attr("name", "CART_NUMBER").attr("value", cart))
-             .append($('<input>').attr("type", "hidden").attr("name", "CUT_NUMBER").attr("value", 1))
-             .append($('<input>').attr("type", "hidden").attr("name", "CHANNELS").attr("value", 2))
-             .append($('<input>').attr("type", "hidden").attr("name", "NORMALIZATION_LEVEL").attr("value", shows_current.normlevel))
-             .append($('<input>').attr("type", "hidden").attr("name", "AUTOTRIM_LEVEL").attr("value", shows_current.trimlevel))
-             .append($('<input>').attr("type", "hidden").attr("name", "USE_METADATA").attr("value", 1));
-}
-
-function shows_importFileAdded(dz, file, cart) {
-  $(dz.getAcceptedFiles()).each(function(idx, elem) { dz.removeFile(elem); });
-  $('#uploadModal div.modal-body').css("background-image", "url('/img/audio_file.png')")
-  $('#uploadModal div.modal-header h4').text(file.name)
-  $('#uploadModal-confirm').removeAttr('disabled').unbind('click').click(function() { shows_importCartConfirm(cart, dz); });
-}
-
-function shows_importFileSelectError(dz, file, msg) {
-  $('#uploadModal div.modal-header h4').text("Datei auswählen...")
-  $('#uploadModal div.modal-body').css("background-image", "url('/img/dz-backdrop.png')");
-  $('#uploadModal-confirm').attr('disabled','disabled').unbind('click');
-  dz.removeFile(file);
-}
-
-function shows_importCart(cart) {
-  var form = shows_createImportForm(cart);
-  $('#uploadModal div.modal-header h4').text("Datei auswählen...")
-  $('#uploadModal div.modal-body').empty().append(form).css("background-image", "url('/img/dz-backdrop.png')");
-  $('#uploadModal-confirm').attr('disabled','disabled').unbind('click');
-  var dz = form.dropzone({ url: "/rd-bin/rdxport.cgi", parallelUploads: 1, maxFilesize: 2048, paramName: 'FILENAME',
-                           uploadMultiple: false, clickable: true, createImageThumbnails: false,
-                           acceptedFiles: ".flac,.wav,.ogg,.mp3", autoProcessQueue: false, init: function() {
-            this.on("addedfile", function(file) { shows_importFileAdded(this, file, cart); });
-            this.on("error", function(file, msg) { shows_importFileSelectError(this, file, msg); });
-    }});
-
-  $('#uploadModal').modal({ keyboard: true });
-}
-
-// <td>
-//   <button class="btn btn-info btn-xs disabled"><span class="glyphicon glyphicon-arrow-up"></span></button>
-//   <button class="btn btn-info btn-xs disabled"><span class="glyphicon glyphicon-arrow-down"></span></button>
-//   <button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"></span>&nbsp;&nbsp;Löschen</button>
-// </td>
-// <td>
-//   <button class="btn btn-info btn-xs"><span class="glyphicon glyphicon-arrow-up"></span></button>
-//   <button class="btn btn-info btn-xs disabled"><span class="glyphicon glyphicon-arrow-down"></span></button>
-//   <button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-upload"></span>&nbsp;&nbsp;Importieren</button>
-// </td>
-
-function shows_newCartEntry(elem) {
-  var cart_exists = shows_group_carts[elem] ? 1 : 0;
-  var cart = {};
-  cart.title = cart_exists ? shows_group_carts[elem].title : '-';
-  cart.length = cart_exists ? shows_group_carts[elem].length : '-';
-  cart.imported = cart_exists ? format_datetime(shows_group_carts[elem].imported) : '-';
-  cart.playcnt = cart_exists ? shows_group_carts[elem].playcnt : '-';
-  cart.lastplayed = cart_exists ? format_datetime(shows_group_carts[elem].lastplayed) : '-';
-
-  var buttons = cart_exists ?
-        '<button class="btn btn-danger btn-xs" onclick="shows_deleteCart(' + elem + ');">' +
-           '<span class="glyphicon glyphicon-trash"></span>&nbsp;&nbsp;Löschen</button>' :
-        '<button class="btn btn-primary btn-xs" onclick="shows_importCart(' + elem + ');">' +
-           '<span class="glyphicon glyphicon-upload"></span>&nbsp;&nbsp;Importieren</button>';
-
-  return $('<tr>').append($('<td>').text(elem))
-                  .append($('<td>').text(cart.title))
-                  .append($('<td>').text(msToTimeString(cart.length)))
-                  .append($('<td>').text(cart.imported))
-                  .append($('<td>').text(cart.playcnt))
-                  .append($('<td>').text(cart.lastplayed))
-                  .append($('<td>').css('text-align', 'center').append(buttons))
-                  .attr("id", "show-cart-" + elem);
-}
-
-function shows_newImportingEntry(cart) {
-  var progress_bar = '<div class="progress"><div class="progress-bar" style="width: 0%;"><span class="sr-only">0% Complete</span></div></div>';
-  var cancel_button = '<button class="btn btn-danger btn-xs">' +
-                      '<span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;Abbrechen</button>';
-
-  return $('<tr>').append($('<td>').text(cart))
-                  .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))
-                  .attr("id", "show-cart-" + cart);
-}
-
-function shows_newImportErrorEntry(cart, msg) {
-  var dismiss_button = '<button class="btn btn-info btn-xs">' +
-                       '<span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;Ok</button>';
-
-  var xmlDoc = $.parseXML(msg);
-  msg = $(xmlDoc);
-  var resp_code = msg.find('ResponseCode').text();
-  var err_string = msg.find('ErrorString').text();
-  var reason = $('<span>').addClass('label').addClass('label-danger').text(resp_code).after($('<b>').html('&nbsp;' + err_string))
-
-  return $('<tr>').append($('<td>').text(cart))
-                  .append($('<td>').addClass('file-name').text('-'))
-                  .append($('<td>').append($('<b>').text('Import Fehler')))
-                  .append($('<td colspan=3>').append(reason))
-                  .append($('<td>').css('text-align', 'center').append(dismiss_button))
-                  .attr("id", "show-cart-" + cart);
-}
-
-function shows_updateGroupCartInfo(cart) {
-  rdxport.listCart(cart, 1, function(data) {
-    shows_updateGroupCartList(data);
-    shows_redrawCartEntry(cart);
-  }).fail(function() {
-    delete shows_group_carts[cart];
-    shows_redrawCartEntry(cart);
-  });
-}
-
-function shows_redrawCartEntry(cart) {
-  $('#show-cart-' + cart).replaceWith(shows_newCartEntry(cart));
-}
-
-/*function shows_updateCartListing() {
-  $('#show-carts tbody').find('tr').remove();
-  shows_log_carts.forEach(function(elem) {
-    $('#show-carts > tbody:last').append(shows_newCartEntry(elem));
-  });
-}
-
-function shows_updateGroupCartList(data) {
-  var cartlist = $(data).find("cartList");
-  var carts = cartlist.children();
-  carts.each(function() {
-      var cut = $(this).find("cutList").get(0);
-      var number = $(this).find('number').text();
-      var cart = {
-        title: $(this).find('title').text(),
-        length: Number($(cut).find('length').text()),
-        imported: new Date($(cut).find('originDatetime').text()),
-        playcnt: $(cut).find('playCounter').text(),
-        lastplayed: new Date($(cut).find('lastPlayDatetime').text())
-      };
-      cart.imported = isNaN(cart.imported) ? '-' : cart.imported;
-      cart.lastplayed = isNaN(cart.lastplayed) ? '-' : cart.lastplayed;
-      shows_group_carts[number] = cart;
-    }
-  );
-}
-
-function shows_updateLogCartList(data, status, req) {
-  var loglist = $(data).find("logList");
-  var loglines = loglist.children();
-  loglines.each(function() {
-      var number = $(this).find('cartNumber').text();
-      if(number >= shows_current.group.lowcart && number <= shows_current.group.highcart) {
-        shows_log_carts.push(number);
-      }
-    }
-  );
-}
-
-function shows_showSelected() {
-  shows_currentid = $('#show-selector option:selected').attr('value');
-  sessionStorage.setItem("shows_currentid", shows_currentid);
-  shows_current = $.grep(shows_list, function(elem) { return elem.id == shows_currentid; })[0];
-
-  if(shows_current) {
-    $('#show-title').text(shows_current.title);
-    $('#show-dow').text(weekday[shows_current.dow]);
-    $('#show-rhythm').text(shows_current.rhythm);
-    $('#show-starttime').text(shows_current.starttime);
-    $('#show-length').text(shows_current.length + ' Min.');
-
-    shows_log_carts = [];
-    var lcd = rdxport.listLog(shows_current.log, shows_updateLogCartList);
-
-    shows_group_carts = {};
-    var gcd = rdxport.listCarts(shows_current.group.name, 1, shows_updateGroupCartList);
-
-    $.when(lcd, gcd).done(
-      function(lcres, gcres) {
-        if(lcres[1] == 'success' && gcres[1] == 'success') {
-          shows_updateCartListing();
-        }
-      }
-    );
-  }
-}
-
-function shows_updateList(data, status, req) {
-  shows_list = [];
-  $('#show-selector').find('option').remove();
-  var dblist = $(data).find("dropboxList");
-  var dbs = dblist.children();
-  dbs.each(function() {
-    var show = {
-      id: $(this).find('show-id').text(),
-      title: $(this).find('show-title').text(),
-      dow: $(this).find('show-dayofweek').text(),
-      rhythm: $(this).find('show-rhythm').text(),
-      starttime: $(this).find('show-starttime').text(),
-      length: $(this).find('show-length').text(),
-      log: $(this).find('show-log').text(),
-      group: {
-        name: $(this).find('group').text(),
-        lowcart: $(this).find('group-low-cart').text(),
-        highcart: $(this).find('group-high-cart').text()
-      },
-      normlevel: $(this).find('normalization-level').text(),
-      trimlevel: $(this).find('autotrim-level').text()
-    };
-
-    var name = show.title + ' (' + show.rhythm + ', ' + weekday[show.dow] + ', ' + show.starttime + ', ' + show.length + ' Min.)';
-    $('#show-selector').append($('<option>').attr('value',show.id).text(name));
-
-    shows_list.push(show);
-  });
-  $('#show-selector').val(shows_currentid);
-  shows_showSelected();
-}*/