forked from hippoz/brainlet
add buggy, basic message list
This commit is contained in:
parent
514ca2dd2b
commit
89acdf6a3c
3 changed files with 38 additions and 19 deletions
|
@ -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
16
app/app.html
|
@ -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;">
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue