Implement display of power level changes

Issue #53.

src/assets/translations/en.js

@@ -43,6 +43,8 @@ export default {
     scale_image: "Scale image",
     user_is_typing: "{user} is typing",
     users_are_typing: "{count} members are typing",
+    room_powerlevel_change: "{user} changed powerlevel of {changes}",
+    user_powerlevel_change_from_to: "{user} from {powerOld} to {powerNew}"
   },
   room: {
     members: "no members | 1 member | {count} members",
@@ -164,6 +166,13 @@ export default {
     release_to_cancel: "Release to cancel",
     failed_to_record: "Failed to record audio"
   },
+  power_level: {
+    admin: "administrator",
+    moderator: "moderator",
+    default: "default",
+    custom: "custom ({level})",
+    restricted: "restricted"
+  },
   fallbacks: {
     audio_file: "Audio file",
     video_file: "Video file",

src/components/Chat.vue

@@ -406,6 +406,7 @@ import RoomTopicChanged from "./messages/RoomTopicChanged.vue";
 import RoomAvatarChanged from "./messages/RoomAvatarChanged.vue";
 import RoomHistoryVisibility from "./messages/RoomHistoryVisibility.vue";
 import RoomJoinRules from "./messages/RoomJoinRules.vue";
+import RoomPowerLevelsChanged from "./messages/RoomPowerLevelsChanged.vue";
 import DebugEvent from "./messages/DebugEvent.vue";
 import util from "../plugins/utils";
 import MessageOperations from "./messages/MessageOperations.vue";
@@ -481,6 +482,7 @@ export default {
     RoomAvatarChanged,
     RoomHistoryVisibility,
     RoomJoinRules,
+    RoomPowerLevelsChanged,
     DebugEvent,
     MessageOperations,
     MessageOperationsPicker,
@@ -986,6 +988,9 @@ export default {
 
         case "m.room.join_rules":
           return RoomJoinRules;
+
+        case "m.room.power_levels":
+          return RoomPowerLevelsChanged;  
       }
       return this.debugging ? DebugEvent : null;
     },

src/components/messages/RoomPowerLevelsChanged.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="messageJoin">
+    <div>
+      {{ allChanges }}
+    </div>
+  </div>
+</template>
+
+<script>
+import messageMixin from "./messageMixin";
+
+export default {
+  mixins: [messageMixin],
+  computed: {
+    allChanges() {
+      const content = this.event.getContent();
+      const prevContent = this.event.getPrevContent();
+      if (!prevContent || !prevContent.users || !content || !content.users) {
+        return "";
+      }
+      const userDefault = this.event.getContent().users_default || 0;
+
+      // Construct set of userIds
+      const users = [];
+      Object.keys(content.users).forEach((userId) => {
+        if (users.indexOf(userId) === -1) users.push(userId);
+      });
+      Object.keys(prevContent.users).forEach((userId) => {
+        if (users.indexOf(userId) === -1) users.push(userId);
+      });
+
+      const diff = [];
+      users.forEach((userId) => {
+        // Previous power level
+        const from = prevContent.users[userId];
+        // Current power level
+        const to = content.users[userId];
+        if (to !== from) {
+          diff.push(
+            this.$t("message.user_powerlevel_change_from_to", {
+              user: userId,
+              powerOld: this.powerLevelString(from, userDefault),
+              powerNew: this.powerLevelString(to, userDefault),
+            })
+          );
+        }
+      });
+      if (!diff.length) {
+        return "";
+      }
+      return this.$t("message.room_powerlevel_change", {
+        user: this.changer,
+        changes: diff.join(", "),
+      });
+    },
+    changer() {
+      if (this.event.getSender() == this.$matrix.currentUserId) {
+        return this.$t("message.you");
+      }
+      return this.event.sender
+        ? this.event.sender.name
+        : this.event.getSender();
+    },
+  },
+  methods: {
+    powerLevelString(level, defaultUserLevel) {
+      const map = {
+        undefined: this.$t("power_level.default"),
+        0: this.$t("power_level.restricted"),
+        [defaultUserLevel]: this.$t("power_level.default"),
+        50: this.$t("power_level.moderator"),
+        100: this.$t("power_level.admin"),
+      };
+      if (map[level]) {
+        return map[level];
+      } else {
+        return this.$t("power_level.custom", { level: level });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>