From 89acdf6a3c9db916b872bd900ded895f593e068a Mon Sep 17 00:00:00 2001 From: hippoz Date: Tue, 17 Nov 2020 11:28:11 +0200 Subject: [PATCH] add buggy, basic message list --- api/v1/gateway/index.js | 11 ++++++++--- app/app.html | 16 +++++++++++++--- app/resources/js/app.js | 30 +++++++++++++++++------------- 3 files changed, 38 insertions(+), 19 deletions(-) diff --git a/api/v1/gateway/index.js b/api/v1/gateway/index.js index 350e983..b2ea919 100644 --- a/api/v1/gateway/index.js +++ b/api/v1/gateway/index.js @@ -55,6 +55,7 @@ GatewayServer.prototype.eventSetup = function() { if (permissionLevel < config.roleMap.USER) return this.authDisconnect(socket, callback); socket.username = data.username; + socket.userId = user._id; console.log(`[*] [gateway] [handshake] User ${data.username} has successfully authenticated`); return callback(); }); @@ -69,14 +70,18 @@ GatewayServer.prototype.eventSetup = function() { socket.on('message', ({ categoryId, content }) => { // TODO: URGENT: Check if the category exists and if the user has access to it (access coming soon) - socket.to(categoryId).emit('message', { + const msgConfig = { username: socket.username, + creatorId: socket.userId, categoryId: categoryId, content: content - }); + }; + + socket.to(categoryId).emit('message', msgConfig); + socket.emit('message', msgConfig); }); - socket.on('subscribe', (categories) => { + socket.on('subscribe', async (categories) => { for (let v of categories) { // TODO: URGENT: Check if the category exists and if the user has access to it (access coming soon) socket.join(v); diff --git a/app/app.html b/app/app.html index 9f05b32..fb1fde9 100755 --- a/app/app.html +++ b/app/app.html @@ -92,12 +92,12 @@

Browsing category: {{ selection.category.title }}

Browsing {{ selection.category.title }}

- Back - Refresh + Back + Refresh
- +
by {{ post.creator.username }} @@ -109,6 +109,16 @@ {{ button.text }}
+
+ + + {{ post.username }} + + + + +
+
diff --git a/app/resources/js/app.js b/app/resources/js/app.js index a3af9fb..fcf2a37 100755 --- a/app/resources/js/app.js +++ b/app/resources/js/app.js @@ -125,7 +125,8 @@ const app = new Vue({ title: '', browsing: false, _id: undefined, - isCategory: false + isCategory: false, + isChatContext: false }, posts: [] }, @@ -152,10 +153,6 @@ const app = new Vue({ role: '' }, gateway: new GatewayConnection(), - viewingChat: { - show: false, - categoryId: 'X' - }, messages: { 'X': [ { username: 'NONEXISTENT_TEST_ACCOUNT', content: 'TEST MSG' } ] } @@ -226,18 +223,18 @@ const app = new Vue({ this.notification('ERROR: You have been disconnected from the gateway. Realtime features such as chat will not work and unexpected errors may occur.'); }; this.gateway.onConnect = () => { - this.gateway.socket.on('message', ({ username, categoryId, content }) => { - this.showMessageNotification(categoryId, username, content); + this.gateway.socket.on('message', ({ username, categoryId, content, creatorId }) => { + this.showMessageNotification(categoryId, username, creatorId, content); }) }; this.gateway.connect(this.loggedInUser.token); }, - showMessageNotification: async function(categoryId, username, content) { + showMessageNotification: async function(categoryId, username, creatorId, content) { + if (!this.messages[categoryId]) this.messages[categoryId] = [] + this.messages[categoryId].push({ username, content, creatorId }); + this.resetSnackbarButton(); this.notification(`${username}: ${content}`); - - if (!this.messages[categoryId]) this.messages[categoryId] = [] - this.messages[categoryId].push({ username, content }); }, button: function(text, click) { this.cardButtons.push({ text, click }); @@ -394,6 +391,7 @@ const app = new Vue({ this.selection.category._id = _id; this.selection.category.browsing = true; this.selection.category.isCategory = true; + this.selection.category.isChatContext = false; this.selection.posts = []; this.cardButtons = []; @@ -408,7 +406,12 @@ const app = new Vue({ } }, openChatForCategory: async function(categoryId) { - + this.gateway.subscribeToCategoryChat(categoryId); + + this.selection.category.isChatContext = true; + this.selection.category.browsing = true; + this.selection.category.title = 'Chat'; + this.selection.category._id = categoryId; }, browseCategories: async function() { const res = await fetch(`${window.location.origin}/api/v1/content/category/list?count=50`, { @@ -425,13 +428,14 @@ const app = new Vue({ this.selection.category.title = 'categories'; this.selection.category.browsing = true; this.selection.category.isCategory = false; + this.selection.category.isChatContext = false; this.selection.posts = []; this.cardButtons = []; this.button('Chat', (post) => { if (post._id) { - this.gateway.subscribeToCategoryChat(post._id); + this.openChatForCategory(post._id); this.gateway.sendMessage(post._id, 'yoooo'); } });