Commit 30b679e0 authored by Adam Procter's avatar Adam Procter
Browse files

adding positions code for spatialUI

parent 68ee64ae
......@@ -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>
......
......@@ -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()
},
......
......@@ -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
......
<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>
......@@ -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({
......
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,
})
......
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 = {}
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
},
}
......
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
},
}
......
......@@ -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 () {
......
......@@ -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
<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>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment