66 lines
1.5 KiB
JavaScript
66 lines
1.5 KiB
JavaScript
import { Name } from './name.js'
|
|
import Comments from './comment.js'
|
|
|
|
export default {
|
|
|
|
components: { Name, Comments },
|
|
|
|
data: ()=> ({
|
|
message: '',
|
|
channel: 'demo'
|
|
}),
|
|
|
|
methods: {
|
|
messageObjects(objects) {
|
|
return objects.filter(o=>
|
|
'message' in o &&
|
|
'timestamp' in o &&
|
|
typeof o.message == 'string' &&
|
|
typeof o.timestamp == 'number')
|
|
.sortBy('timestamp')
|
|
},
|
|
|
|
sendMessage() {
|
|
if (!this.message) return
|
|
this.$graffitiUpdate({
|
|
message: this.message,
|
|
timestamp: Date.now(),
|
|
_tags: [this.channel]
|
|
})
|
|
this.message = ''
|
|
}
|
|
},
|
|
|
|
template: `
|
|
<p>
|
|
Chat Channel: <input v-model="channel"/>
|
|
</p>
|
|
|
|
<graffiti-objects :tags="[channel]" v-slot="{objects}">
|
|
<ul v-for="object in messageObjects(objects)">
|
|
<li>
|
|
<em><Name :of="object._by"/></em>:
|
|
{{ object.message }}
|
|
|
|
<Comments :messageID="object._id" />
|
|
|
|
<template v-if="object._by==$graffitiMyID">
|
|
<button @click="object.message+='!!'">
|
|
‼️
|
|
</button>
|
|
|
|
<button @click="delete object._key">
|
|
❌
|
|
</button>
|
|
</template>
|
|
</li>
|
|
</ul>
|
|
</graffiti-objects>
|
|
|
|
<form @submit.prevent="sendMessage">
|
|
<input v-model="message">
|
|
<input type="submit" value="Submit"/>
|
|
</form>`
|
|
}
|
|
|