Add connection status indicator for #44

themes/bootstrap/public/inbucket.css

@@ -86,3 +86,7 @@ table.metrics {
   cursor: pointer;
   font-size: 12px;
 }
+
+#conn-status {
+  font-style: italic;
+}

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) {

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}}