diff options
| author | theia | 2023-02-02 10:03:30 -0500 |
|---|---|---|
| committer | theia | 2023-02-02 10:03:30 -0500 |
| commit | cc44599d1e96920da9dac478afd19d90cd54c4da (patch) | |
| tree | 579530b92dbac7e3d0f1e7734e7971f861997e6e | |
| parent | e88fae3261abea5522c1f8560b33e6e23fb1d1fd (diff) | |
added demo for thing
| -rw-r--r-- | plugins/vue/demo/components/chat.js | 63 | ||||
| -rw-r--r-- | plugins/vue/demo/components/name.js | 53 | ||||
| -rw-r--r-- | plugins/vue/demo/index.html | 79 |
3 files changed, 195 insertions, 0 deletions
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: ` + <ul v-for="object in messages"> + <li> + <graffiti-objects :tags="[object._by]" v-slot="{objects}"> + <name :of="object._by" :objects="objects"></name> + </graffiti-objects>: + + {{ object.message }} + + <template v-if="object._by==$graffitiID.value"> + <button @click="object.message+='!!';object._update()"> + ‼️ + </button> + + <button @click="object._remove()"> + ❌ + </button> + </template> + </li> + </ul> + + <form @submit.prevent="sendMessage"> + <input v-model="message"> + <input type="submit" value="Submit"/> + </form>` +} + 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: ` + <form @submit.prevent="setMyName"> + <label for="nameBox">Change your name:</label> + <input v-model="name" id="nameBox"/> + <br> + <input type="submit" value="Submit"/> + </form>` +} 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 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>Graffiti Vue</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"> + <script async src="https://ga.jspm.io/npm:es-module-shims@1.6.2/dist/es-module-shims.js"></script> + <script type="importmap">{ "imports": { + "vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.45/vue.esm-browser.min.js", + "graffiti-vue": "../plugin.js" + }}</script> + <script type="module"> + //"graffiti-vue": "https://graffiti.garden/graffiti-js/plugins/vue/plugin.js" + import { createApp } from 'vue' + import { Name, SetMyName } from './components/name.js' + import Chat from './components/chat.js' + import GraffitiVue from 'graffiti-vue' + createApp() + .use(GraffitiVue) + .component('Name', Name) + .component('SetMyName', SetMyName) + .component('Chat', Chat) + .mount('#app') + </script> +</head> +<body id="app"> +<!--------------------------------------------------------------> + + + <h1> + Logging In + </h1> + + <p> + <button @click="$graffitiToggleLogIn"> + {{ !$graffitiID.value? 'Log In' : 'Log Out' }} + </button> + </p> + + <br> + + <h1> + Profile + </h1> + + <p> + My name is: + <graffiti-objects :tags="[$graffitiID.value]" v-slot="{objects}"> + <name :of="$graffitiID.value" :objects="objects"></name> + </graffiti-objects> + </p> + + <set-my-name :tags="[$graffitiID.value]"></set-my-name> + + <br> + + <h1> + Chatting + </h1> + + <graffiti-objects :tags="['demo']" v-slot="{objects}"> + <chat :tags="['demo']" :objects="objects"></chat> + </graffiti-objects> + + <!-- Add a like button --> + + + <!-- Filter by likes --> + + + <!-- different contexts --> + + + <!-- Private messages --> + +<!--------------------------------------------------------------> +</body> +</html> |