refactored all the list / discard view

Hopefully these should work on mobile as not so many loops

app/package.json

@@ -9,16 +9,13 @@
     "lint:fix": "vue-cli-service lint --fix"
   },
   "dependencies": {
-    "@panzoom/panzoom": "^4.3.2",
     "core-js": "^3.6.5",
     "file-loader": "^6.1.0",
     "ipfs": "^0.50.0",
-    "lodash": "^4.17.20",
     "marked": "^1.1.1",
     "pixi.js": "^5.3.3",
     "pouchdb": "^7.2.2",
     "vue": "^2.6.12",
-    "vue-context": "^6.0.0",
     "vue-draggable-resizable": "^2.2.0",
     "vue-emoji-picker": "^1.0.1",
     "vue-router": "^3.4.3",

app/src/components/DiscardLayer.vue

+<template>
+  <div>
+    <div v-if="deleted == true">
+      <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 class="btn-row">
+          <BaseButton buttonClass="danger" @click="restoreNode(nodeid)"
+            >Restore</BaseButton
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import marked from 'marked'
+export default {
+  name: 'ListLayer',
+
+  data: function () {
+    return {}
+  },
+
+  props: {
+    nodeid: String,
+    nodetext: String,
+    deleted: Boolean,
+  },
+
+  computed: mapState({
+    myNodes: (state) => state.myNodes,
+    configEmoji: (state) => state.configEmoji,
+  }),
+
+  filters: {
+    marked: marked,
+  },
+
+  methods: {
+    restoreNode(e) {
+      this.$store.dispatch('restoreNode', { e })
+    },
+  },
+}
+</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;
+}
+
+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>

app/src/components/ListLayer.vue

 <template>
-  <div class="nodes">
-    <form>
-      <div v-if="readmode == false">
+  <div>
+    <div v-if="deleted == false">
+      <form class="nodes">
         <div v-for="value in $options.myArray" v-bind:key="value.node_id">
-          <div v-if="value.deleted == false">
           <textarea
             v-if="nodeid == value.node_id"
             @focus="editTrue(true)"
@@ -16,20 +15,52 @@
             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
