Show online indicator.

Closes #37.

lib/www/client/source/src/components/footer.vue

@@ -9,6 +9,9 @@
 
 	<v-spacer></v-spacer>
 
+	<v-icon v-if="serverConnected" class="mr-6" small title="Connected to server">mdi-lan-connect</v-icon>
+	<v-icon v-else class="mr-6" small color="red" title="Server connection lost">mdi-lan-disconnect</v-icon>
+	
 	<dougal-notifications-control class="mr-6"></dougal-notifications-control>
 
 	<div title="Night mode">
@@ -35,6 +38,7 @@
 </style>
 
 <script>
+import { mapState } from 'vuex';
 
 import DougalHelpDialog from '@/components/help-dialog';
 import DougalNotificationsControl from '@/components/notifications-control';
@@ -51,7 +55,9 @@ export default {
     year () {
       const date = new Date();
       return date.getUTCFullYear();
-    }
+    },
+    
+    ...mapState({serverConnected: state => state.notify.serverConnected})
   }
 };
 </script>

lib/www/client/source/src/main.js

@@ -59,6 +59,7 @@ new Vue({
 
       this.ws.addEventListener("open", (ev) => {
         console.log("WebSocket connection open", ev);
+        this.setServerConnectionState(true);
       });
 
       this.ws.addEventListener("close", (ev) => {
@@ -74,11 +75,12 @@ new Vue({
         delete this.ws;
         this.ws = null;
         setTimeout( this.initWs, 60000 );
+        this.setServerConnectionState(false);
       });
 
     },
 
-    ...mapMutations(['setServerEvent'])
+    ...mapMutations(['setServerEvent', 'setServerConnectionState'])
 
   },
 

lib/www/client/source/src/store/modules/notify/mutations.js

@@ -7,4 +7,8 @@ function clearServerEvent (state) {
   state.serverEvent = null;
 }
 
-export default { setServerEvent, clearServerEvent };
+function setServerConnectionState (state, isConnected) {
+  state.serverConnected = !!isConnected;
+}
+
+export default { setServerEvent, clearServerEvent, setServerConnectionState };

lib/www/client/source/src/store/modules/notify/state.js

@@ -1,5 +1,6 @@
 const state = () => ({
-  serverEvent: null
+  serverEvent: null,
+  serverConnected: false
 });
 
 export default state;