1 files changed, 58 insertions, 6 deletions

diff --git a/www/js/rhctl.js b/www/js/rhctl.js
index c8e1f26..ea7adb8 100644
--- a/www/js/rhctl.js
+++ b/www/js/rhctl.js
@@ -55,6 +55,7 @@ function Rhctl() {
   }
 
   this.sock_onclose = function(event) {
+    this.draw_callbacks.fireWith(window, []);
     this.sock.close();
     delete this.sock;
     setTimeout(this.connect.bind(this), 1000);
@@ -75,22 +76,39 @@ var rhctl = new Rhctl();
 
 function rhctl_init() {
   rhctl.connect();
-  $('#rhctlraw').text("loading...");
+  rhctl_draw_state()
   rhctl.addCallback(rhctl_draw_state);
 }
 
 function rhctl_draw_state(state) {
-  $('#rhctlraw').text(JSON.stringify(state, null, '\t'));
+  var raw = $('#rhctlraw');
+  var mood = $('#rhctlmood img').removeClass();
+  var srv = $('#rhctlactiveserver span').removeClass().addClass('label');
+  var srvTable = $('#rhctlservertable table');
+  srvTable.find("tr:gt(0)").remove();;
+  var audioTable = $('#rhctlaudiotable table');
+  audioTable.find("tr:gt(0)").remove();;
 
-  var mood = $('<img>').attr('src', '/img/mood-' + state.Mood + '.png');
+  if(!state) {
+    raw.text("connecting...");
+    mood.attr('src', '/img/mood-undefined.png');
+    srv.addClass('label-default').text('none');
+    return;
+  }
+
+    // Raw message
+  raw.text(JSON.stringify(state, null, '\t'));
+
+    // Mood
+  mood.attr('src', '/img/mood-' + state.Mood + '.png');
   if(state.Settled) {
     mood.attr('title', state.Mood);
   } else {
     mood.addClass('blink').attr('title', state.Mood + ' (Settling)');
   }
-  $('#rhctlmood').empty().append(mood);
 
-  var srv = $('<span>').addClass('label').text(state.ActiveServer);
+    // Active Server
+  srv.text(state.ActiveServer);
   switch(state.ActiveServer) {
   case 'master':
     srv.addClass('label-success');
@@ -104,5 +122,39 @@ function rhctl_draw_state(state) {
     }
     srv.addClass('label-default');
   }
-  $('#rhctlactiveserver').empty().append($('<h1>').append(srv));
+
+    // Server Table
+  $.each(state.Server, function(key, value) {
+     var entry = $('#hiddenTemplates .servertableEntryTemplate').clone().removeClass('servertableEntryTemplate');
+      entry.find('.server-name').text(key);
+      if(value.Channel) {
+        entry.find('.server-channel').text(value.Channel);
+      }
+      var h = entry.find('.server-health img');
+      switch(value.Health) {
+      case 'alive':
+      case 'dead':
+        h.attr('src', '/img/server-' + value.Health + '.png').attr('title', value.Health);
+        break;
+      default:
+      }
+      srvTable.append(entry)
+  });
+
+
+    // Audio Outputs
+  $.each(state.Switch.Audio, function(index, value) {
+     var entry = $('#hiddenTemplates .audiotableEntryTemplate').clone().removeClass('audiotableEntryTemplate');
+     entry.find('.audio-out').text(index+1);
+     $.each(value.Inputs, function(index, value) {
+         if(value) {
+             entry.find('.audio-in' + (index+1) + ' span').removeClass('glyphicon-unchecked').addClass('glyphicon-check');
+         }
+         });
+     if(!value.Silence)  {
+       entry.find('.audio-silence span').removeClass('glyphicon-volume-off').addClass('glyphicon-volume-up');
+     }
+
+     audioTable.append(entry)
+  });
 }