From da7a1156c6dbb5fc05b4bf8e41e0fdcf8c5255cd Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Wed, 17 Jun 2020 12:34:55 +0100
Subject: [PATCH] added basic list view
also tidied up experimental tests view for this build
---
.DS_Store | Bin 8196 -> 10244 bytes
CHANGELOG.md | 19 ++++
app/package.json | 2 +-
app/src/components/IpfsInfo.vue | 14 ++-
app/src/experimental/ModeToolbar.vue | 2 +-
app/src/router/index.js | 32 +++---
app/src/views/List.vue | 161 ++++++++++++++++++++++++---
7 files changed, 195 insertions(+), 35 deletions(-)
diff --git a/.DS_Store b/.DS_Store
index 5601acadaccd652acf3c396323ecbf9b53610c3a..fd1a2cf3cdcdac96fd96b4efe3c7b0c9d68769cd 100644
GIT binary patch
delta 1004
zcmd^7%`O8`7(Jt;BPOQO`dM@_R=Q{>mC!D1D1#9cWh?1lB$T!qEJSKiON(X_;R(dD
zsps$l9>kJ!Z;N&^TPruY_xtY8`Mz^*PGhmLGX+3NT@+>kgQ?0XVnAzFCz|GTaFiQ`
zdzACJQaLBCTGa=C^Hy*B)j@Se-20G41r@vW`-Z0roRLpC07nZv>4~{y)R<4iZ=%L^
zG8u2b2HuA18kVt+C2V627B-P)G;xZ8tK3U(Ip#WXX`=SA2OB9IFtcS9541ArLi^dt
zW(BKGNCsAaGv&_pT*H>6Xk(QmGi;UiBq=mMerskv#(&8oj}xv(C?bXu%5rbw7&Yeg
zv;Ni)I(thDQ=i4=E2Lm~HI>@>5gGZXmL%=<8$w<evB4A=$0gb1$)`Y;=1&&G70=Ge
zzt&Y!bkU_^MeQgSz6c68$YG2ySi(uI>W9zK!@Hq@j=v(}o}P+}=v2b@?f1~L^52bc
I__s#*0yn+!4*&oF
delta 148
zcmZn(XmOBWU|?W$DortDU;r^WfEYvza8E20o2aKK$_kPP@)?Q?l5+BsfV`7Q1se;e
zu}^H^-OSFx!okQo*+^g}zmciAj)IYyd998@wWWp0=34^iST~lmG72&SwE%$xH;`}z
i8N9LZJM(0Il|T-lu^{UhCdczk-K;Fy%DAzli4g!_4<6G1
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 65c6397..2ababc2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,22 @@
+# 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_
diff --git a/app/package.json b/app/package.json
index a2b2d74..3e4956c 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
{
"name": "nodenogg.in",
- "version": "0.1.14",
+ "version": "0.1.15",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
diff --git a/app/src/components/IpfsInfo.vue b/app/src/components/IpfsInfo.vue
index ce08e91..da274f7 100644
--- a/app/src/components/IpfsInfo.vue
+++ b/app/src/components/IpfsInfo.vue
@@ -1,7 +1,7 @@
<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>
diff --git a/app/src/experimental/ModeToolbar.vue b/app/src/experimental/ModeToolbar.vue
index a669b35..6b2f4e6 100644
--- a/app/src/experimental/ModeToolbar.vue
+++ b/app/src/experimental/ModeToolbar.vue
@@ -97,7 +97,7 @@ export default {
<style scoped>
nav {
- position: absolute;
+ position: fixed;
bottom: 1em;
left: 1em;
diff --git a/app/src/router/index.js b/app/src/router/index.js
index 0830c5e..f33b39c 100644
--- a/app/src/router/index.js
+++ b/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',
diff --git a/app/src/views/List.vue b/app/src/views/List.vue
index c687213..30bb86e 100644
--- a/app/src/views/List.vue
+++ b/app/src/views/List.vue
@@ -1,7 +1,8 @@
<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,38 +11,106 @@
@editTrue="(e) => editTrue(e)"
/> -->
- <div v-for="value in myNodes" v-bind:key="value.node_id">
- <textarea
- @focus="editTrue(true)"
- @blur="editTrue(false)"
- autofocus
- @input="editNode"
- v-model="value.node_text"
- :id="nodeid"
- ref="nodetext"
- placeholder="Idea goes here!"
- ></textarea>
+ <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>
- <!-- <OnBoard @clientAdded="clientAdded()" @editTrue="(e) => editTrue(e)" /> -->
+ <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)"
+ autofocus
+ @input="editNode"
+ v-model="value.node_text"
+ :id="nodeid"
+ ref="nodetext"
+ placeholder="Idea goes here!"
+ ></textarea>
+ </div>
+ <!-- </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>
--
GitLab