jingles: use Rivendell.Cart and Cut classes with Views, etc.

validate html, move rivendell.js init to apps.js, cleanup importer,
add update event to fetch functions instead of success callback.

1 files changed, 107 insertions, 154 deletions

diff --git a/www/js/jingles.js b/www/js/jingles.js
index 65063bf..451f643 100644
--- a/www/js/jingles.js
+++ b/www/js/jingles.js
@@ -24,31 +24,40 @@
 
 var Rivendell = Rivendell || {};
 
-var rivendell = null;
 var importer = null;
-var groupList = null;
+var jingleGroupListView = null;
 
 function jingles_init() {
-  rivendell = new Rivendell.Rivendell(auth_username, auth_token, '/rd-bin/rdxport.cgi');
-  rivendell.setListDropboxesEndpoint('/rh-bin/listdropboxes.cgi');
-
   importer = new Rivendell.Importer();
 
-  groupList = new Rivendell.GroupList(rivendell);
-  // todo: move this elsewhere?
-  $('#app-jingles .groups').html('');
-  groupList.fetch('jingle');
+  var groupList = new Rivendell.GroupList(rivendell);
+  jingleGroupListView = new JingleGroupListView(groupList);
 }
 
 function jingles_cleanup() {
-  if (groupList) {
-    groupList.destroy();
-    groupList = null;
+  if (jingleGroupListView) {
+    jingleGroupListView.destroy();
+    jingleGroupListView = null;
   }
   importer = null;
-  rivendell = null;
 }
 
+var JingleGroupListView = function(model) {
+  this.model = model;
+
+  this.jingleGroupViews = [];
+
+  $('#app-jingles .groups').html('');
+
+  var self = this;
+  $(this.model).on('update', function() {
+    $(self.model.groups).each(function(index, group) {
+      self.jingleGroupViews.push(new JingleGroupView(group));
+    });
+  });
+  this.model.fetch('jingle');
+};
+
 var JingleGroup = function(groupName, description, lowcart, highcart, normlevel, trimlevel, title) {
   if (arguments.length = 1) {
     Rivendell.Group.call(this, groupName);
@@ -57,146 +66,126 @@ var JingleGroup = function(groupName, description, lowcart, highcart, normlevel,
     Rivendell.Group.call(this, groupName, description, lowcart, highcart, normlevel, trimlevel);
     this.title = title;
   }
+};
+JingleGroup.prototype = Object.create(Rivendell.Group.prototype);
+JingleGroup.prototype.constructor = JingleGroup;
 
-  this.mainCart = null;
-  this.deactivateCart = null;
+var JingleGroupView = function(model) {
+  this.model = model;
+
+  this.mainCartView = null;
+  this.deactivateCartView = null;
 
   this.$el = null;
 
   this.render();
-  this.fetchCarts();
-};
-JingleGroup.prototype = Object.create(Rivendell.Group.prototype);
-JingleGroup.prototype.constructor = JingleGroup;
 
-JingleGroup.prototype.fetchCarts = function() {
   var self = this;
-  $.when(
-    rivendell.listCart(this.lowcart, 1, function(cartXml) {
-      self.mainCart = self.createCartFromXml(cartXml, true);
-    }),
-    rivendell.listCart(this.highcart, 1, function(cartXml) {
-      self.deactivateCart = self.createCartFromXml(cartXml, false);
-    })
-  ).then(function() {
-      self.renderCarts();
-  });
-};
+  $(this.model).on('update', function() {
+    $('table > tbody', self.$el).html('');
 
-JingleGroup.prototype.createCartFromXml = function(cartXml, active) {
-  var cart = new JingleCart(
-    $(cartXml).find('number').text(),
-    $(cartXml).find('title').text(),
-    $(cartXml).find('groupName').text(),
-    this
-  );
+    self.model.mainCart = self.model.carts[0];
+    self.mainCartView = new JingleCartView(self.model.mainCart, self, true);
 
-  var self = this;
-  var cuts = $(cartXml).find("cutList").children();
-  cuts.each(function(index, cutXml) {
-    var cut = new JingleCut(
-      cart,
-      cart.number,
-      $(cutXml).find('cutName').text(),
-      $(cutXml).find('description').text(),
-      active
-    );
-
-    cart.addCut(cut);
+    self.model.deactivateCart = self.model.carts[1];
+    self.deactivateCartView = new JingleCartView(self.model.deactivateCart, self, false);
   });
 
-  return cart;
+  this.model.fetchCarts();
 };
 
-JingleGroup.prototype.render = function() {
+JingleGroupView.prototype.render = function() {
   var self = this;
 
-  this.$el = $('.jingleGroupTemplate').clone().removeClass('jingleGroupTemplate');
+  this.$el = $('#hiddenTemplates .jingleGroupTemplate').clone().removeClass('jingleGroupTemplate');
   this.$el.appendTo('#app-jingles .groups');
 
-  $('h2', this.$el).html(this.title);
+  $('h2', this.$el).html(this.model.title);
   $('table tbody tr', this.$el).remove();
 
   $('.uploadButton', this.$el).on('click', function() {
-    importer.showUploadModal(self);
+    importer.openModal(self.model);
   });
-
-  this.renderCarts();
 };
 
-JingleGroup.prototype.renderCarts = function() {
+JingleGroupView.prototype.destroy = function() {
   $('table > tbody', this.$el).html('');
+};
+
+var JingleCartView = function(model, groupView, active) {
+  this.model = model;
+  this.groupView = groupView;
+  this.active = active;
+
+  this.cutViews = [];
 
   var self = this;
-  if (this.mainCart) {
-    $.each(this.mainCart.cuts, function(index, cut) {
-      $('table > tbody', self.$el).append(cut.render());
-    });
-  }
-  if (this.deactivateCart) {
-    $.each(this.deactivateCart.cuts, function(index, cut) {
-      $('table > tbody', self.$el).append(cut.render());
+  if (this.model) {
+    $(this.model.cuts).each(function(index, cut) {
+      cut.active = self.active;
+
+      var cutView = new JingleCutView(cut);
+      self.cutViews.push(cutView);
+
+      $('table > tbody', self.groupView.$el).append(cutView.$el);
     });
   }
 };
 
-JingleGroup.prototype.destroy = function() {
-  $('table > tbody', this.$el).html('');
-};
-
-/*JingleGroup.prototype.addUpload = function() {
-  var $tfoot = $('table > tfoot', this.$el);
-  var $progressBar = $('.progressBarTemplate').clone().removeClass('progressBarTemplate');
-  $progressBar.appendTo($tfoot);
-  return $progressBar;
-};*/
+var JingleCutView = function(model) {
+  this.model = model;
 
-var JingleCart = function(number, title, groupName, group) {
-  this.number = number;
-  this.title = title;
-  this.groupName = groupName;
-  this.group = group;
+  this.$el = null;
 
-  this.cuts = [];
+  this.render();
 };
 
-JingleCart.prototype.addCut = function(cut) {
-  this.cuts.push(cut);
-};
+JingleCutView.prototype.render = function() {
+  var moveButton = $('<button class="btn btn-info btn-mini"><i class="icon-arrow-right icon-white"></i> Verschieben</button>');
+  var activateButton;
+  if (this.model.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>');
 
-JingleCart.prototype.removeCut = function(cut) {
   var self = this;
-  $.each(this.cuts, function(index, currentCut){
-    if(currentCut === cut) {
-      self.cuts.splice(index, 1);
-    }
+  moveButton.on('click', function() {
+    self.move();
+  });
+  activateButton.on('click', function() {
+    self.toggleActive();
+  });
+  deleteButton.on('click', function() {
+    self.removeSelf();
   });
-};
-
-var JingleCut = function(cart, cartNumber, name, description, active) {
-  this.cart = cart;
-  this.cartNumber = cartNumber;
-  this.number = name.substr(-3);
-  this.name = name;
-  this.description = description;
-
-  this.active = active;
 
-  this.$el = null;
+  this.$el = $('<tr>')
+      .attr('id', 'jingle-' + this.model.cartNumber + '-' + this.model.number)
+      .append($('<td>').text(this.model.name))
+      .append($('<td>').text(this.model.description))
+      .append(
+          $('<td>')
+              .append(moveButton)
+              .append(activateButton)
+              .append(deleteButton)
+      );
 };
 
-JingleCut.prototype.move = function() {
+JingleCutView.prototype.move = function() {
   var self = this;
-  var destinationCart = this.cartNumber;
+  var destinationCart = this.model.cartNumber;
+
   // todo: make this work for multiple groups
-  if (groupList.groups.length === 2) {
-    $(groupList.groups).each(function(index, group) {
-      if (self.active) {
-        if (self.cartNumber !== group.mainCart.number) {
+  if (jingleGroupListView.model.groups.length === 2) {
+    $(jingleGroupListView.model.groups).each(function(index, group) {
+      if (self.model.active) {
+        if (self.model.cartNumber !== group.mainCart.number) {
           destinationCart = group.mainCart;
         }
       } else {
-        if (self.cartNumber !== group.deactivateCart.number) {
+        if (self.model.cartNumber !== group.deactivateCart.number) {
           destinationCart = group.deactivateCart;
         }
       }
@@ -206,65 +195,29 @@ JingleCut.prototype.move = function() {
   }
 
   // todo: fix
-
-  rivendell.moveCut(this.cartNumber, this.number, destinationCart.number, function() {
-    self.cart.group.fetchCarts();
+  rivendell.moveCut(this.model.cartNumber, this.model.number, destinationCart.number, function() {
+    self.model.cart.group.fetchCarts();
     destinationCart.group.fetchCarts();
   });
 };
 
-JingleCut.prototype.toggleActive = function() {
-  var destinationCart = this.cartNumber;
-  if (this.active) {
+JingleCutView.prototype.toggleActive = function() {
+  var destinationCart = this.model.cartNumber;
+  if (this.model.active) {
     destinationCart++;
   } else {
     destinationCart--;
   }
   var self = this;
-  rivendell.moveCut(this.cartNumber, this.number, destinationCart, function() {
-    self.cart.group.fetchCarts();
+  rivendell.moveCut(this.model.cartNumber, this.model.number, destinationCart, function() {
+    self.model.cart.group.fetchCarts();
   });
 };
 
-JingleCut.prototype.removeSelf = function() {
+JingleCutView.prototype.removeSelf = function() {
   var self = this;
-  rivendell.removeCut(this.cartNumber, this.number, function() {
-    self.cart.removeCut(this);
+  rivendell.removeCut(this.model.cartNumber, this.model.number, function() {
+    self.model.cart.removeCut(this);
     self.$el.remove();
   });
 };
-
-JingleCut.prototype.render = 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>');
-
-  var self = this;
-  moveButton.on('click', function() {
-    self.move();
-  });
-  activateButton.on('click', function() {
-    self.toggleActive();
-  });
-  deleteButton.on('click', function() {
-    self.removeSelf();
-  });
-
-  this.$el = $('<tr>')
-    .attr('id', 'jingle-' + this.cartNumber + '-' + this.number)
-    .append($('<td>').text(this.name))
-    .append($('<td>').text(this.description))
-    .append(
-      $('<td>')
-        .append(moveButton)
-        .append(activateButton)
-        .append(deleteButton)
-    );
-
-  return this.$el;
-};