Commit abafcfe5 authored by Adam Procter's avatar Adam Procter
Browse files

Merge branch 'main' into futurenogg

parents ff7dbf65 204353bc
# 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_
......
......@@ -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": {
......
<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 &amp; 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>
......
......@@ -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
......
......@@ -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"
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment