Merge branch 'main' into futurenogg

CHANGELOG.md

+# 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_

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": {

src/components/MyNodes.vue

 <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>

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

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"