src/components/DetailsOneRow.svelte

   1 <script>
   2   import DetailsLink from '../components/DetailsLink.svelte';
   3   import PageLink from '../components/PageLink.svelte';
   4   import {
   5     formatPlaceType, osmLink, formatAdminLevel, formatDistance
   6   } from '../lib/helpers.js';
   7
   8   export let addressLine;
   9   export let bDistanceInMeters;
  10
  11   $: bAddressLineUsed = addressLine.isaddress;
  12
  13 </script>
  14
  15 <tr class:notused={!bAddressLineUsed}>
  16   <td class="name font-weight-bold">
  17     {#if addressLine.localname}
  18       {addressLine.localname}
  19     {:else}
  20       <span class="noname">No Name</span>
  21     {/if}
  22   </td>
  23   <td>{formatPlaceType(addressLine)}</td>
  24   <td>{@html osmLink(addressLine)}</td>
  25   <td>{addressLine.rank_address}</td>
  26   <td>{formatAdminLevel(addressLine.admin_level)}</td>
  27   <td>{@html formatDistance(addressLine.distance, bDistanceInMeters)}</td>
  28   <td>
  29     {#if addressLine.osm_id}
  30       <DetailsLink feature={addressLine}>details</DetailsLink>
  31     {:else if addressLine.type.match(/^country/)}
  32       <PageLink page='search', params_hash={{ country: addressLine.localname }}>search by name</PageLink>
  33     {:else if addressLine.type === 'postcode'}
  34       <PageLink page='search', params_hash={{ postalcode: addressLine.localname }}>search by name</PageLink>
  35     {/if}
  36   </td>
  37 </tr>
  38
  39 <style>
  40   .notused {
  41     color:#ddd;
  42   }
  43   .noname{
  44     color:#800;
  45   }
  46
  47   td {
  48     padding: 2px 8px;
  49     font-size: 0.9em;
  50   }
  51 </style>