src/components/DetailsLink.svelte

   1 <script>
   2   import { appState } from '../state/AppState.svelte.js';
   3
   4   let { text = 'details', extra_classes = '', feature = null } = $props();
   5
   6   function formatShortOSMType(sType) {
   7     if (sType === 'node') return 'N';
   8     if (sType === 'way') return 'W';
   9     if (sType === 'relation') return 'R';
  10     return '';
  11   }
  12
  13   const url_params = $derived.by(() => {
  14     const new_params = {};
  15
  16     if (feature !== null) {
  17       if (feature.osm_type) {
  18         if (feature.osm_type.length === 1) {
  19           new_params.osmtype = feature.osm_type;
  20         } else {
  21           new_params.osmtype = formatShortOSMType(feature.osm_type);
  22         }
  23
  24         new_params.osmid = feature.osm_id;
  25
  26         if (feature.class) {
  27           new_params.class = feature.class;
  28         } else if (feature.category) {
  29           new_params.class = feature.category;
  30         }
  31       } else if (feature.place_id) {
  32         new_params.place_id = feature.place_id;
  33       }
  34     }
  35     return new URLSearchParams(new_params);
  36   });
  37
  38   const href = $derived.by(() => {
  39     const param_str = url_params.toString();
  40     return 'details.html' + (param_str ? '?' : '') + param_str;
  41   });
  42
  43   function handleClick(e) {
  44     e.preventDefault();
  45     e.stopPropagation();
  46     appState.refreshPage('details', url_params);
  47   }
  48 </script>
  49
  50 <a onclick={handleClick} href={href} class={extra_classes}>{text}</a>