Private chat

server/server.js

@@ -70,8 +70,25 @@ io.on('connection', (socket) => {
         })
     })
 
-    //private message
-    //io.to(data.room).emit('newUser', data);
+    // Listening for private chats
+    socket.on('joinPrivateRoom', ({username, room, to}) => {
+        console.log(`user ${username} wants to have a private chat with ${to}`);
+
+        // Join the room
+        socket.join(to, () => {
+
+            // Notify the user to talk with
+            io.sockets.in(room).emit('privateChat', {
+                username,
+                to
+            });
+        });
+
+         // io.to(to).emit('privateChat', {
+            //     username,
+            // })
+
+    });
 })
 
 server.listen(PORT, () => console.log(`Server Listening on port ${PORT}`));

src/components/ChatDialog.vue

@@ -1,21 +1,27 @@
 <template>
-  <div>
+  <div class="chat-dialog">
     <md-dialog
-      :md-active.sync="showDialog"
+      :md-active.sync="showDialog.chat"
       :md-fullscreen="false"
       :md-click-outside-to-close="false"
     >
-      <div>
-        <md-button class="md-icon-button" v-on:click="closeChat()">
+      <div class="chat-dialog__options">
+        <md-button class="md-icon-button chat-dialog__video" v-on:click="closeChat()">
+          <md-icon>video_call</md-icon>
+        </md-button>
+        <md-button class="md-icon-button chat-dialog__exit" v-on:click="closeChat()">
           <md-icon>close</md-icon>
         </md-button>
       </div>
-      <md-dialog-content>whateverrr</md-dialog-content>
-<!-- 
+      <md-dialog-content>Private chat with {{showDialog.user}}</md-dialog-content>
+
       <md-dialog-actions>
-        <md-button class="md-primary" @click="showDialog = false">Close</md-button>
-        <md-button class="md-primary" @click="showDialog = false">Save</md-button>
-      </md-dialog-actions> -->
+        <textarea
+          class="chat-dialog__text"
+          v-model="privateMessage"
+          v-on:keyup.enter="sendPrivateMessage()"
+        ></textarea>
+      </md-dialog-actions>
     </md-dialog>
   </div>
 </template>
@@ -25,24 +31,61 @@
 export default {
   name: "ChatDialog",
   props: {
-    showDialog: Boolean
+    showDialog: Object
   },
   data: function() {
     return {
+      privateMessage: ""
     };
   },
-  created() {},
   methods: {
-    closeChat(){
-      this.$emit('close-chat')
+    closeChat() {
+      this.$emit("close-chat");
+    },
+    sendPrivateMessage() {
+      console.log(`${this.$store.state.username} want to send a private message to ${this.showDialog.user}`
+      );
+    }
+  },
+  watch: {
+    showDialog: function(newVal) {
+      if (newVal) {
+        // Open private chat
+        this.$socket.emit("joinPrivateRoom", {
+          ...this.$store.state,
+          to: this.showDialog.user
+        });
+      }
     }
   }
 };
 </script>
 
+
+
 <style lang="scss" scoped>
 button {
   float: right;
 }
+
+.chat-dialog {
+  &__text {
+    width: 100%;
+    height: 60px;
+    border: 1px solid #8080804a;
+  }
+
+  &__options {
+    background: #00800073;
+  }
+
+  &__video {
+    float: left;
+  }
+
+  &__exit {
+    float: right;
+  }
+}
 </style>
 

src/styles/app.scss

@@ -5,7 +5,7 @@
 }
 
 .md-dialog{
-    top: 81%;
+    top: calc(100vh - 180px);
     right: -135px;
     height: 350px;
     left: unset;
@@ -14,6 +14,13 @@
     border: 1px solid gainsboro;
 }
 
+.md-dialog-actions {
+    padding: 0;
+}
+.md-dialog-content {
+    padding: 1rem;
+}
+
 .md-button.md-theme-default[disabled] .md-icon-font {
     color: rgba(0,0,0,0.38) !important;
     color: var(--md-theme-default-icon-disabled-on-background, rgba(0,0,0,0.38)) !important;

src/views/Chat.vue

@@ -16,11 +16,11 @@
       </md-app-toolbar>
 
       <md-app-drawer md-permanent="full">
-        <UserList 
-            v-bind:users="users" 
-            v-bind:openPrivateChat="openPrivateChat"
-            v-on:open-chat="openChat($event)">
-        </UserList>
+        <UserList
+          v-bind:users="users"
+          v-bind:openPrivateChat="openPrivateChat.chat"
+          v-on:open-chat="openChat($event)"
+        ></UserList>
       </md-app-drawer>
 
       <md-app-content>
@@ -30,10 +30,7 @@
 
     <MessageArea v-on:send-message="sendMessage($event)"></MessageArea>
 
-    <ChatDialog 
-      v-bind:showDialog="openPrivateChat"
-      v-on:close-chat="openPrivateChat = false">
-    </ChatDialog>
+    <ChatDialog v-bind:showDialog="openPrivateChat" v-on:close-chat="openPrivateChat.chat = false"></ChatDialog>
   </div>
 </template>
 
@@ -57,13 +54,32 @@ export default {
       this.users = data;
     },
     newMessage: function({ message, username }) {
-      const isMe = this.$store.state.username === username
-      const msg = isMe ? ` ${message}`: `${username.toUpperCase()} - ${message} `
+      const isMe = this.$store.state.username === username;
+      const msg = isMe
+        ? ` ${message}`
+        : `${username.toUpperCase()} - ${message} `;
       const msgObj = {
         msg,
-        own:isMe
+        own: isMe
       };
       this.messages.push(msgObj);
+    },
+    privateChat: function({ username, to }) {
+      const isMe = this.$store.state.username === to;
+      if (isMe && !this.openPrivateChat.chat) {
+
+        // Join private room
+        this.$socket.emit("joinPrivateRoom", {
+          to: this.$store.state.username,
+          room: this.$store.state.room,
+          username
+        });
+
+        // open dialog
+        this.openPrivateChat.chat = true
+        this.openPrivateChat.user = username
+
+      }
     }
   },
   beforeCreate: function() {
@@ -74,7 +90,10 @@ export default {
       room: this.$store.state.room,
       users: [],
       messages: [],
-      openPrivateChat: false
+      openPrivateChat: {
+        chat: false,
+        user: null
+      }
     };
   },
   methods: {
@@ -92,14 +111,19 @@ export default {
         message: msg
       });
     },
-    openChat(user){
-      this.openPrivateChat = true
-      console.log(user)
+    openChat(user) {
+      this.openPrivateChat = {
+        chat: true,
+        user: user
+      };
+      console.log(user);
     }
   }
 };
 </script>
 
+
+
 <style lang="scss" scoped>
 .page-container {
   height: 100%;