adb/matrix-chat
adb/matrix-chat
2
3
Fork 1
Code Issues Pull Requests Releases Wiki Activity

list rooms

Browse Source
This commit is contained in:
adb 2021-03-13 00:42:24 +01:00
parent 4821e08b80
commit 95b8e38dd4
3 changed files with 49 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/lib/matrixHandler.js
View File

@ -1,13 +1,13 @@
import matrix from 'matrix-js-sdk';
export let client = undefined;
export class MatrixHandler {
constructor(clientDisplayName = 'matrix-chat') {
this.clientDisplayName = clientDisplayName;
this.accessToken;
this.client = undefined;
this.rooms = undefined;
this.rooms = [];
this.loading = undefined;
this.user = undefined;
}
login(user, password, baseUrl, onError, callback = ()=>{}){
if (this.client){ console.log('there is already an active session'); return; }
@ -26,8 +26,9 @@ export class MatrixHandler {
}
if (response.access_token){
console.log(`access token => ${response.access_token}`);
console.log(this.client.getRooms());
callback(response.access_token);
this.user = user;
this.startSync()
}
}).catch(error => {
this.logout();
@ -37,16 +38,27 @@ export class MatrixHandler {
}
tokenLogin(baseUrl, accessToken, userId){
if (this.client){ console.log('there is already an active session'); return; }
this.client = new matrix.createClient({baseUrl, accessToken, userId}).then(response => {
console.log(response);
});
this.client.startClient();
this.client.once('sync', (state) => {
console.log(state);
});
this.client = new matrix.createClient({baseUrl, accessToken, userId});
this.user = userId;
this.startSync();
}
logout(){
this.client.stopClient();
this.client = undefined;
}
startSync(callback = ()=>{}){
this.loading = true;
this.client.startClient();
this.client.once('sync', (state) => {
console.log(state);
this.rooms = this.client.getRooms();
this.loading = false;
callback();
});
this.client.on('event', (event) => {
if (event.getType() === 'm.room.create') {
console.log(event)
}
})
}
}

14
src/views/chat.vue
View File

@ -2,7 +2,7 @@
<div>
<div @scroll="scrollHandler()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
<div id="messages" class="messages">
<p v-if="session.currentRoom.messages.length === 0" class="info">this room is empty</p>
<p v-if="room.messages.length === 0" class="info">this room is empty</p>
<!--<div v-for="(message, i) in session.currentRoom.messages" :key="message.origin_server_ts" class="event">
<div v-if="i===0 || getDate(session.currentRoom.messages[i-1].origin_server_ts)!==getDate(message.origin_server_ts)"
style="margin-left: 2rem; margin-top: 1rem" class="info">{{getDate(message.origin_server_ts)}}
@ -16,10 +16,10 @@
<userThumbnail v-if="(message.sender !== session.user) && (i===session.currentRoom.messages.length-1 || session.currentRoom.messages[i+1].sender!==message.sender)"
:userId="message.sender" width="64" height="64" resizeMethod="scale" class="userThumbnail" />
</div>-->
<div class="eventGroup" v-for="group in splitEventsToGroups(session.currentRoom.messages)" :key="group[0].origin_server_ts">
<div class="eventGroup" v-for="group in splitEventsToGroups(room.messages)" :key="group[0].origin_server_ts">
<div class="username" v-if="group[0].sender !== session.user">{{group[0].sender}}</div>
<div class="thumbnailContainer">
<userThumbnail v-if="group[0].sender !== session.user && session.currentRoom.members.length > 2" :userId="group[0].sender" width="64" height="64" resizeMethod="scale" class="userThumbnail" />
<userThumbnail v-if="group[0].sender !== session.user && room.members.length > 2" :userId="group[0].sender" width="64" height="64" resizeMethod="scale" class="userThumbnail" />
</div>
<div class="event" v-for="message in group" :key="message.origin_server_ts">
<message :type="message.sender === session.user?'send':'receive'"
@ -39,9 +39,7 @@
import message from '@/components/message.vue';
import newMessage from '@/components/newMessage.vue';
import topBanner from '@/components/topBanner.vue';
import main from '@/main.js';
import Icon from "@/components/icon";
import matrix from '@/matrix.js';
import userThumbnail from '@/components/userThumbnail';
export default {
@ -53,6 +51,10 @@ export default {
topBanner,
userThumbnail
},
props: {
room: {},
user: String
},
methods:{
scrollToBottom(){
let msgContainer = document.getElementById("messagesContainer")
@ -90,8 +92,6 @@ export default {
},
data(){
return {
chatroom: main.data().chatroom,
session: matrix.data().session,
showScrollBtn: false,
scrollOnUpdate: true
}

32
src/views/rooms.vue
View File

@ -1,31 +1,33 @@
<template>
<div>
<div v-if="matrix.loading">
loading...
</div>
<div v-else>
<div id="roomList" class="roomList">
<h1>[chat]</h1>
<h2>{{session.rooms.length}} rooms:</h2>
<div v-for="room in session.rooms" :key="room.roomId" @click="openChat(room)" class="roomListElement">
<div v-for="room in matrix.rooms" :key="room.roomId" @click="openChat(room)" class="roomListElement">
<div class="roomImgPlaceholder">{{room.name.substr(0,2)}}</div>
<div class="roomListName">{{room.name}}</div>
</div>
</div>
<chat class="chat" v-if="session.currentRoom" />
<chat class="chat" v-if="currentRoom" :room="currentRoom" :user="matrix.user" />
<div class="noRoomSelected" v-else>Please select a room to be displayed.</div>
<div class="roomListSmall">
<h1>[c]</h1>
<h2>—</h2>
<div v-for="(room, index) in session.rooms" :key="index" @click="openChat(room)" class="roomListElement" :title="room.name">
<div v-for="(room, index) in matrix.rooms" :key="index" @click="openChat(room)" class="roomListElement" :title="room.name">
<div class="roomImgPlaceholder">{{room.name.substr(0,2)}}</div>
<div class="roomListName">{{room.name}}</div>
</div>
</div>
<chatInformation v-if="session.currentRoom" :room="session.currentRoom"/>
<chatInformation v-if="currentRoom" :room="currentRoom"/>
</div>
</template>
<script>
import matrix from '@/matrix.js';
import chat from '@/views/chat.vue';
import chatInformation from "@/components/chatInformation";
import {matrix} from "@/main";
export default {
name: "rooms",
@ -35,17 +37,21 @@ export default {
},
methods:{
openChat(room){
this.session.currentRoom = room;
this.$router.push(`/rooms/${room.roomId}`)
this.$forceUpdate()
let msgContainer = document.getElementById("messagesContainer")
setTimeout(() => {msgContainer.scrollTo(0, msgContainer.scrollHeight)}, 50)
this.currentRoom = room;
chat.data().room = room;
chat.data().user = matrix.user;
this.$router.push(`/rooms/${room.roomId}`);
this.$forceUpdate();
}
},
data(){
return {
session: matrix.data().session
matrix,
currentRoom: undefined
}
},
mounted() {
if (matrix.client === undefined) this.$router.push('/login');
}
}
</script>