room and chat view

implement_matrix
adb 4 years ago
parent 9747505da1
commit 6018fd554d

@ -1,6 +1,6 @@
{
"name": "open chat",
"short_name": "open chat",
"name": "matrix chat",
"short_name": "[chat]",
"start_url": "/",
"display": "standalone",
"background_color": "#14181b",

@ -33,17 +33,17 @@ body{
.content{
position: absolute;
top: 0;
left: calc(50% - 25rem);
left: calc(50% - 35rem);
padding: 0;
min-height: calc(100%);
width: 50rem;
width: 70rem;
min-width: 18rem;
background-color: #313131;
box-shadow: 3px 3px 10px #111;
}
@media (max-width: 55rem){
@media (max-width: 75rem){
.content{
width: calc(100%);
width: 100%;
left: 0;
}
}

@ -2,12 +2,11 @@
<div class="topBanner">
<div>
<icon @click.native="$router.back()" class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" />
<icon class="smallIcon" id="picTop" ic="./sym/supervisor_account-24px.svg" />
<icon v-on:click.native="showChatInfo()" class="smallIcon" id="picTop" ic="./sym/supervisor_account-24px.svg" />
<div id="container">
<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>
@ -40,7 +39,6 @@ export default {
width: 100%;
height: 3rem;
background-color: #1d1d1d;
box-shadow: 0 0px 5px #111;
}
.smallIcon{
top: 0.25rem;
@ -50,22 +48,19 @@ export default {
}
#icon-arrow{
position: absolute;
left: 1rem;
left: 0.5rem;
background-color: unset;
box-shadow: none;
}
#picTop{
position: absolute;
left: 4rem;
left: 3.5rem;
background-color: #42a7b9;
}
#icon-menu{
position: absolute;
right: 1rem;
background-color: #2d2d2d;
}
#container{
position: absolute;
top: 0.55rem;
left: 7.5rem;
left: 7rem;
}
#chatName{
font-size: 1rem;

@ -25,6 +25,11 @@ const router = new VueRouter({
name: 'chat',
component: chat
},
{
path: '/rooms/*',
name: 'room',
component: rooms
},
{
path: '/rooms',
name: 'rooms',

@ -1,11 +1,14 @@
import matrix from 'matrix-js-sdk';
import Vue from 'vue'
import main from '@/main.js';
const matrix_cli = matrix.createClient("https://adb.sh");
let session = {
user: "",
password: "",
access_token: ""
access_token: "",
rooms: [],
current_room: "open chat"
};
let rooms = [];
@ -29,22 +32,39 @@ export default {
main.methods.error(response.error)
console.log(`login error => ${response.error}`)
}
main.methods.router({path: "rooms"})
main.methods.router({path: "rooms/"})
matrix_cli.startClient();
matrix_cli.once('sync', function (state){
console.log(state)
})
matrix_cli.on("event", function(event){
console.log(event.getType());
console.log(event);
})
setTimeout(()=>{this.getRooms()},5000)
});
/*let i=0;
let checkRooms = setInterval(()=>{
rooms = matrix_cli.getRooms()
console.log("asdasd"+rooms.length)
if (rooms.length !== 0 || i>10) clearInterval(checkRooms)
i++;
},500)*/
},
getRooms(){
rooms = matrix_cli.getRooms()
rooms.push(matrix_cli.getRooms())
return rooms
}
}
}
new Vue({
el: '#roomList',
data() {
return {
rooms: [],
}
}
})
matrix_cli.on("event", function(event){
console.log(event.getType());
console.log(event);
session.rooms = matrix_cli.getRooms()
console.log(session.rooms)
})

@ -1,32 +1,43 @@
<template>
<div>
<div class="roomList" v-for="room in rooms" :key="room.name">
<router-link :to="'/chat/'+room.roomId">
<div class="roomListName">{{room.name}}</div>
</router-link>
<div id="roomList" class="roomList">
<h1>[chat]</h1>
<h2>rooms</h2>
<div class="roomListElement" v-for="(room, index) in rooms" :key="index">
<router-link @click="getRooms()" :to="`/rooms/${room.roomId}`">
<div class="roomListName">{{room.name}}</div>
</router-link>
</div>
<textbtn @click.native="getRooms()" text="update" />
</div>
<textbtn @click.native="getRooms()" text="update" />
<chat class="chat" v-if="this.$router.currentRoute.fullPath.split('/',3)[2]" />
<div class="noRoomSelected" v-else>Please select a room to be displayed.</div>
</div>
</template>
<script>
import matrix from '@/matrix.js';
import textbtn from "@/components/textbtn";
import chat from '@/views/chat.vue'
export default {
name: "rooms",
props: {
rooms: String
},
components:{
textbtn
textbtn,
chat
},
methods:{
getRooms(){
this.rooms = matrix.methods.getRooms()
console.log(matrix.methods.getRooms())
//matrix.methods.getRooms()
//console.log(matrix.methods.getRooms())
}
},
data(){
return {
rooms: matrix.rooms
session: matrix.data().session
}
}
}
@ -34,6 +45,24 @@ export default {
<style scoped>
.roomList{
position: absolute;
left: 0;
top: 0;
width: 20rem;
height: 100%;
background-color: #222;
text-align: center;
overflow-y: auto;
}
.chat{
position: absolute;
right: 0;
top: 0;
width: calc(100% - 20rem);
height: 100%;
background-color: #313131;
}
.roomListElement{
position: relative;
height: 3rem;
margin-top: 1rem;
@ -43,4 +72,32 @@ export default {
position: absolute;
left: 5rem;
}
.noRoomSelected{
position: absolute;
width: calc(100% - 20rem);
top: 5rem;
left: 20rem;
text-align: center;
}
/*@media (max-width: 45rem) {
.roomList{
width: 4rem;
}
.chat{
width: calc(100% - 4rem);
}
}*/
@media (max-width: 30rem) {
.roomList{
width: 100%;
}
.chat{
width: 100%;
}
.noRoomSelected{
display: none;
}
}
</style>
Loading…
Cancel
Save