Merge branch 'futurenogg' into main

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">
     <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>
@@ -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) {

src/components/OtherNodes.vue

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

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

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
@@ -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 }) => {

src/store/modules/otherNodes.js

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

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

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

src/views/Collect.vue

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