Merge branch 'main' into futurenogg

ff7dbf65 · Adam Procter · b3a87eca · e4de5675 · ff7dbf65 · b3a87eca
Commit ff7dbf65 authored Sep 01, 2021 by Adam Procter
--- a/package.json
+++ b/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-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^7.16.0",
+    "eslint-plugin-vue": "^7.17.0",
    "prettier": "^2.3.2"
  },
  "eslintConfig": {

--- a/src/components/AddNodes-old.vue
+++ b/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>
--- a/src/components/MyNodes.vue
+++ b/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>Shape</button>
-      <button>Discard</button>
+        <button @click.prevent="toggleMode(nodes.node_id)">Read</button>
-      <!-- </template>
+        <button @click.prevent="discardNode(nodes.node_id)">Discard</button>
+      </template>
      <template v-else>
-        <p
+        <p class="readmode" :id="nodes.node_id">{{ nodes.node_text }}</p>
-          class="readmode"
+        <button @click.prevent="toggleMode(nodes.node_id)">Edit</button>
-          :id="nodes.node_id"
+      </template>
-          :inner-html.prop="nodes.node_text"
-        ></p>
-      </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>

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

--- a/yarn.lock
+++ b/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"