src/components/DetailsLink.svelte

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