MyNodes.vue 2.38 KB
Newer Older
1
<template>
Adam Procter's avatar
Adam Procter committed
2
  <div v-for="(nodes, index) in myArray" :key="index">
3
    <form class="nodes">
Adam Procter's avatar
Adam Procter committed
4
5
6
7
8
9
10
11
12
13
14
15
16
17
      <!-- <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 &amp; autosaves</p>
      <button>Colour</button>
      <button>Read</button>
      <button>Discard</button>
      <!-- </template>
18
19
20
21
22
23
      <template v-else>
        <p
          class="readmode"
          :id="nodes.node_id"
          :inner-html.prop="nodes.node_text"
        ></p>
Adam Procter's avatar
Adam Procter committed
24
      </template> -->
25
26
27
28
29
30
31
    </form>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapState } from 'vuex'
Adam Procter's avatar
Adam Procter committed
32

Adam Procter's avatar
Adam Procter committed
33
// import marked from 'marked'
34
35

export default {
36
  name: 'MyNodes',
37
38
39
40
41
42
43
44
45
46
47
48
49

  props: {
    added: Boolean,
  },

  data() {
    return {
      myArray: [],
    }
  },

  computed: {
    ...mapState({
50
      myNodes: (state) => state.myNodes,
51
52
53
    }),
  },

Adam Procter's avatar
Adam Procter committed
54
55
  watch: {
    added: function () {
56
57
      setTimeout(this.loadData, 500)
     
Adam Procter's avatar
Adam Procter committed
58
59
60
    },
  },

61
  mounted() {
Adam Procter's avatar
Adam Procter committed
62
    //console.log('mounted')
63
64
    setTimeout(this.loadData, 500)

Adam Procter's avatar
Adam Procter committed
65
66
67
68
69
70
71
72
    if (localStorage.nogg_name && localStorage.nogg_microcosm) {
      var devicename = localStorage.nogg_name
      var microcosm = localStorage.nogg_microcosm
      this.$store.dispatch('setMicrocosm', { devicename, microcosm })
    } else {
      console.log('no')
      // go home
    }
73
74
75
  },

  methods: {
76
77
78
79
80
81
82
83
    emptyData() {
      if (this.myNodes.myNodes == 0) {
        /// that
      } else {
        // this
      }
    },

84
    loadData() {
Adam Procter's avatar
Adam Procter committed
85
86
87
88
89
      var nodesFiltered = this.myNodes.myNodes.filter(
        (nodes) => nodes.node_deleted == false
      )
      this.$store.dispatch('getMynodes')
      this.myArray = nodesFiltered.reverse()
90
      // console.log(this.myArray.length)
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
    },

    editNode(e) {
      var nodeid = e.target.id
      var nodetext = e.target.value
      this.$store.dispatch('editNode', { nodeid, nodetext })
    },
  },
}
</script>

<style scoped>
.nodes {
  width: 95%;
  border: 2px dashed black;
  background-color: rgb(155, 194, 216);
  margin-top: 1em;
  margin-left: 0.5em;
}
ap2x07's avatar
ap2x07 committed
110
111

textarea {
Adam Procter's avatar
Adam Procter committed
112
113
114
115
116
117
  font-size: 1em;
  resize: none;
  border: none;
  background-color: rgb(187, 225, 247);
  width: 100%;
  box-sizing: border-box;
ap2x07's avatar
ap2x07 committed
118
}
119
</style>