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