adding positions code for spatialUI

src/App.vue

@@ -3,7 +3,8 @@
     <router-link to="/">Start</router-link> |
     <router-link to="/credits">Credits</router-link> |
     <router-link to="/collect">Collect</router-link> |
-    <router-link to="/cards">Cards</router-link>
+    <router-link to="/cards">Cards</router-link> |
+    <router-link to="/spatial">Spatial</router-link>
   </div>
   <router-view />
 </template>

src/components/MyNodes.vue

@@ -236,8 +236,10 @@ export default {
       var nodesFiltered = this.myNodes.myNodes.filter(
         (nodes) => nodes.node_deleted == false
       )
+      // this should probably be on the tool bar NOT HERE really
       this.$store.dispatch('getMynodes')
       this.$store.dispatch('getEmoji')
+      this.$store.dispatch('getPositions')
 
       this.myArray = nodesFiltered.reverse()
     },

src/components/OtherNodes.vue

@@ -92,8 +92,6 @@ export default {
       this.nodeid = nodeid
     },
     handleEmojiClick(nodeid, detail) {
-      console.log(nodeid)
-
       var unicode = detail.emoji.unicode
       var annotation = detail.emoji.annotation
       var skinTone = detail.skinTone

src/components/SpaceBase.vue

+<template>
+  <div></div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { mapState } from 'vuex'
+
+export default {
+  name: 'SpaceBase',
+  components: {},
+  data() {
+    return {}
+  },
+
+  computed: {
+    ...mapState({
+      otherNodes: (state) => state.otherNodes,
+      allEmoji: (state) => state.allEmoji,
+    }),
+  },
+
+  mounted() {
+    this.$store.dispatch('getPositions')
+  },
+}
+</script>
+
+<style scoped></style>

src/router/index.js

@@ -48,6 +48,16 @@ const routes = [
     component: () =>
       import(/* webpackChunkName: "cards" */ '../views/Cards.vue'),
   },
+  {
+    path: '/spatial',
+    name: 'Spatial',
+    beforeEnter: guardMyroute,
+    // route level code-splitting
+    // this generates a separate chunk (credits.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () =>
+      import(/* webpackChunkName: "cards" */ '../views/Spatial.vue'),
+  },
 ]
 
 const router = createRouter({

src/store/modules/allEmoji.js

 var pouchdb
 
 export const state = {
-  docName: 'emojis',
+  docEmoji: 'emojis',
   allEmoji: [],
 }
 
 export const mutations = {
   GET_EMOJI(state) {
     pouchdb
-      .get(state.docName)
+      .get(state.docEmoji)
       .then(function (doc) {
         state.allEmoji = doc.emojis
       })
       .catch(function (err) {
         if (err.status == 404) {
           return pouchdb.put({
-            _id: state.docName,
+            _id: state.docEmoji,
             emojis: [],
           })
         }
@@ -25,7 +25,7 @@ export const mutations = {
     var uniqueid =
       Math.random().toString(36).substring(2, 15) +
       Math.random().toString(36).substring(2, 15)
-    pouchdb.get(state.docName).then(function (doc) {
+    pouchdb.get(state.docEmoji).then(function (doc) {
       doc.emojis.push({
         emoji_id: uniqueid,
         node_id: e.nodeid,
@@ -36,7 +36,7 @@ export const mutations = {
       })
       return pouchdb
         .put({
-          _id: state.docName,
+          _id: state.docEmoji,
           _rev: doc._rev,
           emojis: doc.emojis,
         })

src/store/modules/allPositions.js

+var pouchdb
+
+export const state = {
+  docPositions: 'positions',
+  allPositions: [],
+}
+
+export const mutations = {
+  GET_POSITIONS(state) {
+    pouchdb
+      .get(state.docPositions)
+      .then(function (doc) {
+        state.allPositions = doc.positions
+      })
+      .catch(function (err) {
+        console.log(err)
+        if (err.status == 404) {
+          return pouchdb.put({
+            _id: state.docPositions,
+            positions: [],
+          })
+        }
+      })
+  },
+
+  UPDATE_POSTION(state, e) {
+    var i
+    for (i = 0; i < Object.keys(state.allPositions).length; i++) {
+      if (e.nodeid == state.allPositions[i].node_id) {
+        state.allPositions[i].node_x = e.x
+        state.allPositions[i].node_y = e.y
+        state.allPositions[i].node_width = e.width
+        state.allPositions[i].node_height = e.height
+        state.allPositions[i].node_zindex = e.zindex
+      }
+    }
+
+    pouchdb
+      .get(state.docPositions)
+      .then(function (doc) {
+        return pouchdb.bulkDocs([
+          {
+            _id: state.docPositions,
+            _rev: doc._rev,
+            positions: state.allPositions,
+          },
+        ])
+      })
+      .then(function () {
+        return pouchdb.get(state.global_pos_name).then(function (doc) {
+          state.allPositions = doc.positions
+        })
+      })
+      .catch(function (err) {
+        if (err.status == 404) {
+          // pouchdb.put({  })
+        }
+      })
+  },
+}
+
+export const actions = {
+  getPositions: ({ commit }) => {
+    commit('GET_POSITIONS')
+  },
+  // movePos: ({ commit }, nodeid, xpos, ypos, width, height, zindex) => {
+  //   commit('MOVE_POS', nodeid, xpos, ypos, width, height, zindex)
+  // },
+  getMicrocosm(vuexContext) {
+    pouchdb = vuexContext.rootState.setup.pouchdb
+  },
+}
+
+export const getters = {}

src/store/modules/mynodes.js

 var pouchdb
 var deviceName
-//var microcosmName
-// var e
+var docPositions
 
 export const state = {
   myNodes: [],
@@ -52,6 +51,26 @@ export const mutations = {
               console.log(err)
             })
         })
+        pouchdb.get(docPositions).then(function (doc) {
+          doc.positions.push({
+            node_id: uniqueid,
+            node_x: 0,
+            node_y: 0,
+            node_width: 200,
+            node_height: 370,
+            node_zindex: 0,
+            node_sort: 0,
+          })
+          return pouchdb
+            .put({
+              _id: state.allPos,
+              _rev: doc._rev,
+              positions: doc.positions,
+            })
+            .catch(function (err) {
+              console.log(err)
+            })
+        })
       })
       .catch(function (err) {
         // HITS a 404 on very first node being created
@@ -93,9 +112,11 @@ export const mutations = {
             .catch(function (err) {
               console.log(err)
             })
+          // ADD POSITIONS CODE HERE ONCE WORKING
         }
       })
   },
+
   GET_MY_NODES() {
     pouchdb
       .get(deviceName)
@@ -325,18 +346,8 @@ export const actions = {
 
   getMicrocosm(vuexContext) {
     deviceName = vuexContext.rootState.setup.deviceName
-    // microcosmName = vuexContext.rootState.setup.microcosmName
     pouchdb = vuexContext.rootState.setup.pouchdb
-
-    // if (deviceName == '') {
-    //   vuexContext.dispatch('setMicrocosm', e, { root: true })
-    // } else {
-    //   //
-    //   this.microcosm = microcosmName
-    //   this.deviceName = deviceName
-    //   e = (this.devicename, this.microcosm)
-    //   // this.pouchdb = pouchdb
-    // }
+    docPositions = vuexContext.rootState.allPositions.docPositions
   },
 }
 

src/store/modules/otherNodes.js

 var pouchdb
 var deviceName
-var docName
+var docEmoji
+var docPositions
 
 export const state = {
   allNodes: [],
@@ -30,7 +31,8 @@ export const mutations = {
     for (i = 0; i < Object.keys(state.allNodes).length; i++) {
       if (
         state.allNodes[i].id != deviceName &&
-        state.allNodes[i].id != docName
+        state.allNodes[i].id != docEmoji &&
+        state.allNodes[i].id != docPositions
       ) {
         for (j = 0; j < Object.keys(state.allNodes[i].doc.nodes).length; j++) {
           const newNode = {
@@ -59,7 +61,8 @@ export const actions = {
   getMicrocosm(vuexContext) {
     deviceName = vuexContext.rootState.setup.deviceName
     pouchdb = vuexContext.rootState.setup.pouchdb
-    docName = vuexContext.rootState.allEmoji.docName
+    docEmoji = vuexContext.rootState.allEmoji.docEmoji
+    docPositions = vuexContext.rootState.allPositions.docPositions
   },
 }
 

src/store/modules/setup.js

@@ -72,6 +72,7 @@ export const actions = {
     pouchdb.replicate.from(remote).on('complete', function () {
       // GET_MYNODES from myNodes.js ACTION
       vuexContext.dispatch('getMynodes', null, { root: true })
+      // vuexContext.dispatch('getPositions', null, { root: true })
       pouchdb
         .sync(state.remoteAddress, {
           live: true,
@@ -80,6 +81,8 @@ export const actions = {
         })
         .on('change', function () {
           vuexContext.dispatch('getOthernodes', null, { root: true })
+          //  vuexContext.dispatch('getEmoji', null, { root: true })
+          //  vuexContext.dispatch('getPositions', null, { root: true })
         })
         .on('paused', function () {})
         .on('active', function () {

src/store/store.js

@@ -4,16 +4,15 @@ import * as setup from '@/store/modules/setup.js'
 import * as myNodes from '@/store/modules/myNodes.js'
 import * as otherNodes from '@/store/modules/otherNodes.js'
 import * as allEmoji from '@/store/modules/allEmoji.js'
+import * as allPositions from '@/store/modules/allPositions.js'
 
 export const store = createStore({
-  //
   modules: {
     setup,
     myNodes,
     otherNodes,
     allEmoji,
+    allPositions,
   },
-
-  actions: {},
 })
 export default store

src/views/Spatial.vue

+<template>
+  <ToolBar @added-node="addedNode" />
+  <SpaceBase />
+</template>
+
+<script>
+// @ is an alias to /src
+import ToolBar from '@/components/ToolBar.vue'
+import SpaceBase from '@/components/SpaceBase.vue'
+
+export default {
+  mounted() {},
+  name: 'Spatial',
+
+  components: {
+    ToolBar,
+    SpaceBase,
+  },
+
+  data() {
+    return {
+      added: false,
+    }
+  },
+}
+</script>
+
+<style scoped></style>