Add module to fetch data (via a proxy) from the website with jsonld

src/UI/Comparison/ComparisonTool.svelte

@@ -1,65 +1,34 @@
 <script lang="ts">
-  /**
-   * The comparison tool loads json-data from a speficied URL, eventually post-processes it
-   * and compares it with the current object
-   */
-  import { onMount } from "svelte"
-  import { Utils } from "../../Utils"
-  import VeloparkLoader from "../../Logic/Web/VeloparkLoader"
-  import Loading from "../Base/Loading.svelte"
-  import type { SpecialVisualizationState } from "../SpecialVisualization"
-  import { UIEventSource } from "../../Logic/UIEventSource"
-  import ComparisonTable from "./ComparisonTable.svelte"
-  import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
-  import type { Feature } from "geojson"
-  import type { OsmTags } from "../../Models/OsmFeature"
+    /**
+     * The comparison tool loads json-data from a speficied URL, eventually post-processes it
+     * and compares it with the current object
+     */
+    import Loading from "../Base/Loading.svelte"
+    import type { SpecialVisualizationState } from "../SpecialVisualization"
+    import { Store, UIEventSource } from "../../Logic/UIEventSource"
+    import ComparisonTable from "./ComparisonTable.svelte"
+    import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
+    import type { Feature } from "geojson"
+    import type { OsmTags } from "../../Models/OsmFeature"
 
-  export let url: string
-  export let postprocessVelopark: boolean
-  export let state: SpecialVisualizationState
-  export let tags: UIEventSource<OsmTags>
-  export let layer: LayerConfig
-  export let feature: Feature
-  export let readonly = false
-  let data: any = undefined
-  let error: any = undefined
-
-  onMount(async () => {
-    const _url = tags.data[url]
-    if (!_url) {
-      error = "No URL found in attribute" + url
-    }
-    try {
-      console.log("Attempting to download", _url)
-      const downloaded = await Utils.downloadJsonAdvanced(_url)
-      if (downloaded["error"]) {
-        console.error(downloaded)
-        error = downloaded["error"]
-        return
-      }
-      if (postprocessVelopark) {
-        data = VeloparkLoader.convert(downloaded["content"])
-        return
-      }
-      data = downloaded["content"]
-    } catch (e) {
-      console.error(e)
-      error = "" + e
-    }
-  })
+    export let externalData: Store<{ success: {content: Record<string, string> } } | { error: string } | undefined | null /* null if no URL is found, undefined if loading*/>
+    export let state: SpecialVisualizationState
+    export let tags: UIEventSource<OsmTags>
+    export let layer: LayerConfig
+    export let feature: Feature
+    export let readonly = false
 </script>
-
-{#if error !== undefined}
+{#if $externalData === null}
+  <!-- empty block -->
+{:else if $externalData === undefined}
+  <Loading>{$externalData}</Loading>
+{:else if $externalData["error"] !== undefined}
   <div class="alert">
-    Something went wrong: {error}
+    Something went wrong: {$externalData["error"]}
   </div>
-{:else if data === undefined}
-  <Loading>
-    Loading {$tags[url]}
-  </Loading>
-{:else if data.properties !== undefined}
+{:else if $externalData["success"] !== undefined}
   <ComparisonTable
-    externalProperties={data.properties}
+    externalProperties={$externalData["success"]}
     osmProperties={$tags}
     {state}
     {feature}