✨ Site > Chat > Add user update

2017-08-14 22:17:40 +02:00
parent 16052bd2ea
commit 0eb639a9db
9 changed files with 164 additions and 13 deletions
@@ -0,0 +1,3 @@
+<template src="./template.html"></template>
+<script src="./script.js"></script>
+<style src="./style.styl" lang="stylus" scoped></style>
@@ -0,0 +1,53 @@
+export default
+{
+    name: 'chat',
+
+    data()
+    {
+        return {
+            userName: ''
+        }
+    },
+
+    computed:
+    {
+        messages()
+        {
+            return this.$store.state.chatMessages
+        },
+
+        user()
+        {
+            return this.$store.state.user
+        }
+    },
+
+    watch:
+    {
+        user(value)
+        {
+            this.userName = value.name
+        }
+    },
+
+    mounted()
+    {
+    },
+
+    methods:
+    {
+        onUserNameChange()
+        {
+            this.$store.commit('askUpdateUser', { name: this.userName })
+        },
+
+        onUserNameKeyDown(event)
+        {
+            // Blur if enter pressed
+            if(event.keyCode === 13)
+            {
+                event.target.blur()
+            }
+        }
+    }
+}
@@ -0,0 +1,8 @@
+.chat
+    position fixed
+    bottom 0
+    right 20px
+
+.user-name
+    outline none
+    border none
@@ -0,0 +1,21 @@
+<div class="chat">
+    <header>
+        Discussions
+    </header>
+    <div class="messages">
+        <div class="message" v-for="message of messages" :key="message.id">
+            <div class="date">
+                {{ message.time }}
+            </div>
+            <div class="user" :style="`color: ${message.user.color};`">
+                {{ message.user.name }}
+            </div>
+            <div class="text">
+                {{ message.text }}
+            </div>
+        </div>
+    </div>
+    <div class="infos" v-if="user">
+        Your nickname is <input class="user-name" :style="`color: ${user.color};`" v-model="userName" @change="onUserNameChange($event)" @keydown="onUserNameKeyDown($event)"/>
+    </div>
+</div>