From e3f1838a181a71d22a9da0c5fc939d7af4e72c87 Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Sat, 10 Oct 2020 17:34:31 +0100
Subject: [PATCH] bought back all the last two versions functionality

now done correctly to work on mobile as well as desktop
---
 CHANGELOG.md                           |  40 +++++
 app/package.json                       |   2 +-
 app/src/App.vue                        |   8 +-
 app/src/components/CardsLayer.vue      | 172 +++++++++++++++++++++
 app/src/components/ListLayer.vue       |   1 +
 app/src/components/OtherCardslayer.vue |  94 ++++++++++++
 app/src/router/index.js                |   6 +
 app/src/views/Cards.vue                | 139 +++++++++++++++++
 app/src/views/Discarded-old.vue        | 202 -------------------------
 app/src/views/Discarded.vue            |  36 +++--
 app/src/views/List.vue                 |  34 +++--
 11 files changed, 501 insertions(+), 233 deletions(-)
 create mode 100644 app/src/components/CardsLayer.vue
 create mode 100644 app/src/components/OtherCardslayer.vue
 create mode 100644 app/src/views/Cards.vue
 delete mode 100644 app/src/views/Discarded-old.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c992f6f..bfc05b5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,43 @@
+# 0.1.28
+
+_10th October 2020_
+
+### Fixed
+
+- Changes and additions in 0.1.26 and 0.1.27 poor implementation of changed so have refactored to work correctly on mobile.
+
+### Removed
+
+- Toolbar showing current microcosm, poor implementation.
+
+# 0.1.27
+
+_9th October 2020_
+
+### Added
+
+- Basic card view of all nodes
+- Leave link in Navigation
+
+### Changed
+
+- List view now you can enter basic read mode
+- List view you can now discard your nodes
+
+# 0.1.26
+
+_6th October 2020_
+
+### Changed
+
+- Renamed Mobile to List
+- Refactored the way the list and discarded view work
+- Added some basic style to list and discarded views
+
+### Added
+
+- The toolbar now shows (in basic form) to you only your device name and the microcosm you are currently viewing
+
 # 0.1.25
 
 _2nd October 2020_
diff --git a/app/package.json b/app/package.json
index 7673df3..933606c 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nodenogg.in",
-  "version": "0.1.25",
+  "version": "0.1.28",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/app/src/App.vue b/app/src/App.vue
index 7f45790..d6dc96e 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -9,14 +9,14 @@
 import { routes } from './router'
 import Navigation from './components/Navigation'
 export default {
-  data: function() {
+  data: function () {
     return {
-      routes: routes.filter(route => !!route.name)
+      routes: routes.filter((route) => !!route.name),
     }
   },
   components: {
-    navigation: Navigation
-  }
+    navigation: Navigation,
+  },
 }
 </script>
 <style>
