From c5cf9ad9fd34ce1160b747d669132e41a6bb23a6 Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Wed, 11 Mar 2020 16:48:51 +0000
Subject: [PATCH] updated to new schema and some linting from vue to remove
warnings
---
app/babel.config.js | 4 +-
app/src/components/NodesLayer.vue | 65 +++++++++++++-----------
app/src/components/OnBoard.vue | 4 +-
app/src/components/OtherNodeslayer.vue | 61 ++++++++++++++---------
app/src/store/index.js | 68 +++++++++++---------------
app/src/views/About.vue | 13 +++--
app/src/views/Home.vue | 12 ++---
app/vue.config.js | 2 +-
8 files changed, 122 insertions(+), 107 deletions(-)
diff --git a/app/babel.config.js b/app/babel.config.js
index 397abca..716b023 100644
--- a/app/babel.config.js
+++ b/app/babel.config.js
@@ -1,3 +1,3 @@
module.exports = {
- presets: ["@vue/cli-plugin-babel/preset"]
-};
+ presets: ['@vue/cli-plugin-babel/preset']
+}
diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index 9d7cc0d..28ea52c 100644
--- a/app/src/components/NodesLayer.vue
+++ b/app/src/components/NodesLayer.vue
@@ -3,11 +3,12 @@
<div v-for="(value, index) in configPositions" v-bind:key="index">
<vue-draggable-resizable
class="innernode"
- v-if="nodeid == value.nodeid"
+ v-if="nodeid == value.node_id"
:w="value.width"
:h="value.height"
- :x="value.xpos"
- :y="value.ypos"
+ :x="value.x_pos"
+ :y="value.y_pos"
+ :z="value.z_index"
@activated="onActivated"
@dragging="onDrag"
@resizing="onResize"
@@ -17,24 +18,19 @@
style="background-color: rgb(205, 234, 255)"
>
<form>
- <div v-for="value in myNodes" v-bind:key="value.nodeid">
+ <div v-for="value in myNodes" v-bind:key="value.node_id">
<textarea
- v-if="nodeid == value.nodeid"
+ v-if="nodeid == value.node_id"
@input="editNode"
- v-model="value.nodetext"
+ v-model="value.node_text"
:id="nodeid"
class="drag-cancel"
></textarea>
</div>
<h3>Reactions</h3>
<div v-for="(emojis, index) in configEmoji" :key="index">
- <p class="allemoji" v-if="nodeid == emojis.docid">{{ emojis.emojitext }}</p>
+ <p class="allemoji" v-if="nodeid == emojis.node_id">{{ emojis.emoji_text }}</p>
</div>
- <!-- <div v-for="(value, index) in configPositions" v-bind:key="index">
- <p v-if="nodeid == value.nodeid">
- {{ localx }}, ({{ value.xpos }}) {{ localy }}
- </p>
- </div>-->
<p>markdown supported</p>
<button class="danger" @click="deleteFlag()">Delete</button>
@@ -59,12 +55,7 @@ export default {
data() {
return {
- thistext: this.nodetext,
- width: this.nodewidth,
- height: this.nodeheight,
- localx: 0,
- localy: 0,
- globalscale: 0.7
+ pickupz: 99
}
},
@@ -79,8 +70,9 @@ export default {
methods: {
onActivated() {
var i
+
for (i = 0; i < Object.keys(this.configPositions).length; i++) {
- if (this.configPositions[i].nodeid == this.nodeid) {
+ if (this.configPositions[i].node_id == this.nodeid) {
this.width = this.configPositions[i].width
this.height = this.configPositions[i].height
}
@@ -92,36 +84,53 @@ export default {
this.width = width
this.height = height
},
- onResizestop(x, y, width, height) {
+ onResizestop(x, y, width, height, zindex) {
var localnodeid = this.nodeid
+ zindex = this.pickupz
var i
for (i = 0; i < Object.keys(this.configPositions).length; i++) {
- if (this.configPositions[i].nodeid == this.nodeid) {
+ if (this.configPositions[i].node_id == this.nodeid) {
this.width = this.configPositions[i].width
this.height = this.configPositions[i].height
+ this.pickupz = this.configPositions[i].z_index
}
}
this.width = width
this.height = height
- this.$store.dispatch('movePos', { localnodeid, x, y, width, height })
+ this.$store.dispatch('movePos', {
+ localnodeid,
+ x,
+ y,
+ width,
+ height,
+ zindex
+ })
},
onDrag(x, y) {
this.localx = x
this.localy = y
},
- onDragstop(x, y, width, height) {
+ onDragstop(x, y, width, height, zindex) {
var localnodeid = this.nodeid
-
+ zindex = this.pickupz
width = this.width
height = this.height
var i
for (i = 0; i < Object.keys(this.configPositions).length; i++) {
- if (this.configPositions[i].nodeid == this.nodeid) {
- this.localx = this.configPositions[i].xpos
- this.localy = this.configPositions[i].ypos
+ if (this.configPositions[i].node_id == this.nodeid) {
+ this.localx = this.configPositions[i].x_pos
+ this.localy = this.configPositions[i].y_pos
+ this.pickupz = this.configPositions[i].z_index
}
}
- this.$store.dispatch('movePos', { localnodeid, x, y, width, height })
+ this.$store.dispatch('movePos', {
+ localnodeid,
+ x,
+ y,
+ width,
+ height,
+ zindex
+ })
},
setFocus() {
diff --git a/app/src/components/OnBoard.vue b/app/src/components/OnBoard.vue
index 46edd71..10006ed 100644
--- a/app/src/components/OnBoard.vue
+++ b/app/src/components/OnBoard.vue
@@ -5,9 +5,7 @@
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.
+ <a href="/#/about">about</a> section.
</p>
<form v-show="parta">
diff --git a/app/src/components/OtherNodeslayer.vue b/app/src/components/OtherNodeslayer.vue
index 291399a..baabeb4 100644
--- a/app/src/components/OtherNodeslayer.vue
+++ b/app/src/components/OtherNodeslayer.vue
@@ -2,11 +2,12 @@
<div ref="othernodes" class="node">
<div v-for="(value, index) in configPositions" v-bind:key="index">
<vue-draggable-resizable
- v-if="nodeid == value.nodeid"
+ v-if="nodeid == value.node_id"
:w="value.width"
:h="value.height"
- :x="value.xpos"
- :y="value.ypos"
+ :x="value.x_pos"
+ :y="value.y_pos"
+ :z="value.z_index"
@activated="onActivated"
@dragging="onDrag"
@resizing="onResize"
@@ -17,7 +18,7 @@
<p :id="nodeid" :inner-html.prop="nodetext | marked">{{ nodeid }}</p>
<h3>Reactions</h3>
<div v-for="(emojis, index) in configEmoji" :key="index">
- <p class="allemoji" v-if="nodeid == emojis.docid">{{ emojis.emojitext }}</p>
+ <p class="allemoji" v-if="nodeid == emojis.node_id">{{ emojis.emoji_text }}</p>
</div>
<div class="react" v-if="nodeid != undefined">
<h2>React</h2>
@@ -91,13 +92,9 @@ export default {
data() {
return {
- thistext: this.nodetext,
- width: this.nodewidth,
- height: this.nodeheight,
- localx: 0,
- localy: 0,
input: '',
- search: ''
+ search: '',
+ pickupz: 99
}
},
@@ -115,9 +112,10 @@ export default {
onActivated() {
var i
for (i = 0; i < Object.keys(this.configPositions).length; i++) {
- if (this.configPositions[i].nodeid == this.nodeid) {
+ if (this.configPositions[i].node_id == this.nodeid) {
this.width = this.configPositions[i].width
this.height = this.configPositions[i].height
+ this.pickupz = this.configPositions[i].z_index
}
}
},
@@ -127,44 +125,62 @@ export default {
this.width = width
this.height = height
},
- onResizestop(x, y, width, height) {
+ onResizestop(x, y, width, height, zindex) {
var localnodeid = this.nodeid
+ zindex = this.pickupz
var i
for (i = 0; i < Object.keys(this.configPositions).length; i++) {
- if (this.configPositions[i].nodeid == this.nodeid) {
+ if (this.configPositions[i].node_id == this.nodeid) {
this.width = this.configPositions[i].width
this.height = this.configPositions[i].height
+ this.pickupz = this.configPositions[i].z_index
}
}
this.width = width
this.height = height
- this.$store.dispatch('movePos', { localnodeid, x, y, width, height })
+ this.$store.dispatch('movePos', {
+ localnodeid,
+ x,
+ y,
+ width,
+ height,
+ zindex
+ })
},
onDrag(x, y) {
this.localx = x
this.localy = y
},
- onDragstop(x, y, width, height) {
+ onDragstop(x, y, width, height, zindex) {
var localnodeid = this.nodeid
+ zindex = this.pickupz
width = this.width
height = this.height
var i
for (i = 0; i < Object.keys(this.configPositions).length; i++) {
- if (this.configPositions[i].nodeid == this.nodeid) {
- this.localx = this.configPositions[i].xpos
- this.localy = this.configPositions[i].ypos
+ if (this.configPositions[i].node_id == this.nodeid) {
+ this.localx = this.configPositions[i].x_pos
+ this.localy = this.configPositions[i].y_pos
+ this.pickupz = this.configPositions[i].z_index
}
}
- this.$store.dispatch('movePos', { localnodeid, x, y, width, height })
+ this.$store.dispatch('movePos', {
+ localnodeid,
+ x,
+ y,
+ width,
+ height,
+ zindex
+ })
},
append(emoji) {
this.input += emoji
},
- sentReact(docid, emojitext) {
+ sentReact(nodeid, emojitext) {
emojitext = this.input
- docid = this.nodeid
+ nodeid = this.nodeid
this.$store.dispatch('addEmoji', {
- docid,
+ nodeid,
emojitext
})
@@ -183,7 +199,6 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-
.node {
background-color: aquamarine;
position: absolute;
diff --git a/app/src/store/index.js b/app/src/store/index.js
index db1038d..b52e380 100644
--- a/app/src/store/index.js
+++ b/app/src/store/index.js
@@ -43,20 +43,8 @@ const store = new Vuex.Store({
myclient: myclient,
activeNode: {},
// this will be objects containing arrays of all the handles / connections and nodes
- configConnect: {
- x: -25,
- y: -25,
- height: 50,
- width: 50,
- fill: 'rgb(200, 0, 0)'
- },
- configHandle: {
- x: 25,
- y: 25,
- height: 10,
- width: 10,
- fill: 'black'
- },
+ configConnect: {},
+ configHandle: {},
allNodes: [],
myNodes: [
// { nodeid: 1, nodetext: 'node 1' },
@@ -125,8 +113,8 @@ const store = new Vuex.Store({
j++
) {
const newNode = {
- nodeid: state.allNodes[i].doc.nodes[j].nodeid,
- nodetext: state.allNodes[i].doc.nodes[j].nodetext
+ node_id: state.allNodes[i].doc.nodes[j].node_id,
+ node_text: state.allNodes[i].doc.nodes[j].node_text
}
state.otherNodes.push(newNode)
@@ -164,9 +152,9 @@ const store = new Vuex.Store({
// FIXME: these values are here as GET_ALL_NODES cant hunt a blank
// this shouldnt need to be here
- nodeid: uniqueid,
- nodetext: 'Ignore this node' + state.myclient,
- nodeowner: state.myclient,
+ node_id: uniqueid,
+ node_text: 'Ignore this node' + state.myclient,
+ node_owner: state.myclient,
content_type: 'sheet',
// TEMP: this hides the first node card as its effectivly auto deleted
deleted: true,
@@ -198,11 +186,12 @@ const store = new Vuex.Store({
MOVE_POS(state, e) {
var i
for (i = 0; i < Object.keys(state.configPositions).length; i++) {
- if (e.localnodeid == state.configPositions[i].nodeid) {
- state.configPositions[i].xpos = e.x
- state.configPositions[i].ypos = e.y
+ if (e.localnodeid == state.configPositions[i].node_id) {
+ state.configPositions[i].x_pos = e.x
+ state.configPositions[i].y_pos = e.y
state.configPositions[i].width = e.width
state.configPositions[i].height = e.height
+ state.configPositions[i].z_index = e.zindex
}
}
@@ -244,9 +233,9 @@ const store = new Vuex.Store({
pouchdb.get(state.myclient).then(function(doc) {
if (e == undefined) {
doc.nodes.push({
- nodeid: uniqueid,
- nodetext: '',
- nodeowner: state.myclient,
+ node_id: uniqueid,
+ node_text: '',
+ node_owner: state.myclient,
content_type: 'sheet',
deleted: false,
attachment_name: e
@@ -280,11 +269,12 @@ const store = new Vuex.Store({
})
pouchdb.get(state.global_pos_name).then(function(doc) {
doc.positions.push({
- nodeid: uniqueid,
- xpos: 50,
- ypos: 50,
+ node_id: uniqueid,
+ x_pos: 50,
+ y_pos: 50,
width: 200,
- height: 250
+ height: 250,
+ z_index: 1
})
return pouchdb
.put({
@@ -301,8 +291,8 @@ const store = new Vuex.Store({
EDIT_NODE(state, e) {
var i
for (i = 0; i < Object.keys(state.myNodes).length; i++) {
- if (e.nodeid == state.myNodes[i].nodeid) {
- state.myNodes[i].nodetext = e.nodetext
+ if (e.nodeid == state.myNodes[i].node_id) {
+ state.myNodes[i].node_text = e.nodetext
}
}
pouchdb
@@ -334,7 +324,7 @@ const store = new Vuex.Store({
DELETE_FLAG(state, e) {
var i
for (i = 0; i < Object.keys(state.myNodes).length; i++) {
- if (e.e == state.myNodes[i].nodeid) {
+ if (e.e == state.myNodes[i].node_id) {
state.myNodes[i].deleted = true
}
}
@@ -389,9 +379,9 @@ const store = new Vuex.Store({
.substring(2, 15)
pouchdb.get(state.global_emoji_name).then(function(doc) {
doc.emojis.push({
- id: uniqueid,
- docid: e.docid,
- emojitext: e.emojitext
+ emoji_id: uniqueid,
+ node_id: e.nodeid,
+ emoji_text: e.emojitext
})
return pouchdb
.put({
@@ -450,8 +440,8 @@ const store = new Vuex.Store({
commit('SET_CLIENT', e)
},
- movePos: ({ commit }, nodeid, xpos, ypos, width, height) => {
- commit('MOVE_POS', nodeid, xpos, ypos, width, height)
+ movePos: ({ commit }, nodeid, xpos, ypos, width, height, zindex) => {
+ commit('MOVE_POS', nodeid, xpos, ypos, width, height, zindex)
},
addNode: ({ commit }, e) => {
@@ -464,9 +454,9 @@ const store = new Vuex.Store({
// var text = e.target.value
commit('DELETE_FLAG', e)
},
- addEmoji: ({ commit }, { docid, emojitext }) => {
+ addEmoji: ({ commit }, { nodeid, emojitext }) => {
commit('ADD_EMOJI', {
- docid,
+ nodeid,
emojitext
})
}
diff --git a/app/src/views/About.vue b/app/src/views/About.vue
index 677f60f..291c5b5 100644
--- a/app/src/views/About.vue
+++ b/app/src/views/About.vue
@@ -23,7 +23,8 @@
version {{ myVersion }} - See full
<a
href="https://gitlab.adamprocter.co.uk/nn/nodenoggin/-/blob/master/CHANGELOG.md"
- >Changelog</a>
+ >Changelog</a
+ >
</h3>
<h3>known issues</h3>
@@ -51,9 +52,9 @@
</li>
<li>
- <a
- href="https://discursive.adamprocter.co.uk/categories/phd/"
- >discursive (phd catergory link)</a>
+ <a href="https://discursive.adamprocter.co.uk/categories/phd/"
+ >discursive (phd catergory link)</a
+ >
(blog)
</li>
<li>
@@ -76,7 +77,9 @@
</li>
<li>
- <a href="https://github.com/adamprocter/couchdoc-mirror/issues">issues</a>
+ <a href="https://github.com/adamprocter/couchdoc-mirror/issues"
+ >issues</a
+ >
(raise and review)
</li>
</ul>
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index c3b45dc..12e27e5 100644
--- a/app/src/views/Home.vue
+++ b/app/src/views/Home.vue
@@ -4,16 +4,16 @@
<div v-if="clientset">
<OtherNodeslayer
v-for="value in otherNodes"
- v-bind:key="value.nodeid"
- v-bind:nodeid="value.nodeid"
- v-bind:nodetext="value.nodetext"
+ v-bind:key="value.node_id"
+ v-bind:nodeid="value.node_id"
+ v-bind:nodetext="value.node_text"
/>
<NodesLayer
v-for="value in myNodes"
- v-bind:key="value.nodeid"
- v-bind:nodeid="value.nodeid"
- v-bind:nodetext="value.nodetext"
+ v-bind:key="value.node_id"
+ v-bind:nodeid="value.node_id"
+ v-bind:nodetext="value.node_text"
/>
<CanvasLayer />
diff --git a/app/vue.config.js b/app/vue.config.js
index fe3a2ba..6e444cb 100644
--- a/app/vue.config.js
+++ b/app/vue.config.js
@@ -1 +1 @@
-process.env.VUE_APP_VERSION = require('./package.json').version
\ No newline at end of file
+process.env.VUE_APP_VERSION = require('./package.json').version
--
GitLab