Add start/stop buttons for the stream

I'm so good at javascript it's scary

src/ratpack/handlebars/topic-watch.html.hbs

@@ -8,14 +8,18 @@
             </form>
         </div>
 
-        <div class="col-md-4">
+        <div class="col-md-1">
+            <button id="stop" class="btn-sm btn-danger">Stop</button>
+            <button id="start" class="btn-sm btn-success" style="display: none;">Start</button>
+        </div>
+
+        <div class="col-md-1">
             <div class="progress">
                 <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                     <span class="sr-only">Loading..</span>
                 </div>
             </div>
         </div>
-
     </div>
 
     <div id="messages">
@@ -34,5 +38,17 @@
         $('#grepfield').blur();
         e.preventDefault();
     });
+
+    $('#stop').click(function(e) {
+        $(e.target).toggle();
+        $('#start').toggle();
+        if (window.ws) { window.ws.close() };
+    });
+
+    $('#start').click(function(e) {
+        $(e.target).toggle();
+        $('#stop').toggle();
+        watchTopic("{{name}}");
+    });
 </script>
 {{> footer}}

src/ratpack/public/js/ws.js

@@ -31,13 +31,17 @@ function watchTopic(name) {
             };
             window.ws.onclose = function(event) {
                 $('.progress-bar').removeClass('active');
-                var timer = setTimeout(function() {
-                    console.log("Retrying connection...");
-                    watchTopic(name);
-                    if (window.ws.readyState == WebSocket.OPEN) {
-                        clearTimeout(timer);
-                    }
-                }, 1000);
+
+                // If our stop button is still visible, we didn't stop manually
+                if ($('#stop:visible').size() > 0) {
+                    var timer = setTimeout(function() {
+                        console.log("Retrying connection...");
+                        watchTopic(name);
+                        if (window.ws.readyState == WebSocket.OPEN) {
+                            clearTimeout(timer);
+                        }
+                    }, 1000);
+                }
             };
         }
     }