Place card shows website and phone number when available

services/frontend/www-app/src/components/PlaceCard.vue

@@ -3,13 +3,25 @@
     <div class="text-subtitle1">
       {{ primaryName() }}
     </div>
-    <div class="text" v-if="secondaryName()">
-      {{ secondaryName() }}
-    </div>
   </q-card-section>
   <q-card-section>
     <travel-mode-bar :to-place="place" />
   </q-card-section>
+  <q-card-section>
+    <place-field
+      v-if="secondaryName()"
+      :copy-text="secondaryName()!"
+      icon="location_on"
+    >
+      {{ secondaryName() }}
+    </place-field>
+    <place-field v-if="website()" :copy-text="website()!" icon="public">
+      <a :href="website()">{{ website() }}</a>
+    </place-field>
+    <place-field v-if="phone()" :copy-text="phone()!" icon="phone">
+      <a :href="'tel:' + phone()">{{ phone() }}</a>
+    </place-field>
+  </q-card-section>
 </template>
 
 <script lang="ts">
@@ -18,6 +30,7 @@ import Place from 'src/models/Place';
 import { formatLngLatAsLatLng } from 'src/utils/format';
 import { defineComponent } from 'vue';
 import TravelModeBar from './TravelModeBar.vue';
+import PlaceField from './PlaceField.vue';
 
 export default defineComponent({
   name: 'PlaceCard',
@@ -39,13 +52,20 @@ export default defineComponent({
       return i18n.global.t('dropped_pin');
     },
     secondaryName(): string | undefined {
+      // TODO: use pelias label?
       if (this.place.name && this.place.address) {
         return this.place.address;
       } else {
         return formatLngLatAsLatLng(this.place.point);
       }
     },
+    website(): string | undefined {
+      return this.place.website;
+    },
+    phone(): string | undefined {
+      return this.place.phone;
+    },
   },
-  components: { TravelModeBar },
+  components: { TravelModeBar, PlaceField },
 });
 </script>

services/frontend/www-app/src/components/PlaceField.vue

@@ -0,0 +1,39 @@
+<template>
+  <q-item class="row items-center" style="padding: 0">
+    <q-icon class="col-1" size="sm" :name="icon" />
+    <q-item-label class="col-" style="padding-left: 8px; padding-right: 8px">
+      <slot />
+    </q-item-label>
+    <q-btn
+      class="col-1"
+      icon="content_copy"
+      unelevated
+      :ripple="false"
+      size="sm"
+      @click="copyToClipboard(copyText)"
+    />
+  </q-item>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'PlaceField',
+  props: {
+    icon: {
+      type: String,
+      required: true,
+    },
+    copyText: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    copyToClipboard(text: string): void {
+      navigator.clipboard.writeText(text);
+    },
+  },
+});
+</script>

services/frontend/www-app/src/models/Place.ts

@@ -120,6 +120,14 @@ export class PlaceStorage {
   }
 }
 
+type PlaceProperties = {
+  countryCode?: string;
+  name?: string;
+  address?: string;
+  phone?: string;
+  website?: string;
+};
+
 /// Wrapper around a pelias response
 export default class Place {
   id: PlaceId;
@@ -128,21 +136,23 @@ export default class Place {
   countryCode?: string;
   public address?: string | null;
   name?: string;
+  public phone?: string;
+  public website?: string;
 
   constructor(
     id: PlaceId,
     point: LngLat,
     bbox?: LngLatBounds,
-    countryCode?: string,
-    name?: string,
-    address?: string
+    props: PlaceProperties = {}
   ) {
     this.id = id;
     this.point = point;
     this.bbox = bbox;
-    this.countryCode = countryCode;
-    this.name = name;
-    this.address = address;
+    this.countryCode = props.countryCode;
+    this.name = props.name;
+    this.address = props.address;
+    this.phone = props.phone;
+    this.website = props.website;
   }
 
   static fromFeature(id: PlaceId, feature: GeoJSON.Feature): Place {
@@ -197,17 +207,28 @@ export default class Place {
     const name = feature.properties?.name;
     console.assert(name, 'no name found for feature', feature);
 
-    const place = new Place(id, location, bbox, countryCode, name, address);
+    // "addendum": {
+    //   "osm": {
+    //       "website": "https://www.adasbooks.com",
+    //       "phone": "+1 206 322 1058",
+    //       "opening_hours": "Su-Th 08:00-21:00; Fr-Sa 08:00-22:00"
+    //   }
+    // }
+    const website = feature.properties?.addendum?.osm?.website;
+    const phone = feature.properties?.addendum?.osm?.phone;
+
+    const place = new Place(id, location, bbox, {
+      countryCode,
+      name,
+      address,
+      website,
+      phone,
+    });
     return place;
   }
 
   static bareLocation(location: LngLat) {
-    return new Place(
-      PlaceId.location(location),
-      location,
-      undefined,
-      undefined
-    );
+    return new Place(PlaceId.location(location), location);
   }
 
   public serializedId(): string {