Add messages when user is online/offline

src/style/style.scss

@@ -142,3 +142,26 @@ h1 {
   }
 
 }
+
+
+.connectionMessage {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  margin-left: -150px;
+  width: 300px;
+  z-index: 100;
+  padding: 20px;
+  text-align: center;
+  font-size: $normal-font;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  font-weight: bold;
+}
+
+.online {
+  background-color: rgba(184, 242, 204, 0.9);
+}
+
+.offline {
+  background-color: rgba(241, 189, 183, 0.9);
+}

src/ts/State.ts

@@ -63,4 +63,6 @@ export default class State extends declared(Accessor) {
   @property()
   trails: Array<Trail> = null;
 
+  @property()
+  online: boolean = true;
 }

src/ts/main.ts

@@ -9,6 +9,7 @@ esriConfig.request.useIdentity = false;
 
 import State from "./State";
 import deviceUtils from "./ui/deviceUtils";
+import ConnectionManager from "./ui/ConnectionManager";
 import SceneElement from "./scene/SceneElement";
 import LoadingPage from "./ui/LoadingPage";
 import Trail from "./data/Trail";
@@ -22,6 +23,7 @@ if ("serviceWorker" in navigator) {
 
 const state = new State();
 deviceUtils.init(state);
+const connectionManager = new ConnectionManager(state);
 const loadingPage = new LoadingPage(state);
 const sceneElement = new SceneElement(state);
 sceneElement.getZEnrichedTrails()

src/ts/ui/ConnectionManager.ts

@@ -0,0 +1,52 @@
+import * as dom from "dojo/dom";
+import * as on from "dojo/on";
+import * as domConstruct from "dojo/dom-construct";
+
+function createMessage(message: string, online: boolean): void {
+
+  // display message
+  const messageContainer = domConstruct.create("div", {
+    innerHTML: message,
+    class: online ? "online connectionMessage" : "offline connectionMessage"
+  }, document.body);
+
+  // message disappears after 3 seconds
+  window.setTimeout(function() {
+    domConstruct.destroy(messageContainer);
+  }, 3000);
+}
+
+export default class ConnectionManager {
+
+  constructor(state) {
+
+    window.addEventListener("load", function() {
+
+      function updateOnlineStatus(event) {
+        state.online = navigator.onLine ? true : false;
+      }
+
+      window.addEventListener("online", updateOnlineStatus);
+      window.addEventListener("offline", updateOnlineStatus);
+    });
+
+    state.watch("online", (value) => {
+      console.log(value);
+      if (!value) {
+        this.createOfflineMessage();
+      }
+      else {
+        this.createOnlineMessage();
+      }
+    });
+  }
+
+  createOfflineMessage() {
+    createMessage("You seem to be offline. This application has limited functionality.", false);
+  }
+
+  createOnlineMessage() {
+    createMessage("You are back online.", true);
+  }
+
+}