From 6cbdf30580a792d6be61616729beaa0ab9b2492c Mon Sep 17 00:00:00 2001
From: Linus Groh <mail@linusgroh.de>
Date: Sat, 25 Jan 2020 23:33:10 +0000
Subject: [PATCH] Use computed prop for device name in location popup

---
 src/components/LDeviceLocationPopup.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/LDeviceLocationPopup.vue b/src/components/LDeviceLocationPopup.vue
index 1d4aea6..3f125b0 100644
--- a/src/components/LDeviceLocationPopup.vue
+++ b/src/components/LDeviceLocationPopup.vue
@@ -1,7 +1,6 @@
 <template>
   <LPopup>
-    <div v-if="name" class="device">{{ name }}</div>
-    <div v-else class="device">{{ user }}/{{ device }}</div>
+    <div class="device">{{ deviceName }}</div>
     <div class="wrapper">
       <img v-if="face" :src="faceImageDataURI" alt="" />
       <ul class="info-list">
@@ -122,13 +121,21 @@ export default {
   },
   computed: {
     /**
-     * Return the face image as a data URI string which can be used for an image's src attribute
+     * Return the face image as a data URI string which can be used for an image's src attribute.
      *
      * @return {String} base64-encoded face image data URI
      */
     faceImageDataURI() {
       return `data:image/png;base64,${this.face}`;
     },
+    /**
+     * Return the device name for displaying with <user identifier>/<device identifier> as fallback.
+     *
+     * @return {String} device name for displaying
+     */
+    deviceName() {
+      return this.name ? this.name : `${this.user}/${this.device}`;
+    },
   },
 };
 </script>