musicgrid: add setMusicgrid function, still has some bugs

2 files changed, 74 insertions, 2 deletions

diff --git a/www/index.html b/www/index.html
index e42c89d..15b7619 100644
--- a/www/index.html
+++ b/www/index.html
@@ -90,6 +90,29 @@
         </div>
       </div>
 
+      <div class="modal hide fade" id="musicpoolModal">
+        <div class="modal-header">
+          <a class="close" data-dismiss="modal">&times;</a>
+          <h3>Musikpool auswählen</h3>
+        </div>
+        <div class="modal-body">
+          <table class="table table-striped">
+            <thead>
+            <tr>
+              <th>Clock</th>
+              <th>Title</th>
+              <th>Ausgewählt</th>
+            </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+        </div>
+        <div class="modal-footer">
+          <button class="btn" data-dismiss="modal">Abbrechen</button>
+        </div>
+      </div>
+
       <div id="app-shows" class="container-fluid">
         <div class="alertbox"></div>
         <div class="row-fluid">
diff --git a/www/js/musicgrid.js b/www/js/musicgrid.js
index 70722d0..1af6215 100644
--- a/www/js/musicgrid.js
+++ b/www/js/musicgrid.js
@@ -27,6 +27,7 @@ var musicgrid = 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();
@@ -43,6 +44,7 @@ var Musicgrid = function() {
 };
 
 Musicgrid.prototype.fetch = function() {
+  this.clocks = [];
   var self = this;
   rivendell.getMusicgrid(function(gridXml, status, req) {
     var dbs = $(gridXml).find("grid").children();
@@ -63,9 +65,10 @@ Musicgrid.prototype.fetch = function() {
 
 Musicgrid.prototype.updateTable = function() {
   var $table = $('#app-musicgrid table');
-  $('tr td', $table).html('').css('background-color', '').css('color', '').attr('title', null);
+  $('tr td', $table).html('').removeClass('clock').css('background-color', '').css('color', '').attr('title', null);
   $(this.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);
     $td.attr('title', clock.title);
     $td.css('background-color', clock.color);
@@ -75,7 +78,54 @@ 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);
+    });
+  });
+
+  $('tr td:not(.clock)', $table).on('click', function() {
+    selectClock($(this).parent().data('dow'), $(this).data('hour'), null);
   });
+
+};
+
+var selectClock = function(dow, hour, clockName) {
+  $('#musicpoolModal').modal({keyboard: true});
+
+  var $modalHeader = $('#musicpoolModal .modal-header');
+  var $modalBody = $('#musicpoolModal .modal-body');
+
+  $('h3', $modalHeader).html('Musikpool auswählen für Tag: ' + dow + ' Stunde: ' + hour + '.');
+
+  Musicpools.prototype.updateSelector = function() {
+    $('tbody', $modalBody).html('');
+
+    $(this.musicpools).each(function(index, musicpool) {
+      var $button = null;
+      if (clockName === musicpool.clock) {
+        $button = $('<button class="btn btn-primary" disabled="disabled">Selected</button>');
+      } else {
+        $button = $('<button class="btn btn-primary">Select</button>');
+      }
+
+      $button.on('click', function() {
+        rivendell.setMusicgrid(dow, hour, musicpool.clock, function() {
+          $('#musicpoolModal').modal('hide');
+          musicgrid.fetch();
+        });
+      });
+
+      var $tr = $('<tr>');
+      $tr.append($('<td>').html(musicpool.clock));
+      $tr.append($('<td>').html(musicpool.title));
+      $tr.append($('<td>').html($button));
+
+      $('tbody', $modalBody).append($tr);
+    });
+  };
+
+  var musicpools = new Musicpools();
 };
 
 var MusicgridClock = function(name, color, title, dow, hour) {
@@ -85,4 +135,3 @@ var MusicgridClock = function(name, color, title, dow, hour) {
   this.dow = dow;
   this.hour = hour;
 };
-