diff options
| -rw-r--r-- | demo/components/chat.js | 6 | ||||
| -rw-r--r-- | demo/components/comment.js | 71 | ||||
| -rw-r--r-- | demo/components/like-button.js | 4 |
3 files changed, 76 insertions, 5 deletions
diff --git a/demo/components/chat.js b/demo/components/chat.js index 52470f0..5095dcd 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+='!!'"> 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] }) } } |