trying to add the cards view

this will show other nodes as well... maybe jumping the gun as the issues with adding are not resolved yet

src/App.vue

 <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>

src/components/MyNodes.vue

 <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 &amp; 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 &amp; 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) {

src/components/OtherNodes.vue

+<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>

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'),
   },
 ]
 

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++) {

src/store/modules/otherNodes.js

+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 = {}

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: {},

src/views/Cards.vue

+<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>