rudimentary renderings work now

3 files changed, 49 insertions, 5 deletions

diff --git a/www/index.html b/www/index.html
index f576a6b..9ec29c1 100644
--- a/www/index.html
+++ b/www/index.html
@@ -35,7 +35,17 @@
      </div>
 
      <div class="row">
-       <div id="rhctl" class="col-md-6 col-md-offset-3">
+       <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 class="col-xs-3 col-xs-offset-1"><h3>Active Server:<h3></div>
+           <div id="rhctlactiveserver" class="col-xs-3"></div>
+         </div>
+         <div class="row">
+           <div id="rhctlraw"></div>
+         </div>
        </div>
      </div>
 
diff --git a/www/js/rhctl.js b/www/js/rhctl.js
index 103f12c..c8e1f26 100644
--- a/www/js/rhctl.js
+++ b/www/js/rhctl.js
@@ -75,11 +75,34 @@ var rhctl = new Rhctl();
 
 function rhctl_init() {
   rhctl.connect();
-  $('#rhctl').text("loading...");
+  $('#rhctlraw').text("loading...");
   rhctl.addCallback(rhctl_draw_state);
 }
 
 function rhctl_draw_state(state) {
-    console.log(state);
-    $('#rhctl').text(JSON.stringify(state, null, '\t'));
+  $('#rhctlraw').text(JSON.stringify(state, null, '\t'));
+
+  var mood = $('<img>').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);
+  switch(state.ActiveServer) {
+  case 'master':
+    srv.addClass('label-success');
+    break;
+  case 'standby':
+    srv.addClass('label-warning');
+    break;
+  default:
+    if(!state.ActiveServer) {
+      srv.text('none');
+    }
+    srv.addClass('label-default');
+  }
+  $('#rhctlactiveserver').empty().append($('<h1>').append(srv));
 }
diff --git a/www/styles/main.css b/www/styles/main.css
index 86162af..ad774b8 100644
--- a/www/styles/main.css
+++ b/www/styles/main.css
@@ -38,7 +38,7 @@
   font-weight: bold;
 }
 
-#rhctl {
+#rhctlraw {
   background-color: white;
   border: 1px solid;
   padding: 1em;
@@ -46,3 +46,14 @@
   margin-top: 1em;
   margin-bottom: 1em;
 }
+
+@keyframes blink {
+  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;
+}​