Compare commits
No commits in common. "490c4036fec1da119b440193c7d904dfbafbad9d" and "ea0653f08ba7c38a11f3e741f53b88fbe4807734" have entirely different histories.
490c4036fe
...
ea0653f08b
846
package-lock.json
generated
846
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "matrix-chat",
|
||||
"name": "basic_messaging",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
@ -9,7 +9,6 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.6.5",
|
||||
"matrix-js-sdk": "^9.1.0",
|
||||
"vue": "^2.6.11",
|
||||
"ws": "^7.3.1"
|
||||
},
|
||||
@ -18,7 +17,6 @@
|
||||
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"electron": "^11.0.1",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"vue-router": "^3.4.9",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "matrix chat",
|
||||
"short_name": "[chat]",
|
||||
"name": "open chat",
|
||||
"short_name": "open chat",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#14181b",
|
||||
|
||||
23
src/App.vue
23
src/App.vue
@ -22,21 +22,6 @@ export default {
|
||||
body{
|
||||
margin: 0;
|
||||
}
|
||||
*{
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #42b983 #2220;
|
||||
}
|
||||
*::-webkit-scrollbar {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
*::-webkit-scrollbar-track {
|
||||
background: none;
|
||||
}
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: #42b983;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
position: absolute;
|
||||
@ -48,17 +33,17 @@ body{
|
||||
.content{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(50% - 35rem);
|
||||
left: calc(50% - 25rem);
|
||||
padding: 0;
|
||||
min-height: calc(100%);
|
||||
width: 70rem;
|
||||
width: 50rem;
|
||||
min-width: 18rem;
|
||||
background-color: #313131;
|
||||
box-shadow: 3px 3px 10px #111;
|
||||
}
|
||||
@media (max-width: 75rem){
|
||||
@media (max-width: 55rem){
|
||||
.content{
|
||||
width: 100%;
|
||||
width: calc(100%);
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,40 +1,41 @@
|
||||
<template>
|
||||
<div id="chatInformation">
|
||||
<h1>open chat</h1>
|
||||
<icon class="closeBtn" onclick="this.parentNode.style.display = 'none'" ic="./sym/ic_close_white_24px.svg" />
|
||||
<div id="box">
|
||||
<div class="scrollContainer">
|
||||
<div class="informationBox">
|
||||
<div class="picBoxBig"><div class="placeholderBig">{{room.name.substr(0,2)}}</div></div>
|
||||
<div class="roomInformation">
|
||||
<div class="roomName">{{room.name}}</div>
|
||||
<div class="users">{{room.members.length}} members</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 v-if="room.members.length !== 0">members:</h2>
|
||||
<div v-for="member in room.members.slice(0,20)" :key="member.sender" class="contentBox">
|
||||
<!---<img v-if="member.content.avatar_url" class="picBox"
|
||||
:src="`https://adb.sh/_matrix/media/r0/thumbnail/adb.sh/${member.content.avatar_url.split('/',4)[3]}?width=64&height=64&method=crop`"/>-->
|
||||
<div class="picBox"><p>{{member.content.displayname?member.content.displayname.substr(0,2):member.sender.substr(1,2)}}</p></div>
|
||||
<div class="informationBox">
|
||||
<div class="picBoxBig"><div class="placeholderBig"><p>{{chatroom.name.substr(0,2)}}</p></div></div>
|
||||
<div class="roomInformation">
|
||||
<div class="roomName">{{chatroom.name}}</div>
|
||||
<div class="users">{{chatroom.user.length}} members</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 v-if="chatroom.user.length !== 0">members</h2>
|
||||
<div v-for="user in chatroom.user" :key="user">
|
||||
<div class="contentBox">
|
||||
<div class="picBox"><div class="picPlaceholder"><p>{{user.substr(0,2)}}</p></div></div>
|
||||
<div class="information">
|
||||
<div class="userName">{{member.content.displayname?member.content.displayname:member.sender}}</div>
|
||||
<div v-if="member.content.displayname" class="status">{{member.sender}}</div>
|
||||
<div class="userName">{{user}}</div>
|
||||
<div class="status">online</div>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="room.members.length>20">and {{room.members.length-20}} other members</p>
|
||||
</div>
|
||||
</div>
|
||||
<icon class="closeBtn" onclick="this.parentNode.style.display = 'none'" ic="./sym/ic_close_white_24px.svg" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import icon from './icon.vue';
|
||||
import main from '@/main.js'
|
||||
|
||||
export default {
|
||||
name: "chatInformation",
|
||||
components:{
|
||||
icon
|
||||
},
|
||||
props:{
|
||||
room: {}
|
||||
data(){
|
||||
return {
|
||||
chatroom: main.data().chatroom
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -45,7 +46,7 @@ export default {
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
top: 5rem;
|
||||
width: calc(100% - 4rem);
|
||||
width: calc(100% - 8rem);
|
||||
max-width: 30rem;
|
||||
height: calc(100% - 10rem);
|
||||
background-color: #1d1d1d;
|
||||
@ -63,12 +64,6 @@ export default {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@media (max-height: 40rem) {
|
||||
#chatInformation{
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.closeBtn{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -77,28 +72,27 @@ export default {
|
||||
box-shadow: none;
|
||||
}
|
||||
#box{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
position: relative;
|
||||
width: calc(100% - 2rem);
|
||||
padding: 0 1rem 0 1rem;
|
||||
padding: 0.001rem 1rem 1rem;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
max-height: calc(100% - 8rem);
|
||||
}
|
||||
.scrollContainer{
|
||||
padding: 1rem 0 1rem 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
.informationBox{
|
||||
margin-top: 0.2rem;
|
||||
height: 5rem;
|
||||
padding: 0.2rem;
|
||||
}
|
||||
.picBoxBig{
|
||||
text-align: center;
|
||||
background-color: #42a7b9;
|
||||
padding-top: 1.5rem;
|
||||
background-color: #42b983 ;
|
||||
width: 5rem;
|
||||
height: 3.5rem;
|
||||
height:5rem;
|
||||
border-radius: 5rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
.placeholderBig{
|
||||
padding-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.roomInformation{
|
||||
position: relative;
|
||||
@ -115,38 +109,33 @@ export default {
|
||||
color: #9c9c9c;
|
||||
}
|
||||
.contentBox{
|
||||
position: relative;
|
||||
margin-top: 0.5rem;
|
||||
height: 3rem;
|
||||
width: 100%;
|
||||
margin-top: 0.2rem;
|
||||
height: 3.2rem;
|
||||
padding: 0.2rem;
|
||||
max-height: 48px;
|
||||
}
|
||||
.picBox{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: #42a7b9;
|
||||
text-align: center;
|
||||
background-color: #00BCD4;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 1.5rem;
|
||||
height:3rem;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
img.picBox{
|
||||
background-color: unset;
|
||||
.picPlaceholder{
|
||||
padding-top: 0.001rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.information{
|
||||
position: absolute;
|
||||
left: 4rem;
|
||||
top: 0;
|
||||
width: calc(100% - 4rem);
|
||||
position: relative;
|
||||
text-align: left;
|
||||
margin-top: -2.4rem;
|
||||
margin-left: 3.7rem;
|
||||
}
|
||||
.userName{
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
color: white;
|
||||
}
|
||||
.status{
|
||||
position: absolute;
|
||||
font-size: 0.8rem;
|
||||
top: 1.75rem;
|
||||
color: #9c9c9c;
|
||||
}
|
||||
</style>
|
||||
@ -1,8 +1,7 @@
|
||||
<template>
|
||||
<div class="messageContainer">
|
||||
<div class="message" :title="time">
|
||||
<div class="message">
|
||||
{{msg}}
|
||||
<div class="time">{{time}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -11,8 +10,7 @@
|
||||
export default {
|
||||
name: "message",
|
||||
props: {
|
||||
msg: String,
|
||||
time: String,
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -28,7 +26,7 @@ export default {
|
||||
margin-left:auto; margin-right:0;
|
||||
position: relative;
|
||||
width: max-content;
|
||||
min-width: 2rem;
|
||||
min-width: 5rem;
|
||||
max-width: calc(100% - 3rem);
|
||||
padding: 0.7rem 1rem 0.45rem 1rem;
|
||||
right: 0;
|
||||
@ -38,10 +36,11 @@ export default {
|
||||
word-break: break-word;
|
||||
white-space: pre-line;
|
||||
}
|
||||
.time{
|
||||
position: relative;
|
||||
bottom: -0.2rem;
|
||||
font-size: 0.7rem;
|
||||
text-align: right;
|
||||
|
||||
@media (min-width: 45rem){
|
||||
.message{
|
||||
margin-left: 0; margin-right: auto;
|
||||
border-radius: 1rem 1rem 1rem 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,8 +1,7 @@
|
||||
<template>
|
||||
<div class="messageContainer">
|
||||
<div class="message" :title="time">
|
||||
<div class="message">
|
||||
{{msg}}
|
||||
<div class="time">{{time}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -11,8 +10,7 @@
|
||||
export default {
|
||||
name: "messageReceive",
|
||||
props: {
|
||||
msg: String,
|
||||
time: String
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -27,7 +25,7 @@ export default {
|
||||
.message{
|
||||
position: relative;
|
||||
width: max-content;
|
||||
min-width: 2rem;
|
||||
min-width: 5rem;
|
||||
max-width: calc(100% - 3rem);
|
||||
padding: 0.7rem 1rem 0.45rem 1rem;
|
||||
left: 0;
|
||||
@ -37,10 +35,4 @@ export default {
|
||||
word-break: break-word;
|
||||
white-space: pre-line;
|
||||
}
|
||||
.time{
|
||||
position: relative;
|
||||
bottom: -0.2rem;
|
||||
font-size: 0.7rem;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
@ -2,9 +2,9 @@
|
||||
<div class="newMessageBanner">
|
||||
<form v-on:submit.prevent="sendMessage()">
|
||||
<label for="newMessageInput"></label>
|
||||
<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"
|
||||
<textarea v-on:keyup.shift.enter="sendMessage()" v-on: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"
|
||||
ic="./sym/ic_send_white_24px.svg" />
|
||||
</form>
|
||||
</div>
|
||||
@ -13,7 +13,6 @@
|
||||
<script>
|
||||
import icon from '@/components/icon.vue';
|
||||
import main from '@/main.js';
|
||||
import matrix from '@/matrix.js';
|
||||
|
||||
export default {
|
||||
name: "newMessage",
|
||||
@ -22,10 +21,10 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
sendMessage(){
|
||||
if (this.msg.content.body !== "") {
|
||||
let msgSend = Object.assign({}, this.msg)
|
||||
matrix.methods.sendMessage(msgSend)
|
||||
this.msg.content.body = ""
|
||||
if (this.msg.content.text !== "") {
|
||||
this.msg.time = Date.now()
|
||||
main.methods.sendWebSocket(this.msg)
|
||||
this.msg.content.text = ""
|
||||
document.getElementById("messagesContainer").style.height = "calc(100% - 7rem)"
|
||||
document.getElementById("newMessageInput").style.height = "1.25rem"
|
||||
//let msgContainer = document.getElementById("messagesContainer")
|
||||
@ -44,14 +43,14 @@ export default {
|
||||
data(){
|
||||
return {
|
||||
msg: {
|
||||
type: "m.room.message",
|
||||
type: "message",
|
||||
time: Date.now(),
|
||||
content: {
|
||||
body: "",
|
||||
msgtype: "m.text"
|
||||
user: "you",
|
||||
text: ""
|
||||
}
|
||||
},
|
||||
chatroom: main.data().chatroom,
|
||||
session: matrix.data().session
|
||||
chatroom: main.data().chatroom
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -79,8 +78,6 @@ export default {
|
||||
height: 1.25rem;
|
||||
background-color: #fff0;
|
||||
border: 0 solid #fff0;
|
||||
appearance: none;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
resize: none;
|
||||
@ -92,4 +89,15 @@ 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>
|
||||
@ -1,24 +1,26 @@
|
||||
<template>
|
||||
<div class="topBanner">
|
||||
<div>
|
||||
<icon @click.native="session.currentRoom = undefined" class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" />
|
||||
<div @click="showChatInfo()" class="smallIcon" id="picTop">{{session.currentRoom.name.substr(0,2)}}</div>
|
||||
<router-link to="login">
|
||||
<icon class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" />
|
||||
</router-link>
|
||||
<icon class="smallIcon" id="picTop" ic="./sym/supervisor_account-24px.svg" />
|
||||
<div id="container">
|
||||
<div id="chatName">{{session.currentRoom.name}}</div>
|
||||
<div id="users">{{session.currentRoom.members.length}} members</div>
|
||||
<div id="chatName">{{chatroom.name}}</div>
|
||||
<div id="users">{{chatroom.user.length}} members</div>
|
||||
</div>
|
||||
<icon v-on:click.native="showChatInfo()" class="smallIcon" id="icon-menu" ic="./sym/menu-24px.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import icon from '@/components/icon.vue';
|
||||
import main from '@/main.js';
|
||||
import matrix from '@/matrix.js';
|
||||
|
||||
export default {
|
||||
name: "topBanner",
|
||||
components:{
|
||||
icon,
|
||||
icon
|
||||
},
|
||||
methods:{
|
||||
showChatInfo(){
|
||||
@ -27,8 +29,7 @@ export default {
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
chatroom: main.data().chatroom,
|
||||
session: matrix.data().session
|
||||
chatroom: main.data().chatroom
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -36,40 +37,35 @@ export default {
|
||||
<style scoped>
|
||||
.topBanner{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #1d1d1d;
|
||||
box-shadow: 0 0px 5px #111;
|
||||
}
|
||||
.smallIcon{
|
||||
top: 0.25rem;
|
||||
background-color: #2d2d2d;
|
||||
padding-top: 0.75rem;
|
||||
height: 1.75rem;
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
box-shadow: none;
|
||||
border-radius: 1.25rem;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
#icon-arrow{
|
||||
height: 2.5rem;
|
||||
position: absolute;
|
||||
left: 0.5rem;
|
||||
background-color: unset;
|
||||
box-shadow: none;
|
||||
left: 1rem;
|
||||
}
|
||||
#picTop{
|
||||
position: absolute;
|
||||
left: 3.5rem;
|
||||
left: 4rem;
|
||||
background-color: #42a7b9;
|
||||
}
|
||||
#icon-menu{
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
background-color: #2d2d2d;
|
||||
}
|
||||
#container{
|
||||
position: absolute;
|
||||
top: 0.55rem;
|
||||
left: 7rem;
|
||||
left: 7.5rem;
|
||||
}
|
||||
#chatName{
|
||||
font-size: 1rem;
|
||||
|
||||
77
src/main.js
77
src/main.js
@ -3,7 +3,6 @@ import VueRouter from 'vue-router'
|
||||
import App from './App.vue'
|
||||
import login from './views/login.vue'
|
||||
import chat from './views/chat.vue'
|
||||
import rooms from './views/rooms.vue'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(VueRouter)
|
||||
@ -21,19 +20,9 @@ const router = new VueRouter({
|
||||
component: login
|
||||
},
|
||||
{
|
||||
path: '/chat/*',
|
||||
path: '/chat',
|
||||
name: 'chat',
|
||||
component: chat
|
||||
},
|
||||
{
|
||||
path: '/rooms/*',
|
||||
name: 'room',
|
||||
component: rooms
|
||||
},
|
||||
{
|
||||
path: '/rooms',
|
||||
name: 'rooms',
|
||||
component: rooms
|
||||
}
|
||||
]
|
||||
})
|
||||
@ -46,16 +35,28 @@ let chatroom = {
|
||||
};
|
||||
|
||||
export default {
|
||||
mounted() {
|
||||
sendMessage()
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
chatroom: chatroom
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
error(msg){
|
||||
show_error(msg)
|
||||
sendMessage(message){
|
||||
let msg = {
|
||||
type: "message",
|
||||
time: Date.now(),
|
||||
content: {
|
||||
message: message
|
||||
}
|
||||
}
|
||||
socket.send(JSON.stringify(msg))
|
||||
},
|
||||
router(route){router.push(route)}
|
||||
sendWebSocket(msg){
|
||||
socket.send(JSON.stringify(msg))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -71,11 +72,57 @@ new Vue({
|
||||
}
|
||||
}).$mount('#app')
|
||||
|
||||
//const wsurl = 'ws://127.0.0.1:8090'
|
||||
const wsurl = 'wss://chat.adb.sh:8080'
|
||||
|
||||
const socket = new WebSocket(wsurl)
|
||||
function element(id){ return document.getElementById(id)}
|
||||
|
||||
socket.onopen = () => {
|
||||
let msg = {
|
||||
type: "info",
|
||||
time: Date.now(),
|
||||
content: "new session"
|
||||
}
|
||||
socket.send(JSON.stringify(msg))
|
||||
}
|
||||
socket.onerror = (error) => {
|
||||
console.log(`WebSocket error: ${error}`)
|
||||
}
|
||||
socket.onclose = () => show_error('session ended (refresh)')
|
||||
socket.onmessage = (e) => {
|
||||
console.log(`data received => ${e.data}`)
|
||||
let msg = JSON.parse(e.data)
|
||||
if (msg.type === 'error') show_error(msg.content)
|
||||
else if (msg.type === 'route') router.push({path: msg.path})
|
||||
else if (msg.type === 'room'){
|
||||
chatroom.user = msg.user
|
||||
}
|
||||
else if (msg.type === "info") chatroom.username = msg.username
|
||||
else if (msg.type === 'message'){
|
||||
chatroom.messages.push(msg)
|
||||
let msgContainer = document.getElementById("messagesContainer")
|
||||
if (msg.content.user === chatroom.username || msgContainer.scrollHeight < msgContainer.scrollTop + 1000)
|
||||
setTimeout(() => {msgContainer.scrollTo(0, msgContainer.scrollHeight)}, 50)
|
||||
else document.getElementById("scrollDown").style.display = "block"
|
||||
}
|
||||
}
|
||||
|
||||
function show_error(msg) {
|
||||
let error_style = element('errorBox').style
|
||||
element('errorMessage').innerText = msg
|
||||
error_style.display = "block"
|
||||
error_style.animation = "slide-from-left alternate 0.2s"
|
||||
setTimeout(() => {error_style.animation = ""}, 200)
|
||||
}
|
||||
|
||||
function sendMessage(message){
|
||||
let msg = {
|
||||
type: "message",
|
||||
time: Date.now(),
|
||||
content: {
|
||||
message: message
|
||||
}
|
||||
}
|
||||
socket.send(JSON.stringify(msg))
|
||||
}
|
||||
157
src/matrix.js
157
src/matrix.js
@ -1,157 +0,0 @@
|
||||
import matrix from 'matrix-js-sdk';
|
||||
import main from '@/main.js';
|
||||
//import Vue from 'vue';
|
||||
|
||||
var matrix_cli = matrix.createClient({
|
||||
baseUrl: "https://adb.sh",
|
||||
accessToken: getCookie("accessToken"),
|
||||
userId: getCookie("userId")
|
||||
})
|
||||
let session = {
|
||||
user: "",
|
||||
password: "",
|
||||
accessToken: "",
|
||||
rooms: [],
|
||||
currentRoom: undefined,
|
||||
login:{
|
||||
user: "",
|
||||
password: ""
|
||||
}
|
||||
};
|
||||
|
||||
console.log(document.cookie)
|
||||
|
||||
if (getCookie("accessToken") && getCookie("userId")){
|
||||
session = {
|
||||
user: getCookie("userId"),
|
||||
password: "",
|
||||
accessToken: getCookie("accessToken"),
|
||||
rooms: [],
|
||||
currentRoom: undefined
|
||||
};
|
||||
//Vue.$router.push("/rooms/")
|
||||
window.location.href = '/#/rooms/';
|
||||
matrix_cli.startClient();
|
||||
matrix_cli.once('sync', function (state){
|
||||
console.log(state)
|
||||
})
|
||||
}
|
||||
else window.location.href = '/#/login';
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
session: session
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
login(){
|
||||
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.login("m.login.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.login.user}`;
|
||||
session = {
|
||||
user: session.login.user,
|
||||
password: "",
|
||||
accessToken: response.access_token,
|
||||
rooms: [],
|
||||
currentRoom: undefined
|
||||
};
|
||||
console.log(`access token => ${response.access_token}`);
|
||||
if (response.error){
|
||||
main.methods.error(response.error)
|
||||
console.log(`login error => ${response.error}`)
|
||||
}
|
||||
window.location.href = '/#/rooms/';
|
||||
matrix_cli.startClient();
|
||||
matrix_cli.once('sync', function (state){
|
||||
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")
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getCookie(key) {
|
||||
let cookie = document.cookie.replace(/ /g, '').split(';')
|
||||
.find(cookie => cookie.split('=')[0] === key);
|
||||
return cookie?cookie.split('=')[1]:false;
|
||||
}
|
||||
|
||||
matrix_cli.on("event", event => {
|
||||
console.log(event.getType());
|
||||
console.log(event);
|
||||
if (event.getType() === "m.room.name") {
|
||||
matrix_cli.getRooms().forEach(newRoom => {
|
||||
let room = session.rooms.find(room => room.roomId === newRoom.roomId)
|
||||
if (!room) {
|
||||
session.rooms.push({name: newRoom.name, roomId: newRoom.roomId, messages: [], members: []})
|
||||
console.log(`new room => ${newRoom.name}`)
|
||||
} else if (room.name !== newRoom.name) {
|
||||
console.log(`roomname changed from ${room.name} to ${newRoom.name}`)
|
||||
room.name = newRoom.name
|
||||
}
|
||||
})
|
||||
}
|
||||
else if (event.getType() === "m.room.member"){
|
||||
let room = session.rooms.find(room => room.roomId === event.event.room_id)
|
||||
if (!room) {
|
||||
session.rooms.push({name: "undefined", roomId: event.event.room_id, messages: [], members: []})
|
||||
console.log(`new user => ${event.event.sender}`)
|
||||
} else {
|
||||
room.members.push({sender: event.event.sender, content: event.event.content})
|
||||
}
|
||||
}
|
||||
console.log(session)
|
||||
})
|
||||
|
||||
matrix_cli.on("Room.timeline", event => {
|
||||
if (event.getType() === "m.room.message") {
|
||||
console.log(`new message => ${event.event.content.body}`);
|
||||
let room = session.rooms.find(room => room.roomId === event.event.room_id)
|
||||
if (!room) {
|
||||
session.rooms.push({name: "undefined", roomId: event.event.room_id, messages: [event.event], members: []})
|
||||
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"
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -1,24 +1,22 @@
|
||||
<template>
|
||||
<div>
|
||||
<div @scroll="scrollHandler()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
|
||||
<div 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>
|
||||
<div v-for="(message, i) in session.currentRoom.messages" :key="message.origin_server_ts">
|
||||
<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)}}
|
||||
<p style="text-align: center; font-style: italic;">you entered the chat</p>
|
||||
<div v-for="(message, i) in chatroom.messages" :key="message.time">
|
||||
<div v-if="message.content.user !== chatroom.username && function(){
|
||||
return i===0 || chatroom.messages[i-1].content.user!==message.content.user;}()"
|
||||
style="margin-left: 2rem; margin-top: 1rem">{{message.content.user}}
|
||||
</div>
|
||||
<div v-if="(message.sender !== session.user) && (i===0 || session.currentRoom.messages[i-1].sender!==message.sender)"
|
||||
style="margin-left: 2rem; margin-top: 1rem">{{message.sender}}
|
||||
</div>
|
||||
<messageReceive v-if="message.sender !== session.user" :msg=message.content.body
|
||||
:time=getTime(message.origin_server_ts) />
|
||||
<message v-if="message.sender === session.user" :msg=message.content.body :time=getTime(message.origin_server_ts) />
|
||||
<messageReceive v-if="message.content.user !== chatroom.username" :msg=message.content.text />
|
||||
<message v-if="message.content.user === chatroom.username" :msg=message.content.text />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<newMessage />
|
||||
<icon v-if="showScrollBtn" v-on:click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
|
||||
<icon v-on:click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
|
||||
<topBanner />
|
||||
<chatInformation />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -28,13 +26,14 @@ import messageReceive from '@/components/messageReceive.vue';
|
||||
import newMessage from '@/components/newMessage.vue';
|
||||
import topBanner from '@/components/topBanner.vue';
|
||||
import main from '@/main.js';
|
||||
import ChatInformation from "@/components/chatInformation";
|
||||
import Icon from "@/components/icon";
|
||||
import matrix from '@/matrix.js';
|
||||
|
||||
export default {
|
||||
name: 'chat',
|
||||
components: {
|
||||
Icon,
|
||||
ChatInformation,
|
||||
message,
|
||||
messageReceive,
|
||||
newMessage,
|
||||
@ -44,29 +43,12 @@ export default {
|
||||
scrollToBottom(){
|
||||
let msgContainer = document.getElementById("messagesContainer")
|
||||
msgContainer.scrollTo(0, msgContainer.scrollHeight)
|
||||
},
|
||||
getTime(time){
|
||||
let date = new Date(time);
|
||||
return `${date.getHours()}:${(date.getMinutes()<10)?"0"+date.getMinutes():date.getMinutes()}`;
|
||||
},
|
||||
getDate(time){
|
||||
let months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
|
||||
let date = new Date(time);
|
||||
return `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`;
|
||||
},
|
||||
scrollHandler(){
|
||||
if (this.$refs.msgContainer.scrollTop === 0){
|
||||
console.log("load messages")
|
||||
}
|
||||
let msgContainer = document.getElementById("messagesContainer")
|
||||
this.showScrollBtn = msgContainer.scrollHeight - msgContainer.scrollTop > msgContainer.offsetHeight + 200;
|
||||
document.getElementById("scrollDown").style.display = "none"
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
chatroom: main.data().chatroom,
|
||||
session: matrix.data().session,
|
||||
showScrollBtn: false
|
||||
chatroom: main.data().chatroom
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -92,11 +74,6 @@ export default {
|
||||
background-color: #fff;
|
||||
bottom: 5rem;
|
||||
right: 1rem;
|
||||
display: block;
|
||||
}
|
||||
.info{
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
margin: 1rem;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<div id="login">
|
||||
<h1 class="title">[chat]</h1>
|
||||
<form @submit.prevent="login()">
|
||||
<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>
|
||||
<h1 class="title">open chat</h1>
|
||||
<div class="input-field" id="longurl">
|
||||
<label for="longurl-input"></label>
|
||||
<input v-model="session.content.user" class="input" id="longurl-input" type="text" autocomplete="off" maxlength="20" placeholder="chose nickname">
|
||||
</div>
|
||||
<textbtn v-on:click.native="login()" text="login" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import textbtn from '@/components/textbtn';
|
||||
import matrix from '@/matrix.js';
|
||||
import main from "@/main";
|
||||
|
||||
export default {
|
||||
name: "login.vue",
|
||||
@ -19,13 +19,22 @@ export default {
|
||||
textbtn
|
||||
},
|
||||
methods: {
|
||||
login(){
|
||||
matrix.methods.login()
|
||||
login() {
|
||||
if (this.session.content.user !== "") {
|
||||
this.session.time = Date.now()
|
||||
main.methods.sendWebSocket(this.session)
|
||||
}
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
session: matrix.data().session
|
||||
session: {
|
||||
type: "login",
|
||||
time: Date.now(),
|
||||
content: {
|
||||
user: ""
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -50,9 +59,6 @@ input{
|
||||
border: 1px solid #fff;
|
||||
text-align: center;
|
||||
font-size: 1.1rem;
|
||||
margin-top: 1rem;
|
||||
appearance: none;
|
||||
outline: none;
|
||||
}
|
||||
input:focus{
|
||||
color: #000;
|
||||
|
||||
@ -1,169 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<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 class="roomImgPlaceholder">{{room.name.substr(0,2)}}</div>
|
||||
<div class="roomListName">{{room.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<chat class="chat" v-if="session.currentRoom" />
|
||||
<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 class="roomImgPlaceholder">{{room.name.substr(0,2)}}</div>
|
||||
<div class="roomListName">{{room.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<chatInformation v-if="session.currentRoom" :room="session.currentRoom"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import matrix from '@/matrix.js';
|
||||
import chat from '@/views/chat.vue';
|
||||
import chatInformation from "@/components/chatInformation";
|
||||
|
||||
export default {
|
||||
name: "rooms",
|
||||
components:{
|
||||
chat,
|
||||
chatInformation
|
||||
},
|
||||
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)
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
session: matrix.data().session,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.roomList{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 18rem;
|
||||
height: 100%;
|
||||
background-color: #222;
|
||||
text-align: center;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.chat{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: calc(100% - 18rem);
|
||||
height: 100%;
|
||||
background-color: #313131;
|
||||
}
|
||||
.roomListElement{
|
||||
position: relative;
|
||||
height: 3rem;
|
||||
margin: 0.5rem 0 0.5rem 0;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
background-color: #222;
|
||||
}
|
||||
.roomListName{
|
||||
position: absolute;
|
||||
left: 4.5rem;
|
||||
top: 1rem;
|
||||
color: #fff;
|
||||
}
|
||||
.roomListSmall{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 4rem;
|
||||
height: 100%;
|
||||
background-color: #222;
|
||||
text-align: center;
|
||||
display: none;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
animation: ease;
|
||||
animation-duration: 0.2s;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.roomListSmall:hover{
|
||||
width: 18rem;
|
||||
scrollbar-width: thin;
|
||||
box-shadow: 0 0 20px #111;
|
||||
}
|
||||
.roomListSmall::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
.roomListSmall:hover::-webkit-scrollbar {
|
||||
width: 0.5rem;
|
||||
}
|
||||
.noRoomSelected{
|
||||
position: absolute;
|
||||
width: calc(100% - 20rem);
|
||||
top: 5rem;
|
||||
left: 20rem;
|
||||
text-align: center;
|
||||
}
|
||||
.roomImgPlaceholder{
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
height: 2rem;
|
||||
width: 3rem;
|
||||
padding-top: 1rem;
|
||||
background-color: #42a7b9;
|
||||
border-radius: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.roomImgPlaceholder.small{
|
||||
margin-left: calc(50% - 2rem);
|
||||
}
|
||||
|
||||
@media (max-width: 48rem) {
|
||||
.roomList{
|
||||
display: none;
|
||||
}
|
||||
.chat{
|
||||
width: calc(100% - 4rem);
|
||||
}
|
||||
.roomListSmall{
|
||||
display: block;
|
||||
}
|
||||
.roomImgPlaceholder{
|
||||
left: 0.5rem;
|
||||
}
|
||||
.noRoomSelected{
|
||||
left: 4rem;
|
||||
width: calc(100% - 4rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 30rem) {
|
||||
.roomList{
|
||||
width: 100%;
|
||||
}
|
||||
.chat{
|
||||
width: 100%;
|
||||
}
|
||||
.noRoomSelected{
|
||||
display: none;
|
||||
}
|
||||
.roomListSmall{
|
||||
display: none;
|
||||
}
|
||||
.roomList{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user