various attempts at keyboard and focus

Plan is to undo all this now and start a global event and add in focus trap

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.10.0",
+    "freeze-dry": "^0.2.4",
     "marked": "^2.0.1",
     "pouchdb": "^7.2.2",
     "vue": "^3.0.9",

src/components/JoinMicrocosm.vue

 <template>
   <form>
     <span class="arrow">⬇⬇</span>
+
     <h1>What shall we call you ? 👩‍🚀</h1>
     <p>
       First we need to connect this device to your ideas. This name is what
@@ -14,6 +15,7 @@
         v-model.trim="name"
         type="text"
         id="name"
+        ref="name"
         placeholder="type name here!"
         autocorrect="off"
         autocapitalize="none"
@@ -29,6 +31,7 @@
     </p>
     <div class="breaker-two">
       <label for="microcosm">Microcosm:</label>
+
       <input
         v-model.trim="microcosm"
         ref="microcosm"
@@ -37,11 +40,13 @@
         placeholder="type microcosm name here!"
         autocorrect="off"
         autocapitalize="none"
-        @keyup.enter="setName(), setMicrocosm()"
       />
-      <button type="button" @click="setName(), setMicrocosm()">
-        Start or Join
-      </button>
+
+      <router-link to="/collect">
+        <button type="button" @click="setName(), setMicrocosm()">
+          Start or Join
+        </button>
+      </router-link>
       <button class="configButton" type="button" @click="settings = !settings">
         Change CouchDB Configuration
       </button>
@@ -112,10 +117,22 @@
 export default {
   name: 'JoinMicrocosm',
 
+  created() {
+    window.addEventListener('keypress', this.keyCommand)
+  },
+  unmounted() {
+    window.removeEventListener('keypress', this.keyCommand)
+  },
+
+  props: {
+    isStart: Boolean,
+  },
+
   data: function () {
     return {
       // what you are calling yourself / device
       name: '',
+
       nameSet: false,
       nameFormatted: '',
       // Next dataset related to microcosm
@@ -130,7 +147,33 @@ export default {
     }
   },
 
+  watch: {
+    // this doesnt run as isStart is in v-if component
+    isStart: {
+      deep: true,
+      handler: function (newVal, oldVal) {
+        console.log('Prop changed: ', newVal, ' | was: ', oldVal)
+        this.$refs.name.focus()
+      },
+    },
+  },
+
   methods: {
+    microcosmField() {
+      this.$refs.microcosm.focus()
+    },
+
+    keyCommand(e) {
+      if (
+        (e.keyCode == 13 && this.nameSet == false) ||
+        (e.keyCode == 9 && this.nameSet == false)
+      ) {
+        console.log('tabb')
+        this.setName()
+      } else if (e.keyCode == 13) {
+        this.setMicrocosm()
+      }
+    },
     setName() {
       // format name so no spaces or dashes PouchDB/ CouchDB dont like them
       var lowercasename = this.name.toLowerCase()
@@ -138,13 +181,10 @@ export default {
       this.nameFormatted = spacesremoved.split('-').join('')
       this.nameSet = true
       localStorage.setItem('nogg_name', this.nameFormatted)
-      // focus on next input field for speed
-      this.focusInput()
-      // now we sent this same data set to the store
-      // this.$store.dispatch('setName', this.nameFormatted)
     },
 
     setMicrocosm() {
+      this.$router.push({ path: '/collect' })
       // format microcosm so no spaces or dashes PouchDB/ CouchDB dont like them
       var lowercasemicrocosm = this.microcosm.toLowerCase()
       var spacesremoved = lowercasemicrocosm.split(' ').join('')
@@ -166,10 +206,6 @@ export default {
         url,
       })
     },
-
-    focusInput() {
-      this.$refs.microcosm.focus()
-    },
   },
 }
 </script>

src/components/TellmeMore.vue

-<template
-  ><div>
+<template>
+  <div>
     <h1>Messy mapping tool for multiplayer thinking</h1>
     <p class="info">⚠️This is a non functional beta build of nodenogg.in⚠️</p>
     <p>
@@ -36,7 +36,7 @@
 
 <script>
 export default {
-  name: 'TellmeMore'
+  name: 'TellmeMore',
 }
 </script>
 

src/components/ToolBar.vue

+<template>
+  <div>
+    <button @click="addNode()">Add Node</button>
+    <button>Select Node</button>
+    <button>Make Connections</button>
+    <UploadMedia />
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import UploadMedia from '@/components/UploadMedia.vue'
+
+export default {
+  name: 'ToolBar',
+  components: {
+    UploadMedia,
+  },
+  data() {
+    return {}
+  },
+
+  methods: {
+    addNode() {
+      this.$store.dispatch('addNode')
+      this.$emit('added-node')
+    },
+  },
+}
+</script>
+
+<style scoped></style>

src/components/UploadMedia.vue

+<template>
+  <div></div>
+</template>
+
+<script>
+// @ is an alias to /src
+
+export default {
+  name: 'UploadMedia',
+  components: {},
+  data() {
+    return {}
+  },
+}
+</script>
+
+<style scoped></style>

src/components/YourNodes.vue

+<template>
+  <div v-for="(nodes, index) in myArray" v-bind:key="index">
+    <form class="nodes">
+      <p>{{ nodes.node_id }}</p>
+
+      <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)"
+        ></textarea>
+        <p class="info">*markdown supported &amp; autosaves</p>
+      </template>
+      <template v-else>
+        <p
+          class="readmode"
+          :id="nodes.node_id"
+          :inner-html.prop="nodes.node_text"
+        ></p>
+      </template>
+    </form>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { mapState } from 'vuex'
+
+export default {
+  name: 'YourNodes',
+
+  props: {
+    added: Boolean,
+  },
+
+  data() {
+    return {
+      myArray: [],
+    }
+  },
+
+  computed: {
+    ...mapState({
+      myNodes: (state) => state.mynodes,
+    }),
+
+    nodesFiltered: function () {
+      return this.myNodes.myNodes.filter((nodes) => {
+        return nodes.node_deleted == false
+      })
+    },
+  },
+
+  mounted() {
+    setTimeout(this.loadData, 500)
+  },
+
+  watch: {
+    added: {
+      deep: true,
+      handler() {
+        setTimeout(this.loadData, 200)
+      },
+    },
+  },
+
+  methods: {
+    loadData() {
+      this.myArray = this.nodesFiltered
+      this.$forceUpdate()
+    },
+
+    editNode(e) {
+      var nodeid = e.target.id
+      var nodetext = e.target.value
+      this.$store.dispatch('editNode', { nodeid, nodetext })
+    },
+  },
+}
+</script>
+
+<style scoped>
+.nodes {
+  width: 95%;
+  border: 2px dashed black;
+  background-color: rgb(155, 194, 216);
+  margin-top: 1em;
+  margin-left: 0.5em;
+}
+</style>

