Administrator approval is now required for registering new accounts. If you are registering a new account, and are external to the University, please ask the repository owner to contact ServiceLine to request your account be approved. Repository owners must include the newly registered email address, and specific repository in the request for approval.

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"
......
Markdown is supported
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