+//var readmode
 export default {
   name: 'ListLayer',
 
   data: function () {
-    return {}
+    return {
+      // localreadmode: false,
+    }
   },
 
   props: {
@@ -41,7 +72,7 @@ export default {
   computed: mapState({
     myNodes: (state) => state.myNodes,
     configPositions: (state) => state.configPositions,
-    //  shortcutstate: (state) => state.shortcutstate,
+    configEmoji: (state) => state.configEmoji,
   }),
 
   myArray: null,
@@ -60,26 +91,31 @@ export default {
       this.$emit('editTrue', e)
     },
 
-    readFlag(e) {
+    deleteFlag(e) {
       e = this.nodeid
+      this.$store.dispatch('deleteFlag', { e })
+    },
 
-      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
-        }
-      }
+    // readFlag(e) {
+    //   e = this.nodeid
 
-      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'
-      }
-    },
+    //   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>
@@ -111,4 +147,25 @@ textarea {
   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>

app/src/components/OnBoard.vue

@@ -44,7 +44,7 @@
         class="innernode"
         :w="310"
         :h="375"
-        :x="850"
+        :x="600"
         :y="15"
         :z="1"
         :draggable="true"
@@ -202,10 +202,6 @@ export default {
 </script>
 
 <style lang="css" scoped>
-.start {
-  opacity: 0;
-  filter: alpha(opacity=0);
-}
 .vdr {
   padding: 0 0.5em;
 }

app/src/components/OtherListlayer.vue

@@ -20,17 +20,17 @@ export default {
   name: 'OtherListlayer',
   props: {
     nodeid: String,
-    nodetext: String
+    nodetext: String,
   },
 
   computed: mapState({
-    otherNodes: state => state.otherNodes
+    otherNodes: (state) => state.otherNodes,
   }),
 
   filters: {
     // need to write a reverse data filter I suspect here so new data is at the top of list
-    marked: marked
-  }
+    marked: marked,
+  },
 }
 </script>
 

app/src/components/OtherNodeslayer.vue

@@ -4,7 +4,7 @@
       <div v-if="toolmode == 'move'">
         <!-- make draggable false as we are panning around -->
         <vue-draggable-resizable
-          v-if="nodeid == value.node_id"
+          v-if="nodeid == value.node_id && deleted == false"
           :w="value.width"
           :h="value.height"
           :x="value.x_pos"
@@ -109,7 +109,7 @@
 
       <div v-else>
         <vue-draggable-resizable
-          v-if="nodeid == value.node_id"
+          v-if="nodeid == value.node_id && deleted == false"
           :w="value.width"
           :h="value.height"
           :x="value.x_pos"
@@ -229,6 +229,7 @@ export default {
     nodetext: String,
     nodewidth: Number,
     nodeheight: Number,
+    deleted: Boolean,
   },
 
   data() {

app/src/components/TipsLayer.vue

@@ -54,10 +54,6 @@ export default {
 </script>
 
 <style lang="css" scoped>
-.start {
-  opacity: 0;
-  filter: alpha(opacity=0);
-}
 .vdr {
   padding: 0 0.5em;
 }

app/src/router/index.js

@@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
 import List from '../views/List.vue'
 import Discarded from '../views/Discarded.vue'
+import Leave from '../views/Leave.vue'
 // import Oldhome from '../views/Oldhome'
 //import Test from '../views/Test'
 
@@ -24,6 +25,11 @@ export const routes = [
     name: 'Discarded',
     component: Discarded,
   },
+  {
+    path: '/leave',
+    name: 'Leave',
+    component: Leave,
+  },
   {
     path: '/about',
     name: 'About',

app/src/views/Discarded-old.vue

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

app/src/views/Discarded.vue

 <template>
-  <div id="discardwrapper">
-    <h1 class="restore">Your discarded nodes</h1>
-
+  <div id="listwrapper">
     <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)"
+      <h1 class="mobile">dicarded nodes - list view</h1>
+
+      <DiscardLayer
+        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"
       />
-            <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>
+      <OnBoard @clientAdded="clientAdded()" @editTrue="(e) => editTrue(e)" />
     </div>
-      </form>
   </div>
-  </div>
-  <!-- </div> -->
 </template>
 
 <script>
-// import OffLine from '@/components/OffLine'
-// import OnBoard from '@/components/OnBoard.vue'
 import Router from '@/router'
-
+import DiscardLayer from '@/components/DiscardLayer'
+import OnBoard from '@/components/OnBoard'
 import { mapState } from 'vuex'
 import marked from 'marked'
 import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'
 
 export default {
   name: 'Discarded',
+
   mixins: [shortcutsMixin],
   data: function () {
     return {
@@ -101,10 +36,6 @@ export default {
       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,
     }
@@ -116,11 +47,14 @@ export default {
     deleted: Boolean,
   },
 
-  computed: mapState({
+  computed: {
+    ...mapState({
       myNodes: (state) => state.myNodes,
-    configPositions: (state) => state.configPositions,
+      // otherNodes: (state) => state.otherNodes,
       shortcutstate: (state) => state.shortcutstate,
+      toolmode: (state) => state.ui.mode,
     }),
+  },
 
   created() {
     if (typeof window !== 'undefined') {
@@ -134,69 +68,35 @@ export default {
     }
   },
 
-  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 })
+    addNode() {
+      this.$store.dispatch('addNode')
     },
 
     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 })
   },
+  components: {
+    DiscardLayer,
+    OnBoard,
+  },
+  filters: {
+    marked: marked,
   },
 }
 </script>
 
 <style lang="css" scoped>
-textarea {
-  width: 95%;
-  height: 100px;
+.mobile {
   margin-left: 1em;
+  font-size: 1em;
+}
+.new {
   margin-bottom: 1em;
 }
 </style>

app/src/views/Home.vue

@@ -41,6 +41,7 @@
               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)"
@@ -60,6 +61,7 @@
               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)"

app/src/views/Leave.vue

+<template>
+  <div class="leave"></div>
+</template>
+<script>
+export default {
+  name: 'Leave',
+
+  created() {
+    this.removeLocal()
+  },
+
+  methods: {
+    removeLocal: function () {
+      localStorage.removeItem('myNNClient')
+      localStorage.removeItem('mylastMicrocosm')
+
+      location.assign(
+        process.env.VUE_APP_HTTP + '://' + process.env.VUE_APP_URL + '/'
+      )
+    },
+  },
+}
+</script>
+
+<style lang="css" scoped></style>

app/src/views/List.vue

@@ -56,7 +56,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,
     }),