src/router/index.js

@@ -16,6 +16,15 @@ const routes = [
     component: () =>
       import(/* webpackChunkName: "credits" */ '../views/Credits.vue'),
   },
+  {
+    path: '/collect',
+    name: 'Collect',
+    // 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: "credits" */ '../views/Collect.vue'),
+  },
 ]
 
 const router = createRouter({

src/store/modules/mynodes.js

+var pouchdb
+var deviceName
+
+export const state = {
+  myNodes: [],
+  activeNode: {},
+}
+
+export const mutations = {
+  ADD_NODE() {
+    return pouchdb
+      .get(deviceName)
+      .then(function () {
+        var uniqueid =
+          Math.random().toString(36).substring(2, 15) +
+          Math.random().toString(36).substring(2, 15)
+        pouchdb.get(deviceName).then(function (doc) {
+          doc.nodes.push({
+            node_id: uniqueid,
+            node_text: '',
+            node_owner: deviceName,
+            node_type: 'sheet',
+            node_shape: 'square',
+            node_deleted: false,
+            node_readmode: false,
+            node_color: '#9bc2d8',
+          })
+
+          return pouchdb
+            .put({
+              _id: deviceName,
+              _rev: doc._rev,
+              nodes: doc.nodes,
+            })
+            .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,
+                }
+                // 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.status)
+            })
+        })
+      })
+      .catch(function (err) {
+        console.log(err)
+        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',
+              },
+            ],
+          })
+        }
+      })
+  },
+  GET_NODES() {
+    pouchdb
+      .get(deviceName)
+      .then(function (doc) {
+        var i
+        for (i = 0; i < Object.keys(doc.nodes).length; i++) {
+          state.myNodes = doc.nodes
+        }
+        console.log(state.myNodes)
+      })
+      .catch(function () {
+        // console.log(err)
+      })
+  },
+
+  EDIT_NODE(state, e) {
+    var i
+    for (i = 0; i < Object.keys(state.myNodes).length; i++) {
+      if (e.nodeid == state.myNodes[i].node_id) {
+        state.myNodes[i].node_text = e.nodetext
+      }
+    }
+    pouchdb
+      .get(deviceName)
+      .then(function (doc) {
+        // put the store into pouchdb
+
+        return pouchdb.bulkDocs([
+          {
+            _id: deviceName,
+            _rev: doc._rev,
+            _attachments: doc._attachments,
+            nodes: state.myNodes,
+          },
+        ])
+      })
+      .then(function () {
+        return pouchdb.get(deviceName).then(function (doc) {
+          state.myNodes = doc.nodes
+        })
+      })
+      .catch(function (err) {
+        if (err.status == 404) {
+          // pouchdb.put({  })
+        }
+      })
+  },
+}
+
+export const actions = {
+  addNode: ({ commit }, e) => {
+    commit('ADD_NODE', e)
+  },
+
+  getNodes: ({ commit }, e) => {
+    commit('GET_NODES', e)
+  },
+
+  editNode: ({ commit }, { nodeid, nodetext }) => {
+    commit('EDIT_NODE', { nodeid, nodetext })
+  },
+
+  getMicrocosm(vuexContext) {
+    pouchdb = vuexContext.rootState.setup.pouchdb
+    deviceName = vuexContext.rootState.setup.deviceName
+  },
+}

