Fix: allow to link multiple mapillary-images

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mapcomplete",
-  "version": "0.36.12",
+  "version": "0.36.13",
   "repository": "https://github.com/pietervdvn/MapComplete",
   "description": "A small website to edit OSM easily",
   "bugs": "https://github.com/pietervdvn/MapComplete/issues",

src/Logic/ImageProviders/Mapillary.ts

@@ -155,7 +155,6 @@ export class Mapillary extends ImageProvider {
             Constants.mapillary_client_token_v4
         const response = await Utils.downloadJsonCached(metadataUrl, 60 * 60)
         const url = <string>response["thumb_1024_url"]
-        console.log(response)
         const url_hd = <string>response["thumb_original_url"]
         return {
             id: "" + mapillaryId,

src/Logic/Osm/Actions/LinkImageAction.ts

@@ -1,7 +1,6 @@
 import ChangeTagAction from "./ChangeTagAction"
 import { Tag } from "../../Tags/Tag"
 import OsmChangeAction from "./OsmChangeAction"
-import { Changes } from "../Changes"
 import { ChangeDescription } from "./ChangeDescription"
 import { Store } from "../../UIEventSource"
 
@@ -40,7 +39,7 @@ export default class LinkImageAction extends OsmChangeAction {
     protected CreateChangeDescriptions(): Promise<ChangeDescription[]> {
         let key = this._proposedKey
         let i = 0
-        const currentTags = this._currentTags.data
+        const currentTags: Record<string, string> = this._currentTags.data
         const url = this._url
         while (currentTags[key] !== undefined && currentTags[key] !== url) {
             key = this._proposedKey + ":" + i

src/Logic/Osm/Changes.ts

@@ -539,7 +539,7 @@ export class Changes {
             openChangeset
         )
 
-        console.log("Upload successfull!")
+        console.log("Upload successful!")
         return true
     }
 

src/UI/Image/LinkableImage.svelte

@@ -15,18 +15,15 @@
   import SpecialTranslation from "../Popup/TagRendering/SpecialTranslation.svelte"
 
   export let tags: UIEventSource<OsmTags>
-  export let lon: number
-  export let lat: number
   export let state: SpecialVisualizationState
   export let image: P4CPicture
   export let feature: Feature
   export let layer: LayerConfig
 
   export let linkable = true
-  let isLinked = Object.values(tags.data).some((v) => image.pictureUrl === v)
-
+  let targetValue = Object.values(image.osmTags)[0]
+  let isLinked = new UIEventSource(Object.values(tags.data).some((v) => targetValue === v))
   const t = Translations.t.image.nearby
-  const c = [lon, lat]
   const providedImage: ProvidedImage = {
     url: image.thumbUrl ?? image.pictureUrl,
     url_hd: image.pictureUrl,
@@ -36,10 +33,11 @@
     id: Object.values(image.osmTags)[0],
   }
 
-  $: {
+  function applyLink(isLinked :boolean) {
+    console.log("Applying linked image", isLinked, targetValue)
     const currentTags = tags.data
     const key = Object.keys(image.osmTags)[0]
-    const url = image.osmTags[key]
+    const url = targetValue
     if (isLinked) {
       const action = new LinkImageAction(currentTags.id, key, url, tags, {
         theme: tags.data._orig_theme ?? state.layout.id,
@@ -59,6 +57,7 @@
       }
     }
   }
+  isLinked.addCallback(isLinked => applyLink(isLinked))
 </script>
 
 <div class="flex w-fit shrink-0 flex-col">
@@ -71,7 +70,7 @@
   </div>
   {#if linkable}
     <label>
-      <input bind:checked={isLinked} type="checkbox" />
+      <input bind:checked={$isLinked} type="checkbox" />
       <SpecialTranslation t={t.link} {tags} {state} {layer} {feature} />
     </label>
   {/if}

src/UI/Image/NearbyImages.svelte

@@ -55,7 +55,7 @@
       <div class="flex w-full space-x-1 overflow-x-auto" style="scroll-snap-type: x proximity">
         {#each $images as image (image.pictureUrl)}
           <span class="w-fit shrink-0" style="scroll-snap-align: start">
-            <LinkableImage {tags} {image} {state} {lon} {lat} {feature} {layer} {linkable} />
+            <LinkableImage {tags} {image} {state} {feature} {layer} {linkable} />
           </span>
         {/each}
       </div>