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, 24 insertions, 16 deletions

diff --git a/www/js/musicgrid.js b/www/js/musicgrid.js
index 221f489..d95fb1e 100644
--- a/www/js/musicgrid.js
+++ b/www/js/musicgrid.js
@@ -24,15 +24,10 @@
 
 var Rivendell = Rivendell || {};
 
-var rivendell = null;
 var musicgridView = null;
 var musicpoolModal = null;
 
 function musicgrid_init() {
-  rivendell = new Rivendell.Rivendell(auth_username, auth_token, '/rd-bin/rdxport.cgi');
-  rivendell.setListDropboxesEndpoint('/rh-bin/listdropboxes.cgi');
-  rivendell.setMusicgridEndpoint('/rh-bin/musicgrid.cgi');
-
   var musicgrid = new Rivendell.Musicgrid();
   musicgridView = new Rivendell.MusicgridView(musicgrid);
 
@@ -42,24 +37,37 @@ function musicgrid_init() {
 
 function musicgrid_cleanup() {
   musicpoolModal = null;
+
+  musicgridView.clean();
   musicgridView = null;
-  rivendell = null;
 }
 
 Rivendell.MusicgridView = function(model) {
   this.model = model;
 
+  this.$el = $('#app-musicgrid table');
+
   var self = this;
-  this.model.fetch(function() {
-    self.updateTable();
+  $(this.model).on('update', function() {
+    self.update();
   });
+  this.model.fetch();
 };
 
-Rivendell.MusicgridView.prototype.updateTable = function() {
-  var $table = $('#app-musicgrid table');
-  $('tr td', $table).html('').removeClass('clock').css('background-color', '').css('color', '').attr('title', null);
+Rivendell.MusicgridView.prototype.clean = function() {
+  $('tr td', this.$el)
+      .html('')
+      .removeClass('clock')
+      .css('background-color', '')
+      .css('color', '')
+      .attr('title', null);
+};
+
+Rivendell.MusicgridView.prototype.update = function() {
+  this.clean();
+
   $(this.model.clocks).each(function(index, clock) {
-    var $td = $('tr[data-dow="' + clock.dow + '"] td[data-hour="' + clock.hour +'"]', $table);
+    var $td = $('tr[data-dow="' + clock.dow + '"] td[data-hour="' + clock.hour +'"]', this.$el);
     $td.addClass('clock');
     $td.html(clock.name);
     $td.attr('title', clock.title);
@@ -76,10 +84,9 @@ Rivendell.MusicgridView.prototype.updateTable = function() {
     });
   });
 
-  $('tr td:not(.clock)', $table).off().on('click', function() {
+  $('tr td:not(.clock)', this.$el).off().on('click', function() {
     musicpoolModal.selectClock($(this).parent().data('dow'), $(this).data('hour'), null);
   });
-
 };
 
 Rivendell.MusicpoolModal = function(model) {
@@ -97,7 +104,7 @@ Rivendell.MusicpoolModal.prototype.selectClock = function(dow, hour, clockName)
   $('tbody', $modalBody).html('');
 
   var self = this;
-  this.model.fetch('musicpool', function() {
+  $(this.model).on('update', function() {
     $(self.model.groups).each(function(index, musicpool) {
       var $button = null;
       if (clockName === musicpool.clock) {
@@ -109,7 +116,7 @@ Rivendell.MusicpoolModal.prototype.selectClock = function(dow, hour, clockName)
       $button.on('click', function() {
         rivendell.setMusicgrid(dow, hour, musicpool.clock, function() {
           $('#musicpoolModal').modal('hide');
-          musicgrid.fetch();
+          musicgridView.modal.fetch();
         });
       });
 
@@ -121,4 +128,5 @@ Rivendell.MusicpoolModal.prototype.selectClock = function(dow, hour, clockName)
       $('tbody', $modalBody).append($tr);
     });
   });
+  this.model.fetch('musicpool');
 };