index: show error message when websocket closes

2 files changed, 40 insertions, 20 deletions

diff --git a/vfd-index/src/main/scala/vfd/index/Main.scala b/vfd-index/src/main/scala/vfd/index/Main.scala
index 779b682..d5b3f64 100644
--- a/vfd-index/src/main/scala/vfd/index/Main.scala
+++ b/vfd-index/src/main/scala/vfd/index/Main.scala
@@ -47,25 +47,46 @@ object Main {
       }
     }
 
-    root.appendChild(table(`class` := "table table-hover")(
-      thead(
-        tr(
-          th("System ID"),
-          th("Type"),
-          th("Autopilot"),
-          th("State"),
-          th(""))),
-      Rx {
-        tbody(
-          for (vehicle <- active().toSeq) yield {
-            tr(
-              td(vehicle.systemId),
-              td(vehicle.vehicleType),
-              td(vehicle.autopilot),
-              td(vehicle.state),
-              td(a(href := "/dashboard/" + vehicle.systemId, `class` := "btn btn-default")("Pilot")))
-          })
-      }).render)
+    connection.onclose = (e: dom.Event) => {
+      while (root.firstChild != null) {
+        root.removeChild(root.firstChild);
+      }
+      root.appendChild(
+        div(`class`:="alert alert-danger")(
+          "Connection to server unexpectedly closed. Check server logs for errors."
+        ).render
+      )
+
+    }
+
+    root.appendChild(div(
+      table(`class` := "table table-hover")(
+        thead(
+          tr(
+            th("System ID"),
+            th("Type"),
+            th("Autopilot"),
+            th("State"),
+            th("")
+          )
+        ),
+        Rx {
+          tbody(
+            for (vehicle <- active().toSeq) yield {
+              tr(
+                td(vehicle.systemId),
+                td(vehicle.vehicleType),
+                td(vehicle.autopilot),
+                td(vehicle.state),
+                td(a(href := "/dashboard/" + vehicle.systemId, `class` := "btn btn-default")("Pilot"))
+              )
+            }
+          )
+        }
+      ),
+      i(`class`:="fa fa-spinner fa-spin")(),
+      " Listening for heartbeats..."
+    ).render)
   }
 
 }
\ No newline at end of file
diff --git a/vfd-main/app/views/index.scala.html b/vfd-main/app/views/index.scala.html
index 49b6a71..12ac9bd 100644
--- a/vfd-main/app/views/index.scala.html
+++ b/vfd-main/app/views/index.scala.html
@@ -17,7 +17,6 @@
 					@app("vfd-index")(
 						"socketUrl" -> socket
 					)
-					<i class="fa fa-spinner fa-spin"></i> Listening for heartbeats...
 				</div>
 			</div>
 			@if(!Play.isProd(Play.current)) {