refactor importer: cancel import, shows import, etc.

1 files changed, 103 insertions, 323 deletions

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();
-}*/