summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPeter Grassberger <petertheone@gmail.com>2015-12-29 12:56:55 (GMT)
committerPeter Grassberger <petertheone@gmail.com>2015-12-29 12:56:55 (GMT)
commit3f681b8e91ac36d22764c0f5a619e2efe77dd15e (patch)
treea77a1219e2f12ba83a38e78f4ec0a3c9715672d9
parent08d44278f8ac010b93f29cf1dff912f95b2b19ec (diff)
musicgrid: show grid
-rw-r--r--www/index.html74
-rw-r--r--www/js/musicgrid.js50
2 files changed, 120 insertions, 4 deletions
diff --git a/www/index.html b/www/index.html
index c082c43..c3ccc68 100644
--- a/www/index.html
+++ b/www/index.html
@@ -167,6 +167,7 @@
<select id="musicpool-selector" class="main-selector">
</select>
</form>
+ </div>
<div class="span12">
<h1>Musikpools</h1>
<p>
@@ -179,9 +180,76 @@
<div class="alertbox"></div>
<div class="span12">
<h1>Musikgrid</h1>
- <p>
- coming soon!
- </p>
+ <table class="table table-striped">
+ <thead>
+ <tr>
+ <th></th>
+ <th>00:00</th><th>01:00</th><th>02:00</th><th>03:00</th>
+ <th>04:00</th><th>05:00</th><th>06:00</th><th>07:00</th>
+ <th>08:00</th><th>09:00</th><th>10:00</th><th>11:00</th>
+ <th>16:00</th><th>17:00</th><th>18:00</th><th>19:00</th>
+ <th>20:00</th><th>21:00</th><th>22:00</th><th>23:00</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr data-dow="0">
+ <th>Montag</th>
+ <td data-hour="0"></td><td data-hour="1"></td><td data-hour="2"></td><td data-hour="3"></td>
+ <td data-hour="4"></td><td data-hour="5"></td><td data-hour="6"></td><td data-hour="7"></td>
+ <td data-hour="8"></td><td data-hour="9"></td><td data-hour="10"></td><td data-hour="11"></td>
+ <td data-hour="16"></td><td data-hour="17"></td><td data-hour="18"></td><td data-hour="19"></td>
+ <td data-hour="20"></td><td data-hour="21"></td><td data-hour="22"></td><td data-hour="23"></td>
+ </tr>
+ <tr data-dow="1">
+ <th>Dienstag</th>
+ <td data-hour="0"></td><td data-hour="1"></td><td data-hour="2"></td><td data-hour="3"></td>
+ <td data-hour="4"></td><td data-hour="5"></td><td data-hour="6"></td><td data-hour="7"></td>
+ <td data-hour="8"></td><td data-hour="9"></td><td data-hour="10"></td><td data-hour="11"></td>
+ <td data-hour="16"></td><td data-hour="17"></td><td data-hour="18"></td><td data-hour="19"></td>
+ <td data-hour="20"></td><td data-hour="21"></td><td data-hour="22"></td><td data-hour="23"></td>
+ </tr>
+ <tr data-dow="2">
+ <th>Mittwoch</th>
+ <td data-hour="0"></td><td data-hour="1"></td><td data-hour="2"></td><td data-hour="3"></td>
+ <td data-hour="4"></td><td data-hour="5"></td><td data-hour="6"></td><td data-hour="7"></td>
+ <td data-hour="8"></td><td data-hour="9"></td><td data-hour="10"></td><td data-hour="11"></td>
+ <td data-hour="16"></td><td data-hour="17"></td><td data-hour="18"></td><td data-hour="19"></td>
+ <td data-hour="20"></td><td data-hour="21"></td><td data-hour="22"></td><td data-hour="23"></td>
+ </tr>
+ <tr data-dow="3">
+ <th>Donnerstag</th>
+ <td data-hour="0"></td><td data-hour="1"></td><td data-hour="2"></td><td data-hour="3"></td>
+ <td data-hour="4"></td><td data-hour="5"></td><td data-hour="6"></td><td data-hour="7"></td>
+ <td data-hour="8"></td><td data-hour="9"></td><td data-hour="10"></td><td data-hour="11"></td>
+ <td data-hour="16"></td><td data-hour="17"></td><td data-hour="18"></td><td data-hour="19"></td>
+ <td data-hour="20"></td><td data-hour="21"></td><td data-hour="22"></td><td data-hour="23"></td>
+ </tr>
+ <tr data-dow="4">
+ <th>Freitag</th>
+ <td data-hour="0"></td><td data-hour="1"></td><td data-hour="2"></td><td data-hour="3"></td>
+ <td data-hour="4"></td><td data-hour="5"></td><td data-hour="6"></td><td data-hour="7"></td>
+ <td data-hour="8"></td><td data-hour="9"></td><td data-hour="10"></td><td data-hour="11"></td>
+ <td data-hour="16"></td><td data-hour="17"></td><td data-hour="18"></td><td data-hour="19"></td>
+ <td data-hour="20"></td><td data-hour="21"></td><td data-hour="22"></td><td data-hour="23"></td>
+ </tr>
+ <tr data-dow="5">
+ <th>Samstag</th>
+ <td data-hour="0"></td><td data-hour="1"></td><td data-hour="2"></td><td data-hour="3"></td>
+ <td data-hour="4"></td><td data-hour="5"></td><td data-hour="6"></td><td data-hour="7"></td>
+ <td data-hour="8"></td><td data-hour="9"></td><td data-hour="10"></td><td data-hour="11"></td>
+ <td data-hour="16"></td><td data-hour="17"></td><td data-hour="18"></td><td data-hour="19"></td>
+ <td data-hour="20"></td><td data-hour="21"></td><td data-hour="22"></td><td data-hour="23"></td>
+ </tr>
+ <tr data-dow="6">
+ <th>Sonntag</th>
+ <td data-hour="0"></td><td data-hour="1"></td><td data-hour="2"></td><td data-hour="3"></td>
+ <td data-hour="4"></td><td data-hour="5"></td><td data-hour="6"></td><td data-hour="7"></td>
+ <td data-hour="8"></td><td data-hour="9"></td><td data-hour="10"></td><td data-hour="11"></td>
+ <td data-hour="16"></td><td data-hour="17"></td><td data-hour="18"></td><td data-hour="19"></td>
+ <td data-hour="20"></td><td data-hour="21"></td><td data-hour="22"></td><td data-hour="23"></td>
+ </tr>
+ </tbody>
+ </table>
</div>
</div>
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;
+};
+