diff --git a/CHANGELOG.md b/CHANGELOG.md
index 035e63a34162a4ce561c9795ef9163f931c5636a..b0863748fffd95e66b4922cf2d38815bd099ad8e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,12 @@
+# 0.2.2
+
+_1st September 2021_
+
+## Added
+
+- you can now discard nodes
+- you can now toggle read and edit view of each node
+
# 0.2.1
_31st August 2021_
diff --git a/package.json b/package.json
index db7669919fc79cd948f16b700eaa299566e69e60..adaae21acdd59e042f4ea028e3b9a47be7f960f8 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
"pouchdb": "^7.2.2",
"vue": "^3.2.6",
"vue-router": "^4.0.0",
+ "vue3-swatches": "^1.0.2",
"vuex": "^4.0.0"
},
"devDependencies": {
diff --git a/src/components/MyNodes.vue b/src/components/MyNodes.vue
index 3a40b0b23da4acec7b91650663191f2e4078047e..4bbba8ed5f84bbfbfdbc65290c9bf648170b52e7 100644
--- a/src/components/MyNodes.vue
+++ b/src/components/MyNodes.vue
@@ -1,7 +1,7 @@
<template>
<div v-for="(nodes, index) in myArray" :key="index">
<form class="nodes">
- <template v-if="nodes.read_mode == false">
+ <template v-if="nodes.node_readmode == false">
<textarea
v-model="nodes.node_text"
@input="editNode"
@@ -11,8 +11,31 @@
rows="5"
></textarea>
<p class="info">*markdown supported & autosaves</p>
- <button>Colour</button>
- <button>Shape</button>
+
+ <VSwatches
+ v-model="nodes.node_color"
+ :swatches="swatches"
+ :shapes="shapes"
+ @input="chooseColor(nodes.node_id, nodes.node_color)"
+ show-border
+ show-fallback
+ fallback-input-type="color"
+ >
+ <template v-slot:trigger>
+ <button @click.prevent>{{ nodes.node_color }}</button>
+ </template>
+ </VSwatches>
+ <select
+ v-model="nodes.node_shape"
+ @input="setShape"
+ :id="nodes.node_id"
+ >
+ <option value="square">Square</option>
+ <option value="circle">Circle</option>
+ <option value="triangle">Triangle</option>
+ <option value="hexegon">Hexegon</option>
+ </select>
+
<button @click.prevent="toggleMode(nodes.node_id)">Read</button>
<button @click.prevent="discardNode(nodes.node_id)">Discard</button>
</template>
@@ -27,12 +50,14 @@
<script>
// @ is an alias to /src
import { mapState } from 'vuex'
-
+import VSwatches from 'vue3-swatches'
// import marked from 'marked'
export default {
name: 'MyNodes',
+ components: { VSwatches },
+
props: {
added: Boolean,
},
@@ -40,6 +65,14 @@ export default {
data() {
return {
myArray: [],
+ shapes: 'circles',
+ // swatches: [{ color: '#F493A7', showBorder: true }],
+ swatches: [
+ ['#EB5757', '#F2994A', '#F2C94C'],
+ ['#219653', '#27AE60', '#6FCF97'],
+ ['#2F80ED', '#2D9CDB', '#56CCF2'],
+ ['#9B51E0', '#BB6BD9', '#E9B7FC'],
+ ],
}
},
@@ -95,6 +128,19 @@ export default {
this.$store.dispatch('toggleMode', { e })
setTimeout(this.loadData, 500)
},
+
+ chooseColor(nodeid, color) {
+ this.$store.dispatch('colorNode', { nodeid, color })
+ setTimeout(this.loadData, 500)
+ },
+
+ setShape(e) {
+ var nodeid = e.target.id
+ var shape = e.target.value
+
+ this.$store.dispatch('setShape', { nodeid, shape })
+ setTimeout(this.loadData, 500)
+ },
},
}
</script>
diff --git a/src/store/modules/mynodes.js b/src/store/modules/mynodes.js
index e35ac46e7d3ea3cfd2c5ac5fc58df884573e873d..04ea835486f18ed1a8ca31e322961a803ba30c64 100644
--- a/src/store/modules/mynodes.js
+++ b/src/store/modules/mynodes.js
@@ -186,7 +186,6 @@ export const mutations = {
{
_id: deviceName,
_rev: doc._rev,
- _attachments: doc._attachments,
nodes: state.myNodes,
},
])
@@ -204,14 +203,14 @@ export const mutations = {
for (i = 0; i < Object.keys(state.myNodes).length; i++) {
if (
e.e == state.myNodes[i].node_id &&
- state.myNodes[i].read_mode == false
+ state.myNodes[i].node_readmode == false
) {
- state.myNodes[i].read_mode = true
+ state.myNodes[i].node_readmode = true
} else if (
e.e == state.myNodes[i].node_id &&
- state.myNodes[i].read_mode == true
+ state.myNodes[i].node_readmode == true
) {
- state.myNodes[i].read_mode = false
+ state.myNodes[i].node_readmode = false
}
}
pouchdb
@@ -233,6 +232,62 @@ export const mutations = {
})
.catch(function () {})
},
+
+ COLOR_NODE(state, e) {
+ var i
+ for (i = 0; i < Object.keys(state.myNodes).length; i++) {
+ if (e.nodeid == state.myNodes[i].node_id) {
+ state.myNodes[i].node_color = e.color
+ }
+ }
+ pouchdb
+ .get(deviceName)
+ .then(function (doc) {
+ return pouchdb.bulkDocs([
+ {
+ _id: state.myclient,
+ _rev: doc._rev,
+ nodes: state.myNodes,
+ },
+ ])
+ })
+ .then(function () {
+ return pouchdb.get(deviceName).then(function (doc) {
+ state.myNodes = doc.nodes
+ })
+ })
+ .catch(function () {})
+ },
+
+ SET_SHAPE(state, e) {
+ var i
+ for (i = 0; i < Object.keys(state.myNodes).length; i++) {
+ if (e.nodeid == state.myNodes[i].node_id) {
+ state.myNodes[i].node_shape = e.shape
+ }
+ }
+ pouchdb
+ .get(deviceName)
+ .then(function (doc) {
+ return pouchdb.bulkDocs([
+ {
+ _id: deviceName,
+ _rev: doc._rev,
+ nodes: state.myNodes,
+ },
+ ])
+ })
+ .then(function () {
+ return pouchdb.get(deviceName).then(function (doc) {
+ state.myNodes = doc.nodes
+ })
+ })
+ .catch(function (err) {
+ if (err.status == 404) {
+ // pouchdb.put({ })
+ }
+ })
+ },
}
export const actions = {
@@ -260,6 +315,14 @@ export const actions = {
commit('TOGGLE_MODE', e)
},
+ colorNode: ({ commit }, { nodeid, color }) => {
+ commit('COLOR_NODE', { nodeid, color })
+ },
+
+ setShape: ({ commit }, { nodeid, shape }) => {
+ commit('SET_SHAPE', { nodeid, shape })
+ },
+
getMicrocosm(vuexContext) {
deviceName = vuexContext.rootState.setup.deviceName
// microcosmName = vuexContext.rootState.setup.microcosmName
diff --git a/yarn.lock b/yarn.lock
index ff0c18862c891ba9f55bd5440eb43d744883d4a8..6045fef10556ace34315556555d7e50b40eb5865 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7668,6 +7668,11 @@ vue-template-es2015-compiler@^1.9.0:
version "1.9.1"
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
+vue3-swatches@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/vue3-swatches/-/vue3-swatches-1.0.2.tgz#118b06c6c47d51ce1d2b18c588f13b90fea897fd"
+ integrity sha512-XxopqMhNSfxorsIqTwW+2A544DvBOC3w6f6vDdPQNbuaJ3Sm9iqchzGAI9o37M6eRxByOplBWQ/i6ZPBGTIabw==
+
vue@^3.2.6:
version "3.2.6"
resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.6.tgz#c71445078751f458648fd8fb3a2da975507d03d2"