added status info tag for file uploads

2 files changed, 58 insertions, 11 deletions

diff --git a/index.html b/index.html
index ab68027..fb9fa02 100644
--- a/index.html
+++ b/index.html
@@ -21,6 +21,10 @@
     .btn i[class*='icon-'] {
       vertical-align: middle;
     }
+
+    .progress {
+      margin-bottom: 0;
+    }
   </style>
   <link href="/javascript/twitter-bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
   <script src="/javascript/jquery/jquery.min.js"></script>
@@ -89,7 +93,7 @@
           </div>
           <div class="modal-footer">
             <a href="#" class="btn" data-dismiss="modal">Abbrechen</a>
-            <a href="#" class="btn btn-primary">Importieren</a>
+            <a href="#" class="btn btn-primary" id="shows-upload-confirm">Importieren</a>
           </div>
         </div>
         <div class="row-fluid">
diff --git a/js/shows.js b/js/shows.js
index 5f8eecc..38cf60d 100644
--- a/js/shows.js
+++ b/js/shows.js
@@ -10,9 +10,33 @@ function shows_deleteCart(cart) {
   $.post("/rd-bin/rdxport.cgi", data, null, "xml").done(shows_showSelected);
 }
 
+function shows_importCartCancel(cart) {
+  var cart_row = $('#show-cart-' + cart)
+  cart_row.next().remove();
+  cart_row.find('.btn').removeAttr('disabled');
+  cart_row.after(shows_getDzStat(true));
+
+  // TODO: cancel upload
+}
+
+function shows_importCartConfirm(cart) {
+  $('#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); });
+  cart_row.after(dz_stat);
+
+  // TODO: call dropzone.processQueue()
+}
+
 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 });
+
+  // TODO: add dropzone to 'div.modal-body'
 }
 
 // <td>
@@ -26,6 +50,25 @@ function shows_importCart(cart) {
 //   <button class="btn btn-success btn-mini"><i class="icon-upload icon-white"></i> Importieren</button>
 // </td>
 
+function shows_getDzStat(empty)
+{
+  if(empty) {
+    return $('<tr>').append($('<td colspan=6>').css("border", 0)
+                                               .css("height", 0)
+                                               .css("margin", 0)
+                                               .css("padding", 0));
+  } else {
+    var progress_bar = '<div class="progress progress-striped"><div class="bar" style="width: 60%;"></div></div>';
+    var cancel_button = '<button class="btn btn-danger btn-mini">' +
+                          '<i class="icon-remove icon-white"></i> Abbrechen</button>';
+
+    return $('<tr>').append($('<td>').text('filename.flac'))
+                    .append($('<td>').text('xx of XX Bytes'))
+                    .append($('<td colspan=3>').append(progress_bar))
+                    .append($('<td>').append(cancel_button));
+  }
+}
+
 function shows_udpateCartListing() {
   $('#show-carts tbody').find('tr').remove();
   shows_log_carts.forEach(function(elem) {
@@ -44,14 +87,14 @@ function shows_udpateCartListing() {
              '<i class="icon-upload icon-white"></i> Importieren</button>';
 
     $('#show-carts > tbody:last').append(
-      $('<tr>').append($('<td>').text(elem))
-               .append($('<td>').text(cart.title))
-               .append($('<td>').text(cart.length))
-               .append($('<td>').text(cart.imported))
-               .append($('<td>').text(cart.playcnt))
-               .append($('<td>').text(cart.lastplayed))
-               .append($('<td>').append(buttons))
-      );
+        $('<tr>').append($('<td rowspan=2>').text(elem))
+                 .append($('<td>').text(cart.title))
+                 .append($('<td>').text(cart.length))
+                 .append($('<td>').text(cart.imported))
+                 .append($('<td>').text(cart.playcnt))
+                 .append($('<td>').text(cart.lastplayed))
+                 .append($('<td>').append(buttons)).attr("id", "show-cart-" + elem)
+      ).append(shows_getDzStat(true));
     });
 }
 
@@ -155,7 +198,7 @@ function shows_updateList(data, status, req) {
   shows_showSelected();
 }
 
-function draw_current_week()
+function shows_drawCurrentWeek()
 {
   var weekspan = $('#current-week').removeClass().addClass('label');
   switch(get_rd_week()) {
@@ -181,7 +224,7 @@ function shows_init() {
   shows_list = [];
   data = { LOGIN_NAME: auth_username, PASSWORD: auth_token };
   $.post("/rh-bin/listdropboxes.cgi", data, shows_updateList, "xml")
-  draw_current_week();
+  shows_drawCurrentWeek();
 }
 
 function shows_cleanup() {