feat(location detail): add country flag (#81)

* location detail: show flag next to location name

* Refactor getLocationTitle to utils

* Add name_original key. Cleanup

src/components/PriceCard.vue

@@ -143,7 +143,7 @@ export default {
     },
     getPriceLocationTitle() {
       if (this.price.location) {
-        return `${this.price.location.osm_name}, ${this.price.location.osm_address_city}`
+        return utils.getLocationTitle(this.price.location)
       }
       return this.price.location_id
     },

src/utils.js

@@ -47,14 +47,23 @@ function prettyRelativeDateTime(dateTimeString, short=false) {
 }
 
 function getCountryEmojiFromName(countryString) {
-  const country = CountriesWithEmoji.find(c => c.name === countryString)
+  const country = CountriesWithEmoji.find(c => c.name === countryString || (c.name_original && c.name_original.length && c.name_original.indexOf(countryString) > -1))
   return country ? country.emoji : null
 }
 
+function getLocationTitle(locationObject, withEmoji=false) {
+  let locationTitle = `${locationObject.osm_name}, ${locationObject.osm_address_city || ''}`
+  if (withEmoji) {
+    locationTitle += ` ${getCountryEmojiFromName(locationObject.osm_address_country) || ''}`
+  }
+  return locationTitle
+}
+
 
 export default {
   addObjectToArray,
   prettyDate,
   prettyRelativeDateTime,
   getCountryEmojiFromName,
+  getLocationTitle,
 }

src/views/LocationDetail.vue

@@ -37,6 +37,7 @@
 
 <script>
 import api from '../services/api'
+import utils from '../utils.js'
 import PriceCard from '../components/PriceCard.vue'
 
 export default {
@@ -77,7 +78,7 @@ export default {
     },
     getLocationTitle(location) {
       if (location) {
-        return `${location.osm_name}, ${location.osm_address_city}`
+        return utils.getLocationTitle(location, true)
       }
       return this.$route.params.id
     },