room and chat view

public/manifest.json

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

src/App.vue

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

src/components/topBanner.vue

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

src/main.js

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

src/matrix.js

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

src/views/rooms.vue

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