updated

added readmode to state, added icon for iOS home screen.

app/src/components/NodesLayer.vue

 <template>
   <div ref="nodes" class="node">
-    <div v-for="(value, index) in configPositions" v-bind:key="index">
+    <div v-for="(posvalue, index) in configPositions" v-bind:key="index">
       <div v-if="toolmode == 'move'">
-        <!-- make draggable false as we are panning around -->
         <vue-draggable-resizable
           class="innernode"
-          v-if="nodeid == value.node_id"
-          :w="value.width"
-          :h="value.height"
-          :x="value.x_pos"
-          :y="value.y_pos"
-          :z="value.z_index"
+          v-if="nodeid == posvalue.node_id"
+          :w="posvalue.width"
+          :h="posvalue.height"
+          :x="posvalue.x_pos"
+          :y="posvalue.y_pos"
+          :z="posvalue.z_index"
           :draggable="false"
           style="background-color: rgb(205, 234, 255);"
         >
           <form>
-            <!-- <div v-if="readmode == false"> -->
-            <div v-for="value in myNodes" v-bind:key="value.node_id">
-              <div v-if="value.readmode == false">
+            <div v-if="posvalue.read_mode == false">
+              <div v-for="value in myNodes" v-bind:key="value.node_id">
                 <textarea
                   v-if="nodeid == value.node_id"
                   @focus="editTrue(true)"
@@ -31,11 +29,11 @@
                   placeholder="Idea goes here!"
                 ></textarea>
               </div>
-              <!-- FIXME: What is this doing below now ? Looks old -->
-              <div v-else>
-                <p :id="nodeid" :inner-html.prop="nodetext | marked"></p>
-              </div>
             </div>
+            <div v-if="posvalue.read_mode == true">
+              <p :id="nodeid" :inner-html.prop="nodetext | marked"></p>
+            </div>
+
             <h3>Reactions</h3>
 
             <div v-for="(emojis, index) in configEmoji" :key="index">
@@ -49,26 +47,38 @@
               <BaseButton buttonClass="danger" @click="deleteFlag()"
                 >Delete</BaseButton
               >
-              <BaseButton
-                class="read"
-                buttonClass="action"
-                @click="readFlag()"
-                >{{ mode }}</BaseButton
-              >
+              <div v-if="posvalue.read_mode == true">
+                <BaseButton
+                  class="read"
+                  buttonClass="action"
+                  @click="readFlag()"
+                  >Edit
+                </BaseButton>
+              </div>
+              <div v-else>
+                <BaseButton
+                  class="read"
+                  buttonClass="action"
+                  @click="readFlag()"
+                  >Read</BaseButton
+                >
+              </div>
             </div>
           </form>
         </vue-draggable-resizable>
       </div>
 
+      <!-- Same code as above when in any other mode other than move so you can drag nodes-->
+
       <div v-else>
         <vue-draggable-resizable
           class="innernode"
-          v-if="nodeid == value.node_id"
-          :w="value.width"
-          :h="value.height"
-          :x="value.x_pos"
-          :y="value.y_pos"
-          :z="value.z_index"
+          v-if="nodeid == posvalue.node_id"
+          :w="posvalue.width"
+          :h="posvalue.height"
+          :x="posvalue.x_pos"
+          :y="posvalue.y_pos"
+          :z="posvalue.z_index"
           @activated="onActivated"
           @dragging="onDrag"
           @resizing="onResize"
@@ -78,8 +88,8 @@
           style="background-color: rgb(205, 234, 255);"
         >
           <form>
-            <div v-for="value in myNodes" v-bind:key="value.node_id">
-              <div v-if="value.readmode == false">
+            <div v-if="posvalue.read_mode == false">
+              <div v-for="value in myNodes" v-bind:key="value.node_id">
                 <textarea
                   v-if="nodeid == value.node_id"
                   @focus="editTrue(true)"
@@ -93,15 +103,11 @@
                   placeholder="Idea goes here!"
                 ></textarea>
               </div>
-
-              <!-- </div> -->
-              <!-- FIXME: What is this doing below now ? Looks old -->
-              <div v-else>
-                <p :id="nodeid" :inner-html.prop="nodetext | marked">
-                  <!-- {{ nodeid }} -->
-                </p>
-              </div>
             </div>
+            <div v-if="posvalue.read_mode == true">
+              <p :id="nodeid" :inner-html.prop="nodetext | marked"></p>
+            </div>
+
             <h3>Reactions</h3>
 
             <div v-for="(emojis, index) in configEmoji" :key="index">
@@ -115,12 +121,22 @@
               <BaseButton buttonClass="danger" @click="deleteFlag()"
                 >Delete</BaseButton
               >
-              <BaseButton
-                class="read"
-                buttonClass="action"
-                @click="readFlag()"
-                >{{ mode }}</BaseButton
-              >
+              <div v-if="posvalue.read_mode == true">
+                <BaseButton
+                  class="read"
+                  buttonClass="action"
+                  @click="readFlag()"
+                  >Edit
+                </BaseButton>
+              </div>
+              <div v-else>
+                <BaseButton
+                  class="read"
+                  buttonClass="action"
+                  @click="readFlag()"
+                  >Read</BaseButton
+                >
+              </div>
             </div>
           </form>
         </vue-draggable-resizable>
