Skip to content
Snippets Groups Projects
Commit 7048a762 authored by Adam Procter's avatar Adam Procter
Browse files

added most of the onboarding 

still connecting to wrong microcosm for Nodes
parent b6ec2c8f
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
canvas-10-feb/src/components/NodesLayer.vue
+ 0
− 1
View file @ 7048a762
......@@ -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() {
......
canvas-10-feb/src/components/OnBoard.vue 0 → 100644
+ 202
− 0
View file @ 7048a762
<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>
canvas-10-feb/src/store/index.js
+ 80
− 11
View file @ 7048a762
......@@ -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 })
}
......
canvas-10-feb/src/views/Home.vue
+ 35
− 17
View file @ 7048a762
<template>
<div class="home">
<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
<OtherNodeslayer
v-for="value in otherNodes"
v-bind:key="value.nodeid"
v-bind:nodeid="value.nodeid"
......@@ -15,29 +17,45 @@
<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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment