hippoz/brainlet
Archived
5
1
Fork 1
Code Issues 6 Pull requests Releases Wiki Activity

add buggy, basic message list

Browse source
This commit is contained in:
hippoz 2020-11-17 11:28:11 +02:00
parent 514ca2dd2b
commit 89acdf6a3c
3 changed files with 38 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
api/v1/gateway/index.js
View file

@ -55,6 +55,7 @@ GatewayServer.prototype.eventSetup = function() {
if (permissionLevel < config.roleMap.USER) return this.authDisconnect(socket, callback); if (permissionLevel < config.roleMap.USER) return this.authDisconnect(socket, callback);
socket.username = data.username; socket.username = data.username;
socket.userId = user._id;
console.log(`[*] [gateway] [handshake] User ${data.username} has successfully authenticated`); console.log(`[*] [gateway] [handshake] User ${data.username} has successfully authenticated`);
return callback(); return callback();
}); });
@ -69,14 +70,18 @@ GatewayServer.prototype.eventSetup = function() {
socket.on('message', ({ categoryId, content }) => { socket.on('message', ({ categoryId, content }) => {
// TODO: URGENT: Check if the category exists and if the user has access to it (access coming soon) // 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, username: socket.username,
creatorId: socket.userId,
categoryId: categoryId, categoryId: categoryId,
content: content 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) { for (let v of categories) {
// TODO: URGENT: Check if the category exists and if the user has access to it (access coming soon) // TODO: URGENT: Check if the category exists and if the user has access to it (access coming soon)
socket.join(v); socket.join(v);

16
app/app.html
View file

@ -92,12 +92,12 @@
<md-toolbar v-show="selection.category.browsing" class="md-dense" md-elevation="5"> <md-toolbar v-show="selection.category.browsing" class="md-dense" md-elevation="5">
<h3 v-if="selection.category.isCategory" class="md-title" style="flex: 1">Browsing category: {{ selection.category.title }}</h3> <h3 v-if="selection.category.isCategory" class="md-title" style="flex: 1">Browsing category: {{ selection.category.title }}</h3>
<h3 v-if="!selection.category.isCategory" class="md-title" style="flex: 1">Browsing {{ selection.category.title }}</h3> <h3 v-if="!selection.category.isCategory" class="md-title" style="flex: 1">Browsing {{ selection.category.title }}</h3>
<md-button @click="browseCategories()" v-if="selection.category.isCategory">Back</md-button> <md-button @click="browseCategories()" v-if="selection.category.isCategory || selection.category.isChatContext">Back</md-button>
<md-button @click="refresh()">Refresh</md-button> <md-button @click="refresh()" v-if="!selection.category.isChatContext">Refresh</md-button>
</md-toolbar> </md-toolbar>
<div id="posts-container" v-if="selection.category.browsing"> <div id="posts-container" v-if="selection.category.browsing">
<md-card v-for="post in selection.posts" v-bind:key="post._id"> <md-card v-for="post in selection.posts" v-bind:key="post._id" v-if="!selection.category.isChatContext">
<md-card-header> <md-card-header>
<div class="md-title" v-html="post.title"></div> <div class="md-title" v-html="post.title"></div>
<span>by <a class="md-dense cursor" v-on:click="viewProfile(post.creator._id)">{{ post.creator.username }}</a></span> <span>by <a class="md-dense cursor" v-on:click="viewProfile(post.creator._id)">{{ post.creator.username }}</a></span>
@ -109,6 +109,16 @@
<md-button v-for="button in cardButtons" v-bind:key="button.text" @click="button.click(post)">{{ button.text }}</md-button> <md-button v-for="button in cardButtons" v-bind:key="button.text" @click="button.click(post)">{{ button.text }}</md-button>
</md-card-actions> </md-card-actions>
</md-card> </md-card>
<div v-for="post,k in messages[selection.category._id]" v-if="selection.category.isChatContext" :key="post.content + post.creatorId + k">
<md-card>
<md-card-header>
<a class="md-dense cursor md-title" v-on:click="viewProfile(post.creatorId)"><span>{{ post.username }}</span></a>
</md-card-header>
<md-card-content v-html="post.content"></md-card-content>
</md-card>
<br>
</div>
</div> </div>
<md-speed-dial class="md-fixed md-bottom-right" md-direction="top" md-elevation="5" style="z-index: 4000;"> <md-speed-dial class="md-fixed md-bottom-right" md-direction="top" md-elevation="5" style="z-index: 4000;">

30
app/resources/js/app.js
View file

@ -125,7 +125,8 @@ const app = new Vue({
title: '', title: '',
browsing: false, browsing: false,
_id: undefined, _id: undefined,
isCategory: false isCategory: false,
isChatContext: false
}, },
posts: [] posts: []
}, },
@ -152,10 +153,6 @@ const app = new Vue({
role: '' role: ''
}, },
gateway: new GatewayConnection(), gateway: new GatewayConnection(),
viewingChat: {
show: false,
categoryId: 'X'
},
messages: { messages: {
'X': [ { username: 'NONEXISTENT_TEST_ACCOUNT', content: 'TEST MSG' } ] '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.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.onConnect = () => {
this.gateway.socket.on('message', ({ username, categoryId, content }) => { this.gateway.socket.on('message', ({ username, categoryId, content, creatorId }) => {
this.showMessageNotification(categoryId, username, content); this.showMessageNotification(categoryId, username, creatorId, content);
}) })
}; };
this.gateway.connect(this.loggedInUser.token); 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.resetSnackbarButton();
this.notification(`${username}: ${content}`); this.notification(`${username}: ${content}`);
if (!this.messages[categoryId]) this.messages[categoryId] = []
this.messages[categoryId].push({ username, content });
}, },
button: function(text, click) { button: function(text, click) {
this.cardButtons.push({ text, click }); this.cardButtons.push({ text, click });
@ -394,6 +391,7 @@ const app = new Vue({
this.selection.category._id = _id; this.selection.category._id = _id;
this.selection.category.browsing = true; this.selection.category.browsing = true;
this.selection.category.isCategory = true; this.selection.category.isCategory = true;
this.selection.category.isChatContext = false;
this.selection.posts = []; this.selection.posts = [];
this.cardButtons = []; this.cardButtons = [];
@ -408,7 +406,12 @@ const app = new Vue({
} }
}, },
openChatForCategory: async function(categoryId) { 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() { browseCategories: async function() {
const res = await fetch(`${window.location.origin}/api/v1/content/category/list?count=50`, { 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.title = 'categories';
this.selection.category.browsing = true; this.selection.category.browsing = true;
this.selection.category.isCategory = false; this.selection.category.isCategory = false;
this.selection.category.isChatContext = false;
this.selection.posts = []; this.selection.posts = [];
this.cardButtons = []; this.cardButtons = [];
this.button('Chat', (post) => { this.button('Chat', (post) => {
if (post._id) { if (post._id) {
this.gateway.subscribeToCategoryChat(post._id); this.openChatForCategory(post._id);
this.gateway.sendMessage(post._id, 'yoooo'); this.gateway.sendMessage(post._id, 'yoooo');
} }
}); });