OtherNodes.vue 2.22 KB
Newer Older
Adam Procter's avatar
Adam Procter committed
1
<template>
Adam Procter's avatar
Adam Procter committed
2
3
4
5
  <div
    class="nodes"
    v-for="(nodes, index) in otherNodes.otherNodes"
    :key="index"
Adam Procter's avatar
Adam Procter committed
6
7
8
    :style="{
      backgroundColor: nodes.node_color,
    }"
Adam Procter's avatar
Adam Procter committed
9
  >
Adam Procter's avatar
Adam Procter committed
10
11
12
13
14
    <p
      class="readmode"
      :id="nodes.node_id"
      v-html="marked(nodes.node_text)"
    ></p>
15
16
17
18
19
20
21
22
23
24
25
26
27
    <button @click="openEmoji">
      <svg
        height="24"
        viewBox="0 0 24 24"
        width="24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="M0 0h24v24H0z" fill="none" />
        <path
          d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"
        />
      </svg>
    </button>
Adam Procter's avatar
Adam Procter committed
28
29
30
    <VuemojiPicker
      v-show="showEmoji"
      class="emojipicker"
31
32
      @emojiClick="($event) => handleEmojiClick($event, nodes.node_id)"
      :pickerStyle="{}"
Adam Procter's avatar
Adam Procter committed
33
    />
Adam Procter's avatar
Adam Procter committed
34
35
36
37
38
39
  </div>
</template>

<script>
// @ is an alias to /src
import { mapState } from 'vuex'
Adam Procter's avatar
Adam Procter committed
40
import marked from 'marked'
Adam Procter's avatar
Adam Procter committed
41
import { VuemojiPicker } from 'vuemoji-picker'
Adam Procter's avatar
Adam Procter committed
42
43
44
45

export default {
  name: 'OtherNodes',

Adam Procter's avatar
Adam Procter committed
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
  props: {
    // these are for the emoji styling
    // https://github.com/wobsoriano/vuemoji-picker
    // isDark: Boolean,
    pickerStyle: Object,
  },

  data: function () {
    return {
      showEmoji: false,
    }
  },

  components: {
    VuemojiPicker,
  },

Adam Procter's avatar
Adam Procter committed
63
64
65
  computed: {
    ...mapState({
      otherNodes: (state) => state.otherNodes,
66
      configEmoji: (state) => state.configEmoji,
Adam Procter's avatar
Adam Procter committed
67
68
69
70
    }),
  },

  mounted() {
71
    this.$store.dispatch('getOthernodes')
Adam Procter's avatar
Adam Procter committed
72
    setTimeout(this.loadData, 500)
Adam Procter's avatar
Adam Procter committed
73
    setInterval(this.loadData, 5000)
Adam Procter's avatar
Adam Procter committed
74
75
76
  },

  methods: {
77
78
79
80
    getNodeid(nodeid) {
      this.nodeid = nodeid
    },
    handleEmojiClick(detail, nodeid) {
Adam Procter's avatar
Adam Procter committed
81
      console.log(detail)
82
      console.log(nodeid)
Adam Procter's avatar
Adam Procter committed
83
84
85
86
87
88
    },

    openEmoji() {
      this.showEmoji = !this.showEmoji
    },

Adam Procter's avatar
Adam Procter committed
89
    loadData() {
90
      this.$store.dispatch('setOthernodes')
Adam Procter's avatar
Adam Procter committed
91
    },
Adam Procter's avatar
Adam Procter committed
92
    marked,
Adam Procter's avatar
Adam Procter committed
93
94
95
96
  },
}
</script>

Adam Procter's avatar
Adam Procter committed
97
<style scoped>
Adam Procter's avatar
Adam Procter committed
98
.nodes {
Adam Procter's avatar
Adam Procter committed
99
  border: 2px solid black;
Adam Procter's avatar
Adam Procter committed
100
}
Adam Procter's avatar
Adam Procter committed
101

102
103
104
button {
  background: none;
  border: none;
Adam Procter's avatar
Adam Procter committed
105
}
Adam Procter's avatar
Adam Procter committed
106
</style>