From cfa3052a0a5111cd8ea518a9f2ecfcf553bf38e8 Mon Sep 17 00:00:00 2001
From: Linus Groh <mail@linusgroh.de>
Date: Sun, 26 Jan 2020 00:40:30 +0000
Subject: [PATCH] Show name and face on location history popups

---
 src/views/Map.vue | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/views/Map.vue b/src/views/Map.vue
index 97680be..baa4944 100644
--- a/src/views/Map.vue
+++ b/src/views/Map.vue
@@ -66,7 +66,11 @@
       <template v-for="(userDevices, user) in locationHistory">
         <template v-for="(deviceLocations, device) in userDevices">
           <LCircleMarker
-            v-for="(l, n) in deviceLocations"
+            v-for="(l, n) in deviceLocationsWithNameAndFace(
+              user,
+              device,
+              deviceLocations
+            )"
             :key="`${user}-${device}-${n}`"
             :lat-lng="[l.lat, l.lon]"
             v-bind="circleMarker"
@@ -74,6 +78,8 @@
             <LDeviceLocationPopup
               :user="user"
               :device="device"
+              :name="l.name"
+              :face="l.face"
               :timestamp="l.tst"
               :lat="l.lat"
               :lon="l.lon"
@@ -202,6 +208,29 @@ export default {
         });
       }
     },
+    /**
+     * Find a the last location object for a user/device combination from the
+     * local cache and backfill name and face attributes to each item from the
+     * passed array of location objects.
+     *
+     * @param {User} user Username
+     * @param {Device} device Device name
+     * @param {LocationHistory} deviceLocations Device name
+     * @returns {LocationHistory} Updated location history
+     */
+    deviceLocationsWithNameAndFace(user, device, deviceLocations) {
+      const lastLocation = this.lastLocations.find(
+        l => l.username === user && l.device === device
+      );
+      if (!lastLocation) {
+        return deviceLocations;
+      }
+      return deviceLocations.map(l => ({
+        ...l,
+        name: lastLocation.name,
+        face: lastLocation.face,
+      }));
+    },
   },
 };
 </script>