connection status

client/src/App.vue

@@ -1,5 +1,13 @@
 <template>
   <v-app>
+    <v-progress-linear
+        :active=!connected
+        dark
+        absolute
+        top
+        indeterminate
+        color="yellow darken-2"
+    ></v-progress-linear>
     <!--v-app-bar app color="primary" dark>
       <div class="d-flex align-center">
         <v-img
@@ -36,15 +44,21 @@
     <v-main>
       <router-view />
     </v-main>
+    <v-overlay :value="!connected"></v-overlay>
   </v-app>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
+import {mapState} from "vuex";
 
 export default Vue.extend({
   name: "App",
 
+  computed: mapState({
+    connected: state => state.socket.isConnected
+  }),
+
   data: () => ({
     //
   }),

client/src/main.ts

@@ -7,11 +7,12 @@ import vuetify from "./plugins/vuetify";
 import './assets/css/styles.scss';
 import VueNativeSock from "vue-native-websocket";
 
+//Vue.use(VueNativeSock, 'ws://192.168.1.101:3001/v1/ws', {
 Vue.use(VueNativeSock, 'ws://127.0.0.1:3000/v1/ws', {
     store: store,
     format: 'json',
     reconnection: true, // (Boolean) whether to reconnect automatically (false)
-    reconnectionAttempts: 5, // (Number) number of reconnection attempts before giving up (Infinity),
+    //reconnectionAttempts: 5, // (Number) number of reconnection attempts before giving up (Infinity),
     reconnectionDelay: 3000,
 })
 

client/src/store/index.ts

@@ -24,16 +24,13 @@ export default new Vuex.Store({
   modules: {},
   mutations: {
     close_notification(state, id) {
-      console.log("deleting notification with ID", id)
-      console.log("current count", state.notifications.length)
       state.notifications = state.notifications.filter(n => n.id !== id);
-      console.log("count after deletion", state.notifications.length)
     },
     SOCKET_ONOPEN (state, event)  {
       Vue.prototype.$socket = event.currentTarget
       state.socket.isConnected = true
     },
-    SOCKET_ONCLOSE (state, event)  {
+    SOCKET_ONCLOSE (state)  {
       state.socket.isConnected = false
     },
     SOCKET_ONERROR (state, event)  {
@@ -55,7 +52,9 @@ export default new Vuex.Store({
           break;
         case "SYSTEM-NOTIFICATION":
           console.log("received system notification", message.data)
-          window.ipc.send('synchronous-message', message.data);
+          if (window.ipc !== undefined) {
+            window.ipc.send('synchronous-message', message.data);
+          }
           break;
       }
     },