add rudimentary jingles audio import

2 files changed, 197 insertions, 23 deletions

diff --git a/www/js/jingles.js b/www/js/jingles.js
index 01cb31c..3c1acfa 100644
--- a/www/js/jingles.js
+++ b/www/js/jingles.js
@@ -23,8 +23,10 @@
 "use strict";
 
 var jinglesGroupList = null;
+var importer = null;
 
 function jingles_init() {
+  importer = new Importer();
   jinglesGroupList = new JingleGroupList();
   jinglesGroupList.fetch();
 }
@@ -87,7 +89,7 @@ JingleGroupList.prototype.fetch = function() {
 
 JingleGroupList.prototype.render = function() {
   console.log('JingleGroupList.prototype.render');
-  $('#app-jingles').html('');
+  $('#app-jingles .groups').html('');
   $(this.groups).each(function(index, group) {
     group.render();
   });
@@ -127,6 +129,14 @@ JingleGroup.prototype.fetchCarts = function() {
       self.deactivateCart = self.createCartFromXml(cartXml, false);
     }, "xml")
   ).then(function() {
+    /*self.mainCart.on('add', function() {
+      self.trigger('add');
+    });
+
+    self.mainCart.on('remove', function() {
+      self.trigger('remove');
+    });*/
+
     $(self).trigger('update');
   });
 };
