adding in URL

version 1

app/package.json

@@ -20,11 +20,11 @@
     "vuex": "^3.1.3"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.2.3",
-    "@vue/cli-plugin-eslint": "^4.2.3",
-    "@vue/cli-plugin-router": "^4.2.3",
-    "@vue/cli-plugin-vuex": "^4.2.3",
-    "@vue/cli-service": "^4.2.3",
+    "@vue/cli-plugin-babel": "^4.3.0",
+    "@vue/cli-plugin-eslint": "^4.3.0",
+    "@vue/cli-plugin-router": "^4.3.0",
+    "@vue/cli-plugin-vuex": "^4.3.0",
+    "@vue/cli-service": "^4.3.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.0.3",
     "eslint": "^6.7.2",

app/src/router/index.js

@@ -18,7 +18,18 @@ const routes = [
     // which is lazy-loaded when the route is visited.
     component: () =>
       import(/* webpackChunkName: "about" */ '../views/About.vue')
+  },
+  // dynamic segement `:microcosm` is added to the path
+  {
+    path: '/:device/microcosm/:microcosm',
+    component: Home
   }
+  // TODO: Nodecard ID in URL
+  // to get into editing a specific node??
+  // {
+  //   path: '/microcosm/:microcosm/:nodecard',
+  //   component: Home
+  // }
 ]
 
 const router = new VueRouter({

app/src/store/index.js

@@ -5,6 +5,8 @@ PouchDB.plugin(require('pouchdb-find'))
 import VueDraggableResizable from 'vue-draggable-resizable'
 import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
 
+import Router from '@/router'
+
 Vue.use(Vuex)
 Vue.component('vue-draggable-resizable', VueDraggableResizable)
 var myclient = 'firstvisit'
@@ -65,8 +67,15 @@ const store = new Vuex.Store({
   },
   mutations: {
     CREATE_MICROCOSM(state, doc) {
+      const urldevice = Router.currentRoute.params.device
+      const urlmicrocosm = Router.currentRoute.params.microcosm
       pouchdb.close().then(function() {
+        if (urlmicrocosm != undefined) {
+          myclient = urldevice
+          microcosm = urlmicrocosm
+        } else {
           microcosm = doc
+        }
         pouchdb = new PouchDB(microcosm)
         remote =
           process.env.VUE_APP_COUCH_HTTP +
@@ -134,6 +143,12 @@ const store = new Vuex.Store({
       store.commit('GET_MY_NODES')
     },
 
+    GET_URL_MICROCOSM(state, doc) {
+      state.microcosm = doc
+      localStorage.setItem('mylastMicrocosm', doc)
+      // store.commit('GET_MY_NODES')
+    },
+
     GET_MY_NODES(state) {
       pouchdb
         .get(state.myclient)
@@ -414,6 +429,12 @@ const store = new Vuex.Store({
   },
 
   actions: {
+    getURLParam: () => {
+      const urlparam = Router.currentRoute.params.microcosm
+      console.log(urlparam)
+      store.commit('GET_URL_MICROCOSM', urlparam)
+    },
+
     syncDB: () => {
       pouchdb.replicate.from(remote).on('complete', function() {
         store.commit('GET_ALL_NODES')

app/src/views/Home.vue

 <template>
   <div class="home">
     <div v-if="clientset">
+      <p>microcosm/{{ myMicrocosm }}</p>
       <OtherNodeslayer
         v-for="value in otherNodes"
         v-bind:key="value.node_id"
@@ -9,7 +10,7 @@
       />
 
       <NodesLayer
-        @editTrue="(e) => editTrue(e)"
+        @editTrue="e => editTrue(e)"
         v-for="value in myNodes"
         v-bind:key="value.node_id"
         v-bind:nodeid="value.node_id"
@@ -61,6 +62,7 @@ export default {
     ControlsLayer
   },
   computed: mapState({
+    myMicrocosm: state => state.microcosm,
     myNodes: state => state.myNodes,
     otherNodes: state => state.otherNodes,
     shortcutstate: state => state.shortcutstate