Add notification count

Add count to tab title and room list. Issue #49.

src/App.vue

@@ -25,20 +25,26 @@ export default {
     currentUser() {
       return this.$store.state.auth.user;
     },
-  },
-  watch: {
-    '$route' (to, ignoredFrom) {
+    title() {
       var title = "Keanu Weblite";
-      if (to.meta.title) {
-        title += "  - " + to.meta.title;
+      if (this.$matrix.notificationCount > 0) {
+        title += " [" + this.$matrix.notificationCount + "]";
       }
-      if (to.meta.includeRoom) {
+      if (this.$route.meta.title) {
+        title += "  - " + this.$route.meta.title;
+      }
+      if (this.$route.meta.includeRoom) {
         if (this.$matrix.currentRoom) {
           title += " - " + (this.$matrix.currentRoom.summary.info.title || this.$matrix.currentRoom.roomId);
         } else if (this.$matrix.currentRoomId) {
           title += " - " + (this.$matrix.currentRoomId);
         }
       }
+      return title;
+    }
+  },
+  watch: {
+    title(title) {
       document.title = title;
     },
     currentUser: {

src/assets/css/chat.scss

@@ -38,6 +38,8 @@ $admin-fg: white;
         background-color: white;
         border: 1px solid #e0e0e0;
         position: absolute;
+        max-height: 60%;
+        overflow-y: auto;
         z-index: 2;
         .v-subheader {
             display: none;
@@ -45,6 +47,22 @@ $admin-fg: white;
     }
 }
 
+.room-list-notification-count {
+    position: absolute;
+    top: 10px;
+    left: 40px;
+    color: white;
+    background-color: black;
+    font-size: 10px;
+    min-width: 20px;
+    height: 20px;
+    border-radius: 10px;
+    border: 2px solid white;
+    text-align: center;
+    padding-left: 4px;
+    padding-right: 4px;
+}
+
 .chat-root {
     position: absolute;
     left: 0px;

src/components/RoomList.vue

@@ -3,9 +3,10 @@
     <v-subheader>ROOMS</v-subheader>
     <v-list-item-group v-model="currentRoomId" color="primary">
       <v-list-item v-for="room in $matrix.rooms" :key="room.roomId" :value="room.roomId">
-        <v-list-item-avatar color="#e0e0e0">
+        <v-list-item-avatar size="40" color="#e0e0e0">
           <v-img :src="room.avatar" />
         </v-list-item-avatar>
+        <div class="room-list-notification-count">{{ notificationCount(room) }}</div>
         <v-list-item-content>
           <v-list-item-title>{{ room.summary.info.title }}</v-list-item-title>
           <v-list-item-subtitle>{{ room.topic }}</v-list-item-subtitle>
@@ -22,9 +23,15 @@ export default {
   name: "RoomList",
 
   data: () => ({
-    currentRoomId: -1,
+    currentRoomId: null,
   }),
 
+  methods: {
+    notificationCount(room) {
+      return room.getUnreadNotificationCount('total') || 0;
+    }
+  },
+
   watch: {
     currentRoomId() {
       this.$emit("close");
@@ -33,3 +40,7 @@ export default {
   },
 };
 </script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>

src/services/matrix.service.js

@@ -28,6 +28,7 @@ export default {
                     userDisplayName: null,
                     userAvatar: null,
                     currentRoom: null,
+                    notificationCount: 0
                 }
             },
             mounted() {
@@ -59,7 +60,7 @@ export default {
                     handler(roomId) {
                         this.currentRoom = this.getRoom(roomId);
                     }
-                }
+                },
             },
 
             methods: {
@@ -274,11 +275,13 @@ export default {
                         }
                             break;
                     }
+                    this.updateNotificationCount();
                 },
 
                 onRoom(ignoredroom) {
                     console.log("Got room: " + ignoredroom);
                     this.reloadRooms();
+                    this.updateNotificationCount();
                 },
 
                 onSessionLoggedOut() {
@@ -411,7 +414,16 @@ export default {
                         .catch(err => {
                             return Promise.reject("Failed to find room: " + err);
                         });
+                },
+
+                updateNotificationCount() {
+                    var count = 0;
+                    this.rooms.forEach(room => {
+                        count += room.getUnreadNotificationCount('total') || 0;
+                    });
+                    this.notificationCount = count;
                 }
+
             }
         })