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 0834db29e3a36b8230fa24650a75a31f180683b9..e7bb42028e7b9f32c32b84263137c85d4ac5701d 100644
--- a/src/components/MyNodes.vue
+++ b/src/components/MyNodes.vue
@@ -62,6 +62,17 @@
v-html="marked(nodes.node_text)"
></p>
<button @click.prevent="toggleMode(nodes.node_id)">Edit</button>
+ <div class="allemoji">
+ <div
+ class="eachemoji"
+ v-for="(emojis, index) in allEmoji.allEmoji"
+ :key="index"
+ >
+ <p v-if="nodes.node_id == emojis.node_id">
+ {{ emojis.emoji_unicode }}
+ </p>
+ </div>
+ </div>
</template>
</form>
</div>
@@ -111,6 +122,7 @@ export default {
computed: {
...mapState({
myNodes: (state) => state.myNodes,
+ allEmoji: (state) => state.allEmoji,
}),
},
@@ -121,11 +133,15 @@ export default {
},
mounted() {
+ // this.$store.dispatch('getEmoji')
+ // this.$store.dispatch('getPositions')
setTimeout(this.loadData, 500)
if (localStorage.nogg_name && localStorage.nogg_microcosm) {
var devicename = localStorage.nogg_name
var microcosm = localStorage.nogg_microcosm
this.$store.dispatch('setMicrocosm', { devicename, microcosm })
+ // this.$store.dispatch('getEmoji')
+ // this.$store.dispatch('getPositions')
} else {
console.log('no')
// go home
@@ -224,7 +240,11 @@ 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()
},
@@ -319,4 +339,11 @@ textarea {
img {
width: 45%;
}
+
+.allemoji {
+ font-size: 1.5em;
+ padding: 0em;
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(0, auto));
+}
</style>
diff --git a/src/components/OtherNodes.vue b/src/components/OtherNodes.vue
index bc479b76c2471bc5e89a80bb5aaab4ac30dd4751..60e529dae2adab9577c04be313dfca64b5a02990 100644
--- a/src/components/OtherNodes.vue
+++ b/src/components/OtherNodes.vue
@@ -80,6 +80,7 @@ export default {
mounted() {
this.$store.dispatch('getOthernodes')
+ this.$store.dispatch('getEmoji')
setTimeout(this.loadData, 500)
// this is to get the last letter typed if no space
// this also loads in new Emoji
@@ -92,8 +93,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
@@ -106,6 +105,7 @@ export default {
skinTone,
emoticon,
})
+ this.$store.dispatch('getEmoji')
},
openEmoji(nodeid) {
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..75ef6a02fa65aea4cb1064ed59a23a857cc1b7d9 100644
--- a/src/store/modules/mynodes.js
+++ b/src/store/modules/mynodes.js
@@ -1,7 +1,7 @@
var pouchdb
var deviceName
-//var microcosmName
-// var e
+
+var docPositions
export const state = {
myNodes: [],
@@ -52,6 +52,28 @@ 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,
+ node_radius: 0,
+ node_shape: 0,
+ })
+ return pouchdb
+ .put({
+ _id: docPositions,
+ _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 +115,30 @@ export const mutations = {
.catch(function (err) {
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: docPositions,
+ _rev: doc._rev,
+ positions: doc.positions,
+ })
+ .catch(function (err) {
+ console.log(err)
+ })
+ })
}
})
},
+
GET_MY_NODES() {
pouchdb
.get(deviceName)
@@ -325,18 +368,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..0bc76e45c34963beb36300102d20c234b4da8b77 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: [],
@@ -26,11 +27,13 @@ export const mutations = {
state.otherNodes = []
var i
var j
-
+ // console.log(docEmoji)
+ // console.log(docPositions)
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 +62,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>