summaryrefslogtreecommitdiff
path: root/demo/components
diff options
context:
space:
mode:
Diffstat (limited to 'demo/components')
-rw-r--r--demo/components/chat.js6
-rw-r--r--demo/components/comment.js71
-rw-r--r--demo/components/like-button.js4
3 files changed, 76 insertions, 5 deletions
diff --git a/demo/components/chat.js b/demo/components/chat.js
index 2d68ee0..bffde26 100644
--- a/demo/components/chat.js
+++ b/demo/components/chat.js
@@ -1,9 +1,9 @@
import { Name } from './name.js'
-import LikeButton from './like-button.js'
+import Comments from './comment.js'
export default {
- components: { Name, LikeButton },
+ components: { Name, Comments },
data: ()=> ({
message: '',
@@ -42,7 +42,7 @@ export default {
<em><Name :of="object._by"/></em>:
{{ object.message }}
- <LikeButton :messageID="object._id" />
+ <Comments :messageID="object._id" />
<template v-if="object._by==$graffitiMyID">
<button @click="object.message+='!!';object._update()">
diff --git a/demo/components/comment.js b/demo/components/comment.js
new file mode 100644
index 0000000..d838ee1
--- /dev/null
+++ b/demo/components/comment.js
@@ -0,0 +1,71 @@
+import LikeButton from './like-button.js'
+
+export default {
+ name: 'Comments',
+
+ components: { LikeButton },
+
+ props: ['messageID'],
+
+ methods: {
+ commentObjects(objects) {
+ console.log(111111111111)
+ console.log(objects.filter(o=>'like' in o))
+ console.log(objects.filter(o=>'comment' in o))
+ return objects.filter(o=>
+ 'comment' in o &&
+ 'timestamp' in o &&
+ o.comment == this.messageID &&
+ typeof o.timestamp == 'number')
+ .sort((a,b)=>
+ objects.filter(o=>
+ 'like' in o &&
+ o.like == a._id).length
+ < objects.filter(o=>
+ 'like' in o &&
+ o.like == b._id).length
+ )
+ },
+
+ sendComment(objects) {
+ this.$graffitiUpdate({
+ comment: this.messageID,
+ timestamp: Date.now(),
+ message: this.message,
+ _tags: [this.messageID]
+ })
+ }
+ },
+
+ template: `
+ <graffiti-objects :tags="[messageID]" v-slot="{objects}">
+ <details>
+ <summary>Comment</summary>
+ <form @submit.prevent="sendComment(objects)">
+ <input v-model="message">
+ <input type="submit" value="Submit"/>
+ </form>
+ </details>
+ <details open>
+ <summary>Collapse thread</summary>
+ <ul v-for="object in commentObjects(objects)">
+ <li>
+ <Name :of="object._by"/>
+ {{ object.message }}
+ <LikeButton :messageID="object._id" :parent="messageID"/>
+ <template v-if="object._by==$graffitiMyID">
+ <button @click="object.message+='!!';object._update()">
+ ‼️
+ </button>
+
+ <button @click="object.message='deleted';object._update()">
+ ❌
+ </button>
+ </template>
+ <Comments :messageID="object._id" />
+ </li>
+ </ul>
+ </details>
+ </graffiti-objects>`
+}
+
diff --git a/demo/components/like-button.js b/demo/components/like-button.js
index 5c9b1a5..6f65ac6 100644
--- a/demo/components/like-button.js
+++ b/demo/components/like-button.js
@@ -1,6 +1,6 @@
export default {
- props: ['messageID'],
+ props: ['messageID', 'parent'],
methods: {
likeObjects(objects, messageID=this.messageID) {
@@ -20,7 +20,7 @@ export default {
this.$graffitiUpdate({
like: this.messageID,
timestamp: Date.now(),
- _tags: [this.messageID]
+ _tags: [this.messageID, this.parent]
})
}
}