starting to add exit and offline

app/src/experimental/ModeToolbar.vue

@@ -15,11 +15,16 @@
 </template>
 
 <script>
+var serverUrl = 'https://nodenogg.in'
 import { mapState, mapGetters } from 'vuex'
 
 import * as allModes from '@/experimental/modes'
 
 export default {
+  mounted() {
+    window.addEventListener('online', this.handleConnection)
+    window.addEventListener('offline', this.handleConnection)
+  },
   computed: {
     ...mapState({
       mode: (state) => state.ui.mode,
@@ -34,6 +39,50 @@ export default {
     },
     isActive(mode) {
       return this.mode === mode.name
+
+      // if (mode.name == 'exit') {
+      //   console.log('exit')
+      // }
+    },
+
+    removeLocal: function () {
+      localStorage.removeItem('myNNClient')
+      localStorage.removeItem('mylastMicrocosm')
+
+      location.assign(
+        process.env.VUE_APP_HTTP + '://' + process.env.VUE_APP_URL + '/'
+      )
+    },
+
+    handleConnection: function () {
+      var ref = this
+      if (navigator.onLine) {
+        this.isReachable(this.getServerUrl()).then(function (online) {
+          if (online) {
+            // handle online status
+            console.log('online')
+            location.reload()
+          } else {
+            console.log('no connectivity')
+          }
+        })
+      } else {
+        // handle offline status
+        console.log('offline')
+        ref.$emit('offlineTriggered')
+      }
+    },
+    isReachable: function (url) {
+      return fetch(url, { method: 'HEAD', mode: 'no-cors' })
+        .then(function (resp) {
+          return resp && (resp.ok || resp.type === 'opaque')
+        })
+        .catch(function (err) {
+          console.warn('[conn test failure]:', err)
+        })
+    },
+    getServerUrl: function () {
+      return serverUrl || window.location.origin
     },
   },
   data() {

app/src/experimental/modes/index.js

@@ -63,3 +63,14 @@ export const upload = {
   cursor: 'copy',
   shortcut: false,
 }
+
+export const exit = {
+  name: 'exit',
+  view: {
+    pan: false,
+    zoom: false,
+  },
+  icon: 'exit',
+  cursor: 'initial',
+  shortcut: false,
+}

app/src/views/Sandbox.vue

@@ -11,19 +11,22 @@
       v-bind:scale="scale"
       v-bind:translation="translation"
     >
-      <OtherNodeslayer
-        v-for="value in otherNodes"
-        v-bind:key="value.node_id"
-        v-bind:nodeid="value.node_id"
-        v-bind:nodetext="value.node_text"
-      />
-      <NodesLayer
-        @editTrue="(e) => editTrue(e)"
-        v-for="value in myNodes"
-        v-bind:key="value.node_id"
-        v-bind:nodeid="value.node_id"
-        v-bind:nodetext="value.node_text"
-      />
+      <div v-if="clientset">
+        <OtherNodeslayer
+          v-for="value in otherNodes"
+          v-bind:key="value.node_id"
+          v-bind:nodeid="value.node_id"
+          v-bind:nodetext="value.node_text"
+        />
+        <NodesLayer
+          @editTrue="(e) => editTrue(e)"
+          v-for="value in myNodes"
+          v-bind:key="value.node_id"
+          v-bind:nodeid="value.node_id"
+          v-bind:nodetext="value.node_text"
+        />
+      </div>
+      <OnBoard v-else @clientAdded="clientAdded()" />
     </PanZoomContainer>
     <!-- <SelectionLayer
       v-if="domContainerReady"
@@ -41,6 +44,7 @@ import PanZoomContainer from '@/experimental/PanZoomContainer'
 import ConnectionsLayer from '@/experimental/layers/ConnectionsLayer'
 import NodesLayer from '@/components/NodesLayer'
 import OtherNodeslayer from '@/components/OtherNodeslayer.vue'
+import OnBoard from '@/components/OnBoard.vue'
 import ModeToolbar from '@/experimental/ModeToolbar'
 import ViewToolbar from '@/experimental/ViewToolbar'
 // import SelectionLayer from '@/experimental/layers/SelectionLayer'
@@ -56,6 +60,9 @@ export default {
       elementHeight: undefined,
       width: 2000,
       height: 2000,
+      clientset: false,
+      listview: false,
+      offline: false,
     }
   },
   computed: {
@@ -103,14 +110,27 @@ export default {
       this.elementHeight = offsetHeight
     },
 
+    clientAdded() {
+      this.clientset = !this.clientset
+    },
+
     editTrue(e) {
       this.$store.dispatch('shortcutState', e)
     },
 
+    
+
     // This is here to support the shortcuts
     addNode() {
       this.$store.dispatch('addNode')
     },
+
+    offlineTriggered() {
+      this.offline = true
+    },
+    onlineTriggered() {
+      this.offline = false
+    },
   },
   components: {
     ModeToolbar,
@@ -120,6 +140,7 @@ export default {
     NodesLayer,
     OtherNodeslayer,
     ConnectionsLayer,
+    OnBoard,
   },
 }
 </script>