From 68a373cbe5ff9523d84a306d6c30a122103a6d4d Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Sun, 22 Nov 2020 19:55:30 +0100
Subject: [PATCH] show time and date of messages

---
 src/components/message.vue        | 12 ++++++++++--
 src/components/messageReceive.vue | 12 ++++++++++--
 src/components/newMessage.vue     |  2 ++
 src/matrix.js                     |  5 ++---
 src/views/chat.vue                | 32 ++++++++++++++++++++++++-------
 src/views/login.vue               |  2 ++
 src/views/rooms.vue               |  2 +-
 7 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/src/components/message.vue b/src/components/message.vue
index 7df2218..bac9d41 100644
--- a/src/components/message.vue
+++ b/src/components/message.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="messageContainer">
-    <div class="message">
+    <div class="message" :title="time">
       {{msg}}
+      <div class="time">{{time}}</div>
     </div>
   </div>
 </template>
@@ -10,7 +11,8 @@
 export default {
   name: "message",
   props: {
-    msg: String
+    msg: String,
+    time: String,
   }
 }
 </script>
@@ -36,4 +38,10 @@ export default {
     word-break: break-word;
     white-space: pre-line;
   }
+  .time{
+    position: relative;
+    bottom: -0.2rem;
+    font-size: 0.7rem;
+    text-align: right;
+  }
 </style>
\ No newline at end of file
diff --git a/src/components/messageReceive.vue b/src/components/messageReceive.vue
index 8ab5d12..8a3f63c 100644
--- a/src/components/messageReceive.vue
+++ b/src/components/messageReceive.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="messageContainer">
-    <div class="message">
+    <div class="message" :title="time">
       {{msg}}
+      <div class="time">{{time}}</div>
     </div>
   </div>
 </template>
@@ -10,7 +11,8 @@
 export default {
   name: "messageReceive",
   props: {
-    msg: String
+    msg: String,
+    time: String
   }
 }
 </script>
@@ -35,4 +37,10 @@ export default {
     word-break: break-word;
     white-space: pre-line;
   }
+  .time{
+    position: relative;
+    bottom: -0.2rem;
+    font-size: 0.7rem;
+    text-align: right;
+  }
 </style>
\ No newline at end of file
diff --git a/src/components/newMessage.vue b/src/components/newMessage.vue
index f83067e..65eca55 100644
--- a/src/components/newMessage.vue
+++ b/src/components/newMessage.vue
@@ -79,6 +79,8 @@ export default {
   height: 1.25rem;
   background-color: #fff0;
   border: 0 solid #fff0;
+  appearance: none;
+  outline: none;
   color: #fff;
   font-size: 1rem;
   resize: none;
diff --git a/src/matrix.js b/src/matrix.js
index 363ce78..0a9490f 100644
--- a/src/matrix.js
+++ b/src/matrix.js
@@ -105,9 +105,8 @@ export default {
 
 function getCookie(key) {
    let cookie = document.cookie.replace(/ /g, '').split(';')
-        .find(cookie => cookie.split('=')[0] === key);
-   if (cookie) return cookie.split('=')[1];
-   return false;
+       .find(cookie => cookie.split('=')[0] === key);
+   return cookie?cookie.split('=')[1]:false;
 }
 
 matrix_cli.on("event", event => {
diff --git a/src/views/chat.vue b/src/views/chat.vue
index 04d9c76..945112c 100644
--- a/src/views/chat.vue
+++ b/src/views/chat.vue
@@ -1,15 +1,18 @@
 <template>
   <div>
-    <div ref="msgContainer" id="messagesContainer" class="messagesContainer">
+    <div @scroll="loadMessages()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
       <div id="messages" class="messages">
-        <p v-if="session.currentRoom.messages.length === 0" class="emptyRoom">this room is empty</p>
+        <p v-if="session.currentRoom.messages.length === 0" class="info">this room is empty</p>
         <div v-for="(message, i) in session.currentRoom.messages" :key="message.origin_server_ts">
-          <div v-if="message.sender !== session.user && function(){
-               return i===0 || session.currentRoom.messages[i-1].sender!==message.sender;}()"
+          <div v-if="i===0 || getDate(session.currentRoom.messages[i-1].origin_server_ts)!==getDate(message.origin_server_ts)"
+               style="margin-left: 2rem; margin-top: 1rem" class="info">{{getDate(message.origin_server_ts)}}
+          </div>
+          <div v-if="(message.sender !== session.user) && (i===0 || session.currentRoom.messages[i-1].sender!==message.sender)"
                style="margin-left: 2rem; margin-top: 1rem">{{message.sender}}
           </div>
-          <messageReceive v-if="message.sender !== session.user" :msg=message.content.body />
-          <message v-if="message.sender === session.user" :msg=message.content.body />
+          <messageReceive v-if="message.sender !== session.user" :msg=message.content.body
+                          :time=getTime(message.origin_server_ts) />
+          <message v-if="message.sender === session.user" :msg=message.content.body :time=getTime(message.origin_server_ts) />
         </div>
       </div>
     </div>
@@ -42,6 +45,20 @@ export default {
       let msgContainer = document.getElementById("messagesContainer")
       msgContainer.scrollTo(0, msgContainer.scrollHeight)
       document.getElementById("scrollDown").style.display = "none"
+    },
+    getTime(time){
+      let date = new Date(time);
+      return `${date.getHours()}:${(date.getMinutes()<10)?"0"+date.getMinutes():date.getMinutes()}`;
+    },
+    getDate(time){
+      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()}`;
+    },
+    loadMessages(){
+      if (this.$refs.msgContainer.scrollTop === 0){
+        console.log("load messages")
+      }
     }
   },
   data(){
@@ -75,8 +92,9 @@ export default {
   right: 1rem;
   display: none;
 }
-.emptyRoom{
+.info{
   text-align: center;
   font-style: italic;
+  margin: 1rem;
 }
 </style>
diff --git a/src/views/login.vue b/src/views/login.vue
index 4c22787..0d5d17c 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -51,6 +51,8 @@ input{
   text-align: center;
   font-size: 1.1rem;
   margin-top: 1rem;
+  appearance: none;
+  outline: none;
 }
 input:focus{
   color: #000;
diff --git a/src/views/rooms.vue b/src/views/rooms.vue
index 771828c..cf9c88e 100644
--- a/src/views/rooms.vue
+++ b/src/views/rooms.vue
@@ -38,7 +38,7 @@ export default {
       this.$router.push(`/rooms/${room.roomId}`)
       this.$forceUpdate()
       let msgContainer = document.getElementById("messagesContainer")
-      setTimeout(() => {msgContainer.scrollTo(0, msgContainer.scrollHeight)}, 20)
+      setTimeout(() => {msgContainer.scrollTo(0, msgContainer.scrollHeight)}, 50)
     }
   },
   data(){