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, UIEventSource } 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 UIEventSource<Record<string, string>>(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.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]))
    return GeoOperations.distanceToHuman(meters)
  })
  const titleIconBlacklist = ["osmlink", "sharelink", "favourite_title_icon"]
</script>

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

    <div
      class="title-icons links-as-button flex flex-wrap items-center gap-x-0.5 self-end justify-self-end 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.layerDef}
              extraClasses="h-full justify-center"
            />
          </div>
        {/if}
      {/each}

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