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: `
+
+ -
+
+
+ :
+
+ {{ object.message }}
+
+
+
+
+
+
+
+
+
+ `
+}
+
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