dynamic room view

src/components/newMessage.vue

@@ -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" />

src/components/topBanner.vue

@@ -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
     }
   }
 }

src/matrix.js

@@ -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);
+});

src/views/chat.vue

@@ -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
     }
   }
 }

src/views/rooms.vue

@@ -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>