feat(settings): user setting to display location OSM ID

src/components/LocationCard.vue

@@ -10,6 +10,9 @@
       <v-chip label size="small" density="comfortable" class="mr-1" title="OpenStreetMap tag">
         {{ getLocationCategory(location) }}
       </v-chip>
+      <v-chip v-if="showLocationOSMID" label size="small" density="comfortable" class="mr-1" title="OpenStreetMap ID">
+        {{ getLocationOSMID(location) }}
+      </v-chip>
     </v-card-text>
   </v-card>
 </template>
@@ -27,11 +30,20 @@ export default {
       type: [Object, null],
       required: true
     },
+    hideLocationOSMID: {
+      type: Boolean,
+      default: false
+    },
     readonly: {
       type: Boolean,
       default: false
     }
   },
+  computed: {
+    showLocationOSMID() {
+      return !this.hideLocationOSMID && this.appStore.user.username && this.appStore.user.location_display_osm_id
+    }
+  },
   methods: {
     getLocationTitle(location) {
       if (location) {
@@ -42,6 +54,9 @@ export default {
     getLocationCategory(location) {
       return utils.getLocationCategory(location)
     },
+    getLocationOSMID(location) {
+      return utils.getLocationOSMID(location)
+    },
     goToLocation(location) {
       if (this.readonly) {
         return

src/components/LocationSelectorDialog.vue

@@ -45,7 +45,7 @@
             <v-col cols="12" sm="6">
               <v-card
                 v-for="location in results"
-                :key="getLocationUniqueID(location)"
+                :key="getLocationOSMID(location)"
                 class="mb-2"
                 width="100%"
                 elevation="1"
@@ -54,16 +54,19 @@
                 <v-card-text>
                   <h4>{{ getLocationTitle(location, true, false, false) }}</h4>
                   {{ getLocationTitle(location, false, true, true) }}<br>
-                  <v-chip label size="small" density="comfortable">
+                  <v-chip label size="small" density="comfortable" class="mr-1">
                     {{ getLocationCategory(location) }}
                   </v-chip>
+                  <v-chip v-if="showLocationOSMID" label size="small" density="comfortable">
+                    {{ getLocationOSMID(location) }}
+                  </v-chip>
                 </v-card-text>
               </v-card>
             </v-col>
             <v-col cols="12" sm="6" style="min-height:200px">
               <l-map ref="map" v-model:zoom="mapZoom" :center="mapCenter" :use-global-leaflet="false" @ready="initMap">
                 <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" layer-type="base" name="OpenStreetMap" />
-                <l-marker v-for="location in results" :key="getLocationUniqueID(location)" :lat-lng="getLocationLatLng(location)">
+                <l-marker v-for="location in results" :key="getLocationOSMID(location)" :lat-lng="getLocationLatLng(location)">
                   <l-popup>
                     <h4>{{ getLocationTitle(location, true, false, false) }}</h4>
                     {{ getLocationTitle(location, false, true, true) }}<br>
@@ -93,7 +96,7 @@
           </h3>
           <v-chip
             v-for="location in recentLocations"
-            :key="getLocationUniqueID(location)"
+            :key="getLocationOSMID(location)"
             class="mb-2"
             closable
             prepend-icon="mdi-history"
@@ -167,6 +170,9 @@ export default {
     recentLocations() {
       return this.appStore.getRecentLocations()
     },
+    showLocationOSMID() {
+      return this.appStore.user.username && this.appStore.user.location_display_osm_id
+    }
   },
   mounted() {
     this.$refs.locationInput.focus()
@@ -205,8 +211,8 @@ export default {
     getLocationTitle(location, withName=true, withRoad=false, withCity=true) {
       return utils.getLocationTitle(location, withName, withRoad, withCity)
     },
-    getLocationUniqueID(location) {
-      return utils.getLocationUniqueID(location)
+    getLocationOSMID(location) {
+      return utils.getLocationOSMID(location)
     },
     getLocationCategory(location) {
       return utils.getLocationCategory(location)

src/i18n/locales/en.json

@@ -110,7 +110,8 @@
 		"AddPrice": "Add a price",
 		"AddToOFF": "Add to {name}",
 		"Country": "Country",
-		"Language": "Languages",
+		"Language": "Language",
+		"Locations": "Locations",
 		"Date": "Date",
 		"Delete": "Delete",
 		"Edit": "Edit",
@@ -379,6 +380,7 @@
 		"FavoriteCurrencies": "Favorite currencies",
 		"CurrencyRequired": "At least one currency is required",
 		"LanguageLabel": "Languages",
+		"LocationDisplayOSMID": "Display OSM ID",
 		"ProductDisplayBarcode": "Display barcode",
 		"Save": "Save",
 		"Title": "Settings",

src/store.js

@@ -15,6 +15,7 @@ export const useAppStore = defineStore('app', {
       proofs: [],
       proofTotal: null,
       product_display_barcode: false,
+      location_display_osm_id: false,
     },
   }),
   getters: {

src/utils.js

@@ -187,7 +187,7 @@ function getLocationType(locationObject) {
   return locationObject.osm_type.toUpperCase()
 }
 
-function getLocationUniqueID(locationObject) {
+function getLocationOSMID(locationObject) {
   // examples: N12345
   return `${getLocationType(locationObject)[0]}${getLocationID(locationObject).toString()}`
 }
@@ -249,7 +249,7 @@ export default {
   getLocationTitle,
   getLocationID,
   getLocationType,
-  getLocationUniqueID,
+  getLocationOSMID,
   getLocationCategory,
   getLocationLatLng,
   getMapBounds,

src/views/AddPriceMultiple.vue

@@ -95,7 +95,7 @@
           </h3>
           <v-chip
             v-for="location in recentLocations"
-            :key="getLocationUniqueID(location)"
+            :key="getLocationOSMID(location)"
             class="mb-2"
             :style="isSelectedLocation(location) ? 'border: 1px solid #4CAF50' : 'border: 1px solid transparent'"
             @click="setLocationData(location)"
@@ -590,8 +590,8 @@ export default {
     getLocationTitle(location, withName=true, withRoad=false, withCity=true) {
       return utils.getLocationTitle(location, withName, withRoad, withCity)
     },
-    getLocationUniqueID(location) {
-      return utils.getLocationUniqueID(location)
+    getLocationOSMID(location) {
+      return utils.getLocationOSMID(location)
     },
     setLocationData(location) {
       this.appStore.addRecentLocation(location)

src/views/AddPriceSingle.vue

@@ -185,7 +185,7 @@
             </h3>
             <v-chip
               v-for="location in recentLocations"
-              :key="getLocationUniqueID(location)"
+              :key="getLocationOSMID(location)"
               class="mb-2"
               :style="isSelectedLocation(location) ? 'border: 1px solid #4CAF50' : 'border: 1px solid transparent'"
               @click="setLocationData(location)"
@@ -539,8 +539,8 @@ export default {
     getLocationTitle(location, withName=true, withRoad=false, withCity=true) {
       return utils.getLocationTitle(location, withName, withRoad, withCity)
     },
-    getLocationUniqueID(location) {
-      return utils.getLocationUniqueID(location)
+    getLocationOSMID(location) {
+      return utils.getLocationOSMID(location)
     },
     setLocationData(location) {
       this.appStore.addRecentLocation(location)

src/views/LocationList.vue

@@ -14,7 +14,7 @@
 
   <v-row class="mt-0">
     <v-col v-for="location in locationList" :key="location" cols="12" sm="6" md="4">
-      <LocationCard :location="location" height="100%" />
+      <LocationCard :location="location" :hideLocationOSMID="true" height="100%" />
     </v-col>
   </v-row>
 

src/views/UserSettings.vue

@@ -8,6 +8,7 @@
       <v-col cols="12" sm="6">
         <v-card :title="$t('UserSettings.Display')" prepend-icon="mdi-laptop">
           <v-divider />
+          <!-- Country -->
           <v-card-text>
             <h3 class="mb-1">
               {{ $t('Common.Country') }}
@@ -19,6 +20,7 @@
               item-title="native"
               item-value="code"
             />
+            <!-- Language -->
             <h3 class="mb-1">
               {{ $t('Common.Language') }}
             </h3>
@@ -42,16 +44,19 @@
                 <v-icon size="small" icon="mdi-open-in-new" />
               </a>
             </p>
+            <!-- Products -->
             <h3 class="mt-4 mb-1">
               {{ $t('Common.Products') }}
             </h3>
             <v-checkbox v-model="appStore.user.product_display_barcode" :label="$t('UserSettings.ProductDisplayBarcode')" hide-details="auto" />
+            <!-- Locations -->
+            <h3 class="mt-4 mb-1">
+              {{ $t('Common.Locations') }}
+            </h3>
+            <v-checkbox v-model="appStore.user.location_display_osm_id" :label="$t('UserSettings.LocationDisplayOSMID')" hide-details="auto" />
           </v-card-text>
         </v-card>
       </v-col>
-    </v-row>
-
-    <v-row>
       <v-col cols="12" sm="6">
         <v-card :title="$t('UserSettings.AddingPrices')" prepend-icon="mdi-tag-plus-outline">
           <v-divider />