MyNodes.vue 4.73 KB
Newer Older
1
<template>
Adam Procter's avatar
Adam Procter committed
2
  <div v-for="(nodes, index) in myArray" :key="index">
Adam Procter's avatar
Adam Procter committed
3
4
5
6
7
8
    <form
      class="nodes"
      :style="{
        backgroundColor: nodes.node_color,
      }"
    >
9
      <template v-if="nodes.node_readmode == false">
10
11
12
        <textarea
          v-model="nodes.node_text"
          @input="editNode"
13
          :id="nodes.node_id"
14
15
16
17
18
          ref="textentry"
          placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
          rows="5"
        ></textarea>
        <p class="info">*markdown supported &amp; autosaves</p>
Adam Procter's avatar
Adam Procter committed
19
20
21
22
23

        <VSwatches
          v-model="nodes.node_color"
          :swatches="swatches"
          :shapes="shapes"
Adam Procter's avatar
Adam Procter committed
24
          @update:modelValue="chooseColor(nodes.node_id, nodes.node_color)"
Adam Procter's avatar
Adam Procter committed
25
26
27
28
29
30
31
32
          show-border
          show-fallback
          fallback-input-type="color"
        >
          <template v-slot:trigger>
            <button @click.prevent>{{ nodes.node_color }}</button>
          </template>
        </VSwatches>
33
34
35
36
37
38
39
40
        <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>
Adam Procter's avatar
Adam Procter committed
41
          <option value="hexagon">Hexagon</option>
Adam Procter's avatar
Adam Procter committed
42
43
        </select>

44
45
46
47
        <button @click.prevent="toggleMode(nodes.node_id)">Read</button>
        <button @click.prevent="discardNode(nodes.node_id)">Discard</button>
      </template>
      <template v-else>
Adam Procter's avatar
Adam Procter committed
48
49
50
51
52
        <p
          class="readmode"
          :id="nodes.node_id"
          v-html="marked(nodes.node_text)"
        ></p>
53
54
        <button @click.prevent="toggleMode(nodes.node_id)">Edit</button>
      </template>
55
56
57
58
59
60
61
    </form>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapState } from 'vuex'
Adam Procter's avatar
Adam Procter committed
62
import VSwatches from 'vue3-swatches'
Adam Procter's avatar
Adam Procter committed
63
import marked from 'marked'
64
65

export default {
66
  name: 'MyNodes',
67

Adam Procter's avatar
Adam Procter committed
68
69
  components: { VSwatches },

Adam Procter's avatar
Adam Procter committed
70
71
72
73
74
75
76
77
  // directives: {
  //   focus: {
  //     mounted(el) {
  //       el.focus()
  //     },
  //   },
  // },

78
79
80
81
82
83
84
  props: {
    added: Boolean,
  },

  data() {
    return {
      myArray: [],
Adam Procter's avatar
Adam Procter committed
85
86
87
88
89
90
91
92
      shapes: 'circles',
      // swatches: [{ color: '#F493A7', showBorder: true }],
      swatches: [
        ['#EB5757', '#F2994A', '#F2C94C'],
        ['#219653', '#27AE60', '#6FCF97'],
        ['#2F80ED', '#2D9CDB', '#56CCF2'],
        ['#9B51E0', '#BB6BD9', '#E9B7FC'],
      ],
93
94
95
96
97
    }
  },

  computed: {
    ...mapState({
98
      myNodes: (state) => state.myNodes,
99
100
101
    }),
  },

Adam Procter's avatar
Adam Procter committed
102
103
  watch: {
    added: function () {
104
      setTimeout(this.loadData, 500)
Adam Procter's avatar
Adam Procter committed
105
106
107
    },
  },

108
109
  mounted() {
    setTimeout(this.loadData, 500)
Adam Procter's avatar
Adam Procter committed
110
111
112
113
114
115
116
117
    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
    }
118
119
120
  },

  methods: {
Adam Procter's avatar
Adam Procter committed
121
    marked,
122
    loadData() {
Adam Procter's avatar
Adam Procter committed
123
124
125
126
127
      var nodesFiltered = this.myNodes.myNodes.filter(
        (nodes) => nodes.node_deleted == false
      )
      this.$store.dispatch('getMynodes')
      this.myArray = nodesFiltered.reverse()
128
129
130
131
132
133
134
    },

    editNode(e) {
      var nodeid = e.target.id
      var nodetext = e.target.value
      this.$store.dispatch('editNode', { nodeid, nodetext })
    },
135
136
137
138
139
140
141
142
143
144
145
146
147
148

    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)
    },
Adam Procter's avatar
Adam Procter committed
149
150

    chooseColor(nodeid, color) {
151
152
153
154
155
156
157
158
159
160
      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)
Adam Procter's avatar
Adam Procter committed
161
    },
162
163
164
165
  },
}
</script>

Adam Procter's avatar
Adam Procter committed
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<style>
h1 {
  margin: 0em;
  padding: 0em;
  font-size: 4.2em;
  font-family: houschka-rounded, sans-serif;
  font-weight: 700;
  font-style: normal;
  color: black;
}

h2 {
  margin: 0em;
  padding: 0em;
  font-size: 3.2em;
  font-family: houschka-rounded, sans-serif;
  font-weight: 700;
  font-style: normal;
  color: black;
}

h3 {
  margin: 0em;
  padding: 0em;
  font-size: 2.2em;
  font-family: houschka-rounded, sans-serif;
  font-weight: 700;
  font-style: normal;
  color: black;
}

197
198
199
200
201
202
203
.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
204
205

textarea {
Adam Procter's avatar
Adam Procter committed
206
207
208
209
210
211
  font-size: 1em;
  resize: none;
  border: none;
  background-color: rgb(187, 225, 247);
  width: 100%;
  box-sizing: border-box;
ap2x07's avatar
ap2x07 committed
212
}
Adam Procter's avatar
Adam Procter committed
213
214
215
216

img {
  width: 45%;
}
217
</style>