Velopark: add first sync tool

src/UI/Comparison/ComparisonAction.svelte

@@ -0,0 +1,65 @@
+<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
+
+    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>
+  <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>
+</tr>