diff --git a/canvas-10-feb/src/components/NodesLayer.vue b/canvas-10-feb/src/components/NodesLayer.vue
index 6afd23e1421a3cc22bab1393a82a422df7a056de..7542a58ddd0972063e5da1391563752427ebf073 100644
--- a/canvas-10-feb/src/components/NodesLayer.vue
+++ b/canvas-10-feb/src/components/NodesLayer.vue
@@ -23,7 +23,6 @@ import { mapState } from 'vuex'
export default {
name: 'NodesLayer',
mixins: [drag],
- // FIXME : these probably need to be data or computed and not props
props: { nodeid: Number, nodetext: String },
data() {
diff --git a/canvas-10-feb/src/components/OnBoard.vue b/canvas-10-feb/src/components/OnBoard.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cc29351a0077a66e7cfe43217dca3183754f5843
--- /dev/null
+++ b/canvas-10-feb/src/components/OnBoard.vue
@@ -0,0 +1,202 @@
+<template>
+ <div class="notlogged">
+ <h1>nodenogg.in</h1>
+ <p>
+ nodenogg.in is a
+ <span>work in progress</span> collaborative co-creation research and
+ design thinking tool, read more details and links in the
+ <a
+ href="/#/about"
+ >about</a> section.
+ </p>
+
+ <form v-show="parta">
+ <h2>1</h2>
+ <h3>microcosm</h3>
+ <p>
+ create or join a microcosm. a microcosm is a sharable digital space that
+ can be shared privately between a group of individuals. all content /
+ data you contribute is stored locally on your device and then shared
+ privately to others on the same microcosm. you can remove your
+ contributions at any time, they belong to you.
+ </p>
+ <input
+ type="text"
+ v-model.trim="localmicrocosm"
+ placeholder="microcosm name"
+ autocorrect="off"
+ autocapitalize="none"
+ autofocus
+ />
+ <button @click="createMicrocosm(), setFocus()">+</button>
+ </form>
+
+ <form v-show="partb">
+ <h2>2</h2>
+ <h3>object</h3>
+ <p>
+ give yourself an object name, this is what connects you to your content
+ / data. this object name is anonymous and stored privately.
+ </p>
+ <input
+ type="text"
+ v-model.trim="clientid"
+ placeholder="object name"
+ autocorrect="off"
+ autocapitalize="none"
+ ref="objectname"
+ />
+ <button @click="setClient()">+</button>
+ </form>
+
+ <form v-show="partc">
+ <h2>3</h2>
+ <h3>start</h3>
+ <button @click="letsGo()">+</button>
+ </form>
+ </div>
+</template>
+
+<script>
+var delay = 100
+
+export default {
+ data: function() {
+ return {
+ localmicrocosm: '',
+ clientid: '',
+ parta: true,
+ partb: false,
+ partc: false
+ }
+ },
+
+ mounted() {
+ if (localStorage.myNNClient) {
+ this.clientid = localStorage.myNNClient
+ this.localmicrocosm = localStorage.mylastMicrocosm
+ this.createMicrocosm()
+ this.setClient()
+ this.letsGo()
+ }
+ },
+
+ methods: {
+ createMicrocosm() {
+ ;(this.partb = true),
+ this.$store.dispatch('createMicrocosm', this.localmicrocosm)
+ localStorage.setItem('mylastMicrocosm', this.localmicrocosm)
+ },
+ setClient() {
+ ;(this.partc = true),
+ this.$store.dispatch('setClient', this.clientid),
+ localStorage.setItem('myNNClient', this.clientid)
+ },
+ letsGo() {
+ this.$emit('clientAdded')
+ // this.$emit('readyMode')
+ },
+ setFocus() {
+ setTimeout(this.readyFocus, delay)
+ },
+ readyFocus() {
+ this.$refs.objectname.focus()
+ }
+ }
+}
+</script>
+
+<style lang="css" scoped>
+@import url('https://rsms.me/inter/inter.css');
+html {
+ font-family: 'Inter', sans-serif;
+}
+@supports (font-variation-settings: normal) {
+ html {
+ font-family: 'Inter var', sans-serif;
+ }
+}
+ul {
+ font-family: 'Pica 10 Pitch W01';
+ font-size: 16px;
+ line-height: 20px;
+}
+
+li:before {
+ content: '';
+}
+
+b {
+ background-color: yellow;
+ padding-right: 2em;
+}
+
+h1 {
+ font-size: 3em;
+}
+
+h1,
+h2,
+h3,
+p {
+ font-family: 'Inter var', sans-serif;
+ color: black;
+ margin: 0px;
+}
+
+p {
+ margin-top: 2em;
+}
+
+h2 {
+ float: right;
+ font-size: 3em;
+}
+
+h3 {
+ font-size: 3em;
+ margin-top: 0.5em;
+}
+
+form {
+ padding: 1em;
+ border-style: solid;
+ border-width: 0.5em;
+ border-color: #cab6ff;
+ margin-top: 1em;
+}
+
+input {
+ border-style: solid;
+ border-width: 1px;
+ border-color: #cab6ff;
+ padding: 0.5em;
+}
+
+button {
+ font-size: 1.8em;
+ color: black;
+ border-style: solid;
+ border-width: 5px;
+ border-color: black;
+ border-radius: 50%;
+ background-color: white;
+ box-shadow: none;
+ height: 1.5em;
+ width: 1.5em;
+ padding: 0px;
+}
+
+button:active {
+ background-color: #cab6ff;
+}
+
+@media only screen and (min-width: 640px) {
+ /* Style adjustments for viewports that meet the condition */
+
+ .notlogged {
+ grid-column: 1 / 3;
+ grid-row: 1;
+ }
+}
+</style>
diff --git a/canvas-10-feb/src/store/index.js b/canvas-10-feb/src/store/index.js
index b17ce5826e4f1dc1f7d911e0f73bf119d38df3a8..e9c1be593d76f3612d0646d00195051eee72a540 100644
--- a/canvas-10-feb/src/store/index.js
+++ b/canvas-10-feb/src/store/index.js
@@ -2,28 +2,33 @@ import Vue from 'vue'
import Vuex from 'vuex'
import PouchDB from 'pouchdb'
import accounts from '../assets/settings.json'
+//PouchDB.debug.enable('*')
Vue.use(Vuex)
-// var rando = Math.random()
-// .toString(16)
-// .slice(2)
-var microcosm = 'podcast2020'
-var pouchdb = new PouchDB(microcosm)
+
+if (localStorage.getItem('mylastMicrocosm') == null) {
+ var localmicrocosm = 'firstvisit'
+} else {
+ localmicrocosm = localStorage.getItem('mylastMicrocosm')
+}
+
+var pouchdb = new PouchDB(localmicrocosm)
var remote =
'https://' +
accounts.settings[0].name +
':' +
accounts.settings[0].password +
'@nn.adamprocter.co.uk/' +
- microcosm +
+ localmicrocosm +
'/'
const store = new Vuex.Store({
state: {
localnodeid: null,
global_pos_name: 'positions',
- // this is set with localStorage or could be random on Every Load
- // so long as you can edit all nodes
+ global_con_name: 'connections',
+ global_emoji_name: 'emojis',
+ microcosm: '',
myclient: 'mac',
activeNode: {},
// this will be objects containing arrays of all the handles / connections and nodes
@@ -49,9 +54,68 @@ const store = new Vuex.Store({
],
configPositions: [
//{}
+ ],
+ configConnections: [
+ //{}
+ ],
+ configEmoji: [
+ //{}
]
},
mutations: {
+ CREATE_MICROCOSM(state, doc) {
+ pouchdb.close().then(function() {
+ localmicrocosm = doc
+ pouchdb = new PouchDB(localmicrocosm)
+ remote =
+ 'https://' +
+ accounts.settings[0].name +
+ ':' +
+ accounts.settings[0].password +
+ '@nn.adamprocter.co.uk/' +
+ localmicrocosm +
+ '/'
+ store.dispatch('syncDB')
+ })
+ },
+
+ SET_CLIENT(state, doc) {
+ state.myclient = doc
+ console.log(state.myclient)
+ store.commit('SET_MY_NODE')
+ store.commit('GET_NODES')
+ },
+
+ SET_MY_NODE(state) {
+ pouchdb
+ .get(state.myclient)
+ .then(function(doc) {
+ state.myNodes = doc.nodes
+ })
+ .catch(function(err) {
+ if (err.status == 404) {
+ var uniqueid =
+ Math.random()
+ .toString(36)
+ .substring(2, 15) +
+ Math.random()
+ .toString(36)
+ .substring(2, 15)
+ return pouchdb.put({
+ _id: state.myclient,
+ _attachments: {},
+ myNodes: [
+ {
+ // FIXME: these are here as GET_NODES cant hunt a blank
+ nodeid: uniqueid,
+ nodetext: 'Device ' + state.myclient
+ }
+ ]
+ })
+ }
+ })
+ },
+
GET_NODES(state) {
pouchdb
.allDocs({
@@ -72,8 +136,8 @@ const store = new Vuex.Store({
state.global_emoji_name != doc.rows[i].key
) {
for (j = 0; j < Object.keys(doc.rows[i].doc.nodes).length; j++) {
- console.log(doc.rows[i].doc.nodes[j].nodeid)
- console.log(doc.rows[i].doc.nodes[j].nodetext)
+ // console.log(doc.rows[i].doc.nodes[j].nodeid)
+ // console.log(doc.rows[i].doc.nodes[j].nodetext)
const newNode = {
nodeid: doc.rows[i].doc.nodes[j].nodeid,
nodetext: doc.rows[i].doc.nodes[j].nodetext
@@ -237,7 +301,12 @@ const store = new Vuex.Store({
})
})
},
-
+ createMicrocosm: ({ commit }, e) => {
+ commit('CREATE_MICROCOSM', e)
+ },
+ setClient: ({ commit }, e) => {
+ commit('SET_CLIENT', e)
+ },
editNode: ({ commit }, { nodeid, nodetext }) => {
commit('EDIT_NODE', { nodeid, nodetext })
}
diff --git a/canvas-10-feb/src/views/Home.vue b/canvas-10-feb/src/views/Home.vue
index 5f3c83192c0692301726dab9b61022199b2f0048..5b329a967107064d4bf013e02db5e6164f2a5acf 100644
--- a/canvas-10-feb/src/views/Home.vue
+++ b/canvas-10-feb/src/views/Home.vue
@@ -1,43 +1,61 @@
<template>
<div class="home">
- <NodesLayer
- v-for="value in myNodes"
- v-bind:key="value.nodeid"
- v-bind:nodeid="value.nodeid"
- v-bind:nodetext="value.nodetext"
- />
- <otherNodeslayer
- v-for="value in otherNodes"
- v-bind:key="value.nodeid"
- v-bind:nodeid="value.nodeid"
- v-bind:nodetext="value.nodetext"
- />
- <CanvasLayer />
- <ControlsLayer />
+ <OnBoard @clientAdded="clientAdded()" />
+ <div v-if="clientset">
+ <NodesLayer
+ v-for="value in myNodes"
+ v-bind:key="value.nodeid"
+ v-bind:nodeid="value.nodeid"
+ v-bind:nodetext="value.nodetext"
+ />
+ <OtherNodeslayer
+ v-for="value in otherNodes"
+ v-bind:key="value.nodeid"
+ v-bind:nodeid="value.nodeid"
+ v-bind:nodetext="value.nodetext"
+ />
+ <CanvasLayer />
+ <ControlsLayer />
+ </div>
</div>
</template>
<script>
// @ is an alias to /src
+import OnBoard from '@/components/OnBoard.vue'
import CanvasLayer from '@/components/CanvasLayer.vue'
import NodesLayer from '@/components/NodesLayer.vue'
-import otherNodeslayer from '@/components/otherNodeslayer.vue'
+import OtherNodeslayer from '@/components/OtherNodeslayer.vue'
import ControlsLayer from '@/components/ControlsLayer.vue'
import { mapState } from 'vuex'
export default {
name: 'Home',
+
+ data: function() {
+ return {
+ clientset: false
+ }
+ },
+
components: {
+ OnBoard,
CanvasLayer,
NodesLayer,
- otherNodeslayer,
+ OtherNodeslayer,
ControlsLayer
},
computed: mapState({
myNodes: state => state.myNodes,
otherNodes: state => state.otherNodes
- })
+ }),
+ methods: {
+ clientAdded() {
+ this.clientset = !this.clientset
+ console.log(this.clientset)
+ }
+ }
}
</script>