Add: UI indication for offline state

client/app/index.js

@@ -107,7 +107,7 @@ ngModule.config(($routeProvider, $locationProvider, $compileProvider,
 });
 
 // Update ui-select's template to use Font-Awesome instead of glyphicon.
-ngModule.run(($templateCache) => {
+ngModule.run(($templateCache, OfflineListener) => { // eslint-disable-line no-unused-vars
   const templateName = 'bootstrap/match.tpl.html';
   let template = $templateCache.get(templateName);
   template = template.replace('glyphicon glyphicon-remove', 'fa fa-remove');

client/app/services/index.js

@@ -12,5 +12,6 @@ export { default as DataSource } from './data-source';
 export { default as QuerySnippet } from './query-snippet';
 export { default as Notifications } from './notifications';
 export { default as KeyboardShortcuts } from './keyboard-shortcuts';
+export { default as OfflineListener } from './offline-listener';
 export { default as AlertDialog } from './alert-dialog';
 export { default as Auth } from './auth';

client/app/services/offline-listener.js

@@ -0,0 +1,23 @@
+function OfflineListener(toastr) {
+  function addOnlineListener(toast) {
+    function onlineStateHandler() {
+      toastr.remove(toast.toastId);
+      window.removeEventListener('online', onlineStateHandler);
+    }
+    window.addEventListener('online', onlineStateHandler);
+  }
+
+  window.addEventListener('offline', () => {
+    const toast = toastr.warning('<div>Please check your Internet connection.</div>', '', {
+      allowHtml: true,
+      autoDismiss: false,
+      timeOut: false,
+      tapToDismiss: true,
+    });
+    addOnlineListener(toast);
+  });
+}
+
+export default function (ngModule) {
+  ngModule.service('OfflineListener', OfflineListener);
+}