@@ -143,14 +159,13 @@ export default {
     nodewidth: Number,
     nodeheight: Number,
     deleted: Boolean,
-    readmode: Boolean,
   },
 
   data() {
     return {
       pickupz: 99,
-      // localreadmode: this.readmode,
-      mode: 'Read',
+      localreadmode: false,
+      mode: '',
     }
   },
 
@@ -261,7 +276,14 @@ export default {
     readFlag(e) {
       e = this.nodeid
 
-      if (readmode == true) {
+      var i
+      for (i = 0; i < Object.keys(this.configPositions).length; i++) {
+        if (this.configPositions[i].node_id == this.nodeid) {
+          this.localreadmode = this.configPositions[i].read_mode
+        }
+      }
+
+      if (this.localreadmode == true) {
         readmode = false
         this.$store.dispatch('readFlag', { e, readmode })
         this.mode = 'Read'

app/src/store/index.js

@@ -185,7 +185,6 @@ const store = new Vuex.Store({
                   content_type: 'sheet',
                   // NOTE: first node is hidden due to no position
                   deleted: true,
-                  readmode: false,
                   attachment_name: '',
                 },
               ],
@@ -325,7 +324,6 @@ const store = new Vuex.Store({
             node_owner: state.myclient,
             content_type: 'sheet',
             deleted: false,
-            readmode: false,
             attachment_name: e,
           })
         }
@@ -363,6 +361,7 @@ const store = new Vuex.Store({
           width: 200,
           height: 275,
           z_index: 1,
+          read_mode: false,
         })
         return pouchdb
           .put({
@@ -443,27 +442,29 @@ const store = new Vuex.Store({
 
     READ_FLAG(state, e) {
       var i
-      for (i = 0; i < Object.keys(state.myNodes).length; i++) {
-        if (e.e == state.myNodes[i].node_id) {
-          state.myNodes[i].readmode = e.readmode
+      console.log(e.e)
+      for (i = 0; i < Object.keys(state.configPositions).length; i++) {
+        if (e.e == state.configPositions[i].node_id) {
+          state.configPositions[i].read_mode = e.readmode
         }
       }
+
       pouchdb
-        .get(state.myclient)
+        .get(state.global_pos_name)
         .then(function (doc) {
+          //  console.log(doc)
           // put the store into pouchdb
           return pouchdb.bulkDocs([
             {
-              _id: state.myclient,
+              _id: state.global_pos_name,
               _rev: doc._rev,
-              _attachments: doc._attachments,
-              nodes: state.myNodes,
+              positions: state.configPositions,
             },
           ])
         })
         .then(function () {
-          return pouchdb.get(state.myclient).then(function (doc) {
-            state.myNodes = doc.nodes
+          return pouchdb.get(state.global_pos_name).then(function (doc) {
+            state.configPositions = doc.positions
           })
         })
         .catch(function (err) {
@@ -472,6 +473,7 @@ const store = new Vuex.Store({
           }
         })
     },
+
     GET_EMOJI(state) {
       console.log
       pouchdb
@@ -528,7 +530,12 @@ const store = new Vuex.Store({
         store.commit('GET_EMOJI')
         // turn on two-way, continuous, retriable sync
         pouchdb
-          .sync(remote, { live: true, retry: true, attachments: true })
+          .sync(remote, {
+            live: true,
+            since: 'now',
+            retry: true,
+            attachments: true,
+          })
           .on('change', function () {
             // pop info into function to find out more
             store.commit('GET_ALL_NODES')
@@ -550,7 +557,6 @@ const store = new Vuex.Store({
           })
           .on('complete', function () {
             // handle complete
-            //console.log('complete')
           })
           .on('error', function (err) {
             console.log(err)
@@ -567,7 +573,10 @@ const store = new Vuex.Store({
     movePos: ({ commit }, nodeid, xpos, ypos, width, height, zindex) => {
       commit('MOVE_POS', nodeid, xpos, ypos, width, height, zindex)
     },
-
+    readFlag: ({ commit }, e) => {
+      // var text = e.target.value
+      commit('READ_FLAG', e)
+    },
     addNode: ({ commit }, e) => {
       commit('ADD_NODE', e)
     },
@@ -597,10 +606,7 @@ const store = new Vuex.Store({
       // var text = e.target.value
       commit('DELETE_FLAG', e)
     },
-    readFlag: ({ commit }, e) => {
-      // var text = e.target.value
-      commit('READ_FLAG', e)
-    },
+
     addEmoji: ({ commit }, { nodeid, emojitext }) => {
       commit('ADD_EMOJI', {
         nodeid,

app/src/views/Sandbox.vue

@@ -24,7 +24,7 @@
         v-bind:key="value.node_id"
         v-bind:nodeid="value.node_id"
         v-bind:nodetext="value.node_text"
-        v-bind:readmode="value.readmode"
+     
       />
     </PanZoomContainer>
     <!-- <SelectionLayer