diff --git a/src/components/AddNodes-old.vue b/src/components/AddNodes-old.vue
deleted file mode 100644
index a7c4df9c7b7cbcc99508b01a969b5f2f69f524f6..0000000000000000000000000000000000000000
--- a/src/components/AddNodes-old.vue
+++ /dev/null
@@ -1,265 +0,0 @@
-/// this is from Vue 2 // check and rebuild
-<template>
- <div>
- <div v-for="(nodes, index) in $options.myArray" v-bind:key="index">
- <form
- class="nodes"
- :style="{
- backgroundColor: nodes.color,
- }"
- >
- <template v-if="nodes.read_mode == false">
- <textarea
- @focus="editTrue(true)"
- @blur="editTrue(false)"
- v-model="nodes.node_text"
- @input="editNode"
- :id="nodes.node_id"
- v-focus
- ref="textentry"
- placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
- ></textarea>
- <p class="info">*markdown supported & autosaves</p>
- </template>
- <template v-else>
- <p
- class="readmode"
- :id="nodes.node_id"
- :inner-html.prop="nodes.node_text | marked"
- ></p>
- </template>
-
- <div class="btn-row">
- <SvgButton
- buttonClass="nodes"
- @click.prevent="deleteFlag(nodes.node_id), updateNodes()"
- />
- <SvgButton2
- buttonClass="nodes"
- @click.prevent="
- readFlag(nodes.node_id, nodes.read_mode), updateNodes()
- "
- />
- <v-swatches
- v-model="color"
- @input="chooseColor(color, nodes.node_id)"
- :swatches="swatches"
- :shapes="shapes"
- show-border
- show-fallback
- fallback-input-type="color"
- >
- <SvgButton3 buttonClass="nodes" @click.prevent slot="trigger" />
- </v-swatches>
- </div>
-
- <div class="allemoji">
- <div
- class="eachemoji"
- v-for="(emojis, index) in configEmoji"
- :key="index"
- >
- <template v-if="emojis.node_id == nodes.node_id">{{
- emojis.emoji_text
- }}</template>
- </div>
- </div>
- </form>
- </div>
- </div>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-import marked from 'marked'
-import SvgButton from '@/components/SvgButton'
-import SvgButton2 from '@/components/SvgButton2'
-import SvgButton3 from '@/components/SvgButton3'
-import VSwatches from 'vue-swatches'
-import 'vue-swatches/dist/vue-swatches.css'
-
-var readmode
-export default {
- name: 'ListLayer',
-
- props: {
- added: Boolean,
- },
-
- data: function () {
- return {
- color: '#9bc2d8',
- shapes: 'circles',
- // swatches: [{ color: '#F493A7', showBorder: true }],
- swatches: [
- ['#EB5757', '#F2994A', '#F2C94C'],
- ['#219653', '#27AE60', '#6FCF97'],
- ['#2F80ED', '#2D9CDB', '#56CCF2'],
- ['#9B51E0', '#BB6BD9', '#E9B7FC'],
- ],
- localreadmode: false,
- myArray: null,
- update: false,
- }
- },
-
- filters: {
- marked: marked,
- },
-
- computed: {
- ...mapState({
- myNodes: (state) => state.myNodes,
- configPositions: (state) => state.configPositions,
- configEmoji: (state) => state.configEmoji,
- // toolmode: (state) => state.ui.mode,
- }),
-
- nodes_filtered: function () {
- return this.myNodes.filter((nodes) => {
- return nodes.deleted == false
- })
- },
- },
-
- mounted() {
- setTimeout(this.loadData, 500)
- const unwatch = this.$watch('nodes_filtered', (value) => {
- this.$options.myArray = this.nodes_filtered
- this.$forceUpdate()
- // this.focusInput()
- // ignore falsy values
- if (!value) return
-
- // stop watching when nodes_filtered[] is not empty
- if (value && value.length) unwatch()
-
- // process value here
- })
- },
-
- watch: {
- added: {
- deep: true,
-
- handler() {
- setTimeout(this.loadData, 200)
- },
- },
- update: {
- deep: true,
-
- handler() {
- setTimeout(this.loadData, 200)
- },
- },
- },
-
- methods: {
- chooseColor(color, nodeid) {
- this.$store.dispatch('colorNode', { nodeid, color })
- this.$options.myArray = this.nodes_filtered
- },
- updateNodes() {
- this.update = !this.update
- },
- loadData() {
- this.$options.myArray = this.nodes_filtered
- this.$forceUpdate()
- },
- editNode(e) {
- var nodeid = e.target.id
- var nodetext = e.target.value
- this.$store.dispatch('editNode', { nodeid, nodetext })
- },
-
- editTrue(e) {
- this.$emit('edit-true', e)
- },
-
- deleteFlag(e) {
- if (confirm('Confirm discard?')) {
- this.$store.dispatch('deleteFlag', { e })
- } else {
- // nothing happens
- }
- },
- readFlag(e, f) {
- readmode = f
- readmode = !readmode
- this.$store.dispatch('readFlag', { e, readmode })
-
- if (readmode == true) {
- this.mode = 'Read'
- } else {
- this.mode = 'Edit'
- }
- },
- },
- components: {
- SvgButton,
- SvgButton2,
- SvgButton3,
- VSwatches,
- },
-}
-</script>
-
-<style lang="css" scoped>
-.nodes {
- width: 95%;
- border: 2px dashed black;
- background-color: rgb(155, 194, 216);
- margin-top: 1em;
- margin-left: 0.5em;
-}
-
-.readmode {
- margin-top: 1em;
- margin-left: 1em;
-}
-
-textarea {
- width: 100%;
- height: 175px;
- resize: none;
- box-sizing: border-box;
- font-size: 18px;
- font-family: 'Inter var', Helvetica, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- border: none;
- outline: none;
- background-color: rgb(187, 227, 255);
- scrollbar-color: yellow rgb(187, 227, 255);
-}
-.btn-row {
- position: relative;
- margin-bottom: 5px;
- display: flex;
- justify-content: center;
- flex-wrap: wrap;
- padding: 0 15px;
- border-radius: 4px;
-}
-
-.allemoji {
- font-size: 2em;
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(0, auto));
-
- /* float: left; */
-}
-
-.eachemoji p {
- margin: 0em;
-}
-
-@media only screen and (max-width: 600px) {
- .readmode >>> a {
- font-size: 2em;
- word-break: break-all;
- padding-right: 0.5em;
- }
-}
-</style>
diff --git a/src/components/MyNodes.vue b/src/components/MyNodes.vue
index 983c9ce8725015f681d91910fae3101cd4fab45c..3a40b0b23da4acec7b91650663191f2e4078047e 100644
--- a/src/components/MyNodes.vue
+++ b/src/components/MyNodes.vue
@@ -1,27 +1,25 @@
<template>
<div v-for="(nodes, index) in myArray" :key="index">
<form class="nodes">
- <!-- <template v-if="nodes.node_readmode == false"> -->
- <textarea
- v-model="nodes.node_text"
- @input="editNode"
- :id="nodes.node_id"
- ref="textentry"
- placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
- rows="5"
- ></textarea>
- <p class="info">*markdown supported & autosaves</p>
- <button>Colour</button>
- <button>Read</button>
- <button>Discard</button>
- <!-- </template>
- <template v-else>
- <p
- class="readmode"
+ <template v-if="nodes.read_mode == false">
+ <textarea
+ v-model="nodes.node_text"
+ @input="editNode"
:id="nodes.node_id"
- :inner-html.prop="nodes.node_text"
- ></p>
- </template> -->
+ ref="textentry"
+ placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
+ rows="5"
+ ></textarea>
+ <p class="info">*markdown supported & autosaves</p>
+ <button>Colour</button>
+ <button>Shape</button>
+ <button @click.prevent="toggleMode(nodes.node_id)">Read</button>
+ <button @click.prevent="discardNode(nodes.node_id)">Discard</button>
+ </template>
+ <template v-else>
+ <p class="readmode" :id="nodes.node_id">{{ nodes.node_text }}</p>
+ <button @click.prevent="toggleMode(nodes.node_id)">Edit</button>
+ </template>
</form>
</div>
</template>
@@ -54,14 +52,11 @@ export default {
watch: {
added: function () {
setTimeout(this.loadData, 500)
-
},
},
mounted() {
- //console.log('mounted')
setTimeout(this.loadData, 500)
-
if (localStorage.nogg_name && localStorage.nogg_microcosm) {
var devicename = localStorage.nogg_name
var microcosm = localStorage.nogg_microcosm
@@ -73,21 +68,12 @@ export default {
},
methods: {
- emptyData() {
- if (this.myNodes.myNodes == 0) {
- /// that
- } else {
- // this
- }
- },
-
loadData() {
var nodesFiltered = this.myNodes.myNodes.filter(
(nodes) => nodes.node_deleted == false
)
this.$store.dispatch('getMynodes')
this.myArray = nodesFiltered.reverse()
- // console.log(this.myArray.length)
},
editNode(e) {
@@ -95,6 +81,20 @@ export default {
var nodetext = e.target.value
this.$store.dispatch('editNode', { nodeid, nodetext })
},
+
+ discardNode(e) {
+ if (confirm('Confirm discard?')) {
+ this.$store.dispatch('discardNode', { e })
+ setTimeout(this.loadData, 500)
+ } else {
+ // nothing happens
+ }
+ },
+
+ toggleMode(e) {
+ this.$store.dispatch('toggleMode', { e })
+ setTimeout(this.loadData, 500)
+ },
},
}
</script>
diff --git a/src/store/modules/mynodes.js b/src/store/modules/mynodes.js
index b84eb3c56b187170fecd8ad76e797922fa623c18..e35ac46e7d3ea3cfd2c5ac5fc58df884573e873d 100644
--- a/src/store/modules/mynodes.js
+++ b/src/store/modules/mynodes.js
@@ -125,7 +125,6 @@ export const mutations = {
{
_id: deviceName,
_rev: doc._rev,
- _attachments: doc._attachments,
nodes: state.myNodes,
},
])
@@ -141,6 +140,99 @@ export const mutations = {
}
})
},
+
+ DISCARD_NODE(state, e) {
+ var i
+ for (i = 0; i < Object.keys(state.myNodes).length; i++) {
+ if (e.e == state.myNodes[i].node_id) {
+ state.myNodes[i].node_deleted = true
+ }
+ }
+ 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({ })
+ }
+ })
+ },
+
+ RESTORE_NODE(state, e) {
+ var i
+ for (i = 0; i < Object.keys(state.myNodes).length; i++) {
+ if (e.e == state.myNodes[i].node_id) {
+ state.myNodes[i].node_deleted = false
+ }
+ }
+ pouchdb
+ .get(deviceName)
+ .then(function (doc) {
+ // put the store into pouchdb
+ return pouchdb.bulkDocs([
+ {
+ _id: deviceName,
+ _rev: doc._rev,
+ _attachments: doc._attachments,
+ nodes: state.myNodes,
+ },
+ ])
+ })
+ .then(function () {
+ return pouchdb.get(deviceName).then(function (doc) {
+ state.myNodes = doc.nodes
+ })
+ })
+ .catch(function () {})
+ },
+
+ TOGGLE_MODE(state, e) {
+ var i
+ 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].read_mode = true
+ } else if (
+ e.e == state.myNodes[i].node_id &&
+ state.myNodes[i].read_mode == true
+ ) {
+ state.myNodes[i].read_mode = false
+ }
+ }
+ pouchdb
+ .get(deviceName)
+ .then(function (doc) {
+ // put the store into pouchdb
+ 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 () {})
+ },
}
export const actions = {
@@ -156,6 +248,18 @@ export const actions = {
commit('EDIT_NODE', { nodeid, nodetext })
},
+ discardNode: ({ commit }, e) => {
+ commit('DISCARD_NODE', e)
+ },
+
+ restoreNode: ({ commit }, e) => {
+ commit('RESTORE_NODE', e)
+ },
+
+ toggleMode: ({ commit }, e) => {
+ commit('TOGGLE_MODE', e)
+ },
+
getMicrocosm(vuexContext) {
deviceName = vuexContext.rootState.setup.deviceName
// microcosmName = vuexContext.rootState.setup.microcosmName