src/store/modules/nodes.js

-import { createStore } from 'vuex'
-
-
-export const nodesstore = createStore({
-  state() {
-    return {
-      version: process.env.VUE_APP_VERSION,
-      myNodes: [],
-      allNodes: [],
-    }
-  },
-  mutations: {},
-  actions: {
-   
-})
-export default nodesstore
-
-// ADD_NODE(state) {
-//   var uniqueid =
-//     Math.random().toString(36).substring(2, 15) +
-//     Math.random().toString(36).substring(2, 15)
-
-//   if (state.microcosm == 'first_visit') {
-//     console.log('not allowed on this microcosm')
-//   } else {
-//     pouchdb.get(state.deviceName).then(function (doc) {
-//       doc.nodes.push({
-//         node_id: uniqueid,
-//         node_text: '',
-//         node_owner: state.deviceName,
-//         node_type: 'sheet',
-//         node_shape: 'square',
-//         node_deleted: false,
-//         node_readmode: false,
-//         node_color: '#9bc2d8',
-//       })
-//       return pouchdb
-//         .put({
-//           _id: state.name,
-//           _rev: doc._rev,
-//           _attachments: doc._attachments,
-//           nodes: doc.nodes,
-//         })
-//         .then(function () {
-//           return pouchdb.get(state.name).then(function (doc) {
-//             state.myNodes = doc.nodes
-//             var end = Object.keys(state.myNodes).length - 1
-//             const newNode = {
-//               nodeid: state.myNodes[end].id,
-//               nodetext: state.myNodes[end].text,
-//             }
-//             console.log(newNode)
-//           })
-//         })
-//         .catch(function (err) {
-//           if (err.status == 404) {
-//             // pouchdb.put({  })
-//           }
-//         })
-//     })
-//   }
-// },
-
-// GET_ALL_NODES(state) {
-//     pouchdb
-//       .allDocs({
-//         include_docs: true,
-//       })
-//       .then(function (doc) {
-//         state.allNodes = doc.rows
-//       })
-//       .catch(function () {
-//         //console.log(err)
-//       })
-//   },
-
-// GET_MY_NODES(state) {
-//   pouchdb
-//     .get(state.deviceName)
-//     .then(function (doc) {
-//       var i
-//       for (i = 0; i < Object.keys(doc.nodes).length; i++) {
-//         state.myNodes = doc.nodes
-//       }
-//     })
-//     .catch(function () {
-//       // console.log(err)
-//     })
-// },

src/store/modules/setup.js

@@ -7,6 +7,7 @@ export const state = {
   deviceName: '',
   remoteAddress: '',
   configRemote: [],
+  pouchdb: {},
 }
 
 export const mutations = {
@@ -15,6 +16,7 @@ export const mutations = {
     state.microcosmName = e.microcosm
 
     pouchdb = new PouchDB(state.microcosmName)
+    state.pouchdb = pouchdb
 
     if (state.configRemote && state.configRemote.length > 0) {
       remote =
@@ -62,7 +64,30 @@ export const actions = {
     commit('SET_REMOTE', e)
   },
 
-  startDB: () => {
-    pouchdb.replicate.from(remote).on('complete', function () {})
+  startDB: (vuexContext) => {
+    pouchdb.replicate.from(remote).on('complete', function () {
+      // GET_MYNODES from mynodes.js ACTION
+      //console.log('start')
+      vuexContext.dispatch('getNodes', null, { root: true })
+      //dispatch('getNodes')
+      pouchdb
+        .sync(remote, {
+          live: true,
+          since: 'now',
+          retry: true,
+        })
+        .on('change', function () {
+          // GET_MYNODES
+          console.log('change')
+          vuexContext.dispatch('getNodes', null, { root: true })
+        })
+        .on('paused', function () {})
+        .on('active', function () {})
+        .on('denied', function () {})
+        .on('complete', function () {})
+        .on('error', function (err) {
+          console.log(err)
+        })
+    })
   },
 }

src/store/store.js

 import { createStore } from 'vuex'
 
 import * as setup from '@/store/modules/setup.js'
-//import * as nodes from '@/store/modules/nodes.js'
+import * as mynodes from '@/store/modules/mynodes.js'
 
 export const store = createStore({
   //
   modules: {
     setup,
-    // nodes,
+    mynodes,
   },
 
+  actions: {},
 })
 export default store

src/views/Collect.vue

+<template>
+  <ToolBar @added-node="addedNode" />
+  <YourNodes :added="added" />
+</template>
+
+<script>
+// @ is an alias to /src
+import ToolBar from '@/components/ToolBar.vue'