✨ Site > Chat > Add user update

site/src/components/chat/index.vue

@@ -0,0 +1,3 @@
+<template src="./template.html"></template>
+<script src="./script.js"></script>
+<style src="./style.styl" lang="stylus" scoped></style>

site/src/components/chat/script.js

@@ -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()
+            }
+        }
+    }
+}

site/src/components/chat/style.styl

@@ -0,0 +1,8 @@
+.chat
+    position fixed
+    bottom 0
+    right 20px
+
+.user-name
+    outline none
+    border none

site/src/components/chat/template.html

@@ -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>

site/src/components/connexion/script.js

@@ -9,12 +9,18 @@ export default
         project()
         {
             return this.$store.state.project
+        },
+
+        pendingUser()
+        {
+            return this.$store.state.pendingUser
         }
     },
 
     watch:
     {
-        project: 'onProjectChange'
+        project: 'onProjectChange',
+        pendingUser: 'onPendingUser'
     },
 
     created()
@@ -29,7 +35,6 @@ export default
 
         this.projectsSocket.on('update_projects', (data) =>
         {
-            // console.log('update_projects', data)
             this.$store.commit('updateProjects', data.all)
         })
     },
@@ -38,6 +43,12 @@ export default
     {
         onProjectChange(value)
         {
+            if(!value)
+            {
+                return
+            }
+
+            // Project socket
             const projectURL = `${process.env.NODE_ENV === 'production' ? '' : 'http://localhost:1571'}/project/${value.slug}`
 
             this.projectSocket = socketIoClient(projectURL)
@@ -66,6 +77,31 @@ export default
             {
                 this.$store.commit('createVersion', data)
             })
+
+            // Chat socket
+            const chatURL = `${process.env.NODE_ENV === 'production' ? '' : 'http://localhost:1571'}/project/${value.slug}/chat`
+
+            this.chatSocket = socketIoClient(chatURL)
+
+            this.chatSocket.on('connect', () =>
+            {
+                // console.log('chat connected')
+            })
+
+            this.chatSocket.on('user', (data) =>
+            {
+                this.$store.commit('updateUser', data)
+            })
+
+            this.chatSocket.on('message', (data) =>
+            {
+                this.$store.commit('createMessage', data)
+            })
+        },
+
+        onPendingUser(value)
+        {
+            this.chatSocket.emit('update_user', value)
         }
     }
 }

site/src/components/project/script.js

@@ -1,5 +1,6 @@
 import FilesTree from '@/components/files-tree'
 import File from '@/components/file'
+import Chat from '@/components/chat'
 
 export default
 {
@@ -8,7 +9,8 @@ export default
     components:
     {
         FilesTree,
-        File
+        File,
+        Chat
     },
 
     computed:

site/src/components/project/template.html

@@ -3,4 +3,5 @@
 
     <files-tree></files-tree>
     <file v-if="file" :content="file.data"></file>
+    <chat></chat>
 </div>