added basic list view

also tidied up experimental tests view for this build 

CHANGELOG.md

+# 0.1.15
+
+_17th June 2020_
+
+This version adds some testing components and these are not part of the future direct but allow testing of features that will be folded in when better understand in terms of tech or awaiting proper implementation.
+
+### Added
+
+- test view for IPFS
+- test view for list of your nodes (mobile)
+
+### Changed
+
+- more CSS edits
+
+### Removed
+
+- Hidden previous canvas view from build
+
 # 0.1.14
 
 _8th June 2020_

app/package.json

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

app/src/components/IpfsInfo.vue

 <template>
   <div>
-    <h1>IPFS Test</h1>
-    <h3>This is very exprimental and should not be used</h3>
+    <h1>IPFS View</h1>
+    <h3>Testing Only</h3>
     <h1>{{ status }}</h1>
     <h2>ID: {{ id }}</h2>
     <h2>Agent version: {{ agentVersion }}</h2>
@@ -84,7 +84,7 @@ export default {
         this.agentVersion = agentVersion
         this.id = id
         // Set successful status text.
-        this.status = 'Connected to IPFS =)'
+        this.status = 'Connected to IPFS 😊'
       } catch (err) {
         // Set error status text.
         this.status = `Error: ${err}`
@@ -98,4 +98,12 @@ export default {
 .fileInput {
   /* display: none; */
 }
+
+h1 {
+  font-size: 1em;
+}
+
+h3 {
+  color: red;
+}
 </style>

app/src/experimental/ModeToolbar.vue

@@ -97,7 +97,7 @@ export default {
 
 <style scoped>
 nav {
-  position: absolute;
+  position: fixed;
 
   bottom: 1em;
   left: 1em;

app/src/router/index.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
 import List from '../views/List.vue'
-import Oldhome from '../views/Oldhome'
+// import Oldhome from '../views/Oldhome'
 import Test from '../views/Test'
 
 Vue.use(VueRouter)
@@ -13,30 +13,32 @@ export const routes = [
     name: 'Home',
     component: Home,
   },
+  {
+    path: '/about',
+    name: 'About',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () =>
+      import(/* webpackChunkName: "about" */ '../views/About.vue'),
+  },
   {
     path: '/list',
     name: 'List Test',
     component: List,
   },
-  {
-    path: '/oldhome',
-    name: 'Old Home',
-    component: Oldhome,
-  },
+
   {
     path: '/test',
     name: 'IPFS Test',
     component: Test,
   },
-  {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () =>
-      import(/* webpackChunkName: "about" */ '../views/About.vue'),
-  },
+  // {
+  //   path: '/oldhome',
+  //   name: 'Old Home',
+  //   component: Oldhome,
+  // },
+
   // dynamic segement `:microcosm` is added to the path
   {
     path: '/microcosm/:microcosm',

app/src/views/List.vue

 <template>
-  <div>
+  <div id="listwrapper">
+    <!-- <div v-for="(posvalue, index) in configPositions" v-bind:key="index"> -->
     <h1 class="mobile">Your nodes - list mode</h1>
-    <h2>For testing</h2>
+    <h2>Testing Only</h2>
     <!-- <OffLine
       v-for="value in myNodes"
       v-bind:key="value.node_id"
@@ -10,7 +11,61 @@
       @editTrue="(e) => editTrue(e)"
     /> -->
 
-    <div v-for="value in myNodes" v-bind:key="value.node_id">
+    <form>
+      <div>
+        <p id="nodeid" :inner-html.prop="nodetext1 | marked"></p>
+        <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>
+    </form>
+
+    <form>
+      <div>
+        <p id="nodeid" :inner-html.prop="nodetext2 | marked"></p>
+        <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>
+    </form>
+    <div class="btn-row">
+      <BaseButton class="new" buttonClass="action" @click="addNode()"
+        >Create Node</BaseButton
+      >
+    </div>
+
+    <form>
+      <!-- <div v-if="posvalue.read_mode == false"> -->
+      <div
+        v-for="value in myNodes.slice().reverse()"
+        v-bind:key="value.node_id"
+      >
         <textarea
           @focus="editTrue(true)"
           @blur="editTrue(false)"
@@ -22,26 +77,40 @@
           placeholder="Idea goes here!"
         ></textarea>
       </div>
-
-    <!-- <OnBoard @clientAdded="clientAdded()" @editTrue="(e) => editTrue(e)" /> -->
+      <!-- </div> -->
+      <!-- <div v-if="posvalue.read_mode == true">
+          <p class="read" :id="nodeid" :inner-html.prop="nodetext | marked"></p>
+        </div> -->
+    </form>
 
     <ModeToolbar />
   </div>
+  <!-- </div> -->
 </template>
 
 <script>
 // import OffLine from '@/components/OffLine'
 // import OnBoard from '@/components/OnBoard.vue'
+import Router from '@/router'
 import ModeToolbar from '@/experimental/ModeToolbar'
 import { mapState } from 'vuex'
+import marked from 'marked'
+import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'
 
 export default {
   name: 'List',
-
+  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:
+        '## Start those engines ! 🏎 \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>',
     }
   },
 
@@ -53,19 +122,63 @@ export default {
 
   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()
+    }
+  },
+
   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)
+    },
+    setClient() {
+      this.$store.dispatch('setClient', this.clientid),
+        localStorage.setItem('myNNClient', this.clientid)
+    },
+
+    letsGo() {
+      this.$emit('clientAdded')
+    },
+
+    addNode() {
+      this.$store.dispatch('addNode')
+    },
+
     editTrue(e) {
       this.$store.dispatch('shortcutState', e)
     },
@@ -80,7 +193,25 @@ export default {
 </script>
 
 <style lang="css" scoped>
+h2 {
+  color: red;
+}
 .mobile {
   font-size: 1em;
 }
+
+#listwrapper {
+  margin-left: 1em;
+  margin-bottom: 1em;
+}
+.new {
+  margin-bottom: 1em;
+}
+
+textarea {
+  width: 95%;
+  height: 100px;
+  margin-left: 1em;
+  margin-bottom: 1em;
+}
 </style>