@@ -161,14 +171,18 @@ JingleGroup.prototype.createCartFromXml = function(cartXml, active) {
 
 JingleGroup.prototype.render = function() {
   console.log('JingleGroup.prototype.render');
-  //if (!this.$el) {
-    this.$el = $('.jingleGroupTemplate').clone().removeClass('jingleGroupTemplate');
-    this.$el.removeClass('hidden').appendTo('#app-jingles');
-  //}
+  var self = this;
+
+  this.$el = $('.jingleGroupTemplate').clone().removeClass('jingleGroupTemplate');
+  this.$el.appendTo('#app-jingles .groups');
 
   $('h2', this.$el).html(this.title);
   $('table tbody tr', this.$el).remove();
 
+  $('.uploadButton', this.$el).on('click', function() {
+    importer.showUploadModal(self.mainCart);
+  });
+
   // todo: fix
   /*var cuts = [];
   if (this.mainCart && this.deactivateCart) {
@@ -191,7 +205,6 @@ JingleGroup.prototype.render = function() {
     $('table > tbody', self.$el).append(cut.render());
   });*/
   if (this.deactivateCart) {
-    var self = this;
     $.each(this.deactivateCart.cuts, function(index, cut) {
       $('table > tbody', self.$el).append(cut.render());
     });
@@ -308,7 +321,7 @@ JingleCut.prototype.render = function() {
   this.$el = $('<tr>').append($('<td>').text(this.name))
     .append($('<td>').text(this.description))
     .append(
-      $('<td>').css('text-align', 'center')
+      $('<td>')
         .append(moveButton)
         .append(activateButton)
         .append(deleteButton)
@@ -316,3 +329,165 @@ JingleCut.prototype.render = function() {
 
   return this.$el;
 };
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var Importer = function() {
+  this.$el = $('#uploadModal');
+
+
+};
+
+Importer.prototype.importAddCut = function(cart, dz, file) {
+  // todo: set additional parameters like DESCRIPTION here, when patch has been applied.
+  var data = { COMMAND: 10, LOGIN_NAME: auth_username, PASSWORD: auth_token, CART_NUMBER: cart.number, DESCRIPTION: 'test' };
+  $.post("/rd-bin/rdxport.cgi", data, null, "xml").done(function() {
+    dz.processQueue();
+  }).fail(function(xhr, status, err) {
+    self.importFileUploadError(cart, dz, file, err, xhr);
+  });
+};
+
+Importer.prototype.importCartCancel = function(cart, dz) {
+  this.deleteCart(cart);
+  dz.off("error");
+  dz.disable();
+};
+
+Importer.prototype.importFileUploadError = function(cart, dz, 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);
+  dz.disable();
+};
+
+Importer.prototype.importFileUploadSuccess = function(cart, dz, file) {
+  //var command = { LOGIN_NAME: auth_username, PASSWORD: auth_token, DESCRIPTION: file. };
+
+  //jingles_updateGroupCartInfo(cart);
+  dz.disable();
+  $(cart).trigger('add');
+};
+
+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');
+  }
+};
+
+Importer.prototype.importCartConfirm = function(cart, dz) {
+  $('#uploadModal').modal('hide');
+  //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, dz); });
+  //cart_row.replaceWith(importing_row);
+
+  dz.off("error");
+  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("success", function(file) {
+    self.importFileUploadSuccess(cart, dz, file);
+  });
+  dz.on("error", function(file, msg, xhr) {
+    self.importFileUploadError(cart, this, file, msg, xhr);
+  });
+  this.importAddCut(cart, dz, files[0])
+};
+
+Importer.prototype.importFileAdded = function(dropzone, file, cart) {
+  $(dropzone.getAcceptedFiles()).each(function(idx, elem) { dropzone.removeFile(elem); });
+
+  var uploadModal = $('#uploadModal');
+  $('div.modal-body', uploadModal).css("background-image", "url('/img/audio_file.png')");
+  $('div.modal-header h3', uploadModal).text(file.name);
+  var self = this;
+  $('#uploadModal-confirm', uploadModal).unbind('click').click(function() {
+    self.importCartConfirm(cart, dropzone);
+  }).removeAttr('disabled');
+};
+
+Importer.prototype.importFileSelectError = function(dropzone, file, msg) {
+  var uploadModal = $('#uploadModal');
+  $('div.modal-header h3', uploadModal).text("Datei auswählen...");
+  $('div.modal-body', uploadModal).css("background-image", "url('/img/dz-backdrop.png')");
+  $('#uploadModal-confirm', uploadModal).attr('disabled','disabled').unbind('click');
+  dropzone.removeFile(file);
+};
+
+Importer.prototype.showUploadModal = function(cart) {
+  console.log('Importer.prototype.showUploadModal');
+
+  var uploadModal = $('#uploadModal');
+  $('div.modal-header h3', uploadModal).text("Datei auswählen...");
+  var form = $('<form>');
+  $('.modal-body', uploadModal).empty().append(form).css("background-image", "url('/img/dz-backdrop.png')");
+  var self = this;
+  var dropzone = form.dropzone({
+    url: '/rd-bin/rdxport.cgi',
+    parallelUploads: 1,
+    maxFilesize: 2048,
+    paramName: 'FILENAME',
+    uploadMultiple: false, // todo: maybe enable this?
+    clickable: true,
+    createImageThumbnails: false,
+    acceptedFiles: '.flac,.wav,.ogg,.mp3,.m4a',
+    autoProcessQueue: false,
+    init: function() {
+      this.on("addedfile", function(file) {
+        self.importFileAdded(this, file, cart);
+      });
+      this.on("error", function(file, msg) {
+        self.importFileSelectError(this, file, msg);
+      });
+      this.on('sending', function(file, xhr, formData) {
+        formData.append('COMMAND', 2);
+        formData.append('LOGIN_NAME', auth_username);
+        formData.append('PASSWORD', auth_token);
+        formData.append('CART_NUMBER', cart.number);
+        formData.append('CUT_NUMBER', 1); // todo: set to correct cut number!
+        formData.append('CHANNELS', 2);
+        formData.append('NORMALIZATION_LEVEL', cart.normlevel);
+        formData.append('AUTOTRIM_LEVEL', cart.trimlevel);
+        formData.append('USE_METADATA', 1);
+      });
+    }
+  });
+
+  $('#uploadModal').modal({keyboard: true});
+};
diff --git a/www/js/shows.js b/www/js/shows.js
index 3b949f5..d14d99e 100644
--- a/www/js/shows.js
+++ b/www/js/shows.js
@@ -79,8 +79,8 @@ function shows_importUpdateProgress(file, stats) {
 }
 
 function shows_importCartConfirm(cart, dz) {
-  $('#shows-upload').modal('hide');
-  var cart_row = $('#show-cart-' + cart)
+  $('#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); });
@@ -111,23 +111,23 @@ function shows_createImportForm(cart) {
 
 function shows_importFileAdded(dz, file, cart) {
   $(dz.getAcceptedFiles()).each(function(idx, elem) { dz.removeFile(elem); });
-  $('#shows-upload div.modal-body').css("background-image", "url('/img/audio_file.png')")
-  $('#shows-upload div.modal-header h3').text(file.name)
-  $('#shows-upload-confirm').removeAttr('disabled').unbind('click').click(function() { shows_importCartConfirm(cart, dz); });
+  $('#uploadModal div.modal-body').css("background-image", "url('/img/audio_file.png')")
+  $('#uploadModal div.modal-header h3').text(file.name)
+  $('#uploadModal-confirm').removeAttr('disabled').unbind('click').click(function() { shows_importCartConfirm(cart, dz); });
 }
 
 function shows_importFileSelectError(dz, file, msg) {
-  $('#shows-upload div.modal-header h3').text("Datei auswählen...")
-  $('#shows-upload div.modal-body').css("background-image", "url('/img/dz-backdrop.png')");
-  $('#shows-upload-confirm').attr('disabled','disabled').unbind('click');
+  $('#uploadModal div.modal-header h3').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);
-  $('#shows-upload div.modal-header h3').text("Datei auswählen...")
-  $('#shows-upload div.modal-body').empty().append(form).css("background-image", "url('/img/dz-backdrop.png')");
-  $('#shows-upload-confirm').attr('disabled','disabled').unbind('click');
+  $('#uploadModal div.modal-header h3').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,.m4a", autoProcessQueue: false, init: function() {
@@ -135,7 +135,7 @@ function shows_importCart(cart) {
             this.on("error", function(file, msg) { shows_importFileSelectError(this, file, msg); });
     }});
 
-  $('#shows-upload').modal({ keyboard: true });
+  $('#uploadModal').modal({ keyboard: true });
 }
 
 // <td>
@@ -207,10 +207,9 @@ function shows_newImportErrorEntry(cart, msg) {
 
 function shows_updateGroupCartInfo(cart) {
   data = { COMMAND: 7, LOGIN_NAME: auth_username, PASSWORD: auth_token, CART_NUMBER: cart, INCLUDE_CUTS: 1 };
-  var defer = $.post("/rd-bin/rdxport.cgi", data, shows_updateGroupCartList, "xml")
-                           .fail(function() { delete shows_group_carts[cart]; shows_redrawCartEntry(cart); });
-
-  $.when(defer).done(function() { shows_redrawCartEntry(cart); });
+  $.post("/rd-bin/rdxport.cgi", data, shows_updateGroupCartList, "xml")
+    .fail(function() { delete shows_group_carts[cart]; shows_redrawCartEntry(cart); })
+    .done(function() { shows_redrawCartEntry(cart); });
 }
 
 function shows_redrawCartEntry(cart) {