From e14e97919ff90fcb9f3326110f61c84543ee2bf1 Mon Sep 17 00:00:00 2001
From: James Hillyerd <james@hillyerd.com>
Date: Sat, 21 Jan 2017 20:47:10 -0800
Subject: [PATCH] Add connection status indicator for #44

---
 themes/bootstrap/public/inbucket.css         | 4 ++++
 themes/bootstrap/public/monitor.js           | 6 ++++++
 themes/bootstrap/templates/root/monitor.html | 2 ++
 3 files changed, 12 insertions(+)

diff --git a/themes/bootstrap/public/inbucket.css b/themes/bootstrap/public/inbucket.css
index 63d80bb..c3c9f49 100644
--- a/themes/bootstrap/public/inbucket.css
+++ b/themes/bootstrap/public/inbucket.css
@@ -86,3 +86,7 @@ table.metrics {
   cursor: pointer;
   font-size: 12px;
 }
+
+#conn-status {
+  font-style: italic;
+}
diff --git a/themes/bootstrap/public/monitor.js b/themes/bootstrap/public/monitor.js
index 6a975ca..e7716d2 100644
--- a/themes/bootstrap/public/monitor.js
+++ b/themes/bootstrap/public/monitor.js
@@ -18,6 +18,9 @@ function startMonitor() {
   var url = ((l.protocol === "https:") ? "wss://" : "ws://") + l.host + uri
   var ws = new WebSocket(url);
 
+  ws.addEventListener('open', function (e) {
+    $('#conn-status').text('Connected.');
+  });
   ws.addEventListener('message', function (e) {
     var msg = JSON.parse(e.data);
     msg['href'] = '/mailbox?name=' + msg.mailbox + '&id=' + msg.id;
@@ -26,6 +29,9 @@ function startMonitor() {
         msg,
         { append: true });
   });
+  ws.addEventListener('close', function (e) {
+    $('#conn-status').text('Disconnected!');
+  });
 }
 
 function messageClick(node) {
diff --git a/themes/bootstrap/templates/root/monitor.html b/themes/bootstrap/templates/root/monitor.html
index 54cebaf..f20313d 100644
--- a/themes/bootstrap/templates/root/monitor.html
+++ b/themes/bootstrap/templates/root/monitor.html
@@ -47,5 +47,7 @@ $(document).ready(function () {
     <tbody id="monitor-message-list"></tbody>
   </table>
 </div>
+
+<div id="conn-status">Connecting...</div>
 {{end}}