jingles: display deactivated cuts, sort cuts

2 files changed, 61 insertions, 22 deletions

diff --git a/www/index.html b/www/index.html
index f20e1da..093caac 100644
--- a/www/index.html
+++ b/www/index.html
@@ -157,10 +157,6 @@
                   <tr>
                     <th>Cut #</th>
                     <th>Titel</th>
-                    <th>Länge</th>
-                    <th>importiert</th>
-                    <th># gespielt</th>
-                    <th>zuletzt gespielt</th>
                     <th>Aktionen</th>
                   </tr>
                   </thead>
@@ -179,10 +175,6 @@
                   <tr>
                     <th>Cut #</th>
                     <th>Titel</th>
-                    <th>Länge</th>
-                    <th>importiert</th>
-                    <th># gespielt</th>
-                    <th>zuletzt gespielt</th>
                     <th>Aktionen</th>
                   </tr>
                   </thead>
diff --git a/www/js/jingles.js b/www/js/jingles.js
index c32c424..1d451b2 100644
--- a/www/js/jingles.js
+++ b/www/js/jingles.js
@@ -25,6 +25,11 @@ var JingleGroupList = function() {
 
   $(this).on('change', this.render);
 
+  var self = this;
+  $(this).on('change', function() {
+    console.log(self);
+  });
+
   this.fetchGroups();
 };
 
@@ -74,7 +79,7 @@ var JingleGroup = function(title, groupName, description, lowcart, highcart, nor
   this.trimlevel = trimlevel;
 
   this.mainCart = null;
-  this.deleteCart = null;
+  this.deactivateCart = null;
 
   this.fetchCarts();
 };
@@ -82,14 +87,19 @@ var JingleGroup = function(title, groupName, description, lowcart, highcart, nor
 JingleGroup.prototype.render = function() {
   console.log('render JingleGroup');
 
+  var cuts = $.merge(this.mainCart.cuts, this.deactivateCart.cuts);
+  cuts = cuts.sort(function(a, b) {
+    return a.title.toLowerCase() < b.title.toLowerCase();
+  });
+
   if (this.groupName === 'jingAllgem') {
     $('#jingles-jingAllgem table tbody').find('tr').remove();
-    $.each(this.mainCart.cuts, function(index, cut) {
+    $.each(cuts, function(index, cut) {
       $('#jingles-jingAllgem table > tbody').append(cut.$el());
     });
   } else if (this.groupName === 'jingAllgem') {
     $('#jingles-jingAnlass table tbody').find('tr').remove();
-    $.each(this.mainCart.cuts, function(index, cut) {
+    $.each(cuts, function(index, cut) {
       $('#jingles-jingAnlass table > tbody').append(cut.$el());
     });
   }
@@ -100,16 +110,16 @@ JingleGroup.prototype.fetchCarts = function() {
   var self = this;
   data = { COMMAND: 7, LOGIN_NAME: auth_username, PASSWORD: auth_token, CART_NUMBER: this.lowcart, INCLUDE_CUTS: 1 };
   gcd = $.post("/rd-bin/rdxport.cgi", data, function(cartXml) {
-    self.mainCart = self.createCartFromXml(cartXml);
+    self.mainCart = self.createCartFromXml(cartXml, true);
     $(self).trigger('change');
   }, "xml");
   data = { COMMAND: 7, LOGIN_NAME: auth_username, PASSWORD: auth_token, CART_NUMBER: this.highcart, INCLUDE_CUTS: 1 };
   gcd = $.post("/rd-bin/rdxport.cgi", data, function(cartXml) {
-    self.deleteCart = self.createCartFromXml(cartXml);
+    self.deactivateCart = self.createCartFromXml(cartXml, false);
   }, "xml");
 };
 
-JingleGroup.prototype.createCartFromXml = function(cartXml) {
+JingleGroup.prototype.createCartFromXml = function(cartXml, active) {
   var cart = new JingleCart(
     $(cartXml).find('title').text(),
     $(cartXml).find('groupName').text()
@@ -119,7 +129,8 @@ JingleGroup.prototype.createCartFromXml = function(cartXml) {
   cuts.each(function(index, cutXml) {
     cart.addCut(new JingleCut(
       $(cutXml).find('cutName').text(),
-      $(cutXml).find('description').text()
+      $(cutXml).find('description').text(),
+      active
     ));
   });
 
@@ -138,20 +149,56 @@ JingleCart.prototype.addCut = function(cut) {
   this.cuts.push(cut);
 };
 
-var JingleCut = function(name, description) {
+var JingleCut = function(name, description, active) {
   this.name = name;
   this.description = description;
+  this.active = active;
+};
+
+JingleCut.prototype.move = function() {
+  console.log('move');
+  // move to other group, if active stay in mainCart, if deactivated stay in deactiveCart
+
+
+  //$(this).trigger('change');
+};
+
+JingleCut.prototype.toggleActivate = function() {
+  console.log('toggleActivate');
+  // move to other cart, from mainCart to deactiveCart or the other way around
+
+  //$(this).trigger('change');
+};
+
+JingleCut.prototype.delete = function() {
+  console.log('delete');
+  // remove cut, command 11
+
+  //$(this).trigger('change');
 };
 
 JingleCut.prototype.$el = function() {
+  var moveButton = $('<button class="btn btn-info btn-mini"><i class="icon-arrow-right icon-white"></i> Verschieben</button>');
+  var activateButton;
+  if (this.active) {
+    activateButton = $('<button class="btn btn-warning btn-mini"><i class="icon-minus icon-white"></i> Deactivieren</button>');
+  } else {
+    activateButton = $('<button class="btn btn-warning btn-mini"><i class="icon-plus icon-white"></i> Aktivieren</button>');
+  }
+  var deleteButton = $('<button class="btn btn-danger btn-mini"><i class="icon-trash icon-white"></i> Löschen</button>');
+
+  moveButton.on('click', this.move);
+  activateButton.on('click', this.toggleActivate);
+  deleteButton.on('click', this.delete);
+
   return $('<tr>').append($('<td>').text(this.name))
     .append($('<td>').text(this.description))
-    .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);
+    .append(
+      $('<td>').css('text-align', 'center')
+        .append(moveButton)
+        .append(activateButton)
+        .append(deleteButton)
+    );
 };
 
 var jinglesGroupList = null;