From cc44599d1e96920da9dac478afd19d90cd54c4da Mon Sep 17 00:00:00 2001 From: theia Date: Thu, 2 Feb 2023 10:03:30 -0500 Subject: added demo for thing --- plugins/vue/demo/components/chat.js | 63 +++++++++++++++++++++++++++++ plugins/vue/demo/components/name.js | 53 +++++++++++++++++++++++++ plugins/vue/demo/index.html | 79 +++++++++++++++++++++++++++++++++++++ 3 files changed, 195 insertions(+) create mode 100644 plugins/vue/demo/components/chat.js create mode 100644 plugins/vue/demo/components/name.js create mode 100644 plugins/vue/demo/index.html diff --git a/plugins/vue/demo/components/chat.js b/plugins/vue/demo/components/chat.js new file mode 100644 index 0000000..800ac45 --- /dev/null +++ b/plugins/vue/demo/components/chat.js @@ -0,0 +1,63 @@ +import { Name } from './name.js' + +export default { + + components: { Name }, + + props: ['tags', 'objects'], + + data: ()=> ({ + message: '' + }), + + computed: { + messages() { + return this.objects + .filter(o=> + 'message' in o && + 'timestamp' in o && + typeof o.message == 'string' && + typeof o.timestamp == 'number') + .sortBy('timestamp') + } + }, + + methods: { + sendMessage() { + if (!this.message) return + this.$graffitiUpdate({ + message: this.message, + timestamp: Date.now(), + _tags: this.tags + }) + this.message = '' + } + }, + + template: ` + + +
+ + +
` +} + diff --git a/plugins/vue/demo/components/name.js b/plugins/vue/demo/components/name.js new file mode 100644 index 0000000..ec1de62 --- /dev/null +++ b/plugins/vue/demo/components/name.js @@ -0,0 +1,53 @@ +export const Name = { + + props: ["of", "objects"], + + computed: { + name() { + const nameObjects = this.objects + .filter(o=> + 'name' in o && + 'of' in o && + 'timestamp' in o && + typeof o.name == 'string' && + o.of == this.of && + o._by == this.of && + typeof o.timestamp == 'number') + .sortBy('-timestamp') + + return nameObjects.length? + nameObjects[0].name : 'anonymous' + } + }, + + template: '{{name}}' +} + +export const SetMyName = { + + props: ["tags"], + + data: ()=> ({ + name: '' + }), + + methods: { + setMyName() { + this.$graffitiUpdate({ + name: this.name, + timestamp: Date.now(), + of: this.$graffitiID.value, + _tags: this.tags + }) + this.name = '' + } + }, + + template: ` +
+ + +
+ +
` +} diff --git a/plugins/vue/demo/index.html b/plugins/vue/demo/index.html new file mode 100644 index 0000000..45e1ad3 --- /dev/null +++ b/plugins/vue/demo/index.html @@ -0,0 +1,79 @@ + + + + + Graffiti Vue + + + + + + + + + + +

+ Logging In +

+ +

+ +

+ +
+ +

+ Profile +

+ +

+ My name is: + + + +

+ + + +
+ +

+ Chatting +

+ + + + + + + + + + + + + + + + + + + -- cgit v1.2.3-70-g09d2