2 files changed, 103 insertions, 11 deletions
diff --git a/www/js/nextshows.js b/www/js/nextshows.js
index 9ded238..39f61dd 100644
--- a/www/js/nextshows.js
+++ b/www/js/nextshows.js
@@ -21,26 +21,105 @@
 
 'use strict';
 
-function reloadShowList() {
+var rh = rh || {};
+
+
+
+/***************** models  *****************/
+
+var shows = null;
+
+rh.ShowList = function() {
+  this.$this = $(this);
+  this.shows = [];
+};
+
+rh.ShowList.prototype.fetch = function() {
+  var self = this;
   var yd = new Date((new Date()) - 24 * 3600 * 1000);
   var ydstr = yd.getFullYear() + '-' + Number(yd.getMonth() + 1).pad(2) + '-' + Number(yd.getDate()).pad(2);
   $.getJSON( "/rh-bin/schedules.json?DAYS=3&START=" + ydstr, function(data) {
     if(data.status == "OK") {
-      var list = $('#shows table')
-      $('tr.show', list).remove();
-
+      self.shows = [];
       $(data.shows).each(function(index, show) {
-        var title = $('<td>').addClass('show-title').text(show.id + ' | ' + show.title);
-        var start = $('<td>').addClass('show-start').text(show.start);
-        var duration = $('<td>').addClass('show-duration').text(msToTimeString(show.len));
-
-	var entry = $('<tr>').addClass('show').append(start).append(title).append(duration);
-        list.append(entry);
+        self.shows.push(new rh.Show(show));
       });
+      self.$this.trigger('update');
     }
   });
+};
+
+rh.Show = function(show) {
+  this.id = show.id;
+  this.title = show.title;
+  this.start = new Date(show.start);
+  this.len = show.len;
+};
+
+
+
+/***************** views  *****************/
+
+var showListView = null;
+
+rh.ShowListView = function(model, len) {
+  this.model = model;
+  this.len = len;
+
+  this.showViews = [];
+
+  var self = this;
+  $(this.model).on('update', function() {
+    self.render();
+  });
+  this.model.fetch();
+};
+
+rh.ShowListView.prototype.render = function() {
+  var list = $('#shows table');
+  $('tr', list).remove();
+  this.showViews = [];
+
+  var self = this;
+  $(this.model.shows).each(function(index, show) {
+    var showView = new rh.ShowView(show, self);
+    self.showViews.push(showView);
+    showView.render();
+    list.append(showView.$el);
+  });
+};
+
+
+rh.ShowView = function(model, listView) {
+  this.model = model;
+  this.listView = listView;
+
+  this.$el = $('<tr>');
+};
+
+rh.ShowView.prototype.render = function() {
+  var title = $('<td>').addClass('show-title').text(this.model.title);
+
+  var startstr = "Beginn: " + format_time(this.model.start);
+  var start = $('<td>').addClass('show-start').text(startstr);
+
+  var endstr = "Live";
+  if(this.model.len > 0) {
+    var end = new Date(this.model.start.valueOf() + this.model.len);
+    endstr = "Ende: " + format_time(end);
+  }
+  var end = $('<td>').addClass('show-end').text(endstr);
+
+  this.$el.empty().addClass('show').append(start).append(title).append(end);
 }
 
+
+
+/***************** controller  *****************/
+
 function nextshows_init() {
-  reloadShowList();
+  shows = new rh.ShowList();
+  showListView = new rh.ShowListView(shows, 10);
+
+  setInterval("shows.fetch()", 5000);
 }
diff --git a/www/js/utils.js b/www/js/utils.js
index a7fef1b..86c369b 100644
--- a/www/js/utils.js
+++ b/www/js/utils.js
@@ -54,6 +54,19 @@ monthname[11] = 'Dezember';
 
 var monthname_short = new Array('Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez');
 
+function format_time(d) {
+  if(Object.prototype.toString.call(d) !== '[object Date]') {
+    return '-';
+  }
+  if (d.toString() === 'Invalid Date') {
+    return '-';
+  }
+  var timestr = Number(d.getHours()).pad(2);
+  timestr += ':' + Number(d.getMinutes()).pad(2);
+  timestr += ':' + Number(d.getSeconds()).pad(2);
+  return timestr;
+}
+
 function format_datetime(d) {
   if(Object.prototype.toString.call(d) !== '[object Date]') {
     return '-';