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 70977777471907471a8eae854dc074546c6c609b..f8e1835704631bf0d8754961f885f55da8b2bdde 100644
--- a/src/components/MyNodes.vue
+++ b/src/components/MyNodes.vue
@@ -1,27 +1,28 @@
<template>
<div v-for="(nodes, index) in myArray" :key="index">
+ {{ 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>
@@ -78,6 +79,7 @@ export default {
)
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..413c18b6207cce214ba2ff7b3d01ace1dd5ac8d7
--- /dev/null
+++ b/src/components/OtherNodes.vue
@@ -0,0 +1,64 @@
+<template>
+ <div v-for="(nodes, index) in otherArray" :key="index">
+ <p
+ class="readmode"
+ :id="nodes.node_id"
+ :inner-html.prop="nodes.node_text"
+ ></p>
+ </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { mapState } from 'vuex'
+
+// import marked from 'marked'
+
+export default {
+ name: 'OtherNodes',
+
+ data() {
+ return {
+ otherArray: [],
+ }
+ },
+
+ computed: {
+ ...mapState({
+ otherNodes: (state) => state.otherNodes,
+ }),
+ },
+
+ // watch: {
+ // added: function () {
+ // this.loadData()
+ // },
+ // },
+
+ mounted() {
+ //console.log('mounted')
+ setTimeout(this.loadData, 500)
+
+ // if (localStorage.nogg_microcosm) {
+ // // var devicename = localStorage.nogg_name
+ // var microcosm = localStorage.nogg_microcosm
+ // this.$store.dispatch('setMicrocosm', { microcosm })
+ // } else {
+ // console.log('no')
+ // // go home
+ // }
+ },
+
+ methods: {
+ loadData() {
+ var othersFiltered = this.otherNodes.otherNodes.filter(
+ (nodes) => nodes.node_deleted == false
+ )
+ this.$store.dispatch('getOthernodes')
+ this.otherArray = othersFiltered
+ },
+ },
+}
+</script>
+
+<style scoped></style>
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 867b99b00936085009af91aa9234da1e6cdb9dc5..66e349272b02ab12a805782fa961040d5d5a5d59 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
@@ -92,8 +93,6 @@ export const mutations = {
})
},
- // TODO: Get other nodes from all other devices
-
EDIT_NODE(state, e) {
var i
for (i = 0; i < Object.keys(state.myNodes).length; i++) {
diff --git a/src/store/modules/otherNodes.js b/src/store/modules/otherNodes.js
new file mode 100644
index 0000000000000000000000000000000000000000..79539cf00b61b60abb11573c859eb4c148a1db53
--- /dev/null
+++ b/src/store/modules/otherNodes.js
@@ -0,0 +1,57 @@
+var pouchdb
+
+// PRETTY SURE this is wrong
+import * as store from '@/store/store.js'
+
+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
+ // TODO: THIS IS NOT working
+ store.commit('SET_OTHER_NODES')
+ })
+ .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++) {
+ 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')
+ },
+
+ getMicrocosm(vuexContext) {
+ pouchdb = vuexContext.rootState.setup.pouchdb
+ },
+}
+
+export const getters = {}
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..29a8532c47084fd570d29156fc6ccbdee3e7215b
--- /dev/null
+++ b/src/views/Cards.vue
@@ -0,0 +1,39 @@
+<template>
+ <ToolBar @added-node="addedNode" />
+ <MyNodes :added="added" />
+ <OtherNodes />
+</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>