diff --git a/app/src/components/CardsLayer.vue b/app/src/components/CardsLayer.vue
new file mode 100644
index 0000000..3af9786
--- /dev/null
+++ b/app/src/components/CardsLayer.vue
@@ -0,0 +1,172 @@
+<template>
+  <div>
+    <div v-if="deleted == false">
+      <form class="nodes">
+        <div v-for="value in $options.myArray" v-bind:key="value.node_id">
+          <textarea
+            v-if="nodeid == value.node_id"
+            @focus="editTrue(true)"
+            @blur="editTrue(false)"
+            autofocus
+            v-model="value.node_text"
+            @input="editNode"
+            :id="value.node_id"
+            ref="nodetext"
+            placeholder="Idea goes here!"
+          ></textarea>
+        </div>
+
+        <!-- <div v-if="localreadmode == true && deleted == false">
+          <p class="read" :id="nodeid" :inner-html.prop="nodetext | marked"></p>
+        </div> -->
+        <div class="allemoji">
+          <div
+            class="eachemoji"
+            v-for="(emojis, index) in configEmoji"
+            :key="index"
+          >
+            <p v-if="nodeid == emojis.node_id">
+              {{ emojis.emoji_text }}
+            </p>
+          </div>
+        </div>
+        <p class="info">*markdown supported &amp; autosaves</p>
+        <div class="btn-row">
+          <BaseButton buttonClass="danger" @click="deleteFlag()"
+            >Discard</BaseButton
+          >
+          <!-- <div v-if="localreadmode == true && deleted == false">
+            <BaseButton class="read" buttonClass="action" @click="readFlag()"
+              >Edit Mode
+            </BaseButton>
+          </div>
+          <div v-else>
+            <BaseButton class="read" buttonClass="action" @click="readFlag()"
+              >Read Mode</BaseButton
+            >
+          </div> -->
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+//var readmode
+export default {
+  name: 'CardsLayer',
+
+  data: function () {
+    return {
+      // localreadmode: false,
+    }
+  },
+
+  props: {
+    nodeid: String,
+    nodetext: String,
+    deleted: Boolean,
+  },
+
+  computed: mapState({
+    myNodes: (state) => state.myNodes,
+    configPositions: (state) => state.configPositions,
+    configEmoji: (state) => state.configEmoji,
+  }),
+
+  myArray: null,
+  created() {
+    this.$options.myArray = this.myNodes
+    this.readFlag
+  },
+
+  methods: {
+    editNode(e) {
+      var nodeid = e.target.id
+      var nodetext = e.target.value
+      this.$store.dispatch('editNode', { nodeid, nodetext })
+    },
+
+    editTrue(e) {
+      this.$emit('editTrue', e)
+    },
+
+    deleteFlag(e) {
+      e = this.nodeid
+      this.$store.dispatch('deleteFlag', { e })
+    },
+
+    // readFlag(e) {
+    //   e = this.nodeid
+
+    //   var i
+    //   for (i = 0; i < Object.keys(this.configPositions).length; i++) {
+    //     if (this.configPositions[i].node_id == this.nodeid) {
+    //       this.localreadmode = this.configPositions[i].read_mode
+    //     }
+    //   }
+
+    //   if (this.localreadmode == true) {
+    //     readmode = false
+    //     this.$store.dispatch('readFlag', { e, readmode })
+    //     this.mode = 'Read'
+    //   } else {
+    //     readmode = true
+    //     this.$store.dispatch('readFlag', { e, readmode })
+    //     this.mode = 'Edit'
+    //   }
+    // },
+  },
+}
+</script>
+
+<style lang="css" scoped>
+h2 {
+  color: red;
+}
+
+.nodes {
+  width: 95%;
+  border: 2px dashed black;
+  background-color: rgb(155, 194, 216);
+  margin-top: 1em;
+  margin-left: 1em;
+}
+
+textarea {
+  width: 90%;
+  height: 175px;
+  resize: none;
+  box-sizing: border-box;
+  font-family: 'Inter var', Helvetica, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin: 1em;
+  border: none;
+  outline: none;
+  background-color: rgb(187, 227, 255);
+  scrollbar-color: yellow rgb(187, 227, 255);
+}
+.btn-row {
+  position: relative;
+  margin-bottom: 5px;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  padding: 0 15px;
+  border-radius: 4px;
+}
+
+.allemoji {
+  font-size: 2em;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(0, auto));
+
+  /* float: left; */
+}
+
+.eachemoji p {
+  margin: 0em;
+}
+</style>
diff --git a/app/src/components/ListLayer.vue b/app/src/components/ListLayer.vue
index 033eb3c..49288b2 100644
--- a/app/src/components/ListLayer.vue
+++ b/app/src/components/ListLayer.vue
@@ -78,6 +78,7 @@ export default {
   myArray: null,
   created() {
     this.$options.myArray = this.myNodes
+    this.readFlag
   },
 
   methods: {
diff --git a/app/src/components/OtherCardslayer.vue b/app/src/components/OtherCardslayer.vue
new file mode 100644
index 0000000..83a7c42
--- /dev/null
+++ b/app/src/components/OtherCardslayer.vue
@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <div v-if="deleted == false">
+      <div class="nodes">
+        <p :inner-html.prop="nodetext | marked"></p>
+
+        <div class="allemoji">
+          <div
+            class="eachemoji"
+            v-for="(emojis, index) in configEmoji"
+            :key="index"
+          >
+            <p v-if="nodeid == emojis.node_id">
+              {{ emojis.emoji_text }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import marked from 'marked'
+export default {
+  name: 'OtherCardslayer',
+
+  data: function () {
+    return {}
+  },
+
+  props: {
+    nodeid: String,
+    nodetext: String,
+    deleted: Boolean,
+  },
+
+  computed: mapState({
+    otherNodes: (state) => state.otherNodes,
+    configEmoji: (state) => state.configEmoji,
+  }),
+
+  filters: {
+    marked: marked,
+  },
+}
+</script>
+
+<style lang="css" scoped>
+h2 {
+  color: red;
+}
+
+.nodes {
+  width: 300px;
+  border: 2px dashed black;
+  background-color: rgb(155, 194, 216);
+  margin-top: 1em;
+  margin-left: 1em;
+}
+
+p {
+  width: 90%;
+  /* height: 175px; */
+  resize: none;
+  box-sizing: border-box;
+  font-family: 'Inter var', Helvetica, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin: 1em;
+}
+.btn-row {
+  position: relative;
+  margin-bottom: 5px;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  padding: 0 15px;
+  border-radius: 4px;
+}
+
+.allemoji {
+  font-size: 2em;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(0, auto));
+
+  /* float: left; */
+}
+
+.eachemoji p {
+  margin: 0em;
+}
+</style>
diff --git a/app/src/router/index.js b/app/src/router/index.js
index fabc5fd..83879cc 100644
--- a/app/src/router/index.js
+++ b/app/src/router/index.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
+import Cards from '../views/Cards.vue'
 import List from '../views/List.vue'
 import Discarded from '../views/Discarded.vue'
 import Leave from '../views/Leave.vue'
@@ -15,6 +16,11 @@ export const routes = [
     name: 'Home',
     component: Home,
   },
+  {
+    path: '/cards',
+    name: 'Cards',
+    component: Cards,
+  },
   {
     path: '/list',
     name: 'My List',
diff --git a/app/src/views/Cards.vue b/app/src/views/Cards.vue
new file mode 100644
index 0000000..b2fc5ec
--- /dev/null
+++ b/app/src/views/Cards.vue
@@ -0,0 +1,139 @@
+<template>
+  <div id="listwrapper">
+    <div v-if="clientset">
+      <h1 class="mobile">Your nodes - list mode</h1>
+
+      <div class="btn-row">
+        <BaseButton class="new" buttonClass="action" @click="addNode()"
+          >Create Node</BaseButton
+        >
+      </div>
+
+      <div class="grid">
+        <CardsLayer
+          @editTrue="(e) => editTrue(e)"
+          v-for="value in myNodes"
+          v-bind:key="value.node_id"
+          v-bind:nodeid="value.node_id"
+          v-bind:nodetext="value.node_text"
+          v-bind:deleted="value.deleted"
+        />
+
+        <OtherCardslayer
+          v-for="value in otherNodes"
+          v-bind:key="value.node_id"
+          v-bind:nodeid="value.node_id"
+          v-bind:nodetext="value.node_text"
+          v-bind:deleted="value.deleted"
+        />
+      </div>
+    </div>
+
+    <div v-else>
+      <OtherNodeslayer
+        v-for="value in otherNodes"
+        v-bind:key="value.node_id"
+        v-bind:nodeid="value.node_id"
+        v-bind:nodetext="value.node_text"
+        v-bind:deleted="value.deleted"
+      />
+      <NodesLayer
+        @editTrue="(e) => editTrue(e)"
+        v-for="value in myNodes"
+        v-bind:key="value.node_id"
+        v-bind:nodeid="value.node_id"
+        v-bind:nodetext="value.node_text"
+        v-bind:deleted="value.deleted"
+      />
+      <OnBoard @clientAdded="clientAdded()" @editTrue="(e) => editTrue(e)" />
+    </div>
+  </div>
+</template>
+
+<script>
+//import Router from '@/router'
+import CardsLayer from '@/components/CardsLayer'
+import OtherCardslayer from '@/components/OtherCardslayer'
+import OnBoard from '@/components/OnBoard'
+import NodesLayer from '@/components/NodesLayer'
+import OtherNodeslayer from '@/components/OtherNodeslayer'
+
+import { mapState } from 'vuex'
+
+import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'
+
+export default {
+  name: 'List',
+
+  mixins: [shortcutsMixin],
+  data: function () {
+    return {
+      clientset: false,
+    }
+  },
+
+  props: {
+    nodeid: String,
+    nodetext: String,
+    deleted: Boolean,
+  },
+
+  computed: {
+    ...mapState({
+      myNodes: (state) => state.myNodes,
+      otherNodes: (state) => state.otherNodes,
+      shortcutstate: (state) => state.shortcutstate,
+      toolmode: (state) => state.ui.mode,
+    }),
+  },
+
+  created() {
+    if (typeof window !== 'undefined') {
+      document.addEventListener('keydown', this.handleKeyPress)
+    }
+  },
+
+  beforeDestroy() {
+    if (typeof window !== 'undefined') {
+      document.removeEventListener('keydown', this.handleKeyPress)
+    }
+  },
+
+  methods: {
+    clientAdded() {
+      this.clientset = !this.clientset
+    },
+
+    addNode() {
+      this.$store.dispatch('addNode')
+    },
+
+    editTrue(e) {
+      this.$store.dispatch('shortcutState', e)
+    },
+  },
+  components: {
+    CardsLayer,
+    OtherCardslayer,
+
+    OnBoard,
+    OtherNodeslayer,
+    NodesLayer,
+  },
+}
+</script>
+
+<style lang="css" scoped>
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.mobile {
+  margin-left: 1em;
+  font-size: 1em;
+}
+.new {
+  margin-bottom: 1em;
+}
+</style>
diff --git a/app/src/views/Discarded-old.vue b/app/src/views/Discarded-old.vue
deleted file mode 100644
index 901dfab..0000000
--- a/app/src/views/Discarded-old.vue
+++ /dev/null
@@ -1,202 +0,0 @@
-<template>
-  <div id="discardwrapper">
-    <h1 class="restore">Your discarded nodes</h1>
-
-    <div v-if="clientset">
-      <form>
-        <div v-for="value in myNodes" v-bind:key="value.node_id">
-          <div v-if="value.deleted == true">
-            {{ value.node_text }}
-
-            <div class="btn-row">
-              <BaseButton
-                class="new"
-                buttonClass="action"
-                @click="restoreNode(value.node_id)"
-                >Restore</BaseButton
-              >
-            </div>
-          </div>
-        </div>
-      </form>
-    </div>
-    <!-- // onboarding for list view -->
-    <div v-else>
-      <form>
-        <div>
-          <p id="nodeid" :inner-html.prop="nodetext1 | marked"></p>
-
-          <div v-if="name == false">
-            <input
-              type="text"
-              v-model.trim="clientid"
-              placeholder="device name"
-              autocorrect="off"
-              autocapitalize="none"
-              ref="objectname"
-              v-on:keyup.enter="setClient()"
-              @focus="editTrue(true)"
-              @blur="editTrue(false)"
-            />
-            <div class="btn-row">
-              <BaseButton buttonClass="special" @click="setClient()"
-                >Store</BaseButton
-              >
-            </div>
-          </div>
-          <div v-else>
-            <h4>Saved</h4>
-          </div>
-        </div>
-      </form>
-
-      <form>
-        <div>
-          <p id="nodeid" :inner-html.prop="nodetext2 | marked"></p>
-          <div v-if="microcosm == false">
-            <input
-              type="text"
-              v-model.trim="localmicrocosm"
-              placeholder="microcosm name"
-              autocorrect="off"
-              autocapitalize="none"
-              autofocus
-              v-on:keyup.enter="createMicrocosm()"
-              @focus="editTrue(true)"
-              @blur="editTrue(false)"
-            />
-            <div class="btn-row">
-              <BaseButton
-                buttonClass="special"
-                @click="createMicrocosm(), letsGo()"
-                >Create Microcosm</BaseButton
-              >
-            </div>
-          </div>
-          <div v-else>
-            <h4>Loading...</h4>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-  <!-- </div> -->
-</template>
-
-<script>
-// import OffLine from '@/components/OffLine'
-// import OnBoard from '@/components/OnBoard.vue'
-import Router from '@/router'
-
-import { mapState } from 'vuex'
-import marked from 'marked'
-import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'
-
-export default {
-  name: 'Discarded',
-  mixins: [shortcutsMixin],
-  data: function () {
-    return {
-      localmicrocosm: Router.currentRoute.params.microcosm,
-      clientid: '',
-      clientset: false,
-      offline: false,
-      nodetext1:
-        '## What shall we call you ? 👩‍🚀 \n First we need to connect this device to your ideas. This name is what allows you to create and edit your nodes and can be anything you like and this name is always anonymous.',
-      nodetext2:
-        '## Join/Start a microcosm ! 🚀 \n Now you can create your own microcosm to store your ideas and ask people to join you, either just tell them the name of the microcosm or share the alpha.nodenogg.in URL and add the ending; </br><em><b>/microcosm/nameofyourmicrocosm</b></em>',
-      name: false,
-      microcosm: false,
-    }
-  },
-
-  props: {
-    nodeid: String,
-    nodetext: String,
-    deleted: Boolean,
-  },
-
-  computed: mapState({
-    myNodes: (state) => state.myNodes,
-    configPositions: (state) => state.configPositions,
-    shortcutstate: (state) => state.shortcutstate,
-  }),
-
-  created() {
-    if (typeof window !== 'undefined') {
-      document.addEventListener('keydown', this.handleKeyPress)
-    }
-  },
-
-  beforeDestroy() {
-    if (typeof window !== 'undefined') {
-      document.removeEventListener('keydown', this.handleKeyPress)
-    }
-  },
-
-  mounted() {
-    if (localStorage.myNNClient && localStorage.mylastMicrocosm) {
-      this.clientid = localStorage.myNNClient
-      this.localmicrocosm = localStorage.mylastMicrocosm
-      this.createMicrocosm()
-      this.setClient()
-      this.letsGo()
-      this.clientset = 'true'
-    }
-  },
-
-  components: {
-    // OnBoard,
-    // OffLine,
-    //ModeToolbar,
-  },
-
-  filters: {
-    marked: marked,
-  },
-  methods: {
-    clientAdded() {
-      this.clientset = !this.clientset
-    },
-
-    createMicrocosm() {
-      this.$store.dispatch('createMicrocosm', this.localmicrocosm)
-      localStorage.setItem('mylastMicrocosm', this.localmicrocosm)
-      this.microcosm = true
-    },
-    setClient() {
-      this.$store.dispatch('setClient', this.clientid),
-        localStorage.setItem('myNNClient', this.clientid)
-      this.name = true
-    },
-
-    letsGo() {
-      this.clientset = !this.clientset
-      this.$emit('clientAdded')
-    },
-
-    restoreNode(e) {
-      this.$store.dispatch('restoreNode', { e })
-    },
-
-    editTrue(e) {
-      this.$store.dispatch('shortcutState', e)
-    },
-
-    editNode(e) {
-      var nodeid = e.target.id
-      var nodetext = e.target.value
-      this.$store.dispatch('editNode', { nodeid, nodetext })
-    },
-  },
-}
-</script>
-
-<style lang="css" scoped>
-textarea {
-  width: 95%;
-  height: 100px;
-  margin-left: 1em;
-  margin-bottom: 1em;
-}
-</style>
diff --git a/app/src/views/Discarded.vue b/app/src/views/Discarded.vue
index 7679a79..40b4c07 100644
--- a/app/src/views/Discarded.vue
+++ b/app/src/views/Discarded.vue
@@ -13,17 +13,33 @@
     </div>
 
     <div v-else>
+      <OtherNodeslayer
+        v-for="value in otherNodes"
+        v-bind:key="value.node_id"
+        v-bind:nodeid="value.node_id"
+        v-bind:nodetext="value.node_text"
+        v-bind:deleted="value.deleted"
+      />
+      <NodesLayer
+        @editTrue="(e) => editTrue(e)"
+        v-for="value in myNodes"
+        v-bind:key="value.node_id"
+        v-bind:nodeid="value.node_id"
+        v-bind:nodetext="value.node_text"
+        v-bind:deleted="value.deleted"
+      />
       <OnBoard @clientAdded="clientAdded()" @editTrue="(e) => editTrue(e)" />
     </div>
   </div>
 </template>
 
 <script>
-import Router from '@/router'
 import DiscardLayer from '@/components/DiscardLayer'
 import OnBoard from '@/components/OnBoard'
+import NodesLayer from '@/components/NodesLayer'
+import OtherNodeslayer from '@/components/OtherNodeslayer'
 import { mapState } from 'vuex'
-import marked from 'marked'
+
 import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'
 
 export default {
@@ -32,12 +48,7 @@ export default {
   mixins: [shortcutsMixin],
   data: function () {
     return {
-      localmicrocosm: Router.currentRoute.params.microcosm,
-      clientid: '',
       clientset: false,
-      offline: false,
-      name: false,
-      microcosm: false,
     }
   },
 
@@ -50,7 +61,7 @@ export default {
   computed: {
     ...mapState({
       myNodes: (state) => state.myNodes,
-      // otherNodes: (state) => state.otherNodes,
+      otherNodes: (state) => state.otherNodes,
       shortcutstate: (state) => state.shortcutstate,
       toolmode: (state) => state.ui.mode,
     }),
@@ -73,10 +84,6 @@ export default {
       this.clientset = !this.clientset
     },
 
-    addNode() {
-      this.$store.dispatch('addNode')
-    },
-
     editTrue(e) {
       this.$store.dispatch('shortcutState', e)
     },
@@ -84,9 +91,8 @@ export default {
   components: {
     DiscardLayer,
     OnBoard,
-  },
-  filters: {
-    marked: marked,
+    NodesLayer,
+    OtherNodeslayer,
   },
 }
 </script>
diff --git a/app/src/views/List.vue b/app/src/views/List.vue
index 618b5db..86098d7 100644
--- a/app/src/views/List.vue
+++ b/app/src/views/List.vue
@@ -19,17 +19,35 @@
     </div>
 
     <div v-else>
+      <OtherNodeslayer
+        v-for="value in otherNodes"
+        v-bind:key="value.node_id"
+        v-bind:nodeid="value.node_id"
+        v-bind:nodetext="value.node_text"
+        v-bind:deleted="value.deleted"
+      />
+      <NodesLayer
+        @editTrue="(e) => editTrue(e)"
+        v-for="value in myNodes"
+        v-bind:key="value.node_id"
+        v-bind:nodeid="value.node_id"
+        v-bind:nodetext="value.node_text"
+        v-bind:deleted="value.deleted"
+      />
       <OnBoard @clientAdded="clientAdded()" @editTrue="(e) => editTrue(e)" />
     </div>
   </div>
 </template>
 
 <script>
-import Router from '@/router'
+//import Router from '@/router'
 import ListLayer from '@/components/ListLayer'
 import OnBoard from '@/components/OnBoard'
+import NodesLayer from '@/components/NodesLayer'
+import OtherNodeslayer from '@/components/OtherNodeslayer'
+
 import { mapState } from 'vuex'
-import marked from 'marked'
+
 import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'
 
 export default {
@@ -38,12 +56,7 @@ export default {
   mixins: [shortcutsMixin],
   data: function () {
     return {
-      localmicrocosm: Router.currentRoute.params.microcosm,
-      clientid: '',
       clientset: false,
-      offline: false,
-      name: false,
-      microcosm: false,
     }
   },
 
@@ -56,7 +69,7 @@ export default {
   computed: {
     ...mapState({
       myNodes: (state) => state.myNodes,
-      // otherNodes: (state) => state.otherNodes,
+      otherNodes: (state) => state.otherNodes,
       shortcutstate: (state) => state.shortcutstate,
       toolmode: (state) => state.ui.mode,
     }),
@@ -90,9 +103,8 @@ export default {
   components: {
     ListLayer,
     OnBoard,
-  },
-  filters: {
-    marked: marked,
+    OtherNodeslayer,
+    NodesLayer,
   },
 }
 </script>
-- 
GitLab