dynamic room view

implement_matrix
adb 4 years ago
parent 6018fd554d
commit ee3ff30534

@ -2,7 +2,7 @@
<div class="newMessageBanner">
<form v-on:submit.prevent="sendMessage()">
<label for="newMessageInput"></label>
<textarea v-on:keyup.shift.enter="sendMessage()" v-on:input="resizeMessageBanner()" ref="newMessageInput" id="newMessageInput" class="newMessageInput"
<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"
ic="./sym/ic_send_white_24px.svg" />

@ -1,10 +1,10 @@
<template>
<div class="topBanner">
<div>
<icon @click.native="$router.back()" class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" />
<icon @click.native="session.currentRoom = undefined" class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-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="chatName">{{session.currentRoom.name}}</div>
<div id="users">{{chatroom.user.length}} members</div>
</div>
</div>
@ -13,11 +13,12 @@
<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(){
@ -26,7 +27,8 @@ export default {
},
data(){
return {
chatroom: main.data().chatroom
chatroom: main.data().chatroom,
session: matrix.data().session
}
}
}

@ -1,5 +1,5 @@
import matrix from 'matrix-js-sdk';
import Vue from 'vue'
//import Vue from 'vue'
import main from '@/main.js';
const matrix_cli = matrix.createClient("https://adb.sh");
@ -8,15 +8,14 @@ let session = {
password: "",
access_token: "",
rooms: [],
current_room: "open chat"
currentRoom: undefined
};
let rooms = [];
export default {
data(){
return {
session: session,
rooms: rooms
session: session
}
},
methods: {
@ -27,7 +26,7 @@ export default {
initial_device_display_name: "matrix chat",
}).then((response) => {
console.log(`access token => ${response.access_token}`);
session = {access_token: response.access_token}
session.access_token = response.access_token
if (response.error){
main.methods.error(response.error)
console.log(`login error => ${response.error}`)
@ -53,18 +52,29 @@ export default {
}
}
new Vue({
/*new Vue({
el: '#roomList',
refs:{
rooms: [{name: "lol"},{name: "lol123"}]
},
data() {
return {
rooms: [],
rooms: [{name: "lol"},{name: "lol123"}],
}
}
})
})*/
matrix_cli.on("event", function(event){
matrix_cli.on("event", event => {
console.log(event.getType());
console.log(event);
session.rooms = matrix_cli.getRooms()
console.log(session.rooms)
session.rooms = []
matrix_cli.getRooms().forEach(room => {
session.rooms.push({name: room.name, roomId: room.roomId})
})
console.log(matrix_cli.getRooms())
})
matrix_cli.on("Room.timeline", event => {
if (event.getType() !== "m.room.message") return;
console.log(event.event.content.body);
});

@ -28,6 +28,7 @@ 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',
@ -48,7 +49,8 @@ export default {
},
data(){
return {
chatroom: main.data().chatroom
chatroom: main.data().chatroom,
sesssion: matrix.data().session
}
}
}

@ -2,42 +2,43 @@
<div>
<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}`">
<h2>{{session.rooms.length}} rooms:</h2>
<div v-for="(room, index) in session.rooms" :key="index" @click="openChat(room)" class="roomListElement">
<div class="roomImgPlaceholder">{{room.name.substr(0,2)}}</div>
<div class="roomListName">{{room.name}}</div>
</router-link>
</div>
<textbtn @click.native="getRooms()" text="update" />
</div>
<chat class="chat" v-if="this.$router.currentRoute.fullPath.split('/',3)[2]" />
<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>
</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,
chat
},
methods:{
getRooms(){
//matrix.methods.getRooms()
//console.log(matrix.methods.getRooms())
openChat(room){
this.session.currentRoom = room;
this.$router.push(`/rooms/${room.roomId}`)
this.$forceUpdate()
}
},
data(){
return {
session: matrix.data().session
session: matrix.data().session,
}
}
}
@ -48,7 +49,7 @@ export default {
position: absolute;
left: 0;
top: 0;
width: 20rem;
width: 18rem;
height: 100%;
background-color: #222;
text-align: center;
@ -58,19 +59,34 @@ export default {
position: absolute;
right: 0;
top: 0;
width: calc(100% - 20rem);
width: calc(100% - 18rem);
height: 100%;
background-color: #313131;
}
.roomListElement{
position: relative;
height: 3rem;
margin-top: 1rem;
margin-top: 0.5rem;
font-size: 1.2rem;
cursor: pointer;
background-color: #222;
}
.roomListName{
position: absolute;
left: 5rem;
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;
}
.noRoomSelected{
position: absolute;
@ -79,15 +95,37 @@ export default {
left: 20rem;
text-align: center;
}
.roomImgPlaceholder{
position: absolute;
left: 1rem;
top: 0;
height: 2rem;
width: 3rem;
padding-top: 1rem;
background-color: #42a7b9;
border-radius: 1.5rem;
text-align: center;
vertical-align: middle;
}
/*@media (max-width: 45rem) {
@media (max-width: 48rem) {
.roomList{
width: 4rem;
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{
@ -99,5 +137,11 @@ export default {
.noRoomSelected{
display: none;
}
.roomListSmall{
display: none;
}
.roomList{
display: block;
}
}
</style>
Loading…
Cancel
Save