Basic device list

Work on issue #3.

src/components/DeviceList.vue

@@ -0,0 +1,98 @@
+<template>
+  <v-list dense @click.native.stop="nullEvent">
+    <v-subheader>DEVICES</v-subheader>
+    <v-list-item-group color="primary">
+      <v-list-item
+        v-for="device in devices"
+        :key="device.deviceId"
+        :value="device.deviceId"
+      >
+        <template v-slot:default="{ active }">
+          <v-list-item-content>
+            <v-list-item-title>{{ displayName(device) }}</v-list-item-title>
+            <v-list-item-subtitle>{{
+              verificationStatus(device)
+            }}</v-list-item-subtitle>
+          </v-list-item-content>
+          <v-list-item-action v-if="active">
+            <v-btn icon>
+              <v-icon
+                :color="
+                  device.isBlocked()
+                    ? 'red'
+                    : device.isVerified()
+                    ? 'green'
+                    : 'grey lighten-1'
+                "
+                >verified_user</v-icon
+              >
+            </v-btn>
+          </v-list-item-action>
+        </template>
+      </v-list-item>
+    </v-list-item-group>
+  </v-list>
+</template>
+
+<script>
+export default {
+  name: "DeviceList",
+  props: {
+    member: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      devices: [],
+    };
+  },
+  watch: {
+    member: {
+      immediate: true,
+      handler(member, ignoredOldVal) {
+        this.updateDevices();
+        if (member) {
+          this.$matrix.matrixClient.downloadKeys([member.userId]).then(() => {
+            this.updateDevices();
+          });
+        }
+      },
+    },
+  },
+  methods: {
+    updateDevices() {
+      if (!this.member) {
+        this.devices = [];
+        return;
+      }
+      this.devices = this.$matrix.matrixClient.getStoredDevicesForUser(
+        this.member.userId
+      );
+    },
+
+    displayName(device) {
+      var name = device.deviceId;
+      if (device.getDisplayName()) {
+        name += " - " + device.getDisplayName();
+      }
+      return name;
+    },
+
+    verificationStatus(device) {
+      if (device.isBlocked()) {
+        return "Blocked";
+      } else if (device.isVerified()) {
+        return "Verified";
+      } else {
+        return "Not verified";
+      }
+    },
+
+    nullEvent() {},
+  },
+};
+</script>

src/components/RoomInfo.vue

@@ -59,6 +59,7 @@
           v-for="(member, index) in joinedMembers"
           :key="member.userId"
           v-show="showAllMembers || index < 5"
+          @click="toggleMemberExpanded(member)"
         >
           <v-avatar class="avatar" size="32" color="grey">
             <img v-if="memberAvatar(member)" :src="memberAvatar(member)" />
@@ -68,6 +69,7 @@
           </v-avatar>
           {{ member.user ? member.user.displayName : member.name
           }}{{ member.userId == $matrix.currentUserId ? " (you)" : "" }}
+          <DeviceList v-if="expandedMembers.includes(member)" :member="member" />
         </div>
         <div class="show-all" @click="showAllMembers = !showAllMembers">
           {{ showAllMembers ? "Hide" : "Show all" }}
@@ -118,12 +120,14 @@
 
 <script>
 import LeaveRoomDialog from "../components/LeaveRoomDialog";
+import DeviceList from "../components/DeviceList";
 import QRCode from "qrcode";
 
 export default {
   name: "RoomInfo",
   components: {
     LeaveRoomDialog,
+    DeviceList
   },
   data() {
     return {
@@ -132,6 +136,7 @@ export default {
       displayName: "",
       showAllMembers: false,
       showLeaveConfirmation: false,
+      expandedMembers: [],
       buildVersion: "",
     };
   },
@@ -309,6 +314,15 @@ export default {
         }, function (e) {
           console.log(e)
         });    
+      },
+
+      toggleMemberExpanded(member) {
+        const index = this.expandedMembers.indexOf(member);
+        if (index > -1) {
+          this.expandedMembers.splice(index, 1);
+        } else {
+          this.expandedMembers.push(member);
+        }
       }
   },
 };