added simple support if you are offline

Need to check regards to starting offline but this will work if you go offline...

app/src/components/OffLine.vue

@@ -2,51 +2,60 @@
 
 <template>
   <div class="yourdata" name="anchorName">
-    <h2>Offline</h2>
-    <p>
-      nodenogg.in appears to be offline, which means you cant see other data at
-      this stage, as it maybe out of date. Once you reconnect. Your data will
-      sync and the main views will reappear. This maybe down to you or maybe us.
-      If you think it us click Support at the top, and let us know
-    </p>
-    <h3>List - Your Data</h3>
-    <ul class="data">
-      <!-- tips -->
-      <!-- : is short for v-bind -->
-      <!-- v-if="note.content_type != 'device'" -->
-      <li v-for="(note, index) in notes" :key="index">
-        <p v-if="note.content_type != 'device'">{{ note.text }}</p>
-      </li>
-    </ul>
+    <div v-for="value in myNodes" v-bind:key="value.node_id">
+      <textarea
+        v-if="nodeid == value.node_id"
+        @focus="editTrue(true)"
+        @blur="editTrue(false)"
+        autofocus
+        @input="editNode"
+        v-model="value.node_text"
+        :id="nodeid"
+        class="drag-cancel"
+        ref="nodetext"
+        placeholder="Idea goes here!"
+      ></textarea>
+    </div>
+
+    <div class="btn-row">
+      <BaseButton buttonClass="danger" @click="deleteFlag()">Delete</BaseButton>
+    </div>
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import { shortcuts } from './mixins/shortcuts.js'
 
 export default {
-  name: 'YourData',
-  mixins: [shortcuts],
+  name: 'OffLine',
   computed: mapState({
-    shortcutsstate: (state) => state.shortcutsstate,
-    notes: (state) => state.notes,
+    myNodes: (state) => state.myNodes,
   }),
-  created() {
-    if (typeof window !== 'undefined') {
-      document.addEventListener('keydown', this.handleKeyPress)
-    }
-  },
-  beforeDestroy() {
-    if (typeof window !== 'undefined') {
-      document.removeEventListener('keydown', this.handleKeyPress)
-    }
+
+  props: {
+    nodeid: String,
   },
+
   methods: {
     addDoc() {
       this.$store.dispatch('addDoc')
       this.$emit('editMode')
     },
+    editTrue(e) {
+      this.$emit('editTrue', e)
+      //console.log(e)
+    },
+
+    editNode(e) {
+      var nodeid = e.target.id
+      var nodetext = e.target.value
+      this.$store.dispatch('editNode', { nodeid, nodetext })
+    },
+
+    deleteFlag(e) {
+      e = this.nodeid
+      this.$store.dispatch('deleteFlag', { e })
+    },
   },
 }
 </script>

app/src/views/Home.vue

 <template>
-  <div ref="container" class="wrapper" v-bind:style="modeContainerStyle">
-    <ConnectionsLayer
-      v-bind:width="width"
-      v-bind:height="height"
-      v-bind:connections="connections"
-    />
-    <PanZoomContainer
-      v-bind:width="width"
-      v-bind:height="height"
-      v-bind:scale="scale"
-      v-bind:translation="translation"
-    >
-      <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)"
+  <div>
+    <div class="offline" v-if="clientset && offline">
+      <div ref="container" class="wrapper" v-bind:style="modeContainerStyle">
+        <h2>Offline</h2>
+        <p>
+          nodenogg.in appears to be offline, which means you cant see other data
+          at this stage, as it maybe out of date. Once you reconnect. Your data
+          will sync and the main views will reappear. This maybe down to you or
+          maybe us. If you think it's us let us know.
+        </p>
+        <OffLine
           v-for="value in myNodes"
           v-bind:key="value.node_id"
           v-bind:nodeid="value.node_id"
           v-bind:nodetext="value.node_text"
+          @editTrue="(e) => editTrue(e)"
+        />
+        <ModeToolbar
+          @offlineTriggered="offlineTriggered()"
+          @onlineTriggered="onlineTriggered()"
+        />
+        <ViewToolbar />
+
+        <!-- <OnBoard v-else @clientAdded="clientAdded()" /> -->
+      </div>
+    </div>
+
+    <div class="online" v-else>
+      <div ref="container" class="wrapper" v-bind:style="modeContainerStyle">
+        <ConnectionsLayer
+          v-bind:width="width"
+          v-bind:height="height"
+          v-bind:connections="connections"
+        />
+        <PanZoomContainer
+          v-bind:width="width"
+          v-bind:height="height"
+          v-bind:scale="scale"
+          v-bind:translation="translation"
+        >
+          <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>
+
+        <ModeToolbar
+          @offlineTriggered="offlineTriggered()"
+          @onlineTriggered="onlineTriggered()"
         />
+        <ViewToolbar />
       </div>
-      <OnBoard v-else @clientAdded="clientAdded()" />
-    </PanZoomContainer>
-    <!-- <SelectionLayer
-      v-if="domContainerReady"
-      v-bind:shape="interaction.shape"
-      v-bind:width="elementWidth"
-      v-bind:height="elementHeight"
-    /> -->
-    <ModeToolbar
-      @offlineTriggered="offlineTriggered()"
-      @onlineTriggered="onlineTriggered()"
-    />
-    <ViewToolbar />
+    </div>
   </div>
 </template>
 
@@ -46,6 +72,7 @@
 import PanZoomContainer from '@/experimental/PanZoomContainer'
 import ConnectionsLayer from '@/experimental/layers/ConnectionsLayer'
 import NodesLayer from '@/components/NodesLayer'
+import OffLine from '@/components/OffLine'
 import OtherNodeslayer from '@/components/OtherNodeslayer.vue'
 import OnBoard from '@/components/OnBoard.vue'
 import ModeToolbar from '@/experimental/ModeToolbar'
@@ -142,6 +169,7 @@ export default {
     OtherNodeslayer,
     ConnectionsLayer,
     OnBoard,
+    OffLine,
   },
 }
 </script>