Osmwithspace/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Merge master

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-07-19 11:37:20 +02:00
parent 768e709312
commit c20013c5f5
8 changed files with 274 additions and 207 deletions
Download patch file Download diff file Expand all files Collapse all files

70
src/UI/Image/NearbyImages.svelte
View file

@ -3,10 +3,9 @@
* Show nearby images which can be clicked
*/
import type { OsmTags } from "../../Models/OsmFeature"
import { Store, UIEventSource } from "../../Logic/UIEventSource"
import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
import type { SpecialVisualizationState } from "../SpecialVisualization"
import type { P4CPicture } from "../../Logic/Web/NearbyImagesSearch"
import NearbyImagesSearch from "../../Logic/Web/NearbyImagesSearch"
import LinkableImage from "./LinkableImage.svelte"
import type { Feature } from "geojson"
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
@ -14,7 +13,7 @@
import AllImageProviders from "../../Logic/ImageProviders/AllImageProviders"
import Tr from "../Base/Tr.svelte"
import Translations from "../i18n/Translations"
import LoginToggle from "../Base/LoginToggle.svelte"
import MapillaryLink from "../BigComponents/MapillaryLink.svelte"
export let tags: UIEventSource<OsmTags>
export let state: SpecialVisualizationState
@ -25,36 +24,49 @@
export let linkable: boolean = true
export let layer: LayerConfig
let imagesProvider = new NearbyImagesSearch(
{
lon,
lat,
allowSpherical: new UIEventSource<boolean>(false),
blacklist: AllImageProviders.LoadImagesFor(tags),
},
state.indexedFeatures
)
let imagesProvider = state.nearbyImageSearcher
let loadedImages = AllImageProviders.LoadImagesFor(tags).mapD(loaded => new Set(loaded.map(img => img.url)))
let imageState = imagesProvider.getImagesAround(lon, lat)
let result: Store<P4CPicture[]> = imageState.images.mapD((pics: P4CPicture[]) => pics.filter((p: P4CPicture) =>
!loadedImages.data.has(p.pictureUrl) // We don't show any image which is already linked
&& !p.details.isSpherical,
).slice(0, 25), [loadedImages])
let someLoading = imageState.state.mapD(stateRecord => Object.values(stateRecord).some(v => v === "loading"))
let errors = imageState.state.mapD(stateRecord => Object.keys(stateRecord).filter(k => stateRecord[k] === "error"))
let images: Store<P4CPicture[]> = imagesProvider.store.map((images) => images.slice(0, 20))
let allDone = imagesProvider.allDone
</script>
<div class="flex justify-between">
<h4>
<Tr t={Translations.t.image.nearby.title} />
</h4>
<slot name="corner" />
</div>
{#if !$allDone}
<Loading />
{:else if $images.length === 0}
<Tr t={Translations.t.image.nearby.noNearbyImages} cls="alert" />
{:else}
<div class="flex w-full space-x-1 overflow-x-auto" style="scroll-snap-type: x proximity">
{#each $images as image (image.pictureUrl)}
<div class="flex flex-col">
{#if $result.length === 0}
{#if $someLoading}
<div class="flex justify-center m-4">
<Loading />
</div>
{:else }
<Tr t={Translations.t.image.nearby.noNearbyImages} cls="alert" />
{/if}
{:else}
<div class="flex w-full space-x-1 overflow-x-auto" style="scroll-snap-type: x proximity">
{#each $result as image (image.pictureUrl)}
<span class="w-fit shrink-0" style="scroll-snap-align: start">
<LinkableImage {tags} {image} {state} {feature} {layer} {linkable} />
</span>
{/each}
{/each}
</div>
{/if}
<div class="flex justify-between my-2">
<div>
{#if $someLoading && $result.length > 0}
<Loading />
{/if}
{#if $errors.length > 0}
<Tr cls="alert font-sm block" t={Translations.t.image.nearby.failed.Subs({service: $errors.join(", ")}) } />
{/if}
</div>
<MapillaryLink large={false}
mapProperties={{zoom: new ImmutableStore(16), location: new ImmutableStore({lon, lat})}} />
</div>
{/if}
</div>