Showing websocket connection state in top bar

open-simulation-platform · Oct 4, 2018 · 97b175a · 97b175a
1 parent 42e6acd
commit 97b175a
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 28 deletions.
diff --git a/src/cse_client/config.cljs b/src/cse_client/config.cljs
@@ -0,0 +1,3 @@
+(ns cse-client.config)
+
+(def socket-url "ws://localhost:8000/ws")
diff --git a/src/cse_client/controller.cljs b/src/cse_client/controller.cljs
@@ -1,8 +1,7 @@
 (ns cse-client.controller
   (:require [kee-frame.core :as k]
-            [kee-frame.websocket :as websocket]))
-
-(def socket-url "ws://localhost:8000/ws")
+            [kee-frame.websocket :as websocket]
+            [cse-client.config :refer [socket-url]]))
 
 (k/reg-controller :trend
                   {:params (fn [route]

diff --git a/src/cse_client/view.cljs b/src/cse_client/view.cljs
@@ -3,7 +3,8 @@
             [kee-frame.core :as k]
             [re-frame.core :as rf]
             [cse-client.controller :as controller]
-            [cse-client.dp :as dp]))
+            [cse-client.dp :as dp]
+            [cse-client.config :refer [socket-url]]))
 
 (defn module-listing []
   (let [{:keys [signals] :as module} @(rf/subscribe [:module])]
@@ -44,27 +45,27 @@
    [:button.ui.button {:on-click #(rf/dispatch [::controller/pause])} "Pause"]])
 
 (defn root-comp []
-  [:div
-   [:div.ui.inverted.huge.borderless.fixed.fluid.menu
-    [:a.header.item "Project name"]
-    [:div.right.menu
-     [:div.item
-      [:div.ui.small.input
-       [:input {:placeholder "Search..."}]]]
-     [:a.item {:on-click #(rf/dispatch [::controller/play])} "Play"]
-     [:a.item {:on-click #(rf/dispatch [::controller/pause])} "Pause"]]]
-   [:div.ui.grid
-    [:div.row
-     [:div#sidebar.column
-      [sidebar]]
-     [:div#content.column
-      [:div.ui.grid
-       [:div.row
-        [:h1.ui.huge.header "Dashboard"]]
-       [:div.ui.divider]
-       [:div.row
-        [k/switch-route (comp :name :data)
-         :trend [trend/trend-outer]
-         :module [module-listing]
-         :index [dp/svg-component]
-         nil [:div "Loading..."]]]]]]]])
+  (let [socket-state (rf/subscribe [:kee-frame.websocket/state socket-url])]
+    [:div
+     [:div.ui.inverted.huge.borderless.fixed.fluid.menu
+      [:a.header.item "Project name"]
+      [:div.right.menu
+       [:div.item
+        [:div "Connection:" (:state @socket-state)]]
+       [:a.item {:on-click #(rf/dispatch [::controller/play])} "Play"]
+       [:a.item {:on-click #(rf/dispatch [::controller/pause])} "Pause"]]]
+     [:div.ui.grid
+      [:div.row
+       [:div#sidebar.column
+        [sidebar]]
+       [:div#content.column
+        [:div.ui.grid
+         [:div.row
+          [:h1.ui.huge.header "Dashboard"]]
+         [:div.ui.divider]
+         [:div.row
+          [k/switch-route (comp :name :data)
+           :trend [trend/trend-outer]
+           :module [module-listing]
+           :index [dp/svg-component]
+           nil [:div "Loading..."]]]]]]]]))