1 files changed, 49 insertions, 1 deletions
diff --git a/www/js/musicgrid.js b/www/js/musicgrid.js
index c17b79e..695bca4 100644
--- a/www/js/musicgrid.js
+++ b/www/js/musicgrid.js
@@ -23,13 +23,61 @@
 'use strict';
 
 var rivendell = null;
+var musicgrid = null;
 
 function musicgrid_init() {
   rivendell = new Rivendell.Rivendell(auth_username, auth_token, '/rd-bin/rdxport.cgi');
   rivendell.setMusicgridEndpoint('/rh-bin/musicgrid.cgi');
-  rivendell.getMusicgrid();
+
+  musicgrid = new Musicgrid();
 }
 
 function musicgrid_cleanup() {
   rivendell = null;
 }
+
+var Musicgrid = function() {
+  this.clocks = [];
+
+  this.fetch();
+};
+
+Musicgrid.prototype.fetch = function() {
+  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);
+    });
+    self.updateTable();
+  });
+};
+
+Musicgrid.prototype.updateTable = function() {
+  var $table = $('#app-musicgrid table');
+  $(this.clocks).each(function(index, clock) {
+    var $td = $('tr[data-dow="' + clock.dow + '"] td[data-hour="' + clock.hour +'"]', $table);
+    var $div = $('<div>' + clock.name + '<br />' + clock.title + '</div>');
+    $div.css('background-color', clock.color);
+    // todo: move this css to stylesheet
+    $div.css('text-align', 'center');
+    $td.html($div);
+  });
+};
+
+var MusicgridClock = function(name, color, title, dow, hour) {
+  this.name = name;
+  this.color = color;
+  this.title = title;
+  this.dow = dow;
+  this.hour = hour;
+};
+