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

send messages

Browse Source
This commit is contained in:
adb 2020-11-18 00:58:32 +01:00
parent 0dbb060cf0
commit 553caab7f9
6 changed files with 60 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/message.vue
View File

@ -26,7 +26,7 @@ export default {
margin-left:auto; margin-right:0;
position: relative;
width: max-content;
min-width: 5rem;
min-width: 2rem;
max-width: calc(100% - 3rem);
padding: 0.7rem 1rem 0.45rem 1rem;
right: 0;

2
src/components/messageReceive.vue
View File

@ -25,7 +25,7 @@ export default {
.message{
position: relative;
width: max-content;
min-width: 5rem;
min-width: 2rem;
max-width: calc(100% - 3rem);
padding: 0.7rem 1rem 0.45rem 1rem;
left: 0;

36
src/components/newMessage.vue
View File

@ -2,9 +2,9 @@
<div class="newMessageBanner">
<form v-on:submit.prevent="sendMessage()">
<label for="newMessageInput"></label>
<textarea v-on:keyup.shift.enter="sendMessage()" @input="resizeMessageBanner()" ref="newMessageInput" id="newMessageInput" class="newMessageInput"
autocomplete="off" placeholder="type a message ..." v-model="msg.content.text" />
<icon @click.native="sendMessage()" title="press shift + enter to submit" id="sendMessageBtn"
<textarea @keyup.enter.exact="sendMessage()" @input="resizeMessageBanner()" ref="newMessageInput" id="newMessageInput" class="newMessageInput"
autocomplete="off" placeholder="type a message ..." v-model="msg.content.body" />
<icon type="submit" title="press enter to submit" id="sendMessageBtn"
ic="./sym/ic_send_white_24px.svg" />
</form>
</div>
@ -13,6 +13,7 @@
<script>
import icon from '@/components/icon.vue';
import main from '@/main.js';
import matrix from '@/matrix.js';
export default {
name: "newMessage",
@ -21,10 +22,10 @@ export default {
},
methods: {
sendMessage(){
if (this.msg.content.text !== "") {
this.msg.time = Date.now()
main.methods.sendWebSocket(this.msg)
this.msg.content.text = ""
if (this.msg.content.body !== "") {
let msgSend = Object.assign({}, this.msg)
matrix.methods.sendMessage(msgSend)
this.msg.content.body = ""
document.getElementById("messagesContainer").style.height = "calc(100% - 7rem)"
document.getElementById("newMessageInput").style.height = "1.25rem"
//let msgContainer = document.getElementById("messagesContainer")
@ -43,14 +44,14 @@ export default {
data(){
return {
msg: {
type: "message",
time: Date.now(),
type: "m.room.message",
content: {
user: "you",
text: ""
body: "",
msgtype: "m.text"
}
},
chatroom: main.data().chatroom
chatroom: main.data().chatroom,
session: matrix.data().session
}
}
}
@ -89,15 +90,4 @@ export default {
right: 1rem;
bottom: 0.5rem;
}
#sendMessageBtn:hover::after{
content: "press shift + enter to submit";
position: absolute;
padding: 1rem;
bottom: 4rem;
right: 0;
width: 14rem;
background-color: #eee;
color: #000;
border-radius: 1rem;
}
</style>

45
src/matrix.js
View File

@ -12,7 +12,11 @@ let session = {
password: "",
accessToken: "",
rooms: [],
currentRoom: undefined
currentRoom: undefined,
login:{
user: "",
password: ""
}
};
console.log(document.cookie)
@ -45,16 +49,25 @@ export default {
if (session.accessToken !== ""){
main.methods.error("you are already logged in")
return;
} else if (session.login.user === ""){
main.methods.error('username is empty')
return;
} else if (session.login.password === ""){
main.methods.error('password is empty')
return;
} else if (!(session.login.user.includes("@") && session.login.user.includes(":"))){
main.methods.error('username is in wrong style')
return;
}
matrix_cli = matrix.createClient("https://adb.sh");
matrix_cli.login("m.login.password", {
user: session.user,
password: session.password,
user: session.login.user,
password: session.login.password,
initial_device_display_name: "matrix chat",
}).then((response) => {
document.cookie = `accessToken=${response.access_token}`;
document.cookie = `userId=${session.user}`;
document.cookie = `userId=${session.login.user}`;
session = {
user: session.login.user,
password: "",
accessToken: response.access_token,
rooms: [],
@ -71,6 +84,21 @@ export default {
console.log(state)
})
});
},
sendMessage(msg){
let msgSend = {
type: msg.type,
content: {
body: msg.content.body,
msgtype: msg.content.msgtype
}
}
matrix_cli.sendEvent(session.currentRoom.roomId, msgSend.type, msgSend.content, "").then(()=>{
console.log("message sent successfully")
}).catch(err => {
console.log(`error while sending message => ${err}`)
main.methods.error("message could not be sent")
})
}
}
}
@ -108,4 +136,11 @@ matrix_cli.on("Room.timeline", event => {
console.log(`undefined room name for => ${event.event.room_id}`)
}
else room.messages.push(event.event)
let msgContainer = document.getElementById("messagesContainer")
if (session.currentRoom && session.currentRoom.roomId === event.event.room_id){
if (event.event.sender === session.user || msgContainer.scrollHeight < msgContainer.scrollTop + 1000)
setTimeout(() => {msgContainer.scrollTo(0, msgContainer.scrollHeight)}, 10)
else document.getElementById("scrollDown").style.display = "block"
}
});

4
src/views/login.vue
View File

@ -2,8 +2,8 @@
<div id="login">
<h1 class="title">[chat]</h1>
<form @submit.prevent="login()">
<input v-model="session.user" class="input" name="user" type="text" maxlength="30" placeholder="@user:adb.sh"><br>
<input v-model="session.password" class="input" name="password" type="password" maxlength="30" placeholder="password"><br>
<input v-model="session.login.user" class="input" name="user" type="text" maxlength="30" placeholder="@user:adb.sh"><br>
<input v-model="session.login.password" class="input" name="password" type="password" maxlength="30" placeholder="password"><br>
<textbtn type="submit" text="login" />
</form>
</div>

4
src/views/rooms.vue
View File

@ -3,7 +3,7 @@
<div id="roomList" class="roomList">
<h1>[chat]</h1>
<h2>{{session.rooms.length}} rooms:</h2>
<div v-for="(room, index) in session.rooms" :key="index" @click="openChat(room)" class="roomListElement">
<div v-for="room in session.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>
@ -34,6 +34,8 @@ export default {
this.session.currentRoom = room;
this.$router.push(`/rooms/${room.roomId}`)
this.$forceUpdate()
let msgContainer = document.getElementById("messagesContainer")
setTimeout(() => {msgContainer.scrollTo(0, msgContainer.scrollHeight)}, 10)
}
},
data(){