MapComplete/src/UI/Comparison/ComparisonAction.svelte

<script lang="ts">
    import { UIEventSource } from "../../Logic/UIEventSource"
    import type { OsmTags } from "../../Models/OsmFeature"
    import type { SpecialVisualizationState } from "../SpecialVisualization"
    import type { Feature } from "geojson"
    import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
    import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction"
    import { Tag } from "../../Logic/Tags/Tag"
    import Loading from "../Base/Loading.svelte"

    export let key: string
    export let externalProperties: Record<string, string>

    export let tags: UIEventSource<OsmTags>
    export let state: SpecialVisualizationState
    export let feature: Feature
    export let layer: LayerConfig

    export let readonly = false

    let currentStep: "init" | "applying" | "done" = "init"

    /**
     * Copy the given key into OSM
     * @param key
     */
    async function apply(key: string) {
        currentStep = "applying"
        const change = new ChangeTagAction(
            tags.data.id,
            new Tag(key, externalProperties[key]),
            tags.data,
            {
                theme: state.layout.id,
                changeType: "import",
            })
        await state.changes.applyChanges(await change.CreateChangeDescriptions())
        currentStep = "done"
    }
</script>

<tr>
  <td><b>{key}</b></td>

  <td>
    {#if externalProperties[key].startsWith("http")}
      <a href={externalProperties[key]} target="_blank">
        {externalProperties[key]}
      </a>
    {:else}
      {externalProperties[key]}
    {/if}
  </td>
  {#if !readonly}
    <td>
      {#if currentStep === "init"}
        <button class="small" on:click={() => apply(key)}>
          Apply
        </button>
      {:else if currentStep === "applying"}
        <Loading />
      {:else if currentStep === "done"}
        <div class="thanks">Done</div>
      {:else }
        <div class="alert">Error</div>
      {/if}
    </td>
  {/if}
</tr>