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);
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);

16
app/app.html
View file

@ -92,12 +92,12 @@
<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 {{ selection.category.title }}</h3>
<md-button @click="browseCategories()" v-if="selection.category.isCategory">Back</md-button>
<md-button @click="refresh()">Refresh</md-button>
<md-button @click="browseCategories()" v-if="selection.category.isCategory || selection.category.isChatContext">Back</md-button>
<md-button @click="refresh()" v-if="!selection.category.isChatContext">Refresh</md-button>
</md-toolbar>
<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>
<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>
@ -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-card-actions>
</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>
<md-speed-dial class="md-fixed md-bottom-right" md-direction="top" md-elevation="5" style="z-index: 4000;">

28
app/resources/js/app.js
View file

@ -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');
}
});