1 files changed, 30 insertions, 44 deletions

diff --git a/www/js/musicgrid.js b/www/js/musicgrid.js
index 29e639e..221f489 100644
--- a/www/js/musicgrid.js
+++ b/www/js/musicgrid.js
@@ -22,52 +22,43 @@
 
 'use strict';
 
+var Rivendell = Rivendell || {};
+
 var rivendell = null;
-var musicgrid = 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');
 
-  musicgrid = new Musicgrid();
+  var musicgrid = new Rivendell.Musicgrid();
+  musicgridView = new Rivendell.MusicgridView(musicgrid);
+
+  var musicpools = new Rivendell.GroupList(rivendell);
+  musicpoolModal = new Rivendell.MusicpoolModal(musicpools);
 }
 
 function musicgrid_cleanup() {
-  musicgrid = null
+  musicpoolModal = null;
+  musicgridView = null;
   rivendell = null;
 }
 
-var Musicgrid = function() {
-  this.clocks = [];
-
-  this.fetch();
-};
+Rivendell.MusicgridView = function(model) {
+  this.model = model;
 
-Musicgrid.prototype.fetch = function() {
-  this.clocks = [];
   var self = this;
-  rivendell.getMusicgrid(function(gridXml, status, req) {
-    var dbs = $(gridXml).find("grid").children();
-    dbs.each(function(index, clockXml) {
-      var clock = new MusicgridClock(
-        $('name', clockXml).text(),
-        $('color', clockXml).text(),
-        $('title', clockXml).text(),
-        $(clockXml).attr('dow'),
-        $(clockXml).attr('hour')
-      );
-
-      self.clocks.push(clock);
-    });
+  this.model.fetch(function() {
     self.updateTable();
   });
 };
 
-Musicgrid.prototype.updateTable = function() {
+Rivendell.MusicgridView.prototype.updateTable = function() {
   var $table = $('#app-musicgrid table');
   $('tr td', $table).html('').removeClass('clock').css('background-color', '').css('color', '').attr('title', null);
-  $(this.clocks).each(function(index, clock) {
+  $(this.model.clocks).each(function(index, clock) {
     var $td = $('tr[data-dow="' + clock.dow + '"] td[data-hour="' + clock.hour +'"]', $table);
     $td.addClass('clock');
     $td.html(clock.name);
@@ -80,18 +71,22 @@ Musicgrid.prototype.updateTable = function() {
     // todo: move this css to stylesheet
     $td.css('text-align', 'center');
 
-    $td.on('click', function() {
-      selectClock(clock.dow, clock.hour, clock.name);
+    $td.off().on('click', function() {
+      musicpoolModal.selectClock(clock.dow, clock.hour, clock.name);
     });
   });
 
-  $('tr td:not(.clock)', $table).on('click', function() {
-    selectClock($(this).parent().data('dow'), $(this).data('hour'), null);
+  $('tr td:not(.clock)', $table).off().on('click', function() {
+    musicpoolModal.selectClock($(this).parent().data('dow'), $(this).data('hour'), null);
   });
 
 };
 
-var selectClock = function(dow, hour, clockName) {
+Rivendell.MusicpoolModal = function(model) {
+  this.model = model;
+};
+
+Rivendell.MusicpoolModal.prototype.selectClock = function(dow, hour, clockName) {
   $('#musicpoolModal').modal({keyboard: true});
 
   var $modalHeader = $('#musicpoolModal .modal-header');
@@ -99,10 +94,11 @@ var selectClock = function(dow, hour, clockName) {
 
   $('h3', $modalHeader).html('Musikpool auswählen für Tag: ' + dow + ' Stunde: ' + hour + '.');
 
-  Musicpools.prototype.updateSelector = function() {
-    $('tbody', $modalBody).html('');
+  $('tbody', $modalBody).html('');
 
-    $(this.musicpools).each(function(index, musicpool) {
+  var self = this;
+  this.model.fetch('musicpool', function() {
+    $(self.model.groups).each(function(index, musicpool) {
       var $button = null;
       if (clockName === musicpool.clock) {
         $button = $('<button class="btn btn-primary" disabled="disabled">Selected</button>');
@@ -124,15 +120,5 @@ var selectClock = function(dow, hour, clockName) {
 
       $('tbody', $modalBody).append($tr);
     });
-  };
-
-  var musicpools = new Musicpools();
-};
-
-var MusicgridClock = function(name, color, title, dow, hour) {
-  this.name = name;
-  this.color = color;
-  this.title = title;
-  this.dow = dow;
-  this.hour = hour;
+  });
 };