added websocket base clock

4 files changed, 80 insertions, 9 deletions

diff --git a/www/index.html b/www/index.html
index ae79e9e..e0a4338 100644
--- a/www/index.html
+++ b/www/index.html
@@ -108,10 +108,11 @@
             </form>
           </div>
           <div class="span2">
-            <center>
-              <h4>Aktuelle Woche</h4>
-              <span id="current-week"></span>
-            </center>
+            <div id="shows-clock">
+              <span class="current-week"></span>
+              <span class="clock-date"></span>
+              <span class="clock-time"></span>
+            </div>
           </div>
         </div>
         <div class="row-fluid">
diff --git a/www/js/shows.js b/www/js/shows.js
index 8ebea41..eddb80f 100644
--- a/www/js/shows.js
+++ b/www/js/shows.js
@@ -24,6 +24,7 @@ var shows_list = [];
 var shows_current;
 var shows_group_carts = {};
 var shows_log_carts = [];
+var shows_clock;
 
 
 function shows_deleteCart(cart) {
@@ -320,9 +321,11 @@ function shows_updateList(data, status, req) {
   shows_showSelected();
 }
 
-function shows_drawCurrentWeek() {
-  var weekspan = $('#current-week').removeClass().addClass('label');
-  switch(get_rd_week()) {
+function shows_drawClock(date, time, week) {
+  $('#shows-clock span.clock-date').text(date);
+  $('#shows-clock span.clock-time').text(time);
+  var weekspan = $('#shows-clock span.current-week').removeClass().addClass('current-week').addClass('label');
+  switch(week) {
     case 1:
       weekspan.addClass('label-info').text('Woche 1');
       break;
@@ -345,12 +348,16 @@ function shows_init() {
   shows_list = [];
   data = { LOGIN_NAME: auth_username, PASSWORD: auth_token };
   $.post("/rh-bin/listdropboxes.cgi", data, shows_updateList, "xml")
-  shows_drawCurrentWeek();
+  shows_drawClock('Do, 1.1.1970', '00:00:00', 0);
+  shows_clock = new Clock(shows_drawClock);
+  shows_clock.start();
 }
 
 function shows_cleanup() {
   sessionStorage.removeItem("shows_currentid");
   delete shows_currentid;
+  shows_clock.stop();
+  delete shows_clock;
   shows_list = [];
   shows_group_carts = {};
   shows_log_carts = [];
diff --git a/www/js/utils.js b/www/js/utils.js
index 8436672..fbcf709 100644
--- a/www/js/utils.js
+++ b/www/js/utils.js
@@ -116,6 +116,44 @@ function get_rd_week() {
   //
   var today = new Date();
   var sEpoch = ((+today) / 1000) + get_tz_offset(today);
-  var week = Math.floor((((sEpoch + 259200)/604800) + 2) % 4) + 1
+  var week = Math.floor((((sEpoch + 259200)/604800) + 2) % 4) + 1;
   return week;
 }
+
+function Clock(draw_callback) {
+  this.draw_callback = draw_callback;
+  this.daynames = new Array('So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa');
+
+  this.last_update = { timestamp: 0, tz_offset: 3600, week: 3 };
+  this.clock_offset = 0;
+
+  this.redraw = function() {
+    var rdtime_ms = (+new Date()) + (this.last_update.tz_offset * 1000) + this.clock_offset;
+
+    var rdtime = new Date(rdtime_ms);
+    var date_str = this.daynames[rdtime.getUTCDay()]  + ', ';
+    date_str += rdtime.getUTCDate() + '.' + (rdtime.getUTCMonth() + 1) + '.' + rdtime.getUTCFullYear();
+
+    var time_str = (rdtime.getUTCHours() > 9 ? ' ' : ' 0') + rdtime.getUTCHours();
+    time_str += (rdtime.getUTCMinutes() > 9 ? ':' : ':0') + rdtime.getUTCMinutes();
+    time_str += (rdtime.getUTCSeconds() > 9 ? ':' : ':0') + rdtime.getUTCSeconds();
+
+    this.draw_callback(date_str, time_str, this.last_update.week);
+  }
+
+  this.update = function(event) {
+      var update = JSON.parse(event.data);
+      this.last_update = update;
+      this.clock_offset = (update.timestamp*1000) - (+new Date())        ;
+  }
+
+  this.start = function() {
+    this.sock = new WebSocket("wss://import.helsinki.at/time");
+    this.sock.onmessage = this.update.bind(this);
+    this.interval = setInterval(this.redraw.bind(this), 500);
+  }
+  this.stop = function() {
+    clearInterval(this.interval)
+    delete this.interval
+  }
+}
diff --git a/www/styles/shows.css b/www/styles/shows.css
index bd533be..9648431 100644
--- a/www/styles/shows.css
+++ b/www/styles/shows.css
@@ -58,3 +58,28 @@
 #shows-upload div.modal-body form div.dz-preview {
   display: none;
 }
+#shows-clock {
+  display: block;
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+  text-align: center;
+  margin: 0;
+}
+#shows-clock span {
+  display:table;
+  margin:0 auto;
+}
+#shows-clock span.current-week {
+  margin-top: 1em;
+  padding: 0.3em 2em;
+}
+#shows-clock span.clock-date {
+  padding: 0.2em;
+  font-weight: bold;
+}
+#shows-clock span.clock-time {
+  padding: 0.2em;
+  font-weight: bold;
+  font-size: 1.4em;
+}