MapComplete/src/UI/Favourites/FavouriteSummary.svelte

<script lang="ts">

  import type { SpecialVisualizationState } from "../SpecialVisualization";
  import TagRenderingAnswer from "../Popup/TagRendering/TagRenderingAnswer.svelte";
  import type { Feature } from "geojson";
  import { ImmutableStore } from "../../Logic/UIEventSource";
  import { GeoOperations } from "../../Logic/GeoOperations";
  import Center from "../../assets/svg/Center.svelte";

  export let feature: Feature;
  let properties: Record<string, string> = feature.properties;
  export let state: SpecialVisualizationState;
  let tags = state.featureProperties.getStore(properties.id) ?? new ImmutableStore(properties);

  const favLayer = state.layerState.filteredLayers.get("favourite");
  const favConfig = favLayer?.layerDef;
  const titleConfig = favConfig?.title;

  function center() {
    const [lon, lat] = GeoOperations.centerpointCoordinates(feature);
    state.mapProperties.location.setData(
      { lon, lat }
    );
    const z = state.mapProperties.zoom.data
    state.mapProperties.zoom.setData( Math.min(17, Math.max(12, z )) )
    state.guistate.menuIsOpened.setData(false);
  }

  function select() {
    state.selectedLayer.setData(favConfig);
    state.selectedElement.setData(feature);
    center();
  }

  const coord = GeoOperations.centerpointCoordinates(feature);
  const distance = state.mapProperties.location.stabilized(500).mapD(({ lon, lat }) => {
    let meters = Math.round(GeoOperations.distanceBetween(coord, [lon, lat]));

    if (meters < 1000) {
      return meters + "m";
    }

    meters = Math.round(meters / 100);
    const kmStr = "" + meters;


    return kmStr.substring(0, kmStr.length - 1) + "." + kmStr.substring(kmStr.length - 1) + "km";
  });
  const titleIconBlacklist = ["osmlink", "sharelink", "favourite_title_icon"];

</script>

{#if favLayer !== undefined}
<div class="px-1 my-1 border-2 border-dashed border-gray-300 rounded grid grid-cols-2 items-center no-weblate">
  <button class="cursor-pointer ml-1 m-0 link justify-self-start" on:click={() => select()}>
    <TagRenderingAnswer config={titleConfig} extraClasses="underline" layer={favConfig} selectedElement={feature}
                        {tags} />
  </button>


  <div class="flex items-center justify-self-end title-icons links-as-button gap-x-0.5 p-1 pt-0.5 sm:pt-1">
    {#each favConfig.titleIcons as titleIconConfig}
      {#if (titleIconBlacklist.indexOf(titleIconConfig.id) < 0) && (titleIconConfig.condition?.matchesProperties(properties) ?? true) && (titleIconConfig.metacondition?.matchesProperties({ ...properties, ...state.userRelatedState.preferencesAsTags.data }) ?? true) && titleIconConfig.IsKnown(properties)}
        <div class={titleIconConfig.renderIconClass ?? "flex h-8 w-8 items-center"}>
          <TagRenderingAnswer
            config={titleIconConfig}
            {tags}
            selectedElement={feature}
            {state}
            layer={favLayer}
            extraClasses="h-full justify-center"
          />
        </div>
      {/if}
    {/each}

    <button class="p-1" on:click={() => center()}>
      <Center class="w-6 h-6" />
    </button>
    <div class="w-14">
      {$distance}
    </div>
  </div>
</div>
{/if}