summaryrefslogtreecommitdiff
path: root/demo/components/private-messaging.js
blob: 61f783bba5cb4fb82c3d130dcfe18a51188b29a5 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import Chat from './chat.js'
import {Name} from './name.js'

export default {

  data: ()=> ({
    recipient: null,
    message: ''
  }),

  methods: {
    messageObjects: Chat.methods.messageObjects,
    chatObjects(objects) {
      return this.messageObjects(objects).filter(o=>
        '_to' in o && o._to.length == 1)
    },

    sendMessage() {
      if (!this.message) return
      this.$graffitiUpdate({
        message: this.message,
        timestamp: Date.now(),
        _to: [this.recipient],
        _tags: [this.$graffitiMyID, this.recipient]
      })
      this.message = ''
    }
  },

  template: `
    Send private message to:
    <graffiti-objects :tags="['demo']" v-slot="{objects}">
      <select v-model="recipient">
        <option v-for="id in objects.notMine.authors" :value="id">
          <Name :of="id">
        </option>
      </select>
    </graffiti-objects>

    <form @submit.prevent="sendMessage">
      <input v-model="message">
      <input type="submit" value="Submit"/>
    </form>

    <graffiti-objects :tags="[$graffitiMyID]" v-slot="{objects}">

      <h3>My Outbox</h3>

      <ul v-for="object in chatObjects(objects).mine">
        <li>
          To <em><Name :of="object._to[0]"/></em>:
          {{ object.message }}
        </li>
      </ul>

      <h3>My Inbox</h3>

      <ul v-for="object in chatObjects(objects).notMine">
        <li>
          From <em><Name :of="object._by"/></em>:
          {{ object.message }}
        </li>
      </ul>

    </graffiti-objects>`
}