Merge branch 'main' into futurenogg

package.json

@@ -8,11 +8,11 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "core-js": "^3.16.2",
+    "core-js": "^3.16.4",
     "freeze-dry": "^0.2.5",
-    "marked": "^3.0.0",
+    "marked": "^3.0.2",
     "pouchdb": "^7.2.2",
-    "vue": "^3.2.4",
+    "vue": "^3.2.6",
     "vue-router": "^4.0.0",
     "vuex": "^4.0.0"
   },
@@ -22,12 +22,12 @@
     "@vue/cli-plugin-router": "^4.5.12",
     "@vue/cli-plugin-vuex": "^4.5.12",
     "@vue/cli-service": "^4.5.12",
-    "@vue/compiler-sfc": "^3.2.4",
+    "@vue/compiler-sfc": "^3.2.6",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.32.0",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-vue": "^7.16.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^7.17.0",
     "prettier": "^2.3.2"
   },
   "eslintConfig": {

src/components/AddNodes-old.vue

-/// 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 &amp; 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>

src/components/MyNodes.vue

 <template>
   <div v-for="(nodes, index) in myArray" :key="index">
     <form class="nodes">
-      <!-- <template v-if="nodes.node_readmode == false"> -->
+      <template v-if="nodes.read_mode == false">
         <textarea
           v-model="nodes.node_text"
           @input="editNode"
@@ -12,16 +12,14 @@
         ></textarea>
         <p class="info">*markdown supported &amp; autosaves</p>
         <button>Colour</button>
-      <button>Read</button>
-      <button>Discard</button>
-      <!-- </template>
+        <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"
-          :inner-html.prop="nodes.node_text"
-        ></p>
-      </template> -->
+        <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>

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

yarn.lock

@@ -200,6 +200,10 @@
   version "7.14.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz#d26cad8a47c65286b15df1547319a5d0bcf27288"
 
+"@babel/helper-validator-identifier@^7.14.9":
+  version "7.14.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz#6654d171b2024f6d8ee151bf2509699919131d48"
+
 "@babel/helper-validator-option@^7.12.17":
   version "7.12.17"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.12.17.tgz#d1fbf012e1a79b7eebbfdc6d270baaf8d9eb9831"
@@ -229,10 +233,14 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.12.0", "@babel/parser@^7.12.13", "@babel/parser@^7.13.9", "@babel/parser@^7.14.0", "@babel/parser@^7.7.0":
+"@babel/parser@^7.12.13", "@babel/parser@^7.14.0", "@babel/parser@^7.7.0":
   version "7.14.1"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.1.tgz#1bd644b5db3f5797c4479d89ec1817fe02b84c47"
 
+"@babel/parser@^7.15.0":
+  version "7.15.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.3.tgz#3416d9bea748052cfcb63dbcc27368105b1ed862"
+
 "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.13.12":
   version "7.13.12"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.13.12.tgz#a3484d84d0b549f3fc916b99ee4783f26fabad2a"
@@ -805,13 +813,20 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.12.0", "@babel/types@^7.12.1", "@babel/types@^7.12.13", "@babel/types@^7.13.0", "@babel/types@^7.13.12", "@babel/types@^7.13.16", "@babel/types@^7.14.0", "@babel/types@^7.14.1", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
+"@babel/types@^7.0.0", "@babel/types@^7.12.1", "@babel/types@^7.12.13", "@babel/types@^7.13.0", "@babel/types@^7.13.12", "@babel/types@^7.13.16", "@babel/types@^7.14.0", "@babel/types@^7.14.1", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
   version "7.14.1"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.1.tgz#095bd12f1c08ab63eff6e8f7745fa7c9cc15a9db"
   dependencies:
     "@babel/helper-validator-identifier" "^7.14.0"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.15.0":
+  version "7.15.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.0.tgz#61af11f2286c4e9c69ca8deb5f4375a73c72dcbd"
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.14.9"
+    to-fast-properties "^2.0.0"
+
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
@@ -924,7 +939,6 @@
 "@types/estree@^0.0.48":
   version "0.0.48"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.48.tgz#18dc8091b285df90db2f25aa7d906cfc394b7f74"
-  integrity sha512-LfZwXoGUDo0C3me81HXgkBg5CTQYb6xzEl+fNmbO4JdRiSKQ8A0GD1OBBvKAIsbCUgoyAty7m99GqqMQe784ew==
 
 "@types/express-serve-static-core@*", "@types/express-serve-static-core@^4.17.18":
   version "4.17.19"
@@ -1268,39 +1282,37 @@
     semver "^6.1.0"
     strip-ansi "^6.0.0"
 
-"@vue/compiler-core@3.2.4":
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.4.tgz#a98d295771998c1e8dccc4ee3d52feb14b02aea9"
-  integrity sha512-c8NuQq7mUXXxA4iqD5VUKpyVeklK53+DMbojYMyZ0VPPrb0BUWrZWFiqSDT+MFDv0f6Hv3QuLiHWb1BWMXBbrw==
+"@vue/compiler-core@3.2.6":
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.6.tgz#7162bb0670273f04566af0d353009187ab577915"
   dependencies:
-    "@babel/parser" "^7.12.0"
-    "@babel/types" "^7.12.0"
-    "@vue/shared" "3.2.4"
-    estree-walker "^2.0.1"
+    "@babel/parser" "^7.15.0"
+    "@babel/types" "^7.15.0"
+    "@vue/shared" "3.2.6"
+    estree-walker "^2.0.2"
     source-map "^0.6.1"
 
-"@vue/compiler-dom@3.2.4":
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.4.tgz#3a43de243eba127abbe57e796a0b969d2df78c08"
-  integrity sha512-uj1nwO4794fw2YsYas5QT+FU/YGrXbS0Qk+1c7Kp1kV7idhZIghWLTjyvYibpGoseFbYLPd+sW2/noJG5H04EQ==
+"@vue/compiler-dom@3.2.6":
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.6.tgz#3764d7fe1a696e39fb2a3c9d638da0749e369b2d"
   dependencies:
-    "@vue/compiler-core" "3.2.4"
-    "@vue/shared" "3.2.4"
+    "@vue/compiler-core" "3.2.6"
+    "@vue/shared" "3.2.6"
 
-"@vue/compiler-sfc@^3.2.4":
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.4.tgz#9807868cc950291f163c3930a81bb16e870df097"
-  integrity sha512-GM+ouDdDzhqgkLmBH4bgq4kiZxJQArSppJiZHWHIx9XRaefHLmc1LBNPmN8ivm4SVfi2i7M2t9k8ZnjsScgzPQ==
+"@vue/compiler-sfc@^3.2.6":
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.6.tgz#d6ab7410cff57081ab627b15a1ea51a1072c7cf1"
   dependencies:
-    "@babel/parser" "^7.13.9"
-    "@babel/types" "^7.13.0"
+    "@babel/parser" "^7.15.0"
+    "@babel/types" "^7.15.0"
     "@types/estree" "^0.0.48"
-    "@vue/compiler-core" "3.2.4"
-    "@vue/compiler-dom" "3.2.4"
-    "@vue/compiler-ssr" "3.2.4"
-    "@vue/shared" "3.2.4"
+    "@vue/compiler-core" "3.2.6"
+    "@vue/compiler-dom" "3.2.6"
+    "@vue/compiler-ssr" "3.2.6"
+    "@vue/ref-transform" "3.2.6"
+    "@vue/shared" "3.2.6"