3 files changed, 155 insertions, 17 deletions
diff --git a/www/index.html b/www/index.html
index 9ec29c1..3b9b01b 100644
--- a/www/index.html
+++ b/www/index.html
@@ -38,10 +38,42 @@
        <div class="col-md-5 col-md-offset-3">
          <div class="row">
            <div class="col-xs-2"><h3>Mood:<h3></div>
-           <div id="rhctlmood" class="col-xs-1"></div>
+           <div id="rhctlmood" class="col-xs-1">
+             <img src="/img/mood-undefined.png" />
+           </div>
 
            <div class="col-xs-3 col-xs-offset-1"><h3>Active Server:<h3></div>
-           <div id="rhctlactiveserver" class="col-xs-3"></div>
+           <div id="rhctlactiveserver" class="col-xs-3">
+             <span class="label label-default">none</span>
+           </div>
+         </div>
+         <div class="row">
+           <div id="rhctlservertable" class="col-xs-4">
+             <table class="table">
+               <tr>
+                 <th>Server</th>
+                 <th>Health</th>
+                 <th>Channel</th>
+               </tr>
+             </table>
+           </div>
+           <div id="rhctlaudiotable" class="col-xs-8">
+             <h4>Audio Routing</h4>
+             <table class="table">
+               <tr>
+                 <th>Out</th>
+                 <th>1</th>
+                 <th>2</th>
+                 <th>3</th>
+                 <th>4</th>
+                 <th>5</th>
+                 <th>6</th>
+                 <th>7</th>
+                 <th>8</th>
+                 <th>Silence</th>
+               </tr>
+             </table>
+           </div>
          </div>
          <div class="row">
            <div id="rhctlraw"></div>
@@ -51,10 +83,37 @@
 
    </div>
 
-  <script type="text/javascript">
-    clock_init();
-    rhctl_init();
-  </script>
+   <div id="hiddenTemplates" class="hidden">
+
+     <table>
+       <tr class="servertableEntryTemplate">
+         <td class="server-name">-</td>
+         <td class="server-health"><img src="/img/server-undefined.png" title="unkown" /></td>
+         <td class="server-channel">-</td>
+       </tr>
+     </table>
+
+      <table>
+       <tr class="audiotableEntryTemplate">
+         <td class="audio-out">-</td>
+         <td class="audio-in audio-in1"><span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span></td>
+         <td class="audio-in audio-in2"><span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span></td>
+         <td class="audio-in audio-in3"><span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span></td>
+         <td class="audio-in audio-in4"><span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span></td>
+         <td class="audio-in audio-in5"><span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span></td>
+         <td class="audio-in audio-in6"><span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span></td>
+         <td class="audio-in audio-in7"><span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span></td>
+         <td class="audio-in audio-in8"><span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span></td>
+         <td class="audio-silence"><span class="glyphicon glyphicon-volume-off" aria-hidden="true"></span></td>
+       </tr>
+     </table>
+
+   </div>
+
+   <script type="text/javascript">
+     clock_init();
+     rhctl_init();
+   </script>
 
  </body>
 </html>
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)
+  });
 }
diff --git a/www/styles/main.css b/www/styles/main.css
index ad774b8..37b5b80 100644
--- a/www/styles/main.css
+++ b/www/styles/main.css
@@ -47,13 +47,40 @@
   margin-bottom: 1em;
 }
 
+#rhctlactiveserver span {
+  font-size: 2em;
+}
+
+#rhctlservertable table {
+  margin-top: 2em;
+  width: 100%;
+}
+
+#rhctlaudiotable h4 {
+  margin-top: 2em;
+  text-align: center;
+  width: 100%;
+}
+
+#rhctlaudiotable table {
+  width: 100%;
+}
+
+#rhctlaudiotable .audio-out,.audio-in {
+  font-size: 1.1em;
+}
+
+#rhctlaudiotable .audio-silence {
+  font-size: 2em;
+}
+
 @keyframes blink {
-  0%{opacity:1;}
-  50%{opacity:0.2;}
-  100%{opacity:1;}
+    0% {opacity:1;}
+   50% {opacity:0.2;}
+  100% {opacity:1;}
 }
 
 .blink {
-  transition:all 0.5s ease-in-out;
-  animation:blink normal 1s infinite ease-in-out;
+  transition: all 0.5s ease-in-out;
+  animation: blink normal 1s infinite ease-in-out;
 }