From 0e51fac2b24c752513afe65736e98eb5fb5ec3af Mon Sep 17 00:00:00 2001 From: Roger Braun <rbraun@Bobble.local> Date: Tue, 5 Dec 2017 11:02:41 +0100 Subject: [PATCH] Add missing component code. --- src/components/chat/chat.js | 26 +++++++++++++++++++ src/components/chat/chat.vue | 49 ++++++++++++++++++++++++++++++++++++ 2 files changed, 75 insertions(+) create mode 100644 src/components/chat/chat.js create mode 100644 src/components/chat/chat.vue diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js new file mode 100644 index 00000000..3b84bd3d --- /dev/null +++ b/src/components/chat/chat.js @@ -0,0 +1,26 @@ +const chat = { + data () { + return { + messages: [], + currentMessage: '', + socket: this.$store.state.users.socket, + channel: null + } + }, + created () { + this.channel = this.socket.channel('chat:public') + this.channel.on('new_msg', (msg) => { + this.messages.push(msg) + this.messages = this.messages.slice(-19, 20) + }) + this.channel.join() + }, + methods: { + submit(message) { + this.channel.push('new_msg', {text: message}, 10000) + this.currentMessage = ''; + } + } +} + +export default chat; diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue new file mode 100644 index 00000000..9d3ab39c --- /dev/null +++ b/src/components/chat/chat.vue @@ -0,0 +1,49 @@ +<template> + <div class="chat-panel panel panel-default"> + <div class="panel-heading timeline-heading base02-background base04"> + <div class="title"> + {{$t('chat.title')}} + </div> + </div> + <div class="panel-body base01-background"> + <div class="chat-window"> + <div class="chat-message" v-for="message in messages"> + <span class="chat-avatar"> + <img :src="message.author.avatar" /> + {{message.author.username}}: + </span> + <span class="chat-text"> + {{message.text}} + </span> + </div> + </div> + <div class="chat-input"> + <input v-model="currentMessage" type="text" @keyup.enter="submit(currentMessage)"> + </div> + </div> + </div> +</template> + +<script src="./chat.js"></script> + + +<style lang="scss"> + .chat-message { + padding: 0.2em 0.5em + } + .chat-avatar { + img { + height: 32px; + width: 32px; + border-radius: 5px; + margin-right: 0.5em; + } + } + .chat-input { + display: flex; + input { + flex: auto; + margin: 0.5em; + } + } +</style>