Merge branch 'restructure'
# Conflicts: # src/components/chatInformation.vueadd-admin-interface
commit
e52ea62fe3
@ -0,0 +1,35 @@
|
|||||||
|
module.exports = {
|
||||||
|
"env": {
|
||||||
|
"browser": true,
|
||||||
|
"es6": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"eslint:recommended",
|
||||||
|
"plugin:vue/essential"
|
||||||
|
],
|
||||||
|
"globals": {
|
||||||
|
"Atomics": "readonly",
|
||||||
|
"SharedArrayBuffer": "readonly"
|
||||||
|
},
|
||||||
|
"parserOptions": {
|
||||||
|
"ecmaVersion": 2018,
|
||||||
|
"sourceType": "module"
|
||||||
|
},
|
||||||
|
"plugins": [
|
||||||
|
"vue"
|
||||||
|
],
|
||||||
|
"rules": {
|
||||||
|
"indent": [
|
||||||
|
"warn",
|
||||||
|
2
|
||||||
|
],
|
||||||
|
"linebreak-style": [
|
||||||
|
"error",
|
||||||
|
"unix"
|
||||||
|
],
|
||||||
|
"quotes": [
|
||||||
|
"warn",
|
||||||
|
"single"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,133 @@
|
|||||||
|
<template>
|
||||||
|
<div class="timeline">
|
||||||
|
<div class="timeGroup"
|
||||||
|
v-for="timeGroup in splitArray(timeline,obj => getDate(obj.event.origin_server_ts),obj => obj.event)"
|
||||||
|
:key="timeGroup[0].origin_server_ts"
|
||||||
|
>
|
||||||
|
<div class="time">{{getDate(timeGroup[0].origin_server_ts)}}</div>
|
||||||
|
<div class="eventGroup" v-for="group in splitArray(timeGroup, obj => obj.sender)" :key="group[0].origin_server_ts">
|
||||||
|
<div class="thumbnailContainer">
|
||||||
|
<div class="filler"></div>
|
||||||
|
<userThumbnail
|
||||||
|
v-if="group[0].sender !== user && groupTimeline"
|
||||||
|
:fallback="group[0].sender"
|
||||||
|
class="userThumbnail"
|
||||||
|
:mxcURL="getUser(group[0].sender).avatarUrl"
|
||||||
|
:size="2"
|
||||||
|
:title="group[0].sender"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div :class="groupTimeline?'indent username':'username'"
|
||||||
|
v-if="group[0].sender !== user && groupTimeline">{{getUser(group[0].sender).displayName || group[0].sender}}
|
||||||
|
</div>
|
||||||
|
<div :class="groupTimeline?'indent event':'event'"
|
||||||
|
v-for="event in group" :key="event.origin_server_ts"
|
||||||
|
:title="`${group[0].sender} at ${getTime(event.origin_server_ts)}`"
|
||||||
|
>
|
||||||
|
<message v-if="event.content.msgtype==='m.text'"
|
||||||
|
:type="event.sender === user?'send':'receive'"
|
||||||
|
:msg=event.content.body :time=getTime(event.origin_server_ts)
|
||||||
|
/>
|
||||||
|
<div v-else-if="event.type==='m.room.member'" class="info">{{membershipEvents[event.content.membership]}}</div>
|
||||||
|
<div v-else class="info">unknown event</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import message from "@/components/message";
|
||||||
|
import userThumbnail from "@/components/userThumbnail";
|
||||||
|
import {matrix} from "@/main";
|
||||||
|
import splitArray from "@/lib/splitArray";
|
||||||
|
import {getDate, getTime} from "@/lib/getTimeStrings";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'eventGroup',
|
||||||
|
components: {
|
||||||
|
message,
|
||||||
|
userThumbnail
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
timeline: Array,
|
||||||
|
user: String,
|
||||||
|
groupTimeline: Boolean
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getUser(userId) {
|
||||||
|
return matrix.client.getUser(userId);
|
||||||
|
},
|
||||||
|
splitArray,
|
||||||
|
getDate,
|
||||||
|
getTime
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
membershipEvents:{
|
||||||
|
invite: 'was invented',
|
||||||
|
join: 'joined the room',
|
||||||
|
leave: 'left the room',
|
||||||
|
ban: 'was banned'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.timeline{
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
.timeGroup {
|
||||||
|
.time {
|
||||||
|
top: 0.25rem;
|
||||||
|
position: sticky;
|
||||||
|
z-index: 100;
|
||||||
|
background-color: #2d2d2d;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
width: fit-content;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
.eventGroup {
|
||||||
|
position: relative;
|
||||||
|
width: calc(100% - 1rem);
|
||||||
|
height: fit-content;
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
.thumbnailContainer {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
.filler {
|
||||||
|
height: calc(100% - 2rem);
|
||||||
|
}
|
||||||
|
.userThumbnail {
|
||||||
|
position: sticky;
|
||||||
|
bottom: 0.5rem;
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.username{
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
.event{
|
||||||
|
.info{
|
||||||
|
font-style: italic;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.indent{
|
||||||
|
margin-left: 2.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,46 +1,47 @@
|
|||||||
<template>
|
<template>
|
||||||
<img v-if="mxcURL" :src="thumbnailUrl()" class="userThumbnail" />
|
<img v-if="mxcURL" :src="thumbnailUrl()" class="userThumbnail image"/>
|
||||||
<div v-else class="userThumbnail">
|
<Identicon v-else :value="fallback" :theme="'jdenticon'" :size="this.getFontSize()*this.size" class="userThumbnail identicon"/>
|
||||||
<p>{{username?username.substr(0,2):userId.substr(1,2)}}</p>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import parseMXC from '@modular-matrix/parse-mxc';
|
import parseMXC from '@modular-matrix/parse-mxc';
|
||||||
import matrix from '@/matrix.js';
|
import {matrix} from "@/main";
|
||||||
|
import Identicon from '@vue-polkadot/vue-identicon';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "userThumbnail.vue",
|
name: "userThumbnail.vue",
|
||||||
|
components: {
|
||||||
|
Identicon
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
mxcURL: String,
|
mxcURL: String,
|
||||||
username: String,
|
username: String,
|
||||||
userId: String,
|
fallback: String,
|
||||||
width: Number,
|
homeserver: String,
|
||||||
height: Number,
|
size: Number
|
||||||
resizeMethod: String
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
thumbnailUrl(){
|
thumbnailUrl(){
|
||||||
let mxc = parseMXC.parse(this.mxcURL);
|
let mxc = parseMXC.parse(this.mxcURL);
|
||||||
return `${this.homeserver}/_matrix/media/v1/thumbnail/${mxc.homeserver}/${mxc.id}?width=${this.width}&height=${this.height}&method=${this.resizeMethod}`;
|
return `${this.homeserver||matrix.baseUrl}/_matrix/media/v1/thumbnail/${
|
||||||
|
mxc.homeserver}/${mxc.id}?width=${this.imageSize}&height=${this.imageSize}&method=${this.resizeMethod}`;
|
||||||
|
},
|
||||||
|
getFontSize(){
|
||||||
|
return window.getComputedStyle(document.body,null).fontSize.split("px", 1)||16;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data(){
|
data(){
|
||||||
return {
|
return {
|
||||||
homeserver: matrix.data().session.baseUrl
|
resizeMethod: 'scale',
|
||||||
|
imageSize: 128
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped lang="scss">
|
||||||
.userThumbnail{
|
.userThumbnail{
|
||||||
background-color: #42a7b9;
|
border-radius: 50%;
|
||||||
width: 3rem;
|
|
||||||
height: 3rem;
|
|
||||||
border-radius: 1.5rem;
|
|
||||||
}
|
|
||||||
img.userThumbnail{
|
|
||||||
background-color: unset;
|
background-color: unset;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
export class cookieHandler {
|
||||||
|
constructor() {
|
||||||
|
this.cookies = {};
|
||||||
|
this.reload();
|
||||||
|
this.expires = undefined;
|
||||||
|
this.SameSite = 'Strict';
|
||||||
|
}
|
||||||
|
getCookies(){
|
||||||
|
return this.cookies;
|
||||||
|
}
|
||||||
|
setCookie(cookies){
|
||||||
|
Object.keys(cookies).forEach(key => {
|
||||||
|
this.cookies[key] = cookies[key];
|
||||||
|
})
|
||||||
|
}
|
||||||
|
parseCookie(string){
|
||||||
|
let cookies = {};
|
||||||
|
string.replace(/ /g, '').split(';').forEach(cookie => {
|
||||||
|
let arr = cookie.split('=');
|
||||||
|
cookies[arr[0]] = arr[1];
|
||||||
|
})
|
||||||
|
return cookies;
|
||||||
|
}
|
||||||
|
reload(){
|
||||||
|
if (document.cookie) this.cookies = this.parseCookie(document.cookie);
|
||||||
|
console.log('cookie loaded')
|
||||||
|
console.log(this.cookies);
|
||||||
|
}
|
||||||
|
store(){
|
||||||
|
Object.keys(this.cookies).forEach(key => {
|
||||||
|
document.cookie = `${key}=${this.cookies[key]}; expires=${this.expires}; SameSite=${this.SameSite}; Secure;`;
|
||||||
|
});
|
||||||
|
console.log('cookie stored');
|
||||||
|
console.log(this.cookies);
|
||||||
|
}
|
||||||
|
toString(cookies = this.cookies){
|
||||||
|
let string = '';
|
||||||
|
Object.keys(cookies).forEach(key => {
|
||||||
|
string += `${key}=${cookies[key]}; `;
|
||||||
|
})
|
||||||
|
return string;
|
||||||
|
}
|
||||||
|
setExpire(days){
|
||||||
|
this.expires = new Date(Date.now() + 86400 * 10000 * days);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
export function getTime(time) {
|
||||||
|
let date = new Date(time);
|
||||||
|
return `${date.getHours()}:${(date.getMinutes() < 10) ? '0' : ''}${date.getMinutes()}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function 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()}`;
|
||||||
|
}
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
import matrix from 'matrix-js-sdk';
|
||||||
|
|
||||||
|
export class MatrixHandler {
|
||||||
|
constructor(clientDisplayName = 'matrix-chat') {
|
||||||
|
this.clientDisplayName = clientDisplayName;
|
||||||
|
this.accessToken;
|
||||||
|
this.client = undefined;
|
||||||
|
this.rooms = [];
|
||||||
|
this.loading = undefined;
|
||||||
|
this.user = undefined;
|
||||||
|
this.baseUrl = undefined;
|
||||||
|
}
|
||||||
|
login(user, password, baseUrl, onError, callback = ()=>{}){
|
||||||
|
if (this.client){ console.log('there is already an active session'); return; }
|
||||||
|
this.client = new matrix.createClient({
|
||||||
|
baseUrl: baseUrl
|
||||||
|
});
|
||||||
|
this.client.login('m.login.password', {
|
||||||
|
user: user,
|
||||||
|
password: password,
|
||||||
|
initial_device_display_name: this.clientDisplayName,
|
||||||
|
}).then((response) => {
|
||||||
|
if (response.error) {
|
||||||
|
this.logout();
|
||||||
|
console.log(`login error => ${response.error}`);
|
||||||
|
onError(response.error);
|
||||||
|
}
|
||||||
|
if (response.access_token){
|
||||||
|
console.log(`access token => ${response.access_token}`);
|
||||||
|
callback(response.access_token);
|
||||||
|
this.user = user;
|
||||||
|
this.baseUrl = baseUrl;
|
||||||
|
this.startSync()
|
||||||
|
}
|
||||||
|
}).catch(error => {
|
||||||
|
this.logout();
|
||||||
|
console.log(error);
|
||||||
|
onError(error.toString());
|
||||||
|
})
|
||||||
|
}
|
||||||
|
tokenLogin(baseUrl, accessToken, userId){
|
||||||
|
if (this.client){ console.log('there is already an active session'); return; }
|
||||||
|
this.client = new matrix.createClient({baseUrl, accessToken, userId});
|
||||||
|
this.user = userId;
|
||||||
|
this.baseUrl = baseUrl;
|
||||||
|
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();
|
||||||
|
console.log(this.rooms)
|
||||||
|
this.loading = false;
|
||||||
|
callback();
|
||||||
|
});
|
||||||
|
this.client.on('event', (event) => {
|
||||||
|
if (event.getType() === 'm.room.create') {
|
||||||
|
console.log(event)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
async sendEvent(msg, roomId){
|
||||||
|
await this.client.sendEvent(roomId, msg.type, msg.content, '').then(() => {
|
||||||
|
console.log('message sent successfully');
|
||||||
|
}).catch((err) => {
|
||||||
|
console.log(`error while sending message => ${err}`);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
export default function splitArray(arr, key, get=obj=>obj){
|
||||||
|
let payload = [[]];
|
||||||
|
arr.forEach((obj, i) => {
|
||||||
|
let nextObj = arr[i+1];
|
||||||
|
payload[payload.length-1].push(get(obj));
|
||||||
|
if (!nextObj) return payload;
|
||||||
|
if (key(obj) !== key(nextObj)) payload.push([]);
|
||||||
|
})
|
||||||
|
return payload;
|
||||||
|
}
|
||||||
@ -1,81 +1,26 @@
|
|||||||
import Vue from "vue"
|
import Vue from 'vue'
|
||||||
import VueRouter from "vue-router"
|
import VueRouter from 'vue-router'
|
||||||
import App from "./App.vue"
|
import App from './App.vue'
|
||||||
import login from "./views/login.vue"
|
import {router} from './router.js'
|
||||||
import chat from "./views/chat.vue"
|
import {MatrixHandler} from './lib/matrixHandler.js'
|
||||||
import rooms from "./views/rooms.vue"
|
import {cookieHandler} from './lib/cookieHandler.js';
|
||||||
|
|
||||||
Vue.config.productionTip = false
|
Vue.config.productionTip = false;
|
||||||
Vue.use(VueRouter)
|
Vue.use(VueRouter);
|
||||||
|
|
||||||
const router = new VueRouter({
|
export let matrix = new MatrixHandler();
|
||||||
routes: [
|
|
||||||
{
|
|
||||||
path: "/",
|
|
||||||
name: "home",
|
|
||||||
component: login
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/login",
|
|
||||||
name: "login",
|
|
||||||
component: login
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/chat/*",
|
|
||||||
name: "chat",
|
|
||||||
component: chat
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/rooms/*",
|
|
||||||
name: "room",
|
|
||||||
component: rooms
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/rooms",
|
|
||||||
name: "rooms",
|
|
||||||
component: rooms
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
|
|
||||||
let chatroom = {
|
let cookie = new cookieHandler().getCookies();
|
||||||
name: "open chat",
|
if (cookie && cookie.baseUrl && cookie.accessToken && cookie.userId) {
|
||||||
user: [],
|
matrix.tokenLogin(cookie.baseUrl, cookie.accessToken, cookie.userId);
|
||||||
username: "you",
|
|
||||||
messages: []
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data(){
|
|
||||||
return {
|
|
||||||
chatroom: chatroom
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
error(msg){
|
|
||||||
show_error(msg)
|
|
||||||
},
|
|
||||||
router(route){router.push(route)}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
el: "#app",
|
el: '#app',
|
||||||
router,
|
router,
|
||||||
template: "<App/>",
|
template: '<App/>',
|
||||||
components: {App},
|
components: {App},
|
||||||
data(){
|
data() {
|
||||||
return {
|
return {}
|
||||||
chatroom: chatroom
|
}
|
||||||
}
|
}).$mount('#app');
|
||||||
}
|
|
||||||
}).$mount("#app")
|
|
||||||
|
|
||||||
function element(id){ return document.getElementById(id)}
|
|
||||||
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)
|
|
||||||
}
|
|
||||||
|
|||||||
@ -0,0 +1,34 @@
|
|||||||
|
import VueRouter from 'vue-router';
|
||||||
|
import login from '@/views/login';
|
||||||
|
import chat from '@/views/chat';
|
||||||
|
import rooms from '@/views/rooms';
|
||||||
|
|
||||||
|
export const router = new VueRouter({
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'home',
|
||||||
|
component: login
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
name: 'login',
|
||||||
|
component: login
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/chat/*',
|
||||||
|
name: 'chat',
|
||||||
|
component: chat
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/rooms/*',
|
||||||
|
name: 'room',
|
||||||
|
component: rooms
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/rooms',
|
||||||
|
name: 'rooms',
|
||||||
|
component: rooms
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
@ -1,103 +1,112 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div @scroll="scrollHandler()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
|
<div ref="chatContainer" class="chatContainer">
|
||||||
<div id="messages" class="messages">
|
<div @scroll="scrollHandler()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
|
||||||
<p v-if="session.currentRoom.messages.length === 0" class="info">this room is empty</p>
|
<div v-if="loadingStatus" @click="loadEvents()" class="loadMore">{{loadingStatus}}</div>
|
||||||
<div v-for="(message, i) in session.currentRoom.messages" :key="message.origin_server_ts">
|
<p v-if="room.timeline.length === 0" class="chatInfo">this room is empty</p>
|
||||||
<div v-if="i===0 || getDate(session.currentRoom.messages[i-1].origin_server_ts)!==getDate(message.origin_server_ts)"
|
<timeline :timeline="room.timeline" :group-timeline="isGroup()" :user="user"/>
|
||||||
style="margin-left: 2rem; margin-top: 1rem" class="info">{{getDate(message.origin_server_ts)}}
|
|
||||||
</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>
|
|
||||||
<message :msgClass="message.sender === session.user?'messageSend':'messageReceive'"
|
|
||||||
:msg=message.content.body :time=getTime(message.origin_server_ts) />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<icon v-if="showScrollBtn" @click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
|
||||||
</div>
|
</div>
|
||||||
<newMessage />
|
<newMessage :onResize="height=>resize(height)" :roomId="room.roomId"/>
|
||||||
<icon v-if="showScrollBtn" v-on:click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
|
<topBanner :room="room" :close-chat="()=>closeChat()" :open-chat-info="()=>openChatInfo()"/>
|
||||||
<topBanner />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import message from '@/components/message.vue';
|
|
||||||
import newMessage from '@/components/newMessage.vue';
|
import newMessage from '@/components/newMessage.vue';
|
||||||
import topBanner from '@/components/topBanner.vue';
|
import topBanner from '@/components/topBanner.vue';
|
||||||
import main from '@/main.js';
|
import Icon from '@/components/icon';
|
||||||
import Icon from "@/components/icon";
|
import {matrix} from '@/main';
|
||||||
import matrix from '@/matrix.js';
|
import splitArray from '@/lib/splitArray.js'
|
||||||
|
import timeline from '@/components/timeline';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'chat',
|
name: 'chat',
|
||||||
components: {
|
components: {
|
||||||
|
timeline,
|
||||||
Icon,
|
Icon,
|
||||||
message,
|
|
||||||
newMessage,
|
newMessage,
|
||||||
topBanner
|
topBanner
|
||||||
},
|
},
|
||||||
|
props: {
|
||||||
|
room: [Object, undefined],
|
||||||
|
user: String,
|
||||||
|
closeChat: Function,
|
||||||
|
openChatInfo: Function
|
||||||
|
},
|
||||||
methods:{
|
methods:{
|
||||||
scrollToBottom(){
|
scrollToBottom(){
|
||||||
let msgContainer = document.getElementById("messagesContainer")
|
this.$refs.msgContainer.scrollTop = this.$refs.msgContainer.scrollHeight;
|
||||||
msgContainer.scrollTo(0, msgContainer.scrollHeight)
|
|
||||||
},
|
},
|
||||||
getTime(time){
|
scrollHandler(){
|
||||||
let date = new Date(time);
|
if (this.$refs.msgContainer.scrollTop === 0) this.loadEvents();
|
||||||
return `${date.getHours()}:${(date.getMinutes()<10)?"0":""}${date.getMinutes()}`;
|
let msg = this.$refs.msgContainer;
|
||||||
|
this.showScrollBtn = msg.scrollHeight - msg.scrollTop > msg.offsetHeight + 200;
|
||||||
},
|
},
|
||||||
getDate(time){
|
resize(height){
|
||||||
let months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
|
this.$refs.chatContainer.style.height = `calc(100% - ${height}px - 3.5rem)`;
|
||||||
let date = new Date(time);
|
|
||||||
return `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`;
|
|
||||||
},
|
},
|
||||||
scrollHandler(){
|
isGroup(){
|
||||||
if (this.$refs.msgContainer.scrollTop === 0){
|
return Object.keys(this.room.currentState.members).length > 2;
|
||||||
console.log("load messages")
|
},
|
||||||
}
|
async loadEvents(){
|
||||||
let msgContainer = document.getElementById("messagesContainer")
|
this.loadingStatus = 'loading ...';
|
||||||
this.showScrollBtn = msgContainer.scrollHeight - msgContainer.scrollTop > msgContainer.offsetHeight + 200;
|
await matrix.client.paginateEventTimeline(this.room.getLiveTimeline(), {backwards: true})
|
||||||
}
|
.then(state => this.loadingStatus = state?'load more':false);
|
||||||
|
},
|
||||||
|
getUser(userId){
|
||||||
|
return matrix.client.getUser(userId);
|
||||||
|
},
|
||||||
|
splitArray
|
||||||
},
|
},
|
||||||
data(){
|
data(){
|
||||||
return {
|
return {
|
||||||
chatroom: main.data().chatroom,
|
|
||||||
session: matrix.data().session,
|
|
||||||
showScrollBtn: false,
|
showScrollBtn: false,
|
||||||
scrollOnUpdate: true
|
scrollOnUpdate: true,
|
||||||
|
loadingStatus: 'load more'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
updated(){
|
updated(){
|
||||||
//this.scrollToBottom();
|
//this.scrollToBottom();
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
//this.scrollToBottom();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped lang="scss">
|
||||||
.messagesContainer{
|
.chatContainer{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 3rem;
|
top: 3.5rem;
|
||||||
height: calc(100% - 7rem);
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow-y: auto;
|
height: calc(100% - 7rem);
|
||||||
|
.messagesContainer{
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
#scrollDown{
|
||||||
|
position: absolute;
|
||||||
|
background-color: #fff;
|
||||||
|
bottom: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
display: block;
|
||||||
|
height: 2rem;
|
||||||
|
width: 2rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.messages{
|
.loadMore{
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: 1rem;
|
background-color: #2d2d2d;
|
||||||
margin-bottom: 1rem;
|
padding: 0.5rem;
|
||||||
}
|
border-radius: 0.5rem;
|
||||||
#scrollDown{
|
width: fit-content;
|
||||||
position: absolute;
|
left: 50%;
|
||||||
background-color: #fff;
|
transform: translate(-50%,0);
|
||||||
bottom: 5rem;
|
margin-top: 0.5rem;
|
||||||
right: 1rem;
|
cursor: pointer;
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.info{
|
|
||||||
text-align: center;
|
|
||||||
font-style: italic;
|
|
||||||
margin: 1rem;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue