From 3c6c6ea4ae6b2d9785b8c6062861d8306c91e658 Mon Sep 17 00:00:00 2001
From: Jordan Orelli <jorelli@etsy.com>
Date: Sun, 23 Jun 2013 16:18:54 -0400
Subject: [PATCH] web client displays connection closed

---
 static/css/home.css | 11 ++++++++-
 static/js/skeam.js  | 58 +++++++++++++++++++++++++++++++++------------
 templates/home.html | 18 +++++++++++---
 3 files changed, 68 insertions(+), 19 deletions(-)

diff --git a/static/css/home.css b/static/css/home.css
index e8d3ecd..e7a7b2e 100644
--- a/static/css/home.css
+++ b/static/css/home.css
@@ -28,10 +28,19 @@ body {
     font-family: monospace;
 }
 
-.message {
+.request {
+  color: gray;
+}
 
+.response {
+  color: black;
 }
 
 .error {
   color: red;
 }
+
+.sys {
+  color: gray;
+  font-style: italic;
+}
diff --git a/static/js/skeam.js b/static/js/skeam.js
index bde3f89..017af12 100644
--- a/static/js/skeam.js
+++ b/static/js/skeam.js
@@ -60,8 +60,15 @@ ConnectionHandler.prototype.onopen = function(event) {
 
 ConnectionHandler.prototype.onclose = function(event) {
   console.log({close: event});
+  this.broadcastClose();
 };
 
+ConnectionHandler.prototype.broadcastClose = function() {
+  var event = document.createEvent("Event");
+  event.initEvent("wsClosed", true, true);
+  document.dispatchEvent(event);
+}
+
 ConnectionHandler.prototype.onmessage = function(event) {
   this.broadcastMessageReceived(event.data);
 };
@@ -85,36 +92,57 @@ ConnectionHandler.prototype.sendMsg = function(message) {
 // response rendering
 // -----------------------------------------------------------------------------
 
-var MessageDisplay = function(selector, templateSelector, errorTemplateSelector) {
+var MessageDisplay = function(selector, requestTemplateSelector, responseTemplateSelector, errorTemplateSelector, sysTemplateSelector) {
   this.elem = $(selector);
-  this.renderMessage = _.template($(templateSelector).html());
+  this.renderRequest = _.template($(requestTemplateSelector).html());
+  this.renderResponse = _.template($(responseTemplateSelector).html());
   this.renderError = _.template($(errorTemplateSelector).html());
+  this.renderSys = _.template($(sysTemplateSelector).html());
 }
 
-MessageDisplay.prototype.addMessage = function(rawmessage) {
-  var message = JSON.parse(rawmessage);
-  if (message.is_error) {
-    var rendered = this.renderError(message);
-  } else {
-    var rendered = this.renderMessage(message);
-  }
-  this.elem.append(rendered);
+MessageDisplay.prototype.addRequest = function(request) {
+  this.elem.append(this.renderRequest({message: request}));
+};
+
+MessageDisplay.prototype.addResponse = function(response) {
+  this.elem.append(this.renderResponse({message: response}));
+};
+
+MessageDisplay.prototype.addError = function(error) {
+  this.elem.append(this.renderError({message: error}));
+};
+
+MessageDisplay.prototype.addSys = function(sys) {
+  this.elem.append(this.renderSys({message: sys}));
 };
 
 var Skeam = function(config) {
   this.inputHandler = new InputHandler(config.inputSelector);
   this.messageDisplay = new MessageDisplay(config.outputSelector,
-                                           config.messageTemplateSelector,
-                                           config.errorTemplateSelector);
+                                           config.requestTemplateSelector,
+                                           config.responseTemplateSelector,
+                                           config.errorTemplateSelector,
+                                           config.sysTemplateSelector);
   this.conn = new ConnectionHandler(config.wsPath);
   document.addEventListener("sendMsg", _.bind(this.sendMsg, this), false);
   document.addEventListener("receiveResponse", _.bind(this.receiveResponse, this), false);
+  document.addEventListener("wsClosed", _.bind(this.onclose, this), false);
 };
 
 Skeam.prototype.sendMsg = function(event) {
+  this.messageDisplay.addRequest(event.message);
   this.conn.sendMsg(event.message + "\n");
-}
+};
 
 Skeam.prototype.receiveResponse = function(event) {
-  this.messageDisplay.addMessage(event.message);
-}
+  var message = JSON.parse(event.message);
+  if (message.is_error) {
+    this.messageDisplay.addError(message.message);
+  } else {
+    this.messageDisplay.addResponse(message.message);
+  }
+};
+
+Skeam.prototype.onclose = function() {
+  this.messageDisplay.addSys("connection closed");
+};
diff --git a/templates/home.html b/templates/home.html
index 09f153a..80a0a40 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -4,8 +4,13 @@
       {{js "jquery-1.9.1.min.js"}}
       {{js "underscore-min.js"}}
       {{js "skeam.js"}}
-      <script type="application/template" id="message-template">
-        <div class="message">
+      <script type="application/template" id="request-template">
+        <div class="request">
+          <pre><%= message %></pre>
+        </div>
+      </script>
+      <script type="application/template" id="response-template">
+        <div class="response">
           <pre><%= message %></pre>
         </div>
       </script>
@@ -14,13 +19,20 @@
           <pre><%= message %></pre>
         </div>
       </script>
+      <script type="application/template" id="sys-template">
+        <div class="sys">
+          <pre><%= message %></pre>
+        </div>
+      </script>
       <script>
         $(document).ready(function() {
           var skeam = new Skeam({
             inputSelector: "#txt-repl",
             outputSelector: "#responses",
-            messageTemplateSelector: "#message-template",
+            requestTemplateSelector: "#request-template",
+            responseTemplateSelector: "#response-template",
             errorTemplateSelector: "#error-template",
+            sysTemplateSelector: "#sys-template",
             wsPath: "{{.ws_path}}"
           });
         });