diff --git a/src/App.vue b/src/App.vue
index 51348403595d347adeb67541776e3ab7ec0bf9bf..697c58a944e0c0ae404fffceaf2f69e8f24a3d00 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/MyNodes.vue b/src/components/MyNodes.vue
index 12c293ed91b2c81ef268ee8b89ed7a72cfe193f9..b30273bdf1f00bd47e7d525838fdd6f57313c319 100644
--- a/src/components/MyNodes.vue
+++ b/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()
},
diff --git a/src/components/OtherNodes.vue b/src/components/OtherNodes.vue
index 992750d756b6e2489fb2bd922dff7778dfa533af..7edaccd7102ffe40e03cea655658ecdaea85c644 100644
--- a/src/components/OtherNodes.vue
+++ b/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
diff --git a/src/components/SpaceBase.vue b/src/components/SpaceBase.vue
new file mode 100644
index 0000000000000000000000000000000000000000..594e1b826833e7c5718fa462f77f6812095849ce
--- /dev/null
+++ b/src/components/SpaceBase.vue
@@ -0,0 +1,29 @@
+<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>
diff --git a/src/router/index.js b/src/router/index.js
index 4b4af3d2d76d8f7ad3b9b4aa7e18eab1017faafd..48e6aaf566378c57dec7919a37cd563ff0c237e8 100644
--- a/src/router/index.js
+++ b/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({
diff --git a/src/store/modules/allEmoji.js b/src/store/modules/allEmoji.js
index c55aa6b3ec830517cf041f3466057677db438152..b389ecaeedc1aa3bbe925c6a8bf035c39f7b0ed2 100644
--- a/src/store/modules/allEmoji.js
+++ b/src/store/modules/allEmoji.js
@@ -1,21 +1,21 @@
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,
})
diff --git a/src/store/modules/allPositions.js b/src/store/modules/allPositions.js
new file mode 100644
index 0000000000000000000000000000000000000000..f06cfc9e28699a789b2aa49b25b604168a6fbbe0
--- /dev/null
+++ b/src/store/modules/allPositions.js
@@ -0,0 +1,74 @@
+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 = {}
diff --git a/src/store/modules/mynodes.js b/src/store/modules/mynodes.js
index be44fe7abb5c7c9d47ba44a0d79633d7602d9ec6..d8d86f0d9d3e87c22ab9bf35fa19156f4fd705fb 100644
--- a/src/store/modules/mynodes.js
+++ b/src/store/modules/mynodes.js
@@ -1,7 +1,6 @@
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
},
}
diff --git a/src/store/modules/otherNodes.js b/src/store/modules/otherNodes.js
index a275d97fa7ad6d164395668f7c2a1f446f5fc4a4..645ba6c2516d8d8e14c767e82f5e2fac1c2ac326 100644
--- a/src/store/modules/otherNodes.js
+++ b/src/store/modules/otherNodes.js
@@ -1,6 +1,7 @@
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
},
}
diff --git a/src/store/modules/setup.js b/src/store/modules/setup.js
index bc8b33ff44f3c7fb5064bf150e946ea67ee32316..46595b6c3e625155510980a76a83d9355e0e92bd 100644
--- a/src/store/modules/setup.js
+++ b/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 () {
diff --git a/src/store/store.js b/src/store/store.js
index 36304dc680c73db1996359bf21d95983973472b2..0d67e6f25a012499dbb770500a61d4ea0e92f6bd 100644
--- a/src/store/store.js
+++ b/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
diff --git a/src/views/Spatial.vue b/src/views/Spatial.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ffab25a57ec7f9ded67ed9789796647b705a8ea6
--- /dev/null
+++ b/src/views/Spatial.vue
@@ -0,0 +1,28 @@
+<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>