diff --git a/src/App.vue b/src/App.vue
index 79a4e801949f4994f70fb598ad8ed7ba514717eb..51348403595d347adeb67541776e3ab7ec0bf9bf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,9 @@
<template>
<div id="nav">
<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>
<router-view />
</template>
diff --git a/src/components/MyNodes.vue b/src/components/MyNodes.vue
index f807748aee21ff3fd43d316bf7bba61f7f43ab70..983c9ce8725015f681d91910fae3101cd4fab45c 100644
--- a/src/components/MyNodes.vue
+++ b/src/components/MyNodes.vue
@@ -1,27 +1,27 @@
<template>
<div v-for="(nodes, index) in myArray" :key="index">
<form class="nodes">
- <template v-if="nodes.node_readmode == false">
- <textarea
- v-model="nodes.node_text"
- @input="editNode"
- :id="nodes.node_id"
- ref="textentry"
- placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
- rows="5"
- ></textarea>
- <p class="info">*markdown supported & autosaves</p>
- <button>Colour</button>
- <button>Read</button>
- <button>Discard</button>
- </template>
+ <!-- <template v-if="nodes.node_readmode == false"> -->
+ <textarea
+ v-model="nodes.node_text"
+ @input="editNode"
+ :id="nodes.node_id"
+ ref="textentry"
+ placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
+ rows="5"
+ ></textarea>
+ <p class="info">*markdown supported & autosaves</p>
+ <button>Colour</button>
+ <button>Read</button>
+ <button>Discard</button>
+ <!-- </template>
<template v-else>
<p
class="readmode"
:id="nodes.node_id"
:inner-html.prop="nodes.node_text"
></p>
- </template>
+ </template> -->
</form>
</div>
</template>
@@ -47,14 +47,14 @@ export default {
computed: {
...mapState({
- // TODO: Can you filter here instead ?
myNodes: (state) => state.myNodes,
}),
+ },
- nodesFiltered: function () {
- return this.myNodes.myNodes.filter((nodes) => {
- return nodes.node_deleted == false
- })
+ watch: {
+ added: function () {
+ setTimeout(this.loadData, 500)
+
},
},
@@ -73,13 +73,21 @@ export default {
},
methods: {
+ emptyData() {
+ if (this.myNodes.myNodes == 0) {
+ /// that
+ } else {
+ // this
+ }
+ },
+
loadData() {
- // console.log('loading data')
var nodesFiltered = this.myNodes.myNodes.filter(
(nodes) => nodes.node_deleted == false
)
this.$store.dispatch('getMynodes')
this.myArray = nodesFiltered.reverse()
+ // console.log(this.myArray.length)
},
editNode(e) {
diff --git a/src/components/OtherNodes.vue b/src/components/OtherNodes.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a22f553ed4b985bbfe82e2a5071d517c87d4b053
--- /dev/null
+++ b/src/components/OtherNodes.vue
@@ -0,0 +1,50 @@
+<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>
diff --git a/src/components/ToolBar.vue b/src/components/ToolBar.vue
index 3e0b432b29bd6a0cf82f5cb3bad0b29c7de24ed2..74adceaed7dc4bc8ab2fb0765554dc26925a79e9 100644
--- a/src/components/ToolBar.vue
+++ b/src/components/ToolBar.vue
@@ -5,6 +5,7 @@
<button>Make Connections</button>
<UploadMedia />
<button @click="exitMicrocosm()">Exit</button>
+ <p>{{ microcosm }}</p>
</div>
</template>
@@ -19,7 +20,13 @@ export default {
UploadMedia,
},
data() {
- return {}
+ return {
+ microcosm: 'microcosm name',
+ }
+ },
+
+ mounted() {
+ this.microcosm = localStorage.getItem('nogg_microcosm')
},
mixins: [
@@ -39,7 +46,6 @@ export default {
this.$store.dispatch('addNode')
},
exitMicrocosm() {
-
localStorage.removeItem('nogg_microcosm')
localStorage.removeItem('nogg_name')
diff --git a/src/router/index.js b/src/router/index.js
index d47f557022d540bf22d77c6568c28203ce57c159..c71dfccacb5cd10621a9c4d413de62769a59a94e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -23,7 +23,17 @@ const routes = [
// this generates a separate chunk (credits.[hash].js) for this route
// which is lazy-loaded when the route is visited.
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'),
},
]
diff --git a/src/store/modules/mynodes.js b/src/store/modules/mynodes.js
index f26754dfbd413eeaff91d00a3d256e33821a8850..b84eb3c56b187170fecd8ad76e797922fa623c18 100644
--- a/src/store/modules/mynodes.js
+++ b/src/store/modules/mynodes.js
@@ -42,6 +42,7 @@ export const mutations = {
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
@@ -53,28 +54,45 @@ export const mutations = {
})
})
.catch(function (err) {
- // TODO: Does this situation ever hit 404 ?
- console.log(err)
+ // HITS a 404 on very first node being created
if (err.status == 404) {
var uniqueid =
Math.random().toString(36).substring(2, 15) +
Math.random().toString(36).substring(2, 15)
- pouchdb.put({
- _id: deviceName,
- nodes: [
- {
- node_id: uniqueid,
- node_text: '',
- node_owner: deviceName,
- node_type: 'sheet',
- node_shape: 'square',
- node_deleted: false,
- node_readmode: false,
- node_color: '#9bc2d8',
- },
- ],
- })
+ pouchdb
+ .put({
+ _id: deviceName,
+ nodes: [
+ {
+ node_id: uniqueid,
+ node_text: '',
+ node_owner: deviceName,
+ node_type: 'sheet',
+ node_shape: 'square',
+ node_deleted: false,
+ node_readmode: false,
+ node_color: '#9bc2d8',
+ },
+ ],
+ })
+ .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 = {
state.myNodes = doc.nodes
}
})
- .catch(function (err) {
- console.log(err)
+ .catch(function () {
+ // console.log(err)
})
},
- // TODO: Get other nodes from all other devices
-
EDIT_NODE(state, e) {
var i
for (i = 0; i < Object.keys(state.myNodes).length; i++) {
@@ -132,8 +148,8 @@ export const actions = {
commit('ADD_NODE', e)
},
- getMynodes: ({ commit }, e) => {
- commit('GET_MY_NODES', e)
+ getMynodes: ({ commit }) => {
+ commit('GET_MY_NODES')
},
editNode: ({ commit }, { nodeid, nodetext }) => {
diff --git a/src/store/modules/otherNodes.js b/src/store/modules/otherNodes.js
new file mode 100644
index 0000000000000000000000000000000000000000..6c4271ea32f1fb6b75f65d1f5d0ed208d8329436
--- /dev/null
+++ b/src/store/modules/otherNodes.js
@@ -0,0 +1,62 @@
+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 = {}
diff --git a/src/store/modules/setup.js b/src/store/modules/setup.js
index 065fedff1f8fba2c438bbfad705f44eff295186c..bc8b33ff44f3c7fb5064bf150e946ea67ee32316 100644
--- a/src/store/modules/setup.js
+++ b/src/store/modules/setup.js
@@ -79,8 +79,7 @@ export const actions = {
retry: true,
})
.on('change', function () {
- // console.log('change happened')
- // vuexContext.dispatch('getNodes', null, { root: true })
+ vuexContext.dispatch('getOthernodes', null, { root: true })
})
.on('paused', function () {})
.on('active', function () {
diff --git a/src/store/store.js b/src/store/store.js
index 2f44aa09f1bec054c31e4732cdc1999e86d2b52f..25f199bfbfd4620245555d4d9403b5b5a8fc015b 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -2,12 +2,14 @@ import { createStore } from 'vuex'
import * as setup from '@/store/modules/setup.js'
import * as myNodes from '@/store/modules/myNodes.js'
+import * as otherNodes from '@/store/modules/otherNodes.js'
export const store = createStore({
//
modules: {
setup,
myNodes,
+ otherNodes,
},
actions: {},
diff --git a/src/views/Cards.vue b/src/views/Cards.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9510b7f8c467c5ca869ce33b520fef6f3acb97fa
--- /dev/null
+++ b/src/views/Cards.vue
@@ -0,0 +1,39 @@
+<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>
diff --git a/src/views/Collect.vue b/src/views/Collect.vue
index a0717290744443694c47788f57985acd34e8d6ae..ef0360fb1c048a8fcaca2902dce08c46a4a68ae5 100644
--- a/src/views/Collect.vue
+++ b/src/views/Collect.vue
@@ -1,6 +1,6 @@
<template>
<ToolBar @added-node="addedNode" />
- <MyNodes :added="added" :key="componentKey" />
+ <MyNodes :added="added" />
</template>
<script>
@@ -11,6 +11,8 @@ import MyNodes from '@/components/MyNodes.vue'
export default {
mounted() {
this.$store.dispatch('getMicrocosm')
+ // register, i.e. in a `beforeDestroy` hook
+ window.addEventListener('unload', this.someMethod)
},
name: 'Collect',
@@ -21,20 +23,21 @@ export default {
data() {
return {
- componentKey: 0,
- added: true,
+ added: false,
}
},
methods: {
addedNode() {
- //console.log('I hear you!')
this.added = !this.added
- this.forceRender()
},
- forceRender() {
- // reloads the data after adding a node
- this.componentKey += 1
+ someMethod() {
+ localStorage.removeItem('nogg_microcosm')
+ localStorage.removeItem('nogg_name')
+
+ location.assign(
+ process.env.VUE_APP_HTTP + '://' + process.env.VUE_APP_URL + '/'
+ )
},
},
}