src/components/DetailsOneRow.svelte

   1 <script>
   2   import DetailsLink from '../components/DetailsLink.svelte';
   3   import PageLink from '../components/PageLink.svelte';
   4   import OsmLink from '../components/OsmLink.svelte';
   5   import {
   6     formatPlaceType, formatAdminLevel, formatDistance
   7   } from '../lib/helpers.js';
   8
   9   let {
  10     addressLine,
  11     bDistanceInMeters,
  12     bMarkUnusedLines = false,
  13     sCountryCode
  14   } = $props();
  15
  16   const bAddressLineUsed = $derived(addressLine.isaddress);
  17   const reverse_only = $derived(Nominatim_Config.Reverse_Only);
  18 </script>
  19
  20 <tr class:notused={bMarkUnusedLines && !bAddressLineUsed}>
  21   <td class="name fw-bold">
  22     {#if addressLine.localname}
  23       {addressLine.localname}
  24     {:else}
  25       <span class="noname">No Name</span>
  26     {/if}
  27   </td>
  28   <td>{formatPlaceType(addressLine)}</td>
  29   <td><OsmLink osmType={addressLine.osm_type} osmId={addressLine.osm_id} /></td>
  30   <td>{addressLine.rank_address}</td>
  31   <td>{formatAdminLevel(addressLine.admin_level)}</td>
  32   <!-- eslint-disable-next-line svelte/no-at-html-tags -->
  33   <td>{@html formatDistance(addressLine.distance, bDistanceInMeters)}</td>
  34   <td>
  35     {#if addressLine.osm_id}
  36       <DetailsLink feature={addressLine} />
  37     {:else if !reverse_only && addressLine.type.match(/^country/)}
  38       <PageLink page='search'
  39                 text='search by name'
  40                 params_hash={{ country: addressLine.localname }} />
  41     {:else if !reverse_only && addressLine.type === 'postcode'}
  42       <PageLink page='search'
  43                 text='search by name'
  44                 params_hash={{ postalcode: addressLine.localname, country: sCountryCode }} />
  45     {/if}
  46   </td>
  47 </tr>
  48
  49 <style>
  50   .notused td {
  51     color: var(--bs-secondary-color);
  52     font-style: italic;
  53   }
  54
  55   td {
  56     padding: 2px 8px;
  57     font-size: 0.9em;
  58   }
  59 </style>