bought back all the last two versions functionality

now done correctly to work on mobile as well as desktop

CHANGELOG.md

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

app/package.json

 {
   "name": "nodenogg.in",
-  "version": "0.1.25",
+  "version": "0.1.28",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

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>

app/src/components/CardsLayer.vue

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

app/src/components/ListLayer.vue

@@ -78,6 +78,7 @@ export default {
   myArray: null,
   created() {
     this.$options.myArray = this.myNodes
+    this.readFlag
   },
 
   methods: {

app/src/components/OtherCardslayer.vue

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

app/src/router/index.js

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

app/src/views/Cards.vue

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

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

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

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>