Skip to content
Snippets Groups Projects
Commit a976448d authored by Adam Procter's avatar Adam Procter
Browse files

Merge branch 'futurenogg' into main

parents e25a27b3 026c457b
Branches
No related tags found
No related merge requests found
<template> <template>
<div id="nav"> <div id="nav">
<router-link to="/">Start</router-link> | <router-link to="/">Start</router-link> |
<router-link to="/credits">Credits</router-link> <router-link to="/credits">Credits</router-link> |
<router-link to="/collect">Collect</router-link> |
<router-link to="/cards">Cards</router-link>
</div> </div>
<router-view /> <router-view />
</template> </template>
......
<template> <template>
<div v-for="(nodes, index) in myArray" :key="index"> <div v-for="(nodes, index) in myArray" :key="index">
<form class="nodes"> <form class="nodes">
<template v-if="nodes.node_readmode == false"> <!-- <template v-if="nodes.node_readmode == false"> -->
<textarea <textarea
v-model="nodes.node_text" v-model="nodes.node_text"
@input="editNode" @input="editNode"
...@@ -14,14 +14,14 @@ ...@@ -14,14 +14,14 @@
<button>Colour</button> <button>Colour</button>
<button>Read</button> <button>Read</button>
<button>Discard</button> <button>Discard</button>
</template> <!-- </template>
<template v-else> <template v-else>
<p <p
class="readmode" class="readmode"
:id="nodes.node_id" :id="nodes.node_id"
:inner-html.prop="nodes.node_text" :inner-html.prop="nodes.node_text"
></p> ></p>
</template> </template> -->
</form> </form>
</div> </div>
</template> </template>
...@@ -47,14 +47,14 @@ export default { ...@@ -47,14 +47,14 @@ export default {
computed: { computed: {
...mapState({ ...mapState({
// TODO: Can you filter here instead ?
myNodes: (state) => state.myNodes, myNodes: (state) => state.myNodes,
}), }),
},
watch: {
added: function () {
setTimeout(this.loadData, 500)
nodesFiltered: function () {
return this.myNodes.myNodes.filter((nodes) => {
return nodes.node_deleted == false
})
}, },
}, },
...@@ -73,13 +73,21 @@ export default { ...@@ -73,13 +73,21 @@ export default {
}, },
methods: { methods: {
emptyData() {
if (this.myNodes.myNodes == 0) {
/// that
} else {
// this
}
},
loadData() { loadData() {
// console.log('loading data')
var nodesFiltered = this.myNodes.myNodes.filter( var nodesFiltered = this.myNodes.myNodes.filter(
(nodes) => nodes.node_deleted == false (nodes) => nodes.node_deleted == false
) )
this.$store.dispatch('getMynodes') this.$store.dispatch('getMynodes')
this.myArray = nodesFiltered.reverse() this.myArray = nodesFiltered.reverse()
// console.log(this.myArray.length)
}, },
editNode(e) { editNode(e) {
......
<template>
<div
class="nodes"
v-for="(nodes, index) in otherNodes.otherNodes"
:key="index"
>
<p class="readmode" :id="nodes.id">
{{ nodes.text }}
</p>
</div>
</template>
<script>
// @ is an alias to /src
import { mapState } from 'vuex'
// import marked from 'marked'
export default {
name: 'OtherNodes',
computed: {
...mapState({
otherNodes: (state) => state.otherNodes,
}),
},
mounted() {
this.$store.dispatch('getOthernodes')
setTimeout(this.loadData, 500)
setInterval(this.loadData, 5000)
},
methods: {
loadData() {
this.$store.dispatch('setOthernodes')
},
},
}
</script>
<style scoped>
.nodes {
width: 95%;
background-color: rgb(155, 194, 216);
margin-top: 1em;
margin-left: 0.5em;
}
</style>
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<button>Make Connections</button> <button>Make Connections</button>
<UploadMedia /> <UploadMedia />
<button @click="exitMicrocosm()">Exit</button> <button @click="exitMicrocosm()">Exit</button>
<p>{{ microcosm }}</p>
</div> </div>
</template> </template>
...@@ -19,7 +20,13 @@ export default { ...@@ -19,7 +20,13 @@ export default {
UploadMedia, UploadMedia,
}, },
data() { data() {
return {} return {
microcosm: 'microcosm name',
}
},
mounted() {
this.microcosm = localStorage.getItem('nogg_microcosm')
}, },
mixins: [ mixins: [
...@@ -39,7 +46,6 @@ export default { ...@@ -39,7 +46,6 @@ export default {
this.$store.dispatch('addNode') this.$store.dispatch('addNode')
}, },
exitMicrocosm() { exitMicrocosm() {
localStorage.removeItem('nogg_microcosm') localStorage.removeItem('nogg_microcosm')
localStorage.removeItem('nogg_name') localStorage.removeItem('nogg_name')
......
...@@ -23,7 +23,17 @@ const routes = [ ...@@ -23,7 +23,17 @@ const routes = [
// this generates a separate chunk (credits.[hash].js) for this route // this generates a separate chunk (credits.[hash].js) for this route
// which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
component: () => component: () =>
import(/* webpackChunkName: "credits" */ '../views/Collect.vue'), import(/* webpackChunkName: "collect" */ '../views/Collect.vue'),
},
{
path: '/cards',
name: 'Cards',
// 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/Cards.vue'),
}, },
] ]
......
...@@ -42,6 +42,7 @@ export const mutations = { ...@@ -42,6 +42,7 @@ export const mutations = {
nodeid: state.myNodes[end].node_id, nodeid: state.myNodes[end].node_id,
nodetext: state.myNodes[end].node_text, nodetext: state.myNodes[end].node_text,
} }
// OLD CODE:
// this was to set quick focus on new nodes // this was to set quick focus on new nodes
// i think... need to check old code // i think... need to check old code
state.activeNode = newNode state.activeNode = newNode
...@@ -53,14 +54,14 @@ export const mutations = { ...@@ -53,14 +54,14 @@ export const mutations = {
}) })
}) })
.catch(function (err) { .catch(function (err) {
// TODO: Does this situation ever hit 404 ? // HITS a 404 on very first node being created
console.log(err)
if (err.status == 404) { if (err.status == 404) {
var uniqueid = var uniqueid =
Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15) +
Math.random().toString(36).substring(2, 15) Math.random().toString(36).substring(2, 15)
pouchdb.put({ pouchdb
.put({
_id: deviceName, _id: deviceName,
nodes: [ nodes: [
{ {
...@@ -75,6 +76,23 @@ export const mutations = { ...@@ -75,6 +76,23 @@ export const mutations = {
}, },
], ],
}) })
.then(function () {
return pouchdb.get(deviceName).then(function (doc) {
state.myNodes = doc.nodes
var end = Object.keys(state.myNodes).length - 1
const newNode = {
nodeid: state.myNodes[end].node_id,
nodetext: state.myNodes[end].node_text,
}
// OLD CODE:
// this was to set quick focus on new nodes
// i think... need to check old code
state.activeNode = newNode
})
})
.catch(function (err) {
console.log(err)
})
} }
}) })
}, },
...@@ -87,13 +105,11 @@ export const mutations = { ...@@ -87,13 +105,11 @@ export const mutations = {
state.myNodes = doc.nodes state.myNodes = doc.nodes
} }
}) })
.catch(function (err) { .catch(function () {
console.log(err) // console.log(err)
}) })
}, },
// TODO: Get other nodes from all other devices
EDIT_NODE(state, e) { EDIT_NODE(state, e) {
var i var i
for (i = 0; i < Object.keys(state.myNodes).length; i++) { for (i = 0; i < Object.keys(state.myNodes).length; i++) {
...@@ -132,8 +148,8 @@ export const actions = { ...@@ -132,8 +148,8 @@ export const actions = {
commit('ADD_NODE', e) commit('ADD_NODE', e)
}, },
getMynodes: ({ commit }, e) => { getMynodes: ({ commit }) => {
commit('GET_MY_NODES', e) commit('GET_MY_NODES')
}, },
editNode: ({ commit }, { nodeid, nodetext }) => { editNode: ({ commit }, { nodeid, nodetext }) => {
......
var pouchdb
var deviceName
export const state = {
allNodes: [],
otherNodes: [],
}
export const mutations = {
GET_ALL_NODES(state) {
pouchdb
.allDocs({
include_docs: true,
attachments: true,
})
.then(function (doc) {
state.allNodes = doc.rows
})
.catch(function (err) {
console.log(err)
})
},
SET_OTHER_NODES(state) {
state.otherNodes = []
var i
var j
for (i = 0; i < Object.keys(state.allNodes).length; i++) {
if (state.allNodes[i].id != deviceName) {
for (j = 0; j < Object.keys(state.allNodes[i].doc.nodes).length; j++) {
const newNode = {
id: state.allNodes[i].doc.nodes[j].node_id,
text: state.allNodes[i].doc.nodes[j].node_text,
deleted: state.allNodes[i].doc.nodes[j].node_deleted,
color: state.allNodes[i].doc.nodes[j].node_color,
}
state.otherNodes.push(newNode)
}
}
}
},
}
export const actions = {
getOthernodes: ({ commit }) => {
commit('GET_ALL_NODES')
commit('SET_OTHER_NODES')
},
setOthernodes: ({ commit }) => {
commit('SET_OTHER_NODES')
},
getMicrocosm(vuexContext) {
deviceName = vuexContext.rootState.setup.deviceName
pouchdb = vuexContext.rootState.setup.pouchdb
},
}
export const getters = {}
...@@ -79,8 +79,7 @@ export const actions = { ...@@ -79,8 +79,7 @@ export const actions = {
retry: true, retry: true,
}) })
.on('change', function () { .on('change', function () {
// console.log('change happened') vuexContext.dispatch('getOthernodes', null, { root: true })
// vuexContext.dispatch('getNodes', null, { root: true })
}) })
.on('paused', function () {}) .on('paused', function () {})
.on('active', function () { .on('active', function () {
......
...@@ -2,12 +2,14 @@ import { createStore } from 'vuex' ...@@ -2,12 +2,14 @@ import { createStore } from 'vuex'
import * as setup from '@/store/modules/setup.js' import * as setup from '@/store/modules/setup.js'
import * as myNodes from '@/store/modules/myNodes.js' import * as myNodes from '@/store/modules/myNodes.js'
import * as otherNodes from '@/store/modules/otherNodes.js'
export const store = createStore({ export const store = createStore({
// //
modules: { modules: {
setup, setup,
myNodes, myNodes,
otherNodes,
}, },
actions: {}, actions: {},
......
<template>
<ToolBar @added-node="addedNode" />
<OtherNodes />
<MyNodes :added="added" />
</template>
<script>
// @ is an alias to /src
import ToolBar from '@/components/ToolBar.vue'
import MyNodes from '@/components/MyNodes.vue'
import OtherNodes from '@/components/OtherNodes.vue'
export default {
mounted() {
this.$store.dispatch('getMicrocosm')
},
name: 'Collect',
components: {
ToolBar,
MyNodes,
OtherNodes,
},
data() {
return {
added: false,
}
},
methods: {
addedNode() {
this.added = !this.added
},
},
}
</script>
<style scoped></style>
<template> <template>
<ToolBar @added-node="addedNode" /> <ToolBar @added-node="addedNode" />
<MyNodes :added="added" :key="componentKey" /> <MyNodes :added="added" />
</template> </template>
<script> <script>
...@@ -11,6 +11,8 @@ import MyNodes from '@/components/MyNodes.vue' ...@@ -11,6 +11,8 @@ import MyNodes from '@/components/MyNodes.vue'
export default { export default {
mounted() { mounted() {
this.$store.dispatch('getMicrocosm') this.$store.dispatch('getMicrocosm')
// register, i.e. in a `beforeDestroy` hook
window.addEventListener('unload', this.someMethod)
}, },
name: 'Collect', name: 'Collect',
...@@ -21,20 +23,21 @@ export default { ...@@ -21,20 +23,21 @@ export default {
data() { data() {
return { return {
componentKey: 0, added: false,
added: true,
} }
}, },
methods: { methods: {
addedNode() { addedNode() {
//console.log('I hear you!')
this.added = !this.added this.added = !this.added
this.forceRender()
}, },
forceRender() { someMethod() {
// reloads the data after adding a node localStorage.removeItem('nogg_microcosm')
this.componentKey += 1 localStorage.removeItem('nogg_name')
location.assign(
process.env.VUE_APP_HTTP + '://' + process.env.VUE_APP_URL + '/'
)
}, },
}, },
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment