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

rough onboarding

parent 7048a762
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
canvas-10-feb/package.json
+ 2
− 0
View file @ 5cad8fa2
...@@ -10,7 +10,9 @@ ...@@ -10,7 +10,9 @@
"dependencies": { "dependencies": {
"core-js": "^3.6.4", "core-js": "^3.6.4",
"pouchdb": "^7.2.1", "pouchdb": "^7.2.1",
"pouchdb-find": "^7.2.1",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-draggable-resizable": "^2.1.0",
"vue-router": "^3.1.5", "vue-router": "^3.1.5",
"vuex": "^3.1.2" "vuex": "^3.1.2"
}, },
......
canvas-10-feb/src/components/NodesLayer.vue
+ 47
− 19
View file @ 5cad8fa2
<template> <template>
<div ref="nodes" class="node"> <div ref="nodes" class="node">
<form> <vue-draggable-resizable
<div v-for="value in myNodes" v-bind:key="value.nodeid"> :w="200"
<textarea :h="200"
v-if="nodeid == value.nodeid" @dragging="onDrag"
@input="editNode" @resizing="onResize"
v-model="value.nodetext" style="background-color: rgb(205, 234, 255);"
:id="nodeid" >
></textarea> <form>
</div> <div v-for="value in myNodes" v-bind:key="value.nodeid">
<textarea
v-if="nodeid == value.nodeid"
@input="editNode"
v-model="value.nodetext"
:id="nodeid"
></textarea>
</div>
<p>markdown supported</p> <p>markdown supported</p>
<button>delete</button> <button>delete</button>
</form> </form>
</vue-draggable-resizable>
</div> </div>
</template> </template>
<script> <script>
import { drag } from './mixins/drag.js' //import { drag } from './mixins/drag.js'
import { mapState } from 'vuex' import { mapState } from 'vuex'
export default { export default {
name: 'NodesLayer', name: 'NodesLayer',
mixins: [drag], // mixins: [drag],
props: { nodeid: Number, nodetext: String }, props: { nodeid: String, nodetext: String },
data() { data() {
return { return {
thistext: this.nodetext thistext: this.nodetext,
width: 0,
height: 0,
x: 0,
y: 0
} }
}, },
mounted() { mounted() {
var nodes = this.$refs.nodes // var nodes = this.$refs.nodes
this.makeDraggable(nodes) // this.makeDraggable(nodes)
}, },
computed: mapState({ computed: mapState({
myNodes: state => state.myNodes myNodes: state => state.myNodes
}), }),
methods: { methods: {
onResize: function(x, y, width, height) {
this.x = x
this.y = y
this.width = width
this.height = height
},
onDrag: function(x, y) {
this.x = x
this.y = y
},
setFocus() { setFocus() {
// this.$refs.nodetext.focus() // this.$refs.nodetext.focus()
}, },
...@@ -56,6 +78,12 @@ export default { ...@@ -56,6 +78,12 @@ export default {
<style scoped> <style scoped>
.node { .node {
background-color: rgb(207, 177, 235); background-color: rgb(207, 177, 235);
position: absolute; position: relative;
}
textarea {
width: 195px;
height: 120px;
resize: none;
} }
</style> </style>
canvas-10-feb/src/components/OnBoard.vue
+ 1
− 0
View file @ 5cad8fa2
...@@ -92,6 +92,7 @@ export default { ...@@ -92,6 +92,7 @@ export default {
this.$store.dispatch('setClient', this.clientid), this.$store.dispatch('setClient', this.clientid),
localStorage.setItem('myNNClient', this.clientid) localStorage.setItem('myNNClient', this.clientid)
}, },
letsGo() { letsGo() {
this.$emit('clientAdded') this.$emit('clientAdded')
// this.$emit('readyMode') // this.$emit('readyMode')
......
canvas-10-feb/src/components/otherNodeslayer.vue
+ 36
− 7
View file @ 5cad8fa2
<template> <template>
<div ref="othernodes" class="node"> <div ref="othernodes" class="node">
<p :id="nodeid">{{ nodetext }}</p> <vue-draggable-resizable
<p>markdown supported</p> :w="200"
:h="200"
@dragging="onDrag"
@resizing="onResize"
style="border: 1px solid black; background-color: rgb(205, 234, 255);"
>
<p :id="nodeid">{{ nodetext }}</p>
<p>markdown supported</p>
</vue-draggable-resizable>
</div> </div>
</template> </template>
<script> <script>
import { drag } from './mixins/drag.js' //import { drag } from './mixins/drag.js'
export default { export default {
name: 'otherNodeslayer', name: 'otherNodeslayer',
mixins: [drag], //mixins: [drag],
props: { nodeid: Number, nodetext: String }, props: { nodeid: String, nodetext: String },
data: function() {
return {
width: 0,
height: 0,
x: 0,
y: 0
}
},
mounted() { mounted() {
var othernodes = this.$refs.othernodes // var othernodes = this.$refs.othernodes
this.makeDraggable(othernodes) // this.makeDraggable(othernodes)
},
methods: {
onResize: function(x, y, width, height) {
this.x = x
this.y = y
this.width = width
this.height = height
},
onDrag: function(x, y) {
this.x = x
this.y = y
}
} }
} }
</script> </script>
......
canvas-10-feb/src/store/index.js
+ 108
− 48
View file @ 5cad8fa2
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
import PouchDB from 'pouchdb' import PouchDB from 'pouchdb'
PouchDB.plugin(require('pouchdb-find'))
import VueDraggableResizable from 'vue-draggable-resizable'
import accounts from '../assets/settings.json' import accounts from '../assets/settings.json'
//PouchDB.debug.enable('*') // PouchDB.debug.enable('*')
Vue.use(Vuex) Vue.use(Vuex)
Vue.component('vue-draggable-resizable', VueDraggableResizable)
var myclient = 'firstvisit'
if (localStorage.getItem('mylastMicrocosm') == null) { if (localStorage.getItem('mylastMicrocosm') == null) {
var localmicrocosm = 'firstvisit' var microcosm = 'firstvisit'
} else {
microcosm = localStorage.getItem('mylastMicrocosm')
}
if (localStorage.getItem('myNNClient') == null) {
myclient = 'firstvisit'
} else { } else {
localmicrocosm = localStorage.getItem('mylastMicrocosm') myclient = localStorage.getItem('myNNClient')
} }
var pouchdb = new PouchDB(localmicrocosm) var pouchdb = new PouchDB(microcosm)
var remote = var remote =
'https://' + 'https://' +
accounts.settings[0].name + accounts.settings[0].name +
':' + ':' +
accounts.settings[0].password + accounts.settings[0].password +
'@nn.adamprocter.co.uk/' + '@nn.adamprocter.co.uk/' +
localmicrocosm + microcosm +
'/' '/'
const store = new Vuex.Store({ const store = new Vuex.Store({
state: { state: {
localnodeid: null, localnodeid: '',
global_pos_name: 'positions', global_pos_name: 'positions',
global_con_name: 'connections', global_con_name: 'connections',
global_emoji_name: 'emojis', global_emoji_name: 'emojis',
microcosm: '', microcosm: '',
myclient: 'mac', myclient: myclient,
activeNode: {}, activeNode: {},
// this will be objects containing arrays of all the handles / connections and nodes // this will be objects containing arrays of all the handles / connections and nodes
configConnect: { configConnect: {
...@@ -46,6 +57,7 @@ const store = new Vuex.Store({ ...@@ -46,6 +57,7 @@ const store = new Vuex.Store({
width: 10, width: 10,
fill: 'black' fill: 'black'
}, },
allNodes: [],
myNodes: [ myNodes: [
// { nodeid: 1, nodetext: 'node 1' }, // { nodeid: 1, nodetext: 'node 1' },
], ],
...@@ -63,30 +75,36 @@ const store = new Vuex.Store({ ...@@ -63,30 +75,36 @@ const store = new Vuex.Store({
] ]
}, },
mutations: { mutations: {
// CREATE_INDEX() {
// pouchdb.createIndex({
// index: { fields: ['name'] }
// })
// },
CREATE_MICROCOSM(state, doc) { CREATE_MICROCOSM(state, doc) {
pouchdb.close().then(function() { pouchdb.close().then(function() {
localmicrocosm = doc // console.log(doc)
pouchdb = new PouchDB(localmicrocosm) microcosm = doc
pouchdb = new PouchDB(microcosm)
remote = remote =
'https://' + 'https://' +
accounts.settings[0].name + accounts.settings[0].name +
':' + ':' +
accounts.settings[0].password + accounts.settings[0].password +
'@nn.adamprocter.co.uk/' + '@nn.adamprocter.co.uk/' +
localmicrocosm + microcosm +
'/' '/'
store.dispatch('syncDB') store.dispatch('syncDB')
}) })
}, },
SET_CLIENT(state, doc) { SET_CLIENT(state, doc) {
state.myclient = doc state.myclient = doc
console.log(state.myclient) store.commit('GET_MY_NODES')
store.commit('SET_MY_NODE')
store.commit('GET_NODES')
}, },
SET_MY_NODE(state) { GET_MY_NODES(state) {
pouchdb pouchdb
.get(state.myclient) .get(state.myclient)
.then(function(doc) { .then(function(doc) {
...@@ -104,11 +122,18 @@ const store = new Vuex.Store({ ...@@ -104,11 +122,18 @@ const store = new Vuex.Store({
return pouchdb.put({ return pouchdb.put({
_id: state.myclient, _id: state.myclient,
_attachments: {}, _attachments: {},
myNodes: [ nodes: [
{ {
// FIXME: these are here as GET_NODES cant hunt a blank // FIXME: these values are here as GET_NODES cant hunt a blank
// this shouldnt be here
index: uniqueid,
nodeid: uniqueid, nodeid: uniqueid,
nodetext: 'Device ' + state.myclient nodetext: state.myclient,
nodeowner: state.myclient,
content_type: 'sheet',
// TEMP: this hides it by being auto deleted
deleted: true,
attachment_name: ''
} }
] ]
}) })
...@@ -116,41 +141,64 @@ const store = new Vuex.Store({ ...@@ -116,41 +141,64 @@ const store = new Vuex.Store({
}) })
}, },
GET_NODES(state) { GET_ALL_NODES(state) {
pouchdb pouchdb
.allDocs({ .allDocs({
include_docs: true, include_docs: true,
attachments: true attachments: true
}) })
.then(function(doc) { .then(function(doc) {
var i state.microcosm = microcosm
var j state.allNodes = doc.rows
for (i = 0; i < Object.keys(doc.rows).length; i++) { console.log(state.allNodes)
if (state.myclient == doc.rows[i].key) {
state.myNodes = doc.rows[i].doc.nodes
}
if (
state.myclient != doc.rows[i].key &&
state.global_pos_name != doc.rows[i].key &&
state.global_con_name != doc.rows[i].key &&
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)
const newNode = {
nodeid: doc.rows[i].doc.nodes[j].nodeid,
nodetext: doc.rows[i].doc.nodes[j].nodetext
}
state.otherNodes.push(newNode)
}
}
}
}) })
.catch(function(err) { .catch(function(err) {
console.log(err) console.log(err)
}) })
}, },
// GET_NODES(state) {
// //console.log(state)
// pouchdb
// .allDocs({
// include_docs: true,
// attachments: true
// })
// .then(function(doc) {
// state.microcosm = microcosm
// })
// .catch(function(err) {
// console.log(err)
// })
// },
// GET_ALL_NODES(state) {
// pouchdb
// .allDocs({
// include_docs: true,
// attachments: true
// })
// .then(function(doc) {
// //state.otherNodes = doc.rows
// var i
// for (i = 0; i < Object.keys(doc.rows).length; i++) {
// console.log(doc.rows[i].doc.nodes)
// //state.otherNodes = doc.rows[i].doc.nodes
// const newNode = {
// index: doc.rows[i].doc.nodes,
// nodeid: doc.rows[i].doc.nodes,
// nodetext: doc.rows[i].doc.nodes
// }
// state.otherNodes.push(newNode)
// }
// console.log(state.otherNodes)
// // doc.rows[i].doc.nodes
// })
// .catch(function(err) {
// console.log(err)
// })
// },
GET_POSITIONS(state) { GET_POSITIONS(state) {
pouchdb pouchdb
.get(state.global_pos_name) .get(state.global_pos_name)
...@@ -183,6 +231,7 @@ const store = new Vuex.Store({ ...@@ -183,6 +231,7 @@ const store = new Vuex.Store({
pouchdb.get(state.myclient).then(function(doc) { pouchdb.get(state.myclient).then(function(doc) {
if (e == undefined) { if (e == undefined) {
doc.notes.push({ doc.notes.push({
index: uniqueid,
nodeid: uniqueid, nodeid: uniqueid,
nodetext: '', nodetext: '',
nodeowner: state.myclient, nodeowner: state.myclient,
...@@ -197,16 +246,17 @@ const store = new Vuex.Store({ ...@@ -197,16 +246,17 @@ const store = new Vuex.Store({
_id: state.myclient, _id: state.myclient,
_rev: doc._rev, _rev: doc._rev,
_attachments: doc._attachments, _attachments: doc._attachments,
nodes: doc.notes index: doc.uniqueid,
nodes: doc.nodes
}) })
.then(function() { .then(function() {
return pouchdb.get(state.myclient).then(function(doc) { return pouchdb.get(state.myclient).then(function(doc) {
state.myNodes = doc.nodes state.myNodes = doc.nodes
var end = Object.keys(state.myNodes).length - 1 var end = Object.keys(state.myNodes).length - 1
const newNode = { const newNode = {
nodetext: state.myNodes[end].text,
nodeid: state.myNodes[end].id, nodeid: state.myNodes[end].id,
content_type: state.notes[end].content_type nodetext: state.myNodes[end].text
// content_type: state.notes[end].content_type
} }
state.activeNode = newNode state.activeNode = newNode
}) })
...@@ -239,13 +289,22 @@ const store = new Vuex.Store({ ...@@ -239,13 +289,22 @@ const store = new Vuex.Store({
var i var i
for (i = 0; i < Object.keys(state.myNodes).length; i++) { for (i = 0; i < Object.keys(state.myNodes).length; i++) {
if (e.nodeid == state.myNodes[i].nodeid) { if (e.nodeid == state.myNodes[i].nodeid) {
state.myNodes[i].nodetext = e.nodetext var uniqueid =
Math.random()
.toString(36)
.substring(2, 15) +
Math.random()
.toString(36)
.substring(2, 15)
;(state.myNodes[i].nodetext = e.nodetext),
(state.myNodes[i].index = uniqueid)
} }
} }
pouchdb pouchdb
.get(state.myclient) .get(state.myclient)
.then(function(doc) { .then(function(doc) {
// put the store into pouchdb // put the store into pouchdb
return pouchdb.bulkDocs([ return pouchdb.bulkDocs([
{ {
_id: state.myclient, _id: state.myclient,
...@@ -270,15 +329,16 @@ const store = new Vuex.Store({ ...@@ -270,15 +329,16 @@ const store = new Vuex.Store({
actions: { actions: {
syncDB: () => { syncDB: () => {
pouchdb.replicate.from(remote).on('complete', function() { pouchdb.replicate.from(remote).on('complete', function() {
store.commit('GET_NODES') store.commit('GET_ALL_NODES')
store.commit('GET_MY_NODES')
store.commit('GET_POSITIONS') store.commit('GET_POSITIONS')
// turn on two-way, continuous, retriable sync // turn on two-way, continuous, retriable sync
pouchdb pouchdb
.sync(remote, { live: true, retry: true, attachments: true }) .sync(remote, { live: true, retry: true, attachments: true })
.on('change', function() { .on('change', function() {
// pop info into function to find out more // pop info into function to find out more
console.log('change') store.commit('GET_ALL_NODES')
store.commit('GET_NODES') store.commit('GET_MY_NODES')
store.commit('GET_POSITIONS') store.commit('GET_POSITIONS')
}) })
.on('paused', function() { .on('paused', function() {
......
canvas-10-feb/src/views/Home.vue
+ 1
− 2
View file @ 5cad8fa2
<template> <template>
<div class="home"> <div class="home">
<OnBoard @clientAdded="clientAdded()" />
<div v-if="clientset"> <div v-if="clientset">
<NodesLayer <NodesLayer
v-for="value in myNodes" v-for="value in myNodes"
...@@ -17,6 +16,7 @@ ...@@ -17,6 +16,7 @@
<CanvasLayer /> <CanvasLayer />
<ControlsLayer /> <ControlsLayer />
</div> </div>
<OnBoard v-else @clientAdded="clientAdded()" />
</div> </div>
</template> </template>
...@@ -53,7 +53,6 @@ export default { ...@@ -53,7 +53,6 @@ export default {
methods: { methods: {
clientAdded() { clientAdded() {
this.clientset = !this.clientset this.clientset = !this.clientset
console.log(this.clientset)
} }
} }
} }
......
canvas-10-feb/yarn.lock
+ 93
− 0
View file @ 5cad8fa2
...@@ -5604,6 +5604,95 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.2 ...@@ -5604,6 +5604,95 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.2
source-map "^0.6.1" source-map "^0.6.1"
supports-color "^6.1.0" supports-color "^6.1.0"
pouchdb-abstract-mapreduce@7.2.1:
version "7.2.1"
resolved "https://registry.yarnpkg.com/pouchdb-abstract-mapreduce/-/pouchdb-abstract-mapreduce-7.2.1.tgz#ad87d89d0e376be8e7740b767365572422d940a8"
dependencies:
pouchdb-binary-utils "7.2.1"
pouchdb-collate "7.2.1"
pouchdb-collections "7.2.1"
pouchdb-errors "7.2.1"
pouchdb-fetch "7.2.1"
pouchdb-mapreduce-utils "7.2.1"
pouchdb-md5 "7.2.1"
pouchdb-utils "7.2.1"
pouchdb-binary-utils@7.2.1:
version "7.2.1"
resolved "https://registry.yarnpkg.com/pouchdb-binary-utils/-/pouchdb-binary-utils-7.2.1.tgz#ad23ed63d09699e7e6244f846b5cf07c6d9d4b8b"
dependencies:
buffer-from "1.1.0"
pouchdb-collate@7.2.1:
version "7.2.1"
resolved "https://registry.yarnpkg.com/pouchdb-collate/-/pouchdb-collate-7.2.1.tgz#1e8bcd8c8d007fb93b9e259f18f9525144253102"
pouchdb-collections@7.2.1:
version "7.2.1"
resolved "https://registry.yarnpkg.com/pouchdb-collections/-/pouchdb-collections-7.2.1.tgz#768c2c578b22eda9ac0c92a4b1106d18f3c113fb"
pouchdb-errors@7.2.1:
version "7.2.1"
resolved "https://registry.yarnpkg.com/pouchdb-errors/-/pouchdb-errors-7.2.1.tgz#798f5279a0d363d6b93c97a1b65ee903f61af143"
dependencies:
inherits "2.0.4"
pouchdb-fetch@7.2.1:
version "7.2.1"
resolved "https://registry.yarnpkg.com/pouchdb-fetch/-/pouchdb-fetch-7.2.1.tgz#f5373e7344b7434f53e900954b9b0caf71361a0a"
dependencies:
abort-controller "3.0.0"
fetch-cookie "0.7.3"
node-fetch "2.4.1"
pouchdb-find@^7.2.1:
version "7.2.1"
resolved "https://registry.yarnpkg.com/pouchdb-find/-/pouchdb-find-7.2.1.tgz#20604e7979bad74a0f423e5a30fc00d5aafed0e9"
dependencies:
pouchdb-abstract-mapreduce "7.2.1"
pouchdb-collate "7.2.1"
pouchdb-errors "7.2.1"
pouchdb-fetch "7.2.1"
pouchdb-md5 "7.2.1"
pouchdb-selector-core "7.2.1"
pouchdb-utils "7.2.1"
pouchdb-mapreduce-utils@7.2.1:
version "7.2.1"
resolved "https://registry.yarnpkg.com/pouchdb-mapreduce-utils/-/pouchdb-mapreduce-utils-7.2.1.tgz#ca0f1954b40b774ff427295373337f8def520f2b"
dependencies:
argsarray "0.0.1"
inherits "2.0.4"
pouchdb-collections "7.2.1"
pouchdb-utils "7.2.1"
pouchdb-md5@7.2.1:
version "7.2.1"
resolved "https://registry.yarnpkg.com/pouchdb-md5/-/pouchdb-md5-7.2.1.tgz#2b057b148b3f31491d77c4dd6b6139af31b07f66"
dependencies:
pouchdb-binary-utils "7.2.1"
spark-md5 "3.0.0"
pouchdb-selector-core@7.2.1:
version "7.2.1"
resolved "https://registry.yarnpkg.com/pouchdb-selector-core/-/pouchdb-selector-core-7.2.1.tgz#0eb190dff1df62d416ba670fdd84565542aa0183"
dependencies:
pouchdb-collate "7.2.1"
pouchdb-utils "7.2.1"
pouchdb-utils@7.2.1:
version "7.2.1"
resolved "https://registry.yarnpkg.com/pouchdb-utils/-/pouchdb-utils-7.2.1.tgz#5dec1c53c8ecba717e5762311e9a1def2d4ebf9c"
dependencies:
argsarray "0.0.1"
clone-buffer "1.0.0"
immediate "3.0.6"
inherits "2.0.4"
pouchdb-collections "7.2.1"
pouchdb-errors "7.2.1"
pouchdb-md5 "7.2.1"
uuid "3.3.3"
pouchdb@^7.2.1: pouchdb@^7.2.1:
version "7.2.1" version "7.2.1"
resolved "https://registry.yarnpkg.com/pouchdb/-/pouchdb-7.2.1.tgz#619e3d5c2463ddd94a4b1bf40d44408c46e9de79" resolved "https://registry.yarnpkg.com/pouchdb/-/pouchdb-7.2.1.tgz#619e3d5c2463ddd94a4b1bf40d44408c46e9de79"
...@@ -7054,6 +7143,10 @@ vm-browserify@^1.0.1: ...@@ -7054,6 +7143,10 @@ vm-browserify@^1.0.1:
version "1.1.2" version "1.1.2"
resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0" resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
vue-draggable-resizable@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/vue-draggable-resizable/-/vue-draggable-resizable-2.1.0.tgz#b590212aef3c07d040aeceda784438068170fb08"
vue-eslint-parser@^7.0.0: vue-eslint-parser@^7.0.0:
version "7.0.0" version "7.0.0"
resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.0.0.tgz#a4ed2669f87179dedd06afdd8736acbb3a3864d6" resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.0.0.tgz#a4ed2669f87179dedd06afdd8736acbb3a3864d6"
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment