selecting a single file works now

3 files changed, 61 insertions, 9 deletions

diff --git a/index.html b/index.html
index c45c17e..772e2e5 100644
--- a/index.html
+++ b/index.html
@@ -87,7 +87,7 @@
         <div class="modal hide fade" id="shows-upload">
           <div class="modal-header">
             <a class="close" data-dismiss="modal">&times;</a>
-            <h3>Datei importieren...</h3>
+            <h3>Datei auswählen...</h3>
           </div>
           <div class="modal-body">
           </div>
diff --git a/js/shows.js b/js/shows.js
index 38cf60d..8de5411 100644
--- a/js/shows.js
+++ b/js/shows.js
@@ -10,7 +10,7 @@ function shows_deleteCart(cart) {
   $.post("/rd-bin/rdxport.cgi", data, null, "xml").done(shows_showSelected);
 }
 
-function shows_importCartCancel(cart) {
+function shows_importCartCancel(cart, dz) {
   var cart_row = $('#show-cart-' + cart)
   cart_row.next().remove();
   cart_row.find('.btn').removeAttr('disabled');
@@ -19,24 +19,58 @@ function shows_importCartCancel(cart) {
   // TODO: cancel upload
 }
 
-function shows_importCartConfirm(cart) {
+function shows_importCartConfirm(cart, dz) {
   $('#shows-upload').modal('hide');
   var cart_row = $('#show-cart-' + cart)
   cart_row.next().remove();
   cart_row.find('.btn').attr('disabled','disabled');
   var dz_stat = shows_getDzStat(false);
-  dz_stat.find('button').unbind('click').click(function() { shows_importCartCancel(cart); });
+  dz_stat.find('button').unbind('click').click(function() { shows_importCartCancel(cart, dz); });
   cart_row.after(dz_stat);
 
-  // TODO: call dropzone.processQueue()
+  // call dz.processQueue()
+}
+
+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); });
+  $('#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); });
+}
+
+function shows_importFileError(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');
+  dz.removeFile(file);
 }
 
 function shows_importCart(cart) {
-  $('#shows-upload div.modal-body').text("Cart: " + cart);
-  $('#shows-upload-confirm').unbind('click').click(function() { shows_importCartConfirm(cart); });
-  $('#shows-upload').modal({ keyboard: true });
+  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');
+  var dz = form.dropzone({ url: "/rd-bin/rdxport.cgi", prallelUploads: 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_importFileError(this, file, msg); });
+	  }});
 
-  // TODO: add dropzone to 'div.modal-body'
+  $('#shows-upload').modal({ keyboard: true });
 }
 
 // <td>
diff --git a/styles/shows.css b/styles/shows.css
index f241f40..a6a4696 100644
--- a/styles/shows.css
+++ b/styles/shows.css
@@ -14,3 +14,21 @@
   margin: 0.5em;
   padding: 0.5em 1em;
 }
+#shows-upload div.modal-body {
+  margin-left: auto;
+  margin-right: auto;
+  width: 330px;
+  height: 330px;
+  background-image: url('/img/dz-backdrop.png');
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+#shows-upload div.modal-body form {
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+}
+#shows-upload div.modal-body form div.dz-preview {
+  display: none;
+}