load history events

src/components/chatInformation.vue

@@ -6,11 +6,11 @@
         <div class="picBoxBig"><div class="placeholderBig">{{room.name.substr(0,2)}}</div></div>
         <div class="roomInformation">
           <div class="roomName">{{room.name}}</div>
-          <div class="users">{{room.members.length}} members</div>
+          <div class="users">{{members.length}} members</div>
         </div>
         </div>
-        <h2 v-if="room.members.length !== 0">members:</h2>
-        <div v-for="member in room.members.slice(0,20)" :key="member.sender" class="contentBox" :title="member.sender">
+        <h2 v-if="members.length !== 0">members:</h2>
+        <div v-for="member in members.slice(0,20)" :key="member.sender" class="contentBox" :title="member.sender">
           <userThumbnail :mxcURL="member.content.avatar_url" :userId="member.sender" :username="member.content.displayname"
                          width="64" height="64" resizeMethod="scale" class="userThumbnail" />
           <div class="information">
@@ -18,7 +18,7 @@
             <div class="status"></div>
           </div>
         </div>
-        <p v-if="room.members.length>20">and {{room.members.length-20}} other members</p>
+        <p v-if="members.length>20">and {{members.length-20}} other members</p>
       </div>
     </div>
     <icon class="closeBtn" onclick="this.parentNode.style.display = 'none'" ic="./sym/ic_close_white_24px.svg" />
@@ -36,6 +36,11 @@ export default {
   },
   props:{
     room: {}
+  },
+  data(){
+    return{
+      members: Object.keys(this.room.currentState.members)
+    }
   }
 }
 
