2 files changed, 55 insertions, 1 deletions
diff --git a/www/js/rhctl.js b/www/js/rhctl.js
index c70f8ee..5b5b438 100644
--- a/www/js/rhctl.js
+++ b/www/js/rhctl.js
@@ -21,6 +21,54 @@
 
 'use strict';
 
+function Rhctl() {
+  this.state = 'NEW';
+
+  this.sock_onmessage = function(event) {
+    var msg = JSON.parse(event.data);
+    if (msg.RESPONSE_CODE != 200) {
+      console.log("got error message: ", event.data)
+    } else {
+      switch(msg.TYPE) {
+      case 'state':
+        $('#rhctl').text(JSON.stringify(msg.STATE, null, '\t'));
+        break;
+      case 'ack':
+        break;
+      default:
+        console.log("rhctl: got unexpected message type '" + msg.TYPE + "'")
+      }
+    }
+  }
+
+  this.sock_onopen = function() {
+    this.state = 'CONNECTED';
+    console.log('rhctl: ' + this.state)
+    this.sock.onmessage = this.sock_onmessage.bind(this);
+    this.sock.send(JSON.stringify({ COMMAND: 'subscribe', ARGS: [ 'state' ] }));
+    this.sock.send(JSON.stringify({ COMMAND: 'state' }));
+  }
+
+  this.sock_onclose = function(event) {
+    this.sock.close();
+    delete this.sock;
+    setTimeout(this.connect.bind(this), 1000);
+    this.state = 'RECONNECTING';
+    console.log('rhctl: ' + this.state)
+  }
+
+  this.connect = function() {
+    this.sock = new WebSocket('wss://' + window.location.host + '/rhctl/socket');
+    this.sock.onopen = this.sock_onopen.bind(this);
+    this.sock.onclose = this.sock_onclose.bind(this);
+    this.state = 'CONNECTING';
+    console.log('rhctl: ' + this.state)
+  }
+}
+
+var rhctl = new Rhctl();
+
 function rhctl_init() {
-  $('#rhctl').append($('<h2>').text("coming soon"));
+  $('#rhctl').text("loading...");
+  rhctl.connect();
 }
diff --git a/www/styles/main.css b/www/styles/main.css
index 016b6ff..86162af 100644
--- a/www/styles/main.css
+++ b/www/styles/main.css
@@ -39,4 +39,10 @@
 }
 
 #rhctl {
+  background-color: white;
+  border: 1px solid;
+  padding: 1em;
+  font-family: monospace;
+  margin-top: 1em;
+  margin-bottom: 1em;
 }