@@ -53,7 +58,6 @@ export default {
   box-shadow: 6px 6px 20px #111;
   border-radius: 1rem;
   text-align: center;
-  display: none;
 }
 @media (max-width: 30rem) {
   #chatInformation{

src/components/topBanner.vue

@@ -2,7 +2,7 @@
   <div class="topBanner">
     <div>
       <icon @click.native="closeChat()" class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" />
-      <div @click="showChatInfo()" class="smallIcon" id="picTop">{{room.name.substr(0,2)}}</div>
+      <div @click="openChatInfo()" class="smallIcon" id="picTop">{{room.name.substr(0,2)}}</div>
       <div id="container">
         <div id="chatName">{{room.name}}</div>
         <div id="users">{{Object.keys(room.currentState.members).length}} members</div>
@@ -22,12 +22,8 @@ export default {
   },
   props:{
     room: [Object, undefined],
-    closeChat: Function
-  },
-  methods:{
-    showChatInfo(){
-      document.getElementById("chatInformation").style.display = 'block';
-    }
+    closeChat: Function,
+    openChatInfo: Function
   },
   data(){
     return {

src/components/userThumbnail.vue

@@ -7,7 +7,6 @@
 
 <script>
 import parseMXC from '@modular-matrix/parse-mxc';
-import matrix from '@/matrix.js';
 
 export default {
   name: "userThumbnail.vue",
@@ -27,7 +26,6 @@ export default {
   },
   data(){
     return {
-      homeserver: matrix.data().session.baseUrl
     }
   }
 }

src/views/chat.vue

@@ -2,6 +2,7 @@
   <div>
     <div ref="chatContainer" class="chatContainer">
       <div @scroll="scrollHandler()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
+        <div v-if="loadingStatus" @click="loadEvents()" class="loadMore">{{loadingStatus}}</div>
         <div id="messages" class="messages" ref="messages">
           <p v-if="room.timeline.length === 0" class="chatInfo">this room is empty</p>
           <div class="timeGroup" v-for="timeGroup in splitArray(room.timeline,
@@ -30,7 +31,7 @@
       <icon v-if="showScrollBtn" @click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
     </div>
     <newMessage :onResize="height=>resize(height)" :roomId="room.roomId"/>
-    <topBanner :room="room" :close-chat="()=>closeChat()" />
+    <topBanner :room="room" :close-chat="()=>closeChat()" :open-chat-info="()=>openChatInfo()"/>
   </div>
 </template>
 
@@ -38,8 +39,9 @@
 import message from '@/components/message.vue';
 import newMessage from '@/components/newMessage.vue';
 import topBanner from '@/components/topBanner.vue';
-import Icon from "@/components/icon";
+import Icon from '@/components/icon';
 import userThumbnail from '@/components/userThumbnail';
+import {matrix} from '@/main';
 
 export default {
   name: 'chat',
@@ -53,7 +55,8 @@ export default {
   props: {
     room: [Object, undefined],
     user: String,
-    closeChat: Function
+    closeChat: Function,
+    openChatInfo: Function
   },
   methods:{
     scrollToBottom(){
@@ -61,17 +64,15 @@ export default {
     },
     getTime(time){
       let date = new Date(time);
-      return `${date.getHours()}:${(date.getMinutes()<10)?"0":""}${date.getMinutes()}`;
+      return `${date.getHours()}:${(date.getMinutes()<10)?'0':''}${date.getMinutes()}`;
     },
     getDate(time){
-      let months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
+      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()}`;
     },
     scrollHandler(){
-      if (this.$refs.msgContainer.scrollTop === 0){
-        console.log("load messages")
-      }
+      if (this.$refs.msgContainer.scrollTop === 0) this.loadEvents();
       let msg = this.$refs.msgContainer;
       this.showScrollBtn = msg.scrollHeight - msg.scrollTop > msg.offsetHeight + 200;
     },
@@ -90,6 +91,11 @@ export default {
     },
     isGroup(){
       return Object.keys(this.room.currentState.members).length > 2;
+    },
+    async loadEvents(){
+      this.loadingStatus = 'loading ...';
+      await matrix.client.paginateEventTimeline(this.room.getLiveTimeline(), {backwards: true})
+        .then(state => this.loadingStatus = state?'load more':false);
     }
   },
   data(){
@@ -101,7 +107,8 @@ export default {
         join: 'joined the room',
         leave: 'left the room',
         ban: 'was banned'
-      }
+      },
+      loadingStatus: 'load more'
     }
   },
   updated(){
@@ -191,4 +198,15 @@ export default {
 .username{
   margin-left: 1rem;
 }
+.loadMore{
+  position: relative;
+  background-color: #2d2d2d;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  width: fit-content;
+  left: 50%;
+  transform: translate(-50%,0);
+  margin-top: 0.5rem;
+  cursor: pointer;
+}
 </style>

src/views/rooms.vue

@@ -10,7 +10,9 @@
         <div class="roomListName">{{room.name}}</div>
       </div>
     </div>
-    <chat class="chat" v-if="currentRoom" :room="currentRoom" :user="matrix.user" :close-chat="()=>currentRoom=undefined"/>
+    <chat class="chat" v-if="currentRoom" :room="currentRoom" :user="matrix.user"
+          :close-chat="()=>currentRoom=undefined"
+          :open-chat-info="()=>showChatInfo=true"/>
     <div class="noRoomSelected" v-else>Please select a room to be displayed.</div>
     <div class="roomListSmall">
       <h1>[c]</h1>
@@ -19,20 +21,20 @@
         <div class="roomListName">{{room.name}}</div>
       </div>
     </div>
-    <!--<chatInformation v-if="currentRoom" :room="currentRoom"/>-->
+    <chatInformation v-if="currentRoom && showChatInfo" :room="currentRoom"/>
   </div>
 </template>
 
 <script>
 import chat from '@/views/chat.vue';
-//import chatInformation from "@/components/chatInformation";
+import chatInformation from "@/components/chatInformation";
 import {matrix} from "@/main";
 
 export default {
   name: "rooms",
   components:{
     chat,
-    //chatInformation
+    chatInformation
   },
   methods:{
     openChat(room){
@@ -45,7 +47,8 @@ export default {
   data(){
     return {
       matrix,
-      currentRoom: undefined
+      currentRoom: undefined,
+      showChatInfo: false
     }
   },